/*
 * Single Video — surface CSS.
 *
 * Loaded conditionally on is_singular('video') via the existing
 * wp_enqueue_scripts callback in functions.php (sibling to the
 * tec-single-video JS enqueue Holt added).
 *
 * Composes existing theme.json tokens; no new tokens; does not
 * mutate the universal bands.css rule. Video renders at full
 * content width with the excerpts band as a chip strip below
 * (PM-2 pivot: video at centre, side-panel grid removed).
 *
 * Author: Linnea, 2026-05-06. PM-2 rework: Holt, 2026-05-06.
 */


/* ─────────────────────────────────────────────────────────────
   1. Installment-nav row (Holt 2026-05-07) — replaces the retired
      navy "production sibling strip". Inline button row sits
      immediately below the video iframe, INSIDE the video band's
      `tec-band-inner` (not its own band — the row is a viewing-mode
      control, not editorial content). Buttons themselves come from
      buttons.css (.is-style-tec-primary for the active span,
      .is-style-tec-outline for the anchors); this rule only carries
      row position and layout.

      Rhythm contract:
      • Top gap (iframe → row): `--spacing--30` margin only. The row
        sits inside the video's `tec-band-inner`, so there is NO
        outer band-padding stack above it.
      • Bottom gap (row → titleblock): inherited from the video
        band's `padding-block` (~`--spacing--50`) + the titleblock
        band's `padding-block` top — comfortable, unchanged.
   ───────────────────────────────────────────────────────────── */

.tec-video-installment-nav {
    margin-block-start: var(--wp--preset--spacing--30);
}

.tec-video-installment-nav__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
    margin: 0;
}

/* Mobile (≤766px): buttons.css already stretches .wp-block-buttons children
 * to 100%. Inside the installment row we want the buttons to share the row,
 * not stack full-width — override to auto-width within this scope. */
@media (max-width: 766px) {
    .tec-video-installment-nav__buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .tec-video-installment-nav__buttons .wp-block-button {
        flex: 0 0 auto;
        width: auto;
    }
    .tec-video-installment-nav__buttons .wp-block-button > .wp-block-button__link {
        width: auto;
    }
}


/* ─────────────────────────────────────────────────────────────
   2. Hero embed — 16:9 responsive frame
   ───────────────────────────────────────────────────────────── */

.tec-video-embed__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--wp--preset--color--near-black);
    overflow: hidden;
}

.tec-video-embed__frame > :where(iframe, .wp-block-embed, .wp-block-embed__wrapper) {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}


/* ─────────────────────────────────────────────────────────────
   3. Title block — typography hierarchy
   ───────────────────────────────────────────────────────────── */

.tec-video-titleblock__inner > * + * {
    margin-block-start: var(--wp--preset--spacing--20);
}

.tec-video-titleblock__eyebrow {
    color: var(--wp--preset--color--accent);
    margin-block-end: var(--wp--preset--spacing--30);
}

.tec-video-titleblock__title {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink-primary);
    margin: 0;
}

.tec-video-titleblock__subtitle {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-style: italic;
    font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
    color: var(--wp--preset--color--ink-secondary);
    margin-block-start: var(--wp--preset--spacing--20);
}

.tec-video-titleblock__billing {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--ink-primary);
    margin-block-start: var(--wp--preset--spacing--40);
    max-width: 60ch;
}

.tec-video-titleblock__filmed {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--ink-secondary);
    margin-block-start: var(--wp--preset--spacing--20);
}


/* ─────────────────────────────────────────────────────────────
   4. Excerpts band — heading, list, button states
   ───────────────────────────────────────────────────────────── */

.tec-video-excerpts__heading {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-size: var(--wp--preset--font-size--large);
    margin-block-end: var(--wp--preset--spacing--30);
}

.tec-video-excerpts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
}

.tec-video-excerpts__item {
    flex: 0 1 auto;
}

