/**
 * Testimonials (Figma 4536:1288).
 *
 * Lives with the block so WP loads it on demand. The `body.barkley-redesign`
 * prefixes on colour rules are load-bearing — see the cascade note at the top of
 * `src/css/patterns/homepage.css`.
 */

.hp-quotes {
	/*
	 * Base quote size for all three columns. The active-slide emphasis is a
	 * pair of multipliers on this one value (see .swiper-slide-active below), so
	 * the sizes can never drift apart.
	 */
	--hp-quote-size: clamp(18px, 1.4vw, 24px);
	--hp-quotes-wave: clamp(70px, 9vw, 160px);

	position: relative;
	/*
	 * No bottom padding at all — per QA and the design: the quote columns run to
	 * y:703 of a 704 frame whose wave starts at y:545, i.e. the tallest column
	 * crosses the entire wave zone and the wave visibly sits UNDER the text
	 * (which paints above it via the inner wrapper's z-index). Any bottom padding
	 * lifts the columns out of the wave; the first pass kept the section gap and
	 * produced barely a third of the design's overlap.
	 */
	padding-block: var(--wp--preset--spacing--60) 0;
	padding-inline: var(--wp--style--root--padding-left, 20px);
	background-color: var(--brand-cream);
}

.hp-quotes__inner {
	position: relative;
	z-index: 1;
}

/*
 * White wave at the section's foot, transitioning into the white Education
 * section (Figma 4536:1288) — same construction as .hp-featured::after, with
 * the white-fill variant of the divider.
 */

.hp-quotes::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: var(--hp-quotes-wave);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQogIERpdmlkZXIgYXQgdGhlIEJPVFRPTSBvZiB0aGUgIldoYXQgT3VyIFN0dWRlbnRzIFNheSIgYmFuZCwgd2hlcmUgaXRzIGNyZWFtCiAgZ2l2ZXMgd2F5IHRvIHRoZSB3aGl0ZSBFZHVjYXRpb24gc2VjdGlvbiAoRmlnbWEgIlZlY3RvciAxMSIgaW4gNDUzNjoxMjg4IOKAlAogIHNhbWUgZ2VvbWV0cnkgYXMgd2F2ZS1kaXZpZGVyLnN2ZywgdW5taXJyb3JlZCB0aGVyZSBqdXN0IGxpa2UgaGVyZSkuCgogIElkZW50aWNhbCBwYXRoIHRvIHdhdmUtZGl2aWRlci5zdmcgd2l0aCBhIHdoaXRlIGZpbGw6IGFuIFNWRyByZWZlcmVuY2VkIHRocm91Z2gKICB1cmwoKSBjYW5ub3QgcmVhZCB0aGUgcGFnZSdzIGN1c3RvbSBwcm9wZXJ0aWVzLCBzbyBlYWNoIGRlc3RpbmF0aW9uIGNvbG91ciBpcwogIGl0cyBvd24gZmlsZSByYXRoZXIgdGhhbiBhIHBhcmFtZXRlci4KLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcyOCIgaGVpZ2h0PSIxNjAiIHZpZXdCb3g9IjAgMCAxNzI4IDE2MCIgZmlsbD0ibm9uZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+Cgk8cGF0aAoJCWQ9Ik0xNzI4IDExMy4wMDZDMTcyOCAxMTMuMDA2IDE2MjQuNSAxMDMuMDA1IDE2MDcuNSAxMDMuMDA1QzE0ODQgMTAzLjAwNSAxNDMzLjUgMTM2LjQ1NCAxMjk0IDEzOC41MDVDMTA1NiAxNDIuMDA1IDk1Ny45OTkgNzIuMzE4OSA3NjUuOTk5IDgzLjAwNUM2MDQuOTk5IDkxLjk2NTcgNDU2Ljg1NCAxMzkuMjQ0IDI3MS40OTkgMTU3LjUwNkMxNzQuOTk3IDE2Ny4wMTQgOTQuNDk5IDEzNS4wMDggLTAuMDAwOTc2NTYyIDExNi4wMDZWMTYwSDE3MjhaIgoJCWZpbGw9IiNmZmZmZmYiCgkvPgo8L3N2Zz4K);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Full-bleed band, content column inside. */

.hp-quotes__inner {
	max-width: var(--wp--style--global--content-size, 1392px);
	margin-inline: auto;
}

.hp-quotes__head {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: clamp(12px, 1.2vw, 20px);
	margin-bottom: clamp(28px, 3vw, 48px);
}

/* QA 10-08: ~20% under the foundation h2 (clamp(2rem, 1.3rem + 2.8vw, 3rem)). */

