/**
 * sigma/testimonials -- the comp's testimonial carousel. Loaded only
 * where the block renders (block.json "style" field).
 *
 * Geometry is the comp's, 1 unit = 1 CSS px at a 1440 viewport
 * (docs/qa/comp-spec/SPEC-home.md S07, band y 3478-4020):
 *
 *   band            gray-light, 542 tall for a three-line quote
 *   headline        70px Cormorant Bold navy, line box top at y+71
 *   stars           the client's "Show stars and date on each" (Home
 *                   box 7), in the 66px the comp leaves between headline
 *                   and quote -- the comp itself draws no stars
 *   quote           40px Cormorant Bold navy, centred, max 944 wide,
 *                   44px line pitch, first line box at y+214
 *   attribution     40px Cormorant Bold navy, 42 under the quote (y+388)
 *   role . date     20px, the comp has none; it fits under the name
 *                   inside the comp's 110px bottom margin
 *   arrows          gold 7.5px stroke, heads 15x22.5 at x=130 and x=1310,
 *                   centred on the slide (y+315 for the comp's quote)
 *
 * Every vertical distance below is a token or the comp's own number in
 * px, never a rem of the body size, because the comp is drawn in px and
 * the whole point is to land on its pixels. Horizontal placement is
 * viewport-relative (calc against 50%) so the same rule that puts the
 * arrows at 130/1310 on a 1440 screen keeps them off the quote at 1100.
 *
 * The band is a fixed 542 only when the quote is three lines. The managed
 * set (inc/testimonials-data.php) is mostly longer than the comp's
 * sample, so the band grows with the slide -- min-height, not height.
 *
 * Progressive enhancement: with no script every slide stacks and the
 * arrows stay [hidden]; view.js adds --enhanced and pages one at a time.
 */

.testimonials {
	box-sizing: border-box;
	position: relative;
	min-height: 542px;
	padding: 71px 0 var(--space-2xl);
	background-color: var(--color-gray-light);
	color: var(--color-navy);
}

.testimonials__heading {
	margin: 0;
	padding-inline: var(--space-sm);
	font-family: var(--font-serif);
	font-size: var(--text-h2);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	text-align: center;
	color: var(--color-navy);
}

/*
 * Display-size gold on gray, as the comp draws it (docs/COMPOSITION.md:
 * gold at display size is the client's design; gold-deep stays for small
 * gold text -- the stars below).
 */
.testimonials__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

/*
 * 18px from the headline's line box (ends y+148) to the stars row (y+166).
 * A headless block (heading field blank) has the carousel as the first
 * child and the same 18 keeps the band's top rhythm. The 80px
 * padding-inline is the arrow zone below 1440 -- see .testimonials__nav.
 */
.testimonials__carousel {
	position: relative;
	margin-top: 18px;
	padding-inline: var(--space-2xl);
}

.testimonials__track {
	max-width: 944px;
	margin-inline: auto;
}

/*
 * The enhanced carousel stacks every slide in ONE grid cell instead of
 * showing one and removing the rest from layout.
 *
 * Why it had to change: view.js used to set slide.hidden, so the track
 * was only ever as tall as the slide on screen. The seven approved
 * quotes are 182 to 836 characters, which measured 854px down to 340px
 * on desktop -- so every click on an arrow moved the FAQ, the form and
 * the footer by up to 514px. Paging a quote should not scroll the page
 * under the reader's hands (Roman, 19 Sep).
 *
 * One cell, all slides: the inactive ones keep their box, so the track
 * has a natural height and view.js can measure any slide it likes
 * without showing it. They are taken out of the accessibility tree and
 * off the tab order there too, so a screen reader and a keyboard still
 * reach exactly one quote.
 *
 * The height itself is NOT left at the tallest slide's. Pinning it there
 * fixed the jump and bought a worse problem: Robin Bray's 836 characters
 * set 1100px, and on Steve Deere's 182 the band was half empty grey --
 * the quote sitting high above a void. So view.js sets --slide-height
 * per slide and the transition below carries the band between the two,
 * which keeps the page from jumping without leaving dead space under a
 * short quote.
 */
.testimonials__carousel--enhanced .testimonials__track {
	display: grid;
	grid-template-areas: 'slide';
	/* Falls back to the content's own height before view.js measures, and
	   if the script never runs this rule is not applied at all. */
	height: var(--slide-height, auto);
	transition: height 320ms ease;
}

/*
 * Anyone who has asked their system not to animate gets the height
 * change instantly. The page still does not jump under them -- the
 * height is still driven, just not tweened.
 */
@media (prefers-reduced-motion: reduce) {
	.testimonials__carousel--enhanced .testimonials__track {
		transition: none;
	}
}

/*
 * align-self: start is load-bearing, not cosmetic. Grid items stretch to
 * fill their cell by default, so with all seven sharing one cell every
 * slide reported the TALLEST one's height -- and view.js, measuring the
 * active slide to size the track, read 854px on all seven and the band
 * never changed size. Starting each slide at the top gives it its own
 * content height back, which is the number being measured.
 */
.testimonials__carousel--enhanced .testimonials__slide {
	grid-area: slide;
	align-self: start;
}

