/**
 * css/components/quote-carousel.css — Website 2.0 shared component
 * library (#125)
 *
 * Numbered pull-quote carousel (rust band) — every slide is rendered in
 * the DOM (see blocks/cg/quote-carousel.php); `.is-active` is toggled by
 * js/theme.js `initCgQuoteCarousel()`. The slides in each
 * `[data-cg-quote-*]` group are stacked in ONE CSS grid cell, so the
 * group is always as tall as its tallest slide and `.is-active` drives
 * nothing but `opacity` (320ms crossfade). Reference: services.html
 * `.quote`/`.qnum`/`.qlabel`/`.qdots`/`.qbody`/`.qnav`.
 *
 * That replaced an absolute/relative swap which made the band collapse on
 * every transition — see the long note on the grid rules below (#412)
 * before changing any of it.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-quote {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 300px ) minmax( 0, 1fr );
	gap: clamp( 40px, 6vw, 90px );
	align-items: start;
}

/*
 * #412 — the slides are stacked in ONE grid cell, not absolutely
 * positioned. A grid container is always as tall as its tallest item
 * whether or not that item is visible, which is what stops the band
 * changing height.
 *
 * What the old `position: absolute` + `.is-active { position: relative }`
 * did wrong, both measured on /services/ before the change:
 *
 * 1. The band collapsed to nothing for 320ms on EVERY transition.
 *    js/theme.js `show()` strips `.is-active` from the outgoing slide
 *    immediately and adds it to the incoming one 320ms later, so for that
 *    window NO slide carried the class — and the class was the only thing
 *    taking a slide out of absolute flow. All three groups collapsed to
 *    zero height at once. Measured collapse and matching upward jump of
 *    the content below: 197px at 1600, 165 at 1280, 260 at 1024, 258 at
 *    768, 381 at 390. Autoplay is a 10s dwell, so the page jumped roughly
 *    every 10.3 seconds unattended.
 * 2. Even at rest the slides disagreed, because the group's height was
 *    whatever the active slide happened to wrap to: 47px spread at 1600,
 *    31 at 1024, 62 at 390. The widths that measured 0 were luck, not
 *    design — any copy edit reintroduces it.
 *
 * Grid stacking fixes both at once and needs no JS change: `.is-active`
 * now only drives opacity, so the 320ms gap costs nothing.
 *
 * Do NOT reintroduce `position: absolute` here. If a slide ever needs to
 * leave the flow, give it its own cell rather than taking it out of the
 * grid — the height guarantee is the whole point.
 */
.cg-quote__nums,
.cg-quote__labels,
.cg-quote__texts {
	display: grid;
}

.cg-quote__num,
.cg-quote__label,
.cg-quote__text {
	grid-area: 1 / 1; /* every slide shares one cell — container = tallest slide */
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --fade-out ) var( --fade-ease );
}

.cg-quote__num.is-active,
.cg-quote__label.is-active,
.cg-quote__text.is-active {
	opacity: 1;
	pointer-events: auto;
}

.cg-quote__num {
	font-family: var( --font-condensed ); /* Tungsten Narrow Semibold, off Averta Bold (#304) */
	font-weight: 600;
	font-size: 75px;
	line-height: 0.7;
	letter-spacing: -1.06px;
	/* Literal cream-rgb at 50% (matches --cg-cream #F5F5F5) — decorative
	   numeral watermark on the rust band, same raw-rgba convention as
	   hero.css's video-scrim. */
	color: rgba( 245, 245, 245, 0.5 );
}

/* SVC-3 (#407): Averta Std Bold, replacing Averta italic 400.
   AvertaStd-Bold.woff2 is declared at fonts.css as weight 700 / style
   normal, so both properties have to change — leaving font-style italic
   would make the browser synthesise an oblique from the Bold face. */
.cg-quote__label {
	display: block;
	margin-top: 26px;
	font-family: var( --font-sans );
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.25;
	letter-spacing: -0.56px;
	color: var( --cg-cream );
}

.cg-quote__dots {
	display: flex;
	gap: 12px;
	margin-top: 34px;
}

.cg-quote__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 245, 245, 245, 0.4 );
	cursor: pointer;
}

.cg-quote__dot.is-active {
	background: var( --cg-cream );
}

.cg-quote__body {
	position: relative;
}

.cg-quote__mark {
	display: block;
	margin: 0;
	font-family: var( --font-serif );
	font-size: 110px;
	line-height: 0.62;
	color: rgba( 245, 245, 245, 0.5 );
}

/* SVC-4 (#407): Noe Text Italic, replacing Averta italic. The real
   NoeText-RegularItalic.woff2 face is declared at weight 400 / style
   italic, so this resolves to the genuine italic rather than a
   browser-synthesised slant of the roman. */
.cg-quote__text {
	margin: 8px 0 0;
	font-family: var( --font-serif );
	font-style: italic;
	font-weight: 400;
	font-size: clamp( 26px, 2.6vw, 40px );
	line-height: 1.18;
	letter-spacing: -0.6px;
	color: var( --cg-cream );
	text-wrap: balance;
}

.cg-quote__nav {
	display: flex;
	justify-content: flex-end;
	margin-top: 42px;
}

.cg-quote__prev,
.cg-quote__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: var( --hairline ) solid rgba( 245, 245, 245, 0.5 );
	background: transparent;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var( --cg-cream );
	cursor: pointer;
	transition: background var( --fade-out ) var( --fade-ease ), color var( --fade-out ) var( --fade-ease );
}

.cg-quote__next {
	border-left: 0;
}

.cg-quote__prev:hover,
.cg-quote__next:hover {
	background: var( --cg-cream );
	color: var( --accent );
}

@media ( max-width: 1024px ) {
	.cg-quote {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}