body.barkley-redesign .hp-quotes .hp-quotes__title {
	margin: 0;
	color: var(--brand-green);
	font-size: clamp(1.6rem, 1.04rem + 2.24vw, 2.4rem);
}

/* Decorative glyphs either side of the heading — one character each, styled. */

.hp-quotes__mark {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	color: var(--brand-gold);
	font-family: var(--brand-font-heading);
	font-size: clamp(64px, 7vw, 120px);
	font-weight: 700;
	line-height: 0.8;
}

/* ---------- Track ---------- */

/*
 * Swiper translates the track; the container clips at its own edge (Swiper's
 * own `.swiper` rule sets `overflow: hidden`). The wrapper is as tall as the
 * tallest slide, so nothing else on the page moves when the track turns.
 *
 * Each slide pads by the column gap so the active slide's hairlines sit midway
 * between text columns; the container is pulled out by that same gap so the
 * outer columns' text lines up with the heading, as the design's grid did.
 * The gap is capped at 32px — the theme's smallest root padding — so the
 * widened container never pokes past the full-bleed section's edge.
 *
 * Two-class selector: Swiper's own `.swiper` rule sets `margin-left/right:
 * auto` at the same weight and loads later, so `.hp-quotes__swiper` alone
 * loses the margin.
 */

.hp-quotes__swiper.swiper {
	--hp-quote-gap: clamp(24px, 2.5vw, 32px);

	overflow: hidden;
	margin-inline: calc(-1 * var(--hp-quote-gap));
}

/*
 * Two-class selectors on purpose. Swiper's own `.swiper-slide` rules set
 * `display: block`, `height: 100%` and `flex-shrink: 0` at the same (0,1,0)
 * weight as a bare `.hp-quotes__item`, and its stylesheet (shared.css) loads
 * after this block's — so a single class loses the tie.
 *
 * Grid, not block: the quote and name sit in rows 1–2, and an invisible copy
 * of both at the active size (.hp-quotes__sizer, render.php) spans all three
 * rows. The `1fr` third row soaks up the sizer's extra height, so the name
 * stays tight under the quote while every slide is as tall as it would be
 * when active. Track height — the tallest slide — is therefore constant and
 * nothing below the section moves when the emphasis changes columns.
 */

.hp-quotes__item.swiper-slide {
	position: relative;
	display: grid;
	/* minmax(0, 1fr), not auto: long quotes must wrap, not widen the column. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: auto;
	margin: 0;
	padding-inline: var(--hp-quote-gap);
	padding-block: 8px 0;
}

/*
 * Every item is pinned to column 1. With the sizer already placed there, an
 * auto-placed quote would land in an implicit second column beside it and
 * wrap at half width.
 */

.hp-quotes__item.swiper-slide > .hp-quotes__text {
	grid-area: 1 / 1;
}

.hp-quotes__item.swiper-slide > .hp-quotes__name {
	grid-area: 2 / 1;
}

.hp-quotes__sizer {
	grid-area: 1 / 1 / 4 / 2;
	visibility: hidden;
	pointer-events: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.hp-quotes__sizer p {
	margin-bottom: 0;
}

/*
 * Before Swiper boots, lay the track out exactly as Swiper will: three equal
 * columns from 782px (one full-width column below, pulled left one slide so
 * the start slide shows), so the hand-off to JS repaints nothing. Swiper's own
 * `.swiper-slide { width: 100% }` covers the phone case.
 */

@media (min-width: 782px) {
	.hp-quotes__swiper:not(.swiper-initialized) .hp-quotes__item.swiper-slide {
		width: calc(100% / 3);
	}
}

@media (max-width: 781px) {
	.hp-quotes__swiper:not(.swiper-initialized) .hp-quotes__track {
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
}

/*
 * Rules either side of the active quote — the design's two hairlines. Drawn on
 * every slide at opacity 0 and faded in on the active one, rather than created
 * on it, so they cross-fade with the turn instead of popping. On the active
 * slide rather than as slide borders because the track loops: with borders on
 * every slide the leftmost visible one would paint a line at the column edge.
 * `--start` is the server-marked opening slide, styled as active until Swiper
 * takes over (see the pre-init note above).
 */

.hp-quotes__item.swiper-slide::before,
.hp-quotes__item.swiper-slide::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: color-mix(in srgb, var(--brand-gold) 70%, transparent);
	opacity: 0;
	-webkit-transition: opacity 300ms ease;
	transition: opacity 300ms ease;
}

.hp-quotes__item.swiper-slide::before {
	left: 0;
}

.hp-quotes__item.swiper-slide::after {
	right: 0;
}

.hp-quotes__item.swiper-slide-active::before,
.hp-quotes__item.swiper-slide-active::after,
.hp-quotes__swiper:not(.swiper-initialized) .hp-quotes__item--start::before,
.hp-quotes__swiper:not(.swiper-initialized) .hp-quotes__item--start::after {
	opacity: 1;
}

/*
 * Active-slide emphasis (client request, 2026-09-21): the centre reads ~15%
 * larger and bold, its neighbours ~10% smaller. Font-size rather than
 * `transform: scale()` so the text reflows inside its column and stays sharp.
 * The sizer copy is always at the active size (that is its job). The
 * transition is only enabled once Swiper is running: the opening slide is
 * already at full size on first paint and must not grow into it.
 */

body.barkley-redesign .hp-quotes__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--brand-ink);
	font-family: var(--brand-font-heading);
	font-size: calc(var(--hp-quote-size) * 0.9);
	font-weight: 500;
	line-height: 1.35;
}

