/**
 * css/components/giant-word.css — Website 2.0 shared component library (#122)
 *
 * Giant condensed word ("What We Believe") + matched callout column.
 * Left: `.cg-believe__word` in --font-condensed (Tungsten Narrow, the
 * genuine licensed webfont — #301/#304; Bebas Neue is the fallback if it
 * fails to load — see tokens.css), line-height 0.9, with an italic serif
 * kicker below. Right: a flex column of
 * callouts with a top hairline each, distributing to match the word's
 * height. Reference: media.html `.believe`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-believe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 90px;
}

.cg-believe__eyebrow {
	margin: 0 0 var( --eyebrow-gap );
}

.cg-believe__word {
	margin: 0;
	font-family: var( --font-condensed );
	font-weight: 700;
	font-size: clamp( 64px, 10.5vw, 200px );
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase; /* designer request 2026-07-22 (#205): giant condensed word renders ALL CAPS, matching .cg-caps__word (giant-word.css:105) */
	color: var( --cg-cream );
}

.cg-believe__build {
	display: block;
	margin-top: 26px;
	font-family: var( --font-serif );
	font-style: italic;
	font-weight: 400;
	font-size: 35px;
	letter-spacing: -1px;
	color: var( --cg-ink );
}

.cg-believe__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cg-believe__pt {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 100px;
	margin: 18px 0; /* media.html `.pt` rendered rhythm (overrides the base <p> margin) */
	padding: 0;
	border-top: var( --hairline ) solid var( --rule-on-dark );
	font-family: var( --font-sans );
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var( --cg-cream );
}

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

.cg-believe__pt b {
	font-weight: 700;
}

.cg-believe__dash {
	flex: none;
}

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

/* --- "lists" variant (Approach Capabilities, cream band, #136) --------
   Reference: approach.html `.caps`/`.capsword`/`.caplists`. --------- */

.cg-caps__eyebrow {
	margin: 0 0 var( --eyebrow-gap );
}

/*
 * Sized to stay inside the content column. The word is `nowrap` display
 * type, so an over-large size does not wrap — it silently runs past the
 * content edge (the design's own 17vw/300px overflowed by up to 280px at
 * 1920 and 152px at 390). The multiplier below is the widest that keeps
 * "CAPABILITIES" within the gutters at every width; a materially longer
 * word would need re-checking, since CSS cannot measure rendered text.
 */
.cg-caps__word {
	margin: 0 0 clamp( 56px, 7vw, 96px );
	font-family: var( --font-condensed );
	font-weight: 700; /* CD asked for Bebas -> Tungsten Narrow Bold (#304); was 600 under Bebas's single-file 400-700 range where weight was a no-op */
	font-size: clamp( 44px, 15.5vw, 244px );
	line-height: 0.82;
	letter-spacing: -2px;
	text-transform: uppercase;
	color: var( --accent );
	white-space: nowrap; /* single-word giant display type never wraps, per approach.html `.capsword` */
}

/*
 * Two shared rows (title, then list) so the rules and bullet lists line up
 * across all three columns even when one heading wraps to two lines and the
 * others do not — otherwise column 1 sits 32px below its neighbours and the
 * grid visibly breaks. Row gap is zero because the title's own margin and the
 * list's padding already own that space.
 */
.cg-caplists {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	grid-template-rows: auto auto;
	column-gap: clamp( 40px, 5vw, 90px );
	row-gap: 0;
}

.cg-caplist {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

.cg-caplist__title {
	margin: 0 0 26px;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: clamp( 26px, 2vw, 30px );
	line-height: 1.1;
	letter-spacing: -0.6px;
	color: var( --cg-ink );
}

.cg-caplist__list {
	margin: 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: var( --hairline ) solid var( --cg-border );
}

.cg-caplist__list li {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 22px;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.5;
	color: var( --cg-muted );
}

.cg-caplist__list li:last-child {
	margin-bottom: 0;
}

.cg-caplist__list li::before {
	content: "\2022";
	position: absolute;
	top: 0;
	left: 0;
	color: var( --accent );
}

@media ( max-width: 1024px ) {
	.cg-caplists {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 48px;
	}

	/* Single column — nothing to align across, so drop back to normal flow. */
	.cg-caplist {
		display: block;
		grid-row: auto;
	}
}