/* ===================================================================
 * bands.css — Universal band convention
 * Loads site-wide. Consumed by every single-* template, every
 * shared partial, every "alignfull section" pattern that wants
 * canonical band chrome.
 *
 * Two responsibilities, two classes, two DOM levels:
 *   .tec-band         → outer, alignfull. Owns the fluid edge gutter,
 *                       the default vertical rhythm, and (optionally)
 *                       the hairline between adjacent same-surface
 *                       bands. Also owns surface modifiers.
 *   .tec-band-inner   → direct child of .tec-band. Owns the content
 *                       cap (max-width + auto margins). NO padding —
 *                       the gutter is on the outer.
 *
 * Editorial overrides (PM-8 audition, PM-10 recording-header,
 * PM-14 single-event hairlines) sit at component level on top of
 * this rule. Component CSS may override padding-block, suppress
 * border-top, or modulate the surface — the universal rule is
 * never mutated, only locally beaten.
 *
 * Load order: AFTER tokens.css (which seeds the .tec-band /
 * .tec-band-inner primitives), BEFORE every per-template stylesheet
 * (single-recording.css, etc.) so per-class component overrides
 * win cleanly on cascade tiebreak.
 * =================================================================== */

/* === Base outer === */
.tec-band {
	padding-inline: var(--tec-gutter);
	padding-block: var(--wp--preset--spacing--50);  /* ≈32px desktop, clamp 1.5–2rem */
	/* No background, no border by default — surface comes from
	   the modifier (or from a Gutenberg backgroundColor attr on
	   the same element, which composes cleanly). */
}

/* === Base inner === */
.tec-band-inner {
	max-width: var(--tec-width-content);   /* 1200px content tier */
	margin-inline: auto;
	/* No padding-inline. Ever. The gutter is on .tec-band. */
}

/* === Inner tier modifiers === */
.tec-band-inner--prose { max-width: var(--tec-width-prose); }   /* 680px */
.tec-band-inner--wide  { max-width: var(--tec-width-wide); }    /* legacy alias of content; retire in a follow-on. */

/* Neutralise trailing margin on the inner's last child so the band's
 * padding-block is the single source of truth for the bottom gap. */
.tec-band-inner > :last-child { margin-bottom: 0; }

/* === Surface modifiers ===
 * Compose the band's painted surface + sensible defaults for text
 * colour. The universal rule keeps text in its natural cascade by
 * default; the modifier inverts where the surface demands it.
 *
 * Modifier authoring rule: surface modifiers ONLY paint and set
 * default text colour. They do NOT change padding, max-width, or
 * any chrome the universal rule already covers. */
.tec-band--white      { background: var(--wp--preset--color--white); }
.tec-band--light-blue { background: var(--wp--preset--color--light-blue); }
.tec-band--surface-low{ background: var(--wp--preset--color--surface-low); }

.tec-band--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.tec-band--navy :where(h1, h2, h3, h4, h5, h6, p, a:not(.wp-block-button__link), li),
.tec-band--navy :where(a:not(.wp-block-button__link)):hover,
.tec-band--navy :where(a:not(.wp-block-button__link)):focus {
	color: inherit;
}

.tec-band--near-black {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--white);
}
.tec-band--near-black :where(h1, h2, h3, h4, h5, h6, p, a:not(.wp-block-button__link), li),
.tec-band--near-black :where(a:not(.wp-block-button__link)):hover,
.tec-band--near-black :where(a:not(.wp-block-button__link)):focus {
	color: inherit;
}

/* === Hairline (default OFF) ===
 * The convention does NOT ship a default border-top on every band.
 * Hairlines are an editorial decision per same-surface continuous
 * stack (e.g. recording editorial sheet: description → tracklist
 * → cast → related → featured-in all same surface, hairlines bind
 * them as one "sheet"). Surface changes (white → light-blue) do
 * not need a hairline — the surface change is itself the divider.
 *
 * Components opt IN to the hairline via a per-class override. The
 * universal `--editorial-sheet` modifier is provided for the most
 * common case (continuous same-surface stack). */
.tec-band--editorial-sheet {
	border-top: 1px solid var(--wp--preset--color--ink-divider);
}
.tec-band--editorial-sheet:first-of-type,
.tec-band--editorial-sheet--first {
	border-top: 0;  /* first band of an editorial sheet has no top divider */
}

/* === Cover bands ===
 * wp:cover-based bands paint the alignfull edge themselves; the
 * gutter must NOT inset the painted surface. The cover's own
 * inner-container takes the gutter instead, so .tec-band-inner
 * inside the inner-container still composes cleanly. */
.wp-block-cover.tec-band {
	padding-inline: 0;
}
.wp-block-cover.tec-band > .wp-block-cover__inner-container {
	padding-inline: var(--tec-gutter);
}

/* === Vertical-rhythm modifier ===
 * Per-band padding-block overrides live in component CSS (style.css /
 * single-*.css), loaded after this file, and beat the universal default
 * via source order at equal specificity. The previous block-style
 * variation `is-style-tec-band` was retired 2026-05-06 (Linnea). */