/* Mirrors .is-style-tec-outline button chrome (buttons.css) — transparent
 * background with near-black 1px border and label, near-black fill on hover
 * with white label. Multi-line content (mono time + serif label + optional
 * description) is preserved here because the outline button's
 * white-space:nowrap doesn't fit a chip with stacked metadata. The mono
 * timestamp typeface stays per Alfonso 2026-05-06. */
.tec-video-excerpts__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--wp--preset--spacing--20);
    row-gap: var(--wp--preset--spacing--10);
    text-align: start;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--near-black);
    border-radius: 4.9px; /* match canonical button radius */
    color: var(--wp--preset--color--near-black);
    cursor: pointer;
    font-family: var(--wp--preset--font-family--sans-body);
    font-size: var(--wp--preset--font-size--medium);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.tec-video-excerpts__button:hover {
    background-color: var(--wp--preset--color--near-black);
    color: var(--wp--preset--color--white);
}

.tec-video-excerpts__button:focus-visible {
    outline: 2px solid var(--wp--preset--color--near-black);
    outline-offset: 2px;
}

.tec-video-excerpts__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--wp--preset--font-size--small);
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    color: inherit;
    min-width: 4ch;
}

.tec-video-excerpts__label {
    font-family: var(--wp--preset--font-family--sans-body);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.3;
    color: inherit;
    font-weight: 800;
}

.tec-video-excerpts__description {
    flex-basis: 100%;
    display: block;
    font-size: var(--wp--preset--font-size--small);
    color: inherit;
    opacity: 0.78;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .tec-video-excerpts__description {
        display: none;
    }
}

/* v1.1 marker — active-excerpt highlight via aria-current="true". */
.tec-video-excerpts__button[aria-current="true"] {
    background: color-mix(in oklab, var(--wp--preset--color--accent) 12%, transparent);
    border-color: var(--wp--preset--color--accent);
}


/* ─────────────────────────────────────────────────────────────
   5. Programme notes — long-form typography
   ───────────────────────────────────────────────────────────── */

.tec-video-programme-notes__heading {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-size: var(--wp--preset--font-size--large);
    margin-block-end: var(--wp--preset--spacing--40);
}

.tec-video-programme-notes__body {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.65;
    color: var(--wp--preset--color--ink-primary);
}

.tec-video-programme-notes__body > * + * {
    margin-block-start: var(--wp--preset--spacing--30);
}

.tec-video-programme-notes__body :where(h3) {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-size: 1.375rem;
    margin-block-start: var(--wp--preset--spacing--50);
    margin-block-end: var(--wp--preset--spacing--20);
    line-height: 1.2;
}

.tec-video-programme-notes__body :where(h4) {
    font-family: var(--wp--preset--font-family--serif-heading);
    font-size: var(--wp--preset--font-size--medium);
    margin-block-start: var(--wp--preset--spacing--40);
    margin-block-end: var(--wp--preset--spacing--10);
}

.tec-video-programme-notes__body :where(blockquote) {
    border-inline-start: 3px solid var(--wp--preset--color--accent);
    padding-inline-start: var(--wp--preset--spacing--30);
    margin-inline: 0;
    font-style: italic;
    color: var(--wp--preset--color--ink-primary);
}

.tec-video-programme-notes__body :where(ul, ol) {
    padding-inline-start: 1.25em;
}



/* ─── §FromTheAlbum (Holt 2026-05-07) ───────────────────────────────── */
/* Quiet in-flow line on Single Video pages where `recording` is set.
 * NOT banner chrome — same register discipline as the installment-buttons
 * decision (no navy banner). Sits below filmed-at, picks up the same
 * small/charcoal register as billing. Wystan IA proposal §3.5. */
.tec-video-titleblock__from-album {
	margin-block-start: 0.25rem;
	margin-block-end: 0;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}
.tec-video-titleblock__from-album-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.tec-video-titleblock__from-album-link:hover,
.tec-video-titleblock__from-album-link:focus-visible {
	text-decoration-thickness: 0.12em;
}