/* ===================================================================
 * single-recording.css — Linnea surface pass 2026-05-05
 * Surface for the Single Recording template. Composes existing tokens;
 * no raw hex, no !important, no new variations beyond the mono font
 * family registered in theme.json.
 * Sections mirror the spec in Linnea_single_recording_surface_spec.md.
 * Loads after tokens.css, buttons.css, eyebrow.css.
 * =================================================================== */

/* ─── §3.3 Header ─────────────────────────────────────────────────── */

/* Pattern A convention rules migrated to universal `.tec-band` per Phase 2 of band refactor 2026-05-06. */

/* PM-10 (2026-05-05): vertical padding tightened to spacing-50
 * (≈2rem at desktop, clamp(1.5rem, 3vw, 2rem)). The 360px cover already
 * carries the hero's visual weight; the prior 5rem (7.5rem md+) padding
 * made the band feel inflated. The universal `.tec-band` default is
 * already spacing-50, so this rule is a no-op in the current state, but
 * is retained as an explicit per-class guarantee should the universal
 * default ever shift heavier. Specificity [0,1,0] equal to universal;
 * source order (this file loads after bands.css) wins. */
.tec-recording-header {
	padding-block: var(--wp--preset--spacing--50);
}

.tec-recording-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Mobile-only stack-order override (Alfonso 2026-05-07): the PHP source
 * order was swapped to put __meta before __cover so the desktop horizontal
 * order reads title-left / cover-right. On mobile (column layout) we keep
 * the pre-swap visual order — cover above meta — because cover-as-hero
 * carries the recognition cue on small screens. Scoped strictly under the
 * column-layout breakpoint; at min-width:767px the flex direction is row
 * and `order` does not apply (rule is outside the row media query). */
@media (max-width: 766px) {
	.tec-recording-header__cover { order: 1; }
	.tec-recording-header__meta  { order: 2; }
}

@media (min-width: 767px) {
	.tec-recording-header__inner {
		flex-direction: row;
		align-items: flex-start; /* top-aligned per §3.3 Option B */
		gap: var(--wp--preset--spacing--50);
	}
	.tec-recording-header__cover {
		flex: 0 0 40%;
	}
	.tec-recording-header__meta {
		flex: 1 1 auto;
		min-width: 0; /* prevents h1 from forcing overflow */
	}
}

@media (min-width: 979px) {
	.tec-recording-header__cover {
		flex: 0 0 360px;
	}
}

.tec-recording-header__cover img,
.tec-recording-header__cover-fallback {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: block;
	object-fit: cover; /* image only; fallback is plain div */
}

/* ─── §3.4 Cover fallback typography ──────────────────────────────── */

.tec-recording-header__cover-fallback,
.tec-recording-related__cover--fallback {
	background-color: var(--wp--preset--color--surface-low);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans-body);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-low-emphasis);
	text-align: center;
	padding: var(--wp--preset--spacing--30);
}

.tec-recording-header__cover-fallback {
	font-size: var(--wp--preset--font-size--large);
}
@media (min-width: 767px) {
	.tec-recording-header__cover-fallback {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

.tec-recording-related__cover--fallback {
	font-size: var(--wp--preset--font-size--medium); /* smaller — card scale */
}

/* ─── §3.2 Spotify embed chrome ───────────────────────────────────── */

.tec-recording-spotify__inner iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ─── §3.1 Listen vs Buy ──────────────────────────────────────────── */

/* Spacing between the heading (eyebrow) and the button row inside each
 * band. Linnea PM-2 §B: spacing-30 (tighter than the original --40). */
.tec-recording-streaming__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
}
/* Inter-band margin retained for the legacy non-row layout (in case a
 * caller renders Listen+Buy outside .tec-recording-streaming-row).
 * Inside the row wrapper, this is overridden to 0 below. */
.tec-recording-streaming--listen + .tec-recording-streaming--buy {
	margin-top: var(--wp--preset--spacing--50);
}

/* Listen-band buttons: tertiary (yellow stroke, near-black text).
 * Holt currently emits is-style-tec-outline; this rule applies the
 * tertiary surface treatment without changing markup. The block-style
 * variation hook is preferred long-term — see hand-back §9. */
.tec-recording-streaming--listen .tec-recording-streaming__btn .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--near-black);
	border-color: var(--wp--preset--color--accent-yellow);
}
.tec-recording-streaming--listen .tec-recording-streaming__btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--accent-yellow);
}
/* Buy band keeps Holt's existing is-style-tec-outline rendering — no
 * override needed; near-black stroke + near-black text is correct per
 * §3.1 Option B recommendation. */

