/**
 * css/components/worklist-slider.css — Website 2.0 shared component
 * library (#124)
 *
 * "Production budgets" pattern — a `.cg-split`-proportioned two-column
 * grid (statement+body left / eyebrow+image-slider right), then an
 * optional full-bleed hairline + 3-up numbered list. Reference:
 * tech-ai.html `.prod`/`.prodimg`/`.wlrow`/`.worklist2`/`.wlnav`/
 * `.three`/`.tc`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-worklist-slider__prod {
	display: grid;
	grid-template-columns: minmax( 0, 600px ) minmax( 0, 1fr );
	gap: clamp( 48px, 7vw, 105px );
	align-items: start;
}

.cg-worklist-slider__body {
	margin-top: 30px;
	max-width: 500px;
}

.cg-worklist-slider__imgwrap {
	position: relative;
	margin-top: 26px;
	width: 100%;
	aspect-ratio: 640 / 334;
	overflow: hidden;
	border: var( --hairline ) solid var( --rule-on-dark );
}

.cg-worklist-slider__bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 5px;
	background: var( --accent );
	z-index: 2;
}

.cg-worklist-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity var( --fade-out ) var( --fade-ease );
}

.cg-worklist-slider__img.is-active {
	opacity: 1;
}

.cg-worklist-slider__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-top: 22px;
}

.cg-worklist-slider__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.cg-worklist-slider__list li {
	position: relative;
	padding: 15px 0 15px 30px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --cg-grey );
	cursor: pointer;
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-worklist-slider__list li:hover {
	color: var( --cg-cream );
}

.cg-worklist-slider__list li.is-active {
	color: var( --accent );
}

.cg-worklist-slider__list li.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 17px;
	height: var( --hairline );
	background: var( --accent );
}

.cg-worklist-slider__nav {
	display: flex;
	flex: none;
	margin-top: 4px;
}

.cg-worklist-slider__navbtn {
	width: 52px;
	height: 52px;
	border: var( --hairline ) solid var( --rule-on-dark );
	background: transparent;
	color: var( --cg-cream );
	font-family: var( --font-sans );
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var( --fade-out ) var( --fade-ease ), color var( --fade-out ) var( --fade-ease );
}

.cg-worklist-slider__navbtn:hover {
	background-color: var( --box-hover-ink );
	color: var( --accent );
}

.cg-worklist-slider__navbtn + .cg-worklist-slider__navbtn {
	border-left: 0;
}

.cg-worklist-slider__fbline {
	height: 0;
	border-top: var( --hairline ) solid var( --rule-on-dark );
	margin-top: 84px;
	margin-inline: calc( -1 * var( --pad-x ) );
}

.cg-worklist-slider__three {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
}

.cg-worklist-slider__tc {
	min-height: clamp( 260px, 20vw, 320px );
	padding: 40px clamp( 24px, 2.2vw, 40px ) 0;
	border-left: var( --hairline ) solid var( --rule-on-dark );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-worklist-slider__tc:first-child {
	border-left: 0;
	padding-left: 0;
}

.cg-worklist-slider__tc:last-child {
	padding-right: 0;
}

.cg-worklist-slider__tc:hover {
	background-color: var( --box-hover-ink );
}

.cg-worklist-slider__n {
	font-family: var( --font-condensed ); /* Tungsten Narrow Semibold, off Averta Bold (#304) */
	font-weight: 600;
	font-size: 15px;
	/* letter-spacing re-tuned for #304 (was 2.2px, tuned for Averta Bold's
	   wider digit advances). Tungsten Semibold's digits are much narrower
	   at this size (~2.8-4.9px advance vs Averta's), so the old 2.2px
	   became 45-78% of a digit's own width instead of the original
	   23-36% (adversarial review measurement) — the numerals read as
	   loose tick-marks rather than a label. Halved to restore roughly
	   the original proportion. */
	letter-spacing: 1.1px;
	color: var( --accent );
}

/* #408 — the three Tech & AI column headings are set in Noe Text Book.
   `Book` is a WEIGHT (350), declared in fonts.css as NoeText-Book.woff2 at
   font-weight 350 / font-style normal. There is no Book Italic face, so
   font-style has to drop from italic to normal as well — leaving it italic
   would make the browser synthesise a slant, which #408's AC rules out. */
.cg-worklist-slider__tctitle {
	margin: 18px 0 0;
	font-family: var( --font-serif );
	font-style: normal;
	font-weight: 350;
	font-size: clamp( 22px, 1.9vw, 28px );
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: var( --cg-cream );

	/*
	 * Reserve two lines. Noe Text 350 is ~11% wider than the Averta italic
	 * it replaced (319.1px -> 354.3px at 1440), and the middle column is
	 * structurally the narrowest — `:first-child` zeroes padding-left and
	 * `:last-child` zeroes padding-right, so only the middle pays both.
	 * The result was that "More output. More precision." wrapped to two
	 * lines while its neighbours stayed on one, dropping that column's body
	 * copy ~27px below the other two. Measured misaligned at 1920, 1728,
	 * 1680, 1300, 1280, 1152 and 1100 — a `1/2/1` line pattern every time.
	 *
	 * The three columns are independent grid items, so nothing aligns them:
	 * misalignment appears whenever the columns disagree on line count.
	 * Reserving two lines here makes them agree at every width, and keeps
	 * agreeing if the copy is edited.
	 *
	 * Deliberately NOT solved by shrinking the type. Dropping the cap to
	 * 23px also fixes it (measured, zero misalignment), but that is an 18%
	 * reduction to work around a wrap — and #408 asked for a typeface, not
	 * a smaller heading. 2.2em = 2 x line-height 1.1.
	 */
	min-height: 2.2em;
}

.cg-worklist-slider__tc p {
	margin: 16px 0 0;
	font-family: var( --font-body );
	font-size: 14px;
	line-height: 1.62;
	color: var( --cg-grey );
}

/* Production Budgets sits directly below the AI Production reel band
   (blocks/cg/reel.php with its `divider` option) with no colour change
   between them — a slightly reduced, fluid top padding replicates the
   reference's tighter top rhythm at narrow widths (reference:
   tech-ai.html `.sec{padding-top:clamp(64px,8vw,96px)}`). */
.cg-band.cg-worklist-slider {
	padding-top: clamp( 64px, 8vw, 96px );
}

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

	.cg-worklist-slider__three {
		grid-template-columns: 1fr;
	}

	/* 10px bottom, not 0 (#483) — see the matching note on
	   `.cg-hero__stripitem` (css/components/hero.css). Same defect, same
	   fix, both reported by the CD on 2026-09-03 (#480): stacked, the
	   item's bottom edge is where the next item's border-top paints, so a
	   zero bottom padding sat the copy on the divider. */
	.cg-worklist-slider__tc {
		min-height: 0;
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule-on-dark );
		padding: 32px 0 10px;
	}

	.cg-worklist-slider__tc:first-child {
		border-top: 0;
	}
}