/**
 * TESTIMONIAL — section 04
 *
 * Centred head, then quote left / portrait right.
 *
 * Measured from the 1440 frame: quote column 556 + gap 154 + portrait 456 = the
 * 1164 content column. Expressed as fr units against a fluid gap so the two
 * columns keep their ratio at every width instead of only resolving at 1440.
 */

@layer components {

	.testimonial {
		position: relative;
		overflow: hidden;   /* clips the chevron field to the band */
	}

	/*
	 * Content sits above the decorative pattern.
	 *
	 * The head-to-quote gap is row-gap here rather than a margin on the figure
	 * below, because core's unlayered `:where(figure)` rule — and the equally
	 * unlayered override that beats it in 04-reset.css — outrank anything this
	 * layer can say about a figure's margins. Gap sidesteps that entirely.
	 */
	.testimonial > .wrapper {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: clamp(var(--space-2xl), 7.2vw, 6.5rem);   /* → 104px, measured */
	}

	/* ---- Head ---------------------------------------------------------- */

	.testimonial__head {
		text-align: center;
	}

	/*
	 * No `margin: 0` here on purpose. .section-head sets the eyebrow-to-heading
	 * gap from the layout layer, and a components-layer margin would outrank it
	 * and collapse the two together. The reset already zeroes h2 margins.
	 */
	.testimonial__title {
		font-family: var(--font-display);
		font-size: var(--fs-display-3);
		line-height: var(--lh-display-3);
		letter-spacing: var(--track-display-3);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		text-wrap: balance;
	}

	/* ---- Quote / portrait --------------------------------------------- */

	.testimonial__item {
		display: grid;
		gap: var(--space-xl);
	}

	@media (min-width: 60rem) {
		.testimonial__item {
			grid-template-columns: 556fr 456fr;
			column-gap: clamp(var(--space-l), 10.7vw, 9.625rem);   /* → 154px */
			/*
			 * start, not stretch: the portrait keeps its own aspect ratio and
			 * hangs from the top of the row rather than being pulled to the
			 * height of whatever the quote happens to be.
			 */
			align-items: start;
		}
	}

	/* Quote and byline travel together, a fixed distance apart. */
	.testimonial__quote-block {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(var(--space-l), 2.6vw, 2.3125rem);   /* → 37px, measured */
	}

	.testimonial__quote {
		margin: 0;
		font-size: var(--fs-quote);
		line-height: var(--lh-quote);
		letter-spacing: var(--track-quote);
		font-weight: var(--weight-regular);
		/*
		 * Hangs the opening quote mark into the margin so the T of the first
		 * word lines up with the byline below it, not the punctuation. First
		 * line only, which is exactly what text-indent does.
		 */
		text-indent: -0.11em;
	}

	/*
	 * The gold runs inside a quote are SemiBold in the design, a step lighter
	 * than the Bold .is-accent uses for display headings — at 36px in a text
	 * face, Bold reads as shouting.
	 */
	.testimonial__quote .is-accent {
		font-weight: var(--weight-semibold);
	}

	/* ---- Attribution --------------------------------------------------- */

	.testimonial__cite {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* Measured 51px, byline to signature. */
		gap: clamp(var(--space-l), 3.55vw, 3.1875rem);
	}

	.testimonial__byline {
		margin: 0;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	/*
	 * Sized by height, not width — signatures differ wildly in aspect ratio and
	 * the one thing they need to share is how tall they sit on the line.
	 */
	.testimonial__signature {
		display: block;
		block-size: 2.125rem;   /* 34px */
		inline-size: auto;
		max-inline-size: 100%;
	}

	/* ---- Portrait ------------------------------------------------------ */

	.testimonial__portrait {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 456 / 567;
		object-fit: cover;
		border-radius: var(--radius-card);
	}

	/* ---- Decorative chevron field -------------------------------------- */

	/*
	 * A full-bleed band pinned to the bottom edge, running under the signature
	 * and the foot of the portrait.
	 *
	 * The chevrons hold ONE size at every viewport. Sizing the artwork to the
	 * container instead — 100% wide, or an aspect-ratio box — ties the motif to
	 * the screen: it squeezed 1442px of drawing into a phone and the chevrons
	 * vanished into a grey haze. Anchored right, so a narrow screen crops the
	 * sparse left end rather than shrinking the whole field.
	 *
	 * --testimonial-pattern is set inline by the template only when the asset
	 * exists, so a missing file degrades to no pattern rather than a broken
	 * background-image.
	 */
	.testimonial::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		block-size: 22.125rem;                 /* 354px — the artwork's own height */
		max-block-size: 45%;                   /* never let it swallow a short band */
		background-image: var(--testimonial-pattern, none);
		background-position: right bottom;
		background-size: var(--testimonial-pattern-size, auto);
		background-repeat: var(--testimonial-pattern-repeat, no-repeat);
		pointer-events: none;
		z-index: 0;
	}

	/* ---- Mobile -------------------------------------------------------- */

	/*
	 * Below 60rem the grid collapses to one column and source order already
	 * gives quote → byline → portrait: the words are the point of the section,
	 * and a portrait on top would push them below the fold on a phone.
	 */
	@media (max-width: 59.999rem) {
		.testimonial__portrait {
			max-inline-size: 20rem;
		}
	}
}