/* ─── §3.5 Related-band card ──────────────────────────────────────── */

.tec-recording-related__card {
	list-style: none;
}
.tec-recording-related__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	color: inherit;
	text-decoration: none;
}
.tec-recording-related__cover img,
.tec-recording-related__cover {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: block;
	object-fit: cover;
}
.tec-recording-related__title {
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--near-black);
	transition: color 0.18s ease;
}
.tec-recording-related__link:hover .tec-recording-related__title,
.tec-recording-related__link:focus-visible .tec-recording-related__title {
	color: var(--wp--preset--color--accent-yellow);
}

/* ─── §3.6 Featured-in stacked list ───────────────────────────────── */

.tec-recording-featured-in__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--ink-divider);
	color: inherit;
	text-decoration: none;
}
.tec-recording-featured-in__card:last-child {
	border-bottom: 0;
}
@media (min-width: 767px) {
	.tec-recording-featured-in__card {
		flex-direction: row;
		gap: var(--wp--preset--spacing--40);
		align-items: baseline;
	}
	.tec-recording-featured-in__date {
		flex: 0 0 8em;
	}
	.tec-recording-featured-in__body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.tec-recording-featured-in__date {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-low-emphasis);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tec-recording-featured-in__title {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--near-black);
	margin: 0;
	transition: color 0.18s ease;
}
.tec-recording-featured-in__card:hover .tec-recording-featured-in__title,
.tec-recording-featured-in__card:focus-visible .tec-recording-featured-in__title {
	color: var(--wp--preset--color--accent-yellow);
}
.tec-recording-featured-in__lede {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-low-emphasis);
	line-height: 1.5;
	margin: 4px 0 0;
}

/* §3.7 Cast group divider — REMOVED 2026-05-05 PM-2 (Linnea respec).
 * The card-grid variant has no divider rows; rule retired per the
 * standing rule against dead CSS (Alfonso 2026-05-01). */

/* ─── §A Header navy band overrides (Linnea PM-2) ─────────────────── */
/* Scoped to the navy-band variant of the recording header. White text
 * on navy; eyebrow inverts from ink-low-emphasis to white. */

.tec-band--navy .tec-recording-header__inner,
.tec-band--navy .tec-recording-header__meta {
	color: var(--wp--preset--color--white);
}
.tec-band--navy .tec-recording-header .tec-eyebrow,
.tec-band--navy .tec-recording-header .tec-eyebrow--header,
.tec-band--navy.tec-recording-header .tec-eyebrow,
.tec-band--navy.tec-recording-header .tec-eyebrow--header {
	color: var(--wp--preset--color--white);
}
.tec-band--navy .tec-recording-header__title,
.tec-band--navy.tec-recording-header .tec-recording-header__title {
	color: var(--wp--preset--color--white);
}
.tec-band--navy .tec-recording-header__performers,
.tec-band--navy .tec-recording-header__metaline,
.tec-band--navy.tec-recording-header .tec-recording-header__metaline {
	color: var(--wp--preset--color--white);
}
/* The cover fallback inside the navy band keeps its surface-low
 * background and ink-low-emphasis cat# — no recolour. The pale tile
 * sits cleanly on navy. */

/* PM-10 (2026-05-05): md+ override removed. Previously 7.5rem each side
 * at md+; per the PM-10 brief, header padding normalised to spacing-50
 * across all breakpoints (≈2rem at desktop). The cover-as-hero stance
 * means desktop doesn't need a heavier band than mobile. */

/* ─── §B Listen/Buy compact two-column (Linnea PM-2) ──────────────── */
/* Supersedes §3.1's stacked layout. The two streaming sections become
 * columns of a flex row at md+; stack on mobile. */

/* PM-6 (2026-05-05) Option A: outer .tec-recording-streaming-row is now
 * a pure band wrapper (no properties of its own — band treatment via the
 * shared `.tec-recording-body > section, > .tec-recording-streaming-row`
 * rule in style.css). Inner __inner carries content cap + flex layout,
 * mirroring the section/__inner pattern. PM-5's flex/padding-block on
 * the row outer is moved here; column rules retargeted from row-children
 * to inner-children. The :only-child rule still drives single-cluster
 * expansion when Buy is suppressed. */
/* PM-7 (2026-05-05): width cap (max-width / margin-inline / padding-inline:0)
 * removed — provided by the generic `.tec-recording-body > * > *` rule
 * below. Layout (flex/gap) stays named here.
 * PM-9 (2026-05-05): padding-block dropped — Spotify→streaming-row reads as
 * one continuous audition zone; vertical spacing comes from Spotify's 16px
 * symmetric padding-block (PM-8) only. */
