/* =============================================================================
   Rendall & Wright – custom block styles
   ============================================================================= */

/* ---- Image Fader ------------------------------------------------------------ */
.rw-fader { position: relative; --rw-fade-speed: 1200ms; }
.rw-fader__stage { position: relative; overflow: hidden; background: var(--rw-light); }
.rw-fader__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--rw-fade-speed) ease; }
.rw-fader__slide.is-active { opacity: 1; z-index: 1; }
.rw-fader__slide img, .rw-fader__slide .rw-placeholder { width: 100%; height: 100%; object-fit: cover; }
.rw-fader__toggle { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.85); color: var(--rw-text); display: grid; place-items: center; transition: background var(--rw-ease), color var(--rw-ease); }
.rw-fader__toggle:hover { background: var(--rw-accent); color: #fff; }
.rw-fader__toggle svg { width: 20px; height: 20px; }
.rw-fader__icon { display: none; }
.rw-fader.is-playing .rw-fader__icon--pause { display: block; }
.rw-fader:not(.is-playing) .rw-fader__icon--play { display: block; }
.rw-hero__fader .rw-fader__toggle { right: 1.25rem; bottom: 1.25rem; }

/* ---- Portfolio Slider ------------------------------------------------------- */
.rw-portfolio { overflow: hidden; }
.rw-portfolio:not(.has-background) { background: var(--rw-mid); }
.rw-portfolio:not([style*="padding"]) { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.rw-portfolio__inner { display: grid; grid-template-columns: minmax(220px, 27%) minmax(0, 1fr); gap: 3rem; align-items: center; }
.rw-portfolio__heading { font-size: var(--wp--preset--font-size--x-large); margin-bottom: 0.5rem; }
.rw-portfolio__text .wp-block-button__link { margin-top: 1.25rem; } /* space above the button, with or without an intro */
/* Title / intro / button sit as one left-aligned group, and that group is centred in the text column */
@media (min-width: 901px) {
	.rw-portfolio__text { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; justify-items: start; align-content: center; row-gap: 1rem; }
	.rw-portfolio__text .wp-block-button__link { margin-top: 0; } /* spacing comes from row-gap – a margin on a grid item here stretches the button (Chrome) */
	.rw-portfolio__heading { margin-bottom: 0; }
}
.rw-portfolio__text p { font-size: 1rem; } /* intro at body size */
/* The slider overflows the right edge of the viewport */
/* Pull the slider's right edge out to the viewport edge: half the space outside the content column, plus the gutter */
.rw-portfolio__slider { position: relative; margin-right: calc(min(0px, (var(--rw-content) - 100vw) / 2) - var(--rw-gutter)); }
.rw-portfolio__slider .splide__track { overflow: visible; }
/* Loop clones would show over the text column – clip the left edge only, let the right run off-screen */
.rw-portfolio__slider { clip-path: inset(-1rem -100vw -1rem 0); }
.rw-portfolio.is-style-edge .rw-portfolio__slider { margin-right: 0; } /* already at the edge */
.rw-portfolio__slider .splide__slide { width: clamp(260px, 19.5vw, 500px); } /* design: 500px cards at 2560 */
.rw-portfolio__slider .rw-card__media { aspect-ratio: 9 / 7; }
.rw-slider-controls { margin-top: 0.75rem; }
.rw-slider-controls .splide__arrows { display: flex; align-items: center; gap: 0.5rem; }
.rw-slider-controls .splide__arrow { position: static; transform: none; width: 32px; height: 32px; }
.rw-slider-controls .splide__arrow svg { width: 18px; height: 18px; }
.rw-slider-controls .splide__pagination { position: static; gap: 6px; }
/* Splide wraps each dot in an inline-block <li>; make them flex so the 2px bars sit on the arrows' centre line */
.rw-slider-controls .splide__pagination li { display: flex; align-items: center; line-height: 0; }
/* 4px bar drawn in the content box; the vertical padding is an invisible extra hit area (20px tall) */
.rw-slider-controls .splide__pagination__page { display: block; width: 14px; height: 20px; padding: 8px 0; box-sizing: border-box; background-clip: content-box; margin: 0; background-color: #fff; }
.rw-slider-controls .splide__pagination__page.is-active { background-color: var(--rw-primary); }
@media (max-width: 900px) {
	.rw-portfolio__inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } /* minmax(0,…): a bare 1fr grows to the slider's intrinsic width (thousands of px) and the intro stops wrapping */
	.rw-portfolio__text, .rw-portfolio__slider { min-width: 0; }
	.rw-portfolio__slider .splide__slide { width: min(70vw, 300px); }
}

/* ---- Logo Slider ------------------------------------------------------------- */
.rw-logos .rw-section-title { margin-bottom: var(--wp--preset--spacing--40); } /* the global "no space under headings" rule otherwise wins */
.rw-logos__slider { position: relative; padding: 0 3.5rem; }
.rw-logos__slider .splide__arrow { position: absolute; top: 50%; transform: translateY(-50%); color: var(--rw-mid); }
.rw-logos__slider .splide__arrow:hover { color: var(--rw-accent); }
.rw-logos__slider .splide__arrow--prev { left: 0; }
.rw-logos__slider .splide__arrow--next { right: 0; }
.rw-logos__item { display: grid; place-items: center; min-height: 100px; }
.rw-logos__item img, .rw-logos__item .rw-placeholder { max-height: 110px; width: auto; max-width: 100%; object-fit: contain; }
.rw-logos__item .rw-placeholder { width: 100px; }
.rw-logos__item a { display: grid; place-items: center; transition: opacity var(--rw-ease); }
.rw-logos__item a:hover { opacity: 0.75; }
@media (max-width: 600px) { .rw-logos__slider { padding: 0 2.25rem; } .rw-logos__item img { max-height: 80px; } }

/* ---- Testimonial Slider ------------------------------------------------------- */
.rw-testimonials__slider { position: relative; padding: 0 3.5rem; }
.rw-testimonials__slider .splide__arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.rw-testimonials__slider .splide__arrow--prev { left: 0; }
.rw-testimonials__slider .splide__arrow--next { right: 0; }
.rw-testimonials .rw-quote { max-width: 1100px; margin: 0 auto; }
.rw-testimonials .rw-quote p { font-size: 1.3rem; line-height: 1.45; }
.rw-testimonials .rw-quote cite { font-size: 1rem; }
@media (max-width: 767px) { .rw-testimonials .rw-quote p { font-size: 1.15rem; } }
.rw-testimonials:not([style*="padding"]) { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
/* ---- Single Quote (static, large quote mark) ------------------------------- */
/* The mark is sized from the block's own width (container units) so it matches the design at any column width:
   in the design it spans ~60% of the quote's width and the text starts inside its lower half. */
.rw-quote-block { container-type: inline-size; --rw-qm: min(112cqw, 50rem); } /* --rw-qm: size of the decorative mark */
.rw-quote-block .rw-quote--mark { position: relative; text-align: center; padding-top: 4cqw; max-width: 60ch; margin: 0 auto; }
/* Design: the mark's top sits just above the first line and it runs down behind the whole quote, ~50% of its width.
   Sized in container units so it tracks the block width, but capped so a full-width band on a big screen doesn't
   produce a 2000px glyph. */
.rw-quote-block .rw-quote__mark { position: absolute; top: calc(var(--rw-qm) * -0.2); /* the glyph ink starts ~0.16em down its box; this puts the ink top just above the first line */ left: -3%; font-family: var(--rw-serif); font-size: var(--rw-qm); line-height: 1; color: var(--rw-mid); opacity: 0.45; pointer-events: none; user-select: none; z-index: 0; }
.rw-quote-block .rw-quote p { position: relative; z-index: 1; font-size: 2rem; /* 32px */ line-height: 1.35; }
.rw-quote-block .rw-quote cite { font-size: 1.25rem; /* 20px */ }
@media (max-width: 767px) { .rw-quote-block .rw-quote p { font-size: 1.75rem; } }
.rw-quote-block .rw-quote cite { position: relative; z-index: 1; color: var(--rw-text); text-align: center; } /* main.css left-aligns cite for the project-page quote */
@supports not (font-size: 1cqw) {
	.rw-quote-block .rw-quote__mark { font-size: 22rem; top: -5rem; }
}
@media (max-width: 600px) { .rw-testimonials__slider { padding: 0 2.25rem; } }

/* ---- Project Gallery ------------------------------------------------------- */
.rw-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rw-gallery--lead .rw-gallery__item:first-child { grid-column: 1 / -1; }
.rw-gallery__item { position: relative; overflow: hidden; background: var(--rw-light); }
.rw-gallery__item[hidden] { display: none; }
.rw-gallery__link { display: block; height: 100%; }
.rw-gallery__item img, .rw-gallery__item .rw-placeholder { width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.6s ease; }
.rw-gallery--lead .rw-gallery__item:first-child img, .rw-gallery--lead .rw-gallery__item:first-child .rw-placeholder { aspect-ratio: 16 / 10; }
.rw-gallery__link:hover img { transform: scale(1.03); }
.rw-gallery__video { width: 100%; } /* Vimeo tile: aspect ratio comes inline from Vimeo, player replaces the still on click */
.rw-gallery__video img { transition: none; }
.rw-gallery__more { text-align: center; margin: 1.25rem 0 0; }
@media (max-width: 700px) { .rw-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }

/* ---- Scroll Capture ----------------------------------------------------------- */
.rw-scroll { --rw-panels: 5; --rw-scroll-glow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.75); /* dark glow behind title + text */ --rw-step: 70vh; /* scroll distance per panel change – smaller = snappier (55 felt too quick on slower scroll wheels) */ height: calc(100vh + (var(--rw-panels) - 1) * var(--rw-step)); height: calc(100svh + (var(--rw-panels) - 1) * var(--rw-step)); margin: 0; }
.rw-scroll.alignfull > .rw-scroll__stage { max-width: none; padding: 0; }
.rw-scroll__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #222; color: #fff; }
.rw-scroll.is-editor { height: auto; }
.rw-scroll.is-editor .rw-scroll__stage { position: relative; height: 70vh; }
.rw-scroll__backgrounds, .rw-scroll__bg { position: absolute; inset: 0; }
.rw-scroll__bg { opacity: 0; transition: opacity 1s ease; }
.rw-scroll__bg.is-active { opacity: 1; }
.rw-scroll__bg img, .rw-scroll__bg .rw-placeholder { width: 100%; height: 100%; object-fit: cover; }
.rw-scroll__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%); }
.rw-scroll { --rw-tabs-top: calc(84px + 2rem); } /* tabs sit here, under the 84px scrolled sticky header */
/* Panels are centred in the space BELOW the tabs (not the whole stage), so text can never run under them on short screens */
.rw-scroll__panels { position: absolute; inset: 0; top: calc(var(--rw-tabs-top) + 48px); bottom: 1.5rem; max-width: var(--rw-content); margin: 0 auto; padding: 0 var(--rw-gutter); }
/* Short viewports (small laptops ≈ 650–760px tall): scale the panel content down so it fits with the tabs */
@media (min-width: 768px) and (max-height: 760px) {
	.rw-scroll__icon { width: 80px; height: 80px; }
	.rw-scroll__panel { grid-template-columns: 80px 1fr; gap: 1.25rem; }
	.rw-scroll__text .rw-scroll__title { font-size: 1.5rem; }
	.rw-scroll__text p { font-size: 1.1875rem; line-height: 1.4; }
}
/* Panel = icon + text, vertically centred, and horizontally centred within the chosen half of the screen */
.rw-scroll__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; align-items: start; width: min(calc(100% - 2 * var(--rw-gutter)), 640px); visibility: hidden; }
.rw-scroll--text-right .rw-scroll__panel { left: 75%; }
.rw-scroll--text-left .rw-scroll__panel { left: 25%; }
@media (max-width: 1400px) { .rw-scroll--text-right .rw-scroll__panel, .rw-scroll--text-left .rw-scroll__panel { width: min(calc(50% - 2 * var(--rw-gutter)), 640px); } }
/* Below ~1100px a half-width column is too narrow – drop the left/right placement and use the full width, centred */
@media (max-width: 1100px) { .rw-scroll--text-right .rw-scroll__panel, .rw-scroll--text-left .rw-scroll__panel { left: 50%; width: min(calc(100% - 2 * var(--rw-gutter)), 640px); } }
.rw-scroll__panel.is-active { visibility: visible; }
/* Panel card: same tint + hairline as the icon circle, 4px corners */
.rw-scroll__panel { padding: 1.5rem 1.75rem 1.5rem 1.5rem; border-radius: 68px; background: rgb(0 0 0 / 25%); }
.rw-scroll__icon, .rw-scroll__text { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rw-scroll__panel.is-active .rw-scroll__icon { opacity: 1; transform: none; transition-delay: 0.15s; }
.rw-scroll__panel.is-active .rw-scroll__text { opacity: 1; transform: none; transition-delay: 0.3s; }
.rw-scroll__icon { width: 100px; height: 100px; border-radius: 50%; background: rgb(0 0 0 / 15%); border: 1.5px solid rgba(255,255,255,0.7); display: grid; place-items: center; overflow: hidden; }
.rw-scroll__icon img { width: 75%; height: 75%; object-fit: contain; filter: brightness(0) invert(1); /* supplied icons are black PNGs – render them white, alpha untouched */ }
.rw-scroll__icon-placeholder { width: 50%; height: 50%; border: 1px dashed rgba(255,255,255,0.7); border-radius: 4px; }
/* Two classes so this outranks the generic .entry-content h3 rule in main.css */
.rw-scroll__text .rw-scroll__title { color: #fff; font-family: var(--rw-serif); font-size: var(--wp--preset--font-size--x-large); margin-bottom: 0.5rem; text-shadow: var(--rw-scroll-glow); }
.rw-scroll__text p { font-size: 1.5rem; /* 24px */ line-height: 1.45; text-shadow: var(--rw-scroll-glow); }
.rw-scroll__link { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.7); }
.rw-scroll__tabs { position: absolute; left: 50%; top: var(--rw-tabs-top); transform: translateX(-50%); display: flex; gap: 0.75rem; z-index: 3; max-width: 100%; padding: 0 var(--rw-gutter); }
.rw-scroll__tab { flex: 0 0 auto; font-family: var(--rw-sans); font-size: 1rem; color: #fff; background: rgba(153,168,173,0.85); padding: 0.4em 1.4em; white-space: nowrap; border-radius: 0 3px 0 3px; /* same corner treatment as buttons */ transition: background var(--rw-ease); }
.rw-scroll__tab:hover { background: var(--rw-primary); }
.rw-scroll__tab.is-active { background: var(--rw-accent); }
@media (max-width: 767px) {
	.rw-scroll__panel, .rw-scroll--text-left .rw-scroll__panel, .rw-scroll--text-right .rw-scroll__panel { top: auto; bottom: 5.5rem; left: var(--rw-gutter); right: var(--rw-gutter); width: auto; transform: none; grid-template-columns: 56px 1fr; gap: 1rem; }
	.rw-scroll__icon { width: 56px; height: 56px; }
	.rw-scroll__text p { font-size: 1rem; }
	/* Labels don't fit five-up on a phone: the panel title already names the step, so the tabs become
	   progress bars (same style as the slider pagination). Text stays in the DOM for screen readers. */
}
/* Under 1100px the five labelled tabs no longer fit on one row: the panel title already names the step, so the
   tabs become progress bars at the bottom (same style as the slider pagination). Text stays in the DOM for
   screen readers. The panel is then free to centre on the full stage again. */
@media (max-width: 1100px) {
	.rw-scroll__panels { top: 0; bottom: 0; }
	.rw-scroll__tabs { top: auto; bottom: 1.25rem; left: 0; right: 0; transform: none; justify-content: center; gap: 6px; padding: 0; }
	.rw-scroll__tab { width: 22px; height: 20px; padding: 8px 0; box-sizing: border-box; background: rgba(255,255,255,0.7); background-clip: content-box; border-radius: 0; font-size: 0; color: transparent; overflow: hidden; }
	.rw-scroll__tab.is-active { background-color: var(--rw-accent); background-clip: content-box; }
}

/* ---- Vimeo Video ------------------------------------------------------------ */
.rw-video__frame { position: relative; overflow: hidden; background: #000; }
.rw-video__frame img, .rw-video__frame .rw-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rw-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rw-video__caption { position: absolute; top: 50%; transform: translateY(calc(-100% - 36px)); /* sits just above the centred play button */ left: 0; right: 0; text-align: center; color: #fff; font-family: var(--rw-serif); font-style: italic; font-size: clamp(1.5rem, 4vw, 2.75rem); text-shadow: 0 2px 12px rgba(0,0,0,0.5); pointer-events: none; }
.rw-video__play[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Team --------------------------------------------------------------------- */
.rw-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.rw-team__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rw-light); margin-bottom: 1rem; }
.rw-team__photo img, .rw-team__photo .rw-placeholder { width: 100%; height: 100%; object-fit: cover; }
.rw-team__name { text-align: center; margin-bottom: 0.25rem; } /* h3 size from theme.json */
.rw-team__role { text-align: center; font-size: 0.8125rem; color: var(--rw-primary); margin-bottom: 0.75rem; }
.rw-team__bio { font-size: 0.8125rem; }
.rw-team__member { display: flex; flex-direction: column; }
.rw-team__badge { margin-top: auto; padding-top: 1.25rem; } /* margin-top:auto pins the logo to the bottom so logos line up across the row */
.rw-team__badge img { max-height: 70px; width: auto; }
@media (max-width: 900px) { .rw-team__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 560px) { .rw-team__grid { grid-template-columns: 1fr; } }

/* ---- FAQ ---------------------------------------------------------------------- */
.rw-block.rw-faq > .rw-faq__inner { max-width: 800px; box-sizing: content-box; /* 800px of content whatever the alignment; gutters (when full width) sit outside */ margin-inline: auto; }
.rw-faq .rw-section-title { margin-bottom: 1.2rem; } /* the global "no space under headings" rule otherwise wins */
.rw-faq__item { border-bottom: 1px solid var(--rw-mid); }
.rw-faq__item:first-child { border-top: 1px solid var(--rw-mid); }
.rw-faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-family: var(--rw-serif); font-size: 1.125rem; color: var(--rw-text); transition: color var(--rw-ease); }
.rw-faq__q::-webkit-details-marker { display: none; }
.rw-faq__q:hover { color: var(--rw-accent); }
.rw-faq__chevron { width: 20px; height: 20px; color: var(--rw-primary); transition: transform var(--rw-ease); flex: 0 0 auto; }
.rw-faq__chevron svg { width: 100%; height: 100%; }
.rw-faq__item[open] .rw-faq__chevron { transform: rotate(90deg); }
.rw-faq__a { padding: 0 2.5rem 1.25rem 0; }
/* Open/close animation. ::details-content + interpolate-size let the answer transition to its natural (auto) height –
   Chrome/Edge/Safari animate, browsers without support (Firefox at the time of writing) simply snap as before. No JS. */
.rw-faq__item { interpolate-size: allow-keywords; }
.rw-faq__item::details-content { height: 0; overflow: clip; opacity: 0; transition: height 0.35s ease, opacity 0.25s ease, content-visibility 0.35s allow-discrete; }
.rw-faq__item[open]::details-content { height: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rw-faq__item::details-content { transition: none; } }