/*
 * visibility, not display or [hidden]: a hidden box contributes no
 * height, which is the bug this replaces. visibility:hidden keeps the
 * box and its height while removing the words from the page.
 */
.testimonials__carousel--enhanced .testimonials__slide[data-sigma-inactive] {
	visibility: hidden;
}

.testimonials__slide {
	text-align: center;
}

/*
 * Stacked (no-script) slides need a gap between them; the enhanced
 * carousel shows one at a time so the gap never appears there.
 */
.testimonials__slide + .testimonials__slide {
	margin-top: var(--space-2xl);
}

.testimonials__carousel--enhanced .testimonials__slide + .testimonials__slide {
	margin-top: 0;
}

.testimonials__pair-heading {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.testimonials__stars {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: 0.1em;
	color: var(--color-gold-deep);
}

/* 26px from the stars row (ends y+188) to the quote's first line (y+214). */
.testimonials__quote {
	box-sizing: border-box;
	margin: 26px 0 0;
	color: var(--color-navy);
}

/* No stars on this card: the quote alone bridges the comp's 66px gap (18 + 48). */
.testimonials__quote:first-child {
	margin-top: var(--space-xl);
}

.testimonials__quote-text {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--text-quote);
	font-weight: var(--weight-serif-bold);
	font-style: normal;
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

.testimonials__quote-text + .testimonials__quote-text {
	margin-top: 0;
}

.testimonials__quote-text::before {
	content: "\201C";
}

.testimonials__quote-text::after {
	content: "\201D";
}

/*
 * Robin Bray's approved mobile short form (a different rendering, never a
 * truncation with an ellipsis) swaps in below 768 -- both <p> render
 * server-side; only one is visible at a given width.
 */
.testimonials__quote-text--short {
	display: none;
}

@media (max-width: 767px) {
	.testimonials__quote-text--full {
		display: none;
	}

	.testimonials__quote-text--short {
		display: block;
	}
}

/* 42px from the quote's last line box (y+346) to the name (y+388). */
.testimonials__name {
	margin: 42px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-quote);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

.testimonials__meta {
	margin: var(--space-xs) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.testimonials__meta-separator {
	margin-inline: var(--space-xs);
}

.testimonials__date {
	font-style: normal;
}

.testimonials__label {
	margin: var(--space-xs) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-style: italic;
	line-height: var(--leading-body);
	color: var(--color-gold-deep);
}

/*
 * The arrows. Hit area 44x44 minimum (the SVG is 61x22.5) -- padding
 * grows the button around the glyph without moving the glyph. Placed
 * against the band, not the 944px track, so at 1440 the left head sits
 * at x=130 (720 - 590) and the right head ends at x=1325 (720 + 605 =
 * 1325 - 0): the comp's own asymmetry, 130 from the left edge and 115
 * from the right. Below 1440 the max() clamps them to a 16px inset while
 * the carousel's 80px padding-inline keeps the quote clear of them.
 *
 * Vertically centred on the slide, then nudged 12px down: for the comp's
 * three-line quote with the stars row above and the role/date line below
 * (slide 166..462, centre 314) that lands the arrow centre at y+326, the
 * comp's 315 + 11.25. Longer quotes keep the arrow mid-slide, where a
 * reader expects it.
 */
.testimonials__nav {
	position: absolute;
	top: calc(50% + 12px);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-none);
	background: transparent;
	color: var(--color-gold);
	cursor: pointer;
	transform: translateY(-50%);
}

.testimonials__nav[hidden] {
	display: none;
}

.testimonials__nav--prev {
	left: max(var(--space-sm), calc(50% - 590px));
}

.testimonials__nav--next {
	right: max(var(--space-sm), calc(50% - 605px));
}

.testimonials__nav:hover .testimonials__arrow,
.testimonials__nav:focus-visible .testimonials__arrow {
	color: var(--color-gold-bright);
}

.testimonials__arrow {
	display: block;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 7.5;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.testimonials__nav--next .testimonials__arrow {
	width: 51px;
}

/*
 * Tablet and below: the quote steps down to the box-heading size (26px,
 * the only token at that size; the comp has no mobile view and the
 * brief asks for 26 at 375), the headline to the statement size, and
 * the arrows go to the edges with a 44px hit box. 56px of padding keeps
 * the words off the arrows. The band's fixed top/bottom stay -- they
 * are the comp's rhythm and still read right on a phone.
 */
@media (max-width: 767px) {
	.testimonials {
		min-height: 0;
		padding: var(--space-xl) 0 var(--space-2xl);
	}

	.testimonials__heading {
		font-size: var(--text-statement);
	}

	.testimonials__carousel {
		padding-inline: 56px;
	}

	.testimonials__quote {
		margin-top: var(--space-sm);
	}

	.testimonials__quote:first-child {
		margin-top: var(--space-md);
	}

	.testimonials__quote-text,
	.testimonials__name {
		font-size: var(--text-box-heading);
	}

	.testimonials__name {
		margin-top: var(--space-md);
	}

	.testimonials__nav--prev {
		left: var(--space-xs);
	}

	.testimonials__nav--next {
		right: var(--space-xs);
	}

	.testimonials__arrow,
	.testimonials__nav--next .testimonials__arrow {
		width: 36px;
		height: 13px;
	}
}