.tec-recording-streaming-row__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 767px) {
	.tec-recording-streaming-row__inner {
		flex-direction: row;
		gap: var(--wp--preset--spacing--50);
		align-items: flex-start;
	}
	/* Clusters auto-size to content rather than splitting 50/50, so
	 * Listen + Buy read as a tight utility pair instead of two columns
	 * of dead space. (PM-5 Option B, retargeted to __inner per PM-6.) */
	.tec-recording-streaming-row__inner > .tec-recording-streaming {
		flex: 0 1 auto;
	}
	/* When only one cluster is present (e.g. Buy suppressed), expand
	 * to fill the row so it left-anchors against the gutter rather
	 * than collapsing to its content width and floating mid-row. */
	.tec-recording-streaming-row__inner > .tec-recording-streaming:only-child {
		flex: 1 1 auto;
	}
}

/* Inter-band margin from §3.1 superseded — the row gap owns spacing now.
 * Selector retargeted to __inner per PM-6 (siblings now live inside it). */
.tec-recording-streaming-row__inner .tec-recording-streaming--listen + .tec-recording-streaming--buy {
	margin-top: 0;
}

/* ─── §C Pattern A convention removed ─────────────────────────────── */
/* Pattern A convention rules migrated to universal `.tec-band` per Phase 2 of band refactor 2026-05-06.
 * Each band on this template now opts into chrome via `tec-band` + surface +
 * (optional) `tec-band--editorial-sheet` modifiers; description's inner
 * carries `tec-band-inner--prose` for the 680px prose tier. */

/* ─── §D Audition flow override (PM-8, 2026-05-05) ─────────────────── */
/* Spotify + Listen/Buy streaming-row read as one continuous editorial
 * "audition" zone, not two separate bands. Suppress the universal rule's
 * hairline (these bands deliberately do NOT carry `tec-band--editorial-sheet`)
 * and override vertical rhythm so spotify→streaming-row reads tight.
 * Phase 2 (2026-05-06): selectors re-scoped from `.tec-recording-body >`
 * descendants to per-class form. Specificity [0,1,0] equal to universal;
 * source order (this file loads after bands.css) wins.
 * PM-10 (2026-05-05): asymmetric longhands. Above the Spotify embed sits
 * the heavy navy header — needs a visible transition (≈32px, spacing-50).
 * Below sits the continuous Listen/Buy audition zone — sits tight (≈16px,
 * spacing-30). Shorthand `padding-block` intentionally NOT kept alongside
 * longhands; it would clobber one of them. */
.tec-recording-spotify {
	border-top: 0;
	padding-top: var(--wp--preset--spacing--50);    /* ≈32px desktop (clamp 1.5–2rem) */
	padding-bottom: var(--wp--preset--spacing--30); /* ≈16px desktop (clamp 0.75–1rem) */
}

.tec-recording-streaming-row {
	border-top: 0;
	padding-top: 0;
}

/* ─── §FromThisAlbum band (Holt 2026-05-07) ────────────────────────── */
/* "From this album" — reverse query of recording_feature videos pointing
 * at this Recording. Sits between Cast and Related. Single-video case
 * renders a 60/40 leader; 2+ render as a card grid. Wystan IA proposal
 * 2026-05-07 §3.3. CSS deliberately minimal — card chrome inherits from
 * `is-style-tec-card`; grid columns from the canonical card-grid rules.
 */
.tec-recording-from-album__heading {
	margin-block-end: var(--wp--preset--spacing--30);
}
.tec-recording-from-album__lede {
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--40);
	max-width: 60ch;
	color: var(--wp--preset--color--charcoal);
}
.tec-recording-from-album__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (min-width: 1024px) {
	.tec-recording-from-album__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.tec-recording-from-album__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tec-recording-from-album__card .tec-video-card__hero-frame {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.tec-recording-from-album__card .tec-video-card__hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Single-video leader (60/40 on desktop, stacked below md) */
.tec-recording-from-album--leader .tec-recording-from-album__leader {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.tec-recording-from-album--leader .tec-recording-from-album__leader {
		grid-template-columns: 60% 40%;
		align-items: center;
	}
}
.tec-recording-from-album__leader-poster {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.tec-recording-from-album__leader-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tec-recording-from-album__leader-title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}
.tec-recording-from-album__leader-title a {
	color: inherit;
	text-decoration: none;
}
.tec-recording-from-album__leader-title a:hover,
.tec-recording-from-album__leader-title a:focus-visible {
	text-decoration: underline;
}
.tec-recording-from-album__leader-billing {
	margin: 0;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}