/**
 * Testimonials — home-spec.md §7.
 *
 * **Rebuilt in Phase 14 against the frame.** Stage 1 found the arrangement was
 * broadly right and the card interior was not: the frame puts the avatar on the
 * left with the name beside it and the quote underneath in an italic serif,
 * while the build stacked avatar, quote, name and role down the centre. Six
 * cards, not five. Every number below was probed out of
 * `app/design-exports/home-figma.png`:
 *
 *   Columns        320 | 18 | 644 | 18 | 320, inside 1320
 *   Flanking card  320 wide, padding 24, avatar 124, name gap 17, quote gap 29
 *   Featured card  644 wide, padding 31, avatar 124, quote gap 37
 *   Centre stack   offset 128 below the flanks, 16px internal gap
 *   Quote          italic serif, 20/1.2, three lines at a 24px pitch
 *   Name / role    18 semibold / 12 muted
 */

.hermizon-testimonials {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.hermizon-testimonials.is-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* **1101, and it is measured rather than adopted from the platform.** This band
 * ran from 782 and could not fit there: two 320px flanks and a centre column
 * whose min-content is 313 need 989px of track plus the page's 24px offset, so
 * the cards spilled to x 1013 and **the whole site scrolled sideways at every
 * width from 782 to 1012** — `scrollWidth` 1013 against `innerWidth` 900,
 * measured on the home page. Nothing in the band itself looked wrong, which is
 * why it survived: the overflow is the flanking cards, not the container.
 *
 * 1101 is where the centre column has 376px to work with rather than its bare
 * minimum, and it is the same boundary the mega menu's tiles use. Below it the
 * band stacks, which it already knew how to do. */
@media (min-width: 1101px) {
	.hermizon-testimonials.is-featured {
		/* Measured, not proportional. `1fr 1.4fr 1fr` was the earlier guess and
		 * it produced 374 | 524 | 374 against the frame's 320 | 644 | 320. */
		grid-template-columns: 320px 1fr 320px;
		/* Both rows have to be *explicit*. Without this the centre wrapper's
		 * `grid-row: 1 / -1` resolves against a grid with a single explicit row
		 * line, so `-1` is line 1 and the span collapses to one row — measured:
		 * row 1 grew to 658px and the second pair of flanking cards fell 676px
		 * below the first. */
		grid-template-rows: auto auto;
		gap: 18px;
		align-items: start;
		/* The frame overlaps the heading and the cards: the heading block starts
		 * at y 3341 and the flanking cards at 3403, so the columns rise *beside*
		 * the heading rather than following it. Measured against the built
		 * intro, that is 74px of pull-up. It is a negative margin because the
		 * heading is a sibling block in the page, not part of this one. */
		margin-block-start: -74px;
	}

	/* The centre column, as its own stack — see render.php for why it is a
	 * wrapper rather than two placed cells. */
	.hermizon-testimonials__feature {
		grid-column: 2;
		grid-row: 1 / -1;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-block-start: 128px;
	}

	/* The flanking cards have to be *told* which column they are in.
	 *
	 * Auto-placement fills row by row, so without this the second card landed
	 * in the middle column, column three was left with a single card, and
	 * column one had a hole in the middle. Alternating by parity balances the
	 * flanks because the featured cards are out of the flow entirely — they
	 * live in the wrapper above. */
	.hermizon-testimonials.is-featured > .hermizon-testimonial:nth-child(odd) {
		grid-column: 1;
	}

	.hermizon-testimonials.is-featured > .hermizon-testimonial:nth-child(even) {
		grid-column: 3;
	}
}

/* Below the width the three-column arrangement needs, the flanking columns
 * stack; a six-card band on a phone — or on a tablet, which is what this now
 * also covers — is one column and nothing else makes sense. */
@media (max-width: 1100px) {
	.hermizon-testimonials {
		grid-template-columns: 1fr;
	}

	.hermizon-testimonials__feature {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}
}

/* --------------------------------------------------------------------------
 * The card
 *
 * The interior is a grid with named areas rather than a stack, because the
 * source order and the visual order genuinely differ: the page markup runs
 * image, quote, name, role — which is the order a reader of the *content*
 * wants — while the frame paints avatar, name, role, quote. Areas let both be
 * true at once, with no wrapper divs in the page and no reordering in PHP.
 * ----------------------------------------------------------------------- */

.hermizon-testimonial {
	display: grid;
	margin: 0;
	/* Deliberately asymmetric, and measured: the frame leaves 24 above the
	 * avatar and 66 below the quote — 3406/3430 and 3646/3716 on the first
	 * card, the same on all four. */
	padding: 24px 24px 66px;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	/* Rows 1 and 4 are flexible so the name/role pair centres against the
	 * avatar however tall the two lines end up. Measured in the frame: avatar
	 * 3430-3553, name+role 3477-3507 — both centred on 3491. */
	grid-template-columns: 124px 1fr;
	grid-template-rows: 1fr auto auto 1fr auto;
	grid-template-areas:
		"avatar ."
		"avatar name"
		"avatar role"
		"avatar ."
		"quote quote";
	column-gap: 17px;
}

.hermizon-testimonial .wp-block-image {
	grid-area: avatar;
	margin: 0;
}

/* The avatar is circular in every frame it appears in, and the only way to say
 * so once is here — a core/image inside the card carries no such class. The
 * page markup asks for 64px; the frame draws 124. */
.hermizon-testimonial .wp-block-image img {
	width: 124px;
	height: 124px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--pill);
}

