/**
 * css/components/band.css — Website 2.0 shared component library (#122)
 *
 * Section band: full-bleed colour (cream/ink/rust) with the 96px vertical
 * rhythm (--section-pad) and the centered 1314 content frame produced by
 * the responsive gutter (--pad-x). Reference: docs/Common Good website
 * 2.0/ui_kits/website/media.html `.sec` / `.sec.dark` / `.sec.rust`.
 *
 * Every downstream component (split, stats, cardbox, marquee, accordion…)
 * either lives inside a `.cg-band` or supplies its own full-bleed rhythm.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-band {
	width: 100%;
	padding-block: var( --section-pad );
	padding-inline: var( --pad-x );
	background: var( --surface );
	color: var( --text );
}

.cg-band--cream {
	background: var( --surface );
	color: var( --text );
}

.cg-band--ink {
	background: var( --surface-dark );
	color: var( --cg-cream );
}

.cg-band--rust {
	background: var( --accent );
	color: var( --cg-cream );
}

/* Used when the next element in the band already supplies its own
   full-bleed top rhythm (e.g. a marquee immediately follows) — see
   media.html "Audience Orchestration" `.sec.dark{padding-bottom:0}`. */
.cg-band--flush-bottom {
	padding-bottom: 0;
}

/* Used when the band's own children carry the vertical rhythm themselves
   (Approach Four Stages — each `.cg-stagecell` owns its own top/bottom
   padding; the band keeps its normal --pad-x inline gutter so the inner
   full-bleed grid has something to cancel via negative margin-inline).
   Reference: approach.html `.sec.rust{padding-block:0}`. */
.cg-band--flush-block {
	padding-block: 0;
}

/* Used when the band's own children apply their own horizontal padding
   (Services "Trusted By" marquee, #125 — `.cg-marquee__head` pads itself,
   letting a full-bleed track sit flush inside the same band). Reference:
   services.html `.trusted{padding:96px 0}` (no horizontal padding). */
.cg-band--flush-inline {
	padding-inline: 0;
}