/**
 * css/components/accordion.css — Website 2.0 shared component library (#122)
 *
 * Click-accordion ("Channel Orchestration" pattern) — one row open at a
 * time, `data-open="0|1"` toggled by JS (js/theme.js `initCgAccordion`),
 * CSS-border chevron (rotated box), max-height slide via inline style
 * set by JS (content height varies per row, so CSS alone can't animate
 * to `auto`). Full-bleed: divider lines run to the screen edge, row
 * content holds the frame. Reference: media.html `.channels`/`.chitem`/
 * `.chrow`/`.chdetail`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-accordion {
	margin-top: 80px;
	margin-inline: calc( -1 * var( --pad-x ) );
	border-top: var( --hairline ) solid var( --rule-strong );
}

.cg-accordion__item {
	border-bottom: var( --hairline ) solid var( --rule-strong );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-accordion__item:hover {
	background-color: var( --box-hover-cream );
}

.cg-accordion__row {
	display: grid;
	grid-template-columns: 120px 1fr auto 24px;
	align-items: center;
	gap: 40px;
	padding: 34px var( --pad-x );
	cursor: pointer;
	transition: padding-left 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cg-accordion__row:hover {
	padding-left: calc( var( --pad-x ) + 14px );
}

.cg-accordion__num {
	font-family: var( --font-condensed ); /* Tungsten Narrow Semibold, off Averta Bold (#304) */
	font-weight: 600;
	font-size: 20px;
	color: var( --accent );
}

.cg-accordion__title {
	font-family: var( --font-serif );
	font-weight: 300;
	font-size: clamp( 26px, 2.3vw, 36px );
	line-height: 1;
	letter-spacing: -0.6px;
	color: var( --cg-ink );
}

.cg-accordion__sub {
	margin-top: 8px;
	font-family: var( --font-sans );
	font-size: 16px;
	color: var( --cg-ink );
}

/* Metric pill — fixed 240x55 box so every row lines up. */
.cg-accordion__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	justify-self: end;
	width: var( --btn-min-width );
	height: var( --btn-height );
	background: var( --cg-ink );
	color: var( --cg-cream );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Chevron — points down, flips up when open. */
.cg-accordion__toggle {
	justify-self: end;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border-right: 1.5px solid var( --accent );
	border-bottom: 1.5px solid var( --accent );
	transform: rotate( 45deg );
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cg-accordion__item[data-open="1"] .cg-accordion__toggle {
	margin-top: 4px;
	transform: rotate( -135deg );
}

.cg-accordion__detail {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.55s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.4s ease;
}

.cg-accordion__item[data-open="1"] .cg-accordion__detail {
	opacity: 1;
}

.cg-accordion__detail-inner {
	max-width: none;
	padding: 0 calc( var( --pad-x ) + 24px ) 40px calc( var( --pad-x ) + 160px );
	font-family: var( --font-body );
	font-size: 17px;
	line-height: 1.62;
	color: var( --cg-ink-70 ); /* #402 — match the cream band's body copy, which is
	                              `.cg-body--ink70` (#3A3A36). Was --cg-muted
	                              (#6B6860), visibly lighter than the copy beside it. */
}

@media ( max-width: 680px ) {
	.cg-accordion__row {
		grid-template-columns: auto 1fr auto;
		gap: 14px 20px;
	}

	/* Column 2, NOT column 1. The stacked grid is `auto 1fr auto` =
	   number | title+sub | chevron, so `grid-column: 1 / -1` started the
	   pill at the row's own padding edge (x=24 measured at 390px) while
	   the title and sub it belongs to start after the number column
	   (x=57). The pill read as an orphan flush against the screen edge.
	   Column 2 lands it at 57px, aligned with the copy it labels.
	   CD, 2026-09-03.

	   `2 / -1` and `2 / 3` render identically here: when a pill exists the
	   chevron is pushed to a third implicit row, so nothing sizes track 3
	   and it measures 0px (`grid-template-columns: 12px 290px 0px` at
	   390). The end line is written `-1` for robustness if the row ever
	   gains a column, NOT because the pill gains any width from it.

	   `white-space` back to `normal` — the desktop rule sets `nowrap` for
	   a fixed 240x55 chip, which is right there and wrong here: the mobile
	   pill is auto-width in a 366px box (272px at 320), so `nowrap` makes
	   an over-long string overflow the row and clip silently instead of
	   wrapping. Real content is 19 characters and never wraps; this only
	   changes behaviour past the point where the old rule broke. */
	.cg-accordion__pill {
		grid-column: 2 / -1;
		justify-self: start;
		width: auto;
		height: auto;
		padding: 10px 16px;
		white-space: normal;
	}

	.cg-accordion__detail-inner {
		padding-left: calc( var( --pad-x ) + 40px );
		padding-right: var( --pad-x );
	}
}