.hermizon-testimonial p {
	margin: 0;
}

/* Source order: 1 quote, 2 name, 3 role. */
.hermizon-testimonial p:nth-of-type(1) {
	grid-area: quote;
	margin-block-start: 25px;
	font-family: var(--wp--preset--font-family--quote-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.2;
}

.hermizon-testimonial p:nth-of-type(2) {
	grid-area: name;
	align-self: end;
}

.hermizon-testimonial p:nth-of-type(3) {
	grid-area: role;
	align-self: start;
}

/* --------------------------------------------------------------------------
 * The featured card
 *
 * A different interior, not a wider one: the quote sits *beside* the avatar and
 * the attribution drops underneath both.
 * ----------------------------------------------------------------------- */

.hermizon-testimonial.is-featured {
	padding: 31px 31px 19px;
	grid-template-columns: 124px 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"avatar quote"
		"name name"
		"role role";
	column-gap: 37px;
}

.hermizon-testimonial.is-featured p:nth-of-type(1) {
	margin-block-start: 0;
	/* Centred against the avatar — frame: avatar 3567-3689, quote 3607-3649,
	 * both centred on 3628. */
	align-self: center;
}

.hermizon-testimonial.is-featured p:nth-of-type(2) {
	align-self: start;
	margin-block-start: 20px;
}

.hermizon-testimonial.is-featured p:nth-of-type(3) {
	margin-block-start: 9px;
}

/* --------------------------------------------------------------------------
 * The quote mark the frame paints behind each avatar
 *
 * Decorative and very nearly invisible — sampled at #F6F7FC against white, so
 * roughly 4% of the band's own lavender. It is `aria-hidden` by construction:
 * generated content is not exposed to assistive technology as text here, and
 * the quotation is already marked up as one.
 * ----------------------------------------------------------------------- */

.hermizon-testimonial {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hermizon-testimonial::before {
	content: "\201D";
	position: absolute;
	z-index: -1;
	inset-block-start: -34px;
	inset-inline-start: 96px;
	font-family: var(--wp--preset--font-family--quote-serif);
	font-size: 200px;
	line-height: 1;
	color: #f6f7fc;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * The card on a small phone, Phase 34
 *
 * Every interior number above is a 1600px frame measurement, and the card's
 * *minimum* width is the sum of three of them: a 124px avatar, a 37px column
 * gap and 62px of padding — 223px before the quote has a single character. The
 * quote is 20px italic serif, whose longest word measures about 90, so the
 * featured card cannot be narrower than roughly 313px. At 320 the page offers
 * 280 and the card spilled: `scrollWidth` 333 against 320, and it was the last
 * horizontal scroll left on the site.
 *
 * At 390 nothing overflowed but the shape was wrong for the same reason — the
 * avatar and padding took 223 of 350 and left the quote a 127px column that set
 * four words to five lines.
 *
 * 600 rather than 480: the avatar is oversized for the space on any phone, not
 * only the ones where it overflows. Above 600 the frame's numbers stand.
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
	.hermizon-testimonial {
		padding: 20px 20px 40px;
		grid-template-columns: 88px 1fr;
		column-gap: 16px;
	}

	.hermizon-testimonial .wp-block-image img {
		width: 88px;
		height: 88px;
	}

	.hermizon-testimonial.is-featured {
		padding: 20px 20px 24px;
		grid-template-columns: 88px 1fr;
		column-gap: 20px;
	}

	.hermizon-testimonial p:nth-of-type(1) {
		margin-block-start: 18px;
	}
}