body.barkley-redesign .swiper-slide-active .hp-quotes__text,
body.barkley-redesign .hp-quotes__swiper:not(.swiper-initialized) .hp-quotes__item--start .hp-quotes__text,
body.barkley-redesign .hp-quotes__sizer .hp-quotes__text {
	font-size: calc(var(--hp-quote-size) * 1.15);
	font-weight: 700;
}

.hp-quotes__swiper.swiper-initialized .hp-quotes__text {
	-webkit-transition: font-size 300ms ease;
	transition: font-size 300ms ease;
}

body.barkley-redesign .hp-quotes__name {
	margin-top: 24px;
	/* QA: the attribution reads in the brand green, not the subtle grey. */
	color: var(--brand-green);
	font-size: 15px;
}

/*
 * Phones: one quote per view (script.js), so the visible one is always the
 * active one. There is nothing to emphasise it against, so every quote sits
 * at the expanded size — no resize as the next one slides in — and the
 * hairlines, which mark the centre of a three-up, go.
 */

@media (max-width: 781px) {
	.hp-quotes__swiper.swiper {
		--hp-quote-gap: 16px;
	}

	.hp-quotes__item.swiper-slide::before,
	.hp-quotes__item.swiper-slide::after {
		content: none;
	}

	body.barkley-redesign .hp-quotes__text {
		font-size: calc(var(--hp-quote-size) * 1.15);
		font-weight: 700;
	}
}

/* ---------- Arrows ---------- */

/*
 * Same construction as .hp-slider__arrow (specialty slider), one size down —
 * "small slider buttons" per the request; 44px keeps the pointer-target
 * guideline. Loop mode means Swiper never disables them.
 * ponytail: ~25 duplicated lines; extract a shared .hp-arrow if a third
 * arrowed carousel appears.
 */

.hp-quotes__nav {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 16px;
	margin-top: clamp(24px, 3vw, 40px);
}

.hp-quotes__arrow {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--brand-radius, 16px);
	background-color: var(--brand-cream-deep);
	color: var(--brand-green);
	font-size: 16px;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease;
	transition: background-color 150ms ease;
}

.hp-quotes__arrow:hover {
	background-color: var(--brand-gold);
}

.hp-quotes__arrow:focus-visible {
	outline: 2px solid var(--brand-green-deep);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.barkley-redesign .hp-quotes__text,
	.hp-quotes__item.swiper-slide::before,
	.hp-quotes__item.swiper-slide::after,
	.hp-quotes__arrow {
		-webkit-transition: none;
		transition: none;
	}
}

/* ---------- Editor preview ---------- */

/*
 * ACF renders the block server-side in the canvas but the viewScript never
 * runs there, so Swiper never lays the track out. Show every quote in a plain
 * grid instead — all of them readable at a glance, none of them "active" (each
 * takes its turn in the centre on the site) — and drop the arrows, which would
 * do nothing.
 */

/* Specificity matches the pre-init rules above, which never hand off here. */

.hp-quotes.is-preview .hp-quotes__swiper .hp-quotes__track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(24px, 3vw, 48px);
	-webkit-transform: none;
	        transform: none;
}

.hp-quotes.is-preview .hp-quotes__swiper.swiper {
	margin-inline: 0;
}

.hp-quotes.is-preview .hp-quotes__swiper .hp-quotes__item.swiper-slide {
	width: auto;
	padding-inline: 0;
}

.hp-quotes.is-preview .hp-quotes__sizer,
.hp-quotes.is-preview .hp-quotes__nav {
	display: none;
}

.hp-quotes__placeholder {
	padding: 24px;
	border: 1px dashed var(--brand-green, #33462e);
	border-radius: var(--brand-radius, 16px);
	text-align: center;
}