/**
 * Video templates — feature (full-width landscape) layout.
 */

/* ── Hero ────────────────────────────────────────────────────── */

.vd-vid--feature .vid-feature-hero {
  padding-top: clamp(150px, 13vw, 190px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.vd-vid--feature .vid-feature-hero__copy {
  max-width: 1000px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.vd-vid--feature .vid-feature-hero__copy h1 {
  margin-bottom: 20px;
}

.vd-vid--feature .vid-feature-hero__intro {
  margin-bottom: 26px;
  color: var(--vid-dim);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.7;
}

.vd-vid--feature .vid-feature-hero__intro p:last-child {
  margin-bottom: 0;
}

/* The player runs the full width of the container — the point of this layout. */
.vd-vid--feature .vid-feature-hero__stage {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(24px, 8.93vw, 50px);
}

.vd-vid--feature .vid-feature-hero__stage .vid-player {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* ── Body: content + sticky aside ────────────────────────────── */

.vd-vid--feature .vid-feature-body {
  padding-block: clamp(56px, 6vw, 88px);
  background: var(--ht-white);
}

.vd-vid--feature .vid-feature-body__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.vd-vid--feature .vid-feature-body__main > * + * {
  margin-top: clamp(36px, 4vw, 56px);
}

.vd-vid--feature .vid-feature-body__aside {
  position: sticky;
  /* Clears the fixed site header (assets/css/global-header.css). */
  top: calc(var(--vdh-height, 116px) + 32px);
  display: grid;
  gap: 24px;
}

/* ── Chapters ────────────────────────────────────────────────── */

.vd-vid--feature .vid-chapterlist__head {
  margin-bottom: 14px;
}

/*
 * This is the section head of the main column, so it takes the design's h2 —
 * Sofia Pro 700, 30/44, --ht-brown, all inherited from .vd-ht h2. Its old
 * 1.5rem cap left it *smaller* than .vid-prose h2 (which clamps to 30px) a few
 * hundred pixels further down the same column, so the sub-heads out-shouted the
 * section they sat under. The 44px line-height already carries ~7px of leading
 * below the text, hence the smaller margin on __head above.
 */
.vd-vid--feature .vid-chapterlist__heading {
  margin: 0;
  font-size: var(--ht-fs-h2);
  line-height: var(--ht-lh-h2);
}

/* --ht-text at 0.7 opacity resolved to a cool #4D4D4D once --ht-text became
   pure black. Secondary copy in this palette is the warm --ht-muted. */
.vd-vid--feature .vid-chapterlist__hint {
  margin: 4px 0 0;
  color: var(--ht-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/*
 * When a video has no chapters, layout-feature.php falls back to the highlights
 * grid and *its* h2 becomes the main column's section head instead. Same role,
 * so the same h2 scale — without this the only feature page that exists today
 * keeps a 21.6px section head sitting above .vid-prose h2 at 30px. Scoped to
 * the main column so the aside card head and the short layout are untouched.
 */
.vd-vid--feature .vid-feature-body__main > .vid-highlights .vid-highlights__heading {
  margin-bottom: 14px;
  font-size: var(--ht-fs-h2);
  line-height: var(--ht-lh-h2);
}

.vd-vid--feature .vid-chapterlist__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Was rgba(26, 26, 26, …) — a cool grey that exists nowhere in the palette.
     --vid-rule (video/base.css) is the warm --ht-brown hairline the transcript
     panel further down this page already uses. The fallback is that token's own
     value: an undefined custom property in a border shorthand drops the border
     entirely, and this file does not own the file that defines it. */
  border-top: 1px solid var(--vid-rule, rgba(75, 61, 42, 0.24));
}

.vd-vid--feature .vid-chapterlist__item {
  border-bottom: 1px solid var(--vid-rule, rgba(75, 61, 42, 0.24));
}

.vd-vid--feature .vid-chapterlist__row {
  display: flex;
  width: 100%;
  gap: 18px;
  align-items: center;
  padding: 18px 16px 18px 0;
  border: 0;
  border-left: 3px solid transparent;
  padding-left: 17px;
  background: transparent;
  color: var(--ht-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}

.vd-vid--feature .vid-chapterlist__row:hover,
.vd-vid--feature .vid-chapterlist__row:focus-visible {
  border-left-color: var(--ht-gold);
  background: var(--ht-ivory);
}

/* --ht-gold is 2.7:1 on --ht-white — under the 3:1 a focus indicator needs.
   --ht-gold-deep is the palette's own answer to that and reads at 4.4:1. */
.vd-vid--feature .vid-chapterlist__row:focus-visible {
  outline: 2px solid var(--ht-gold-deep);
  outline-offset: -2px;
}

/* 800 has no face in assets/fonts/font.css, so it was resolving up to Black
   900. Gold at 13px on white is 2.7:1; the deep gold is the token meant for
   small text. */
.vd-vid--feature .vid-chapterlist__index {
  flex: 0 0 auto;
  min-width: 26px;
  color: var(--ht-gold-deep);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 1px;
}

.vd-vid--feature .vid-chapterlist__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}

/* A row title is the h3 role, and the design's h3 is Sofia Pro 600 at 18/24.
   It was 800, i.e. Black 900 — heavier than any real heading on the page. */
.vd-vid--feature .vid-chapterlist__label {
  font-size: var(--ht-fs-sub);
  font-weight: 600;
  line-height: var(--ht-lh-sub);
}

/* --ht-gold-deep is 4.4:1 on --ht-white but only 3.9:1 on the --ht-ivory that
   the hover and aria-current rows paint underneath, so a 14px timestamp in it
   fails AA in exactly the state a reader is looking at it. --ht-muted holds
   9.5:1 on both grounds; the gold stays on the index and the play cue. */
.vd-vid--feature .vid-chapterlist__time {
  color: var(--ht-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Play cue: quiet until the row is hovered, focused, or playing. --ht-muted is
   lighter than the black this used, so the opacity comes up to compensate and
   the cue stays as visible as it was. */
.vd-vid--feature .vid-chapterlist__cue {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--vid-rule, rgba(75, 61, 42, 0.24));
  border-radius: 50%;
  color: var(--ht-muted);
  opacity: 0.55;
  place-items: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.vd-vid--feature .vid-chapterlist__cue svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

/*
 * Dark glyph on gold, not white on gold. Everything else that fills itself with
 * --ht-gold puts a dark mark on it — .ht-btn uses --ht-text, .vid-player__play
 * uses --ht-dark — and white on --ht-gold is 2.7:1 where dark is 7.8:1.
 */
.vd-vid--feature .vid-chapterlist__row:hover .vid-chapterlist__cue,
.vd-vid--feature .vid-chapterlist__row:focus-visible .vid-chapterlist__cue {
  border-color: var(--ht-gold);
  background: var(--ht-gold);
  color: var(--ht-dark);
  opacity: 1;
}

/* Currently seeked-to chapter, set by assets/js/video/base.js. */
.vd-vid--feature .vid-chapterlist__row[aria-current='true'] {
  border-left-color: var(--ht-gold);
  background: var(--ht-ivory);
}

.vd-vid--feature .vid-chapterlist__row[aria-current='true'] .vid-chapterlist__cue {
  border-color: var(--ht-gold);
  background: var(--ht-gold);
  color: var(--ht-dark);
  opacity: 1;
}

@media (max-width: 640px) {
  .vd-vid--feature .vid-chapterlist__row {
    gap: 14px;
    padding-right: 8px;
  }

  .vd-vid--feature .vid-chapterlist__cue {
    width: 30px;
    height: 30px;
  }
}

/* ── Aside takeaways ─────────────────────────────────────────── */

.vd-vid--feature .vid-aside-takeaways {
  padding: 26px;
  border-radius: var(--ht-radius);
  background: var(--ht-ivory);
}

/*
 * Uppercase-with-tracking is no longer a treatment this design uses — the
 * eyebrow rule became Granville small-caps at zero tracking, so this was the
 * last tracked-caps run on the page. As a sidebar card head its role is the
 * 18/24 sub scale; the 700 comes from .vd-ht h2, which keeps it clear of the
 * 600 item titles below it.
 */
.vd-vid--feature .vid-aside-takeaways .vid-highlights__heading {
  margin-bottom: 16px;
  font-size: var(--ht-fs-sub);
  letter-spacing: 0;
  line-height: var(--ht-lh-sub);
  text-transform: none;
}

.vd-vid--feature .vid-aside-takeaways .vid-highlights__list {
  gap: 16px;
}

.vd-vid--feature .vid-aside-takeaways .vid-highlights__title {
  font-size: 0.9375rem;
}

/* --ht-gold is 2.4:1 on --ht-ivory, which is not a number a 14px numeral
   survives even as decoration. --ht-gold-deep is the token that exists for
   exactly this. */
.vd-vid--feature .vid-aside-takeaways .vid-highlights__marker {
  color: var(--ht-gold-deep);
  font-variant-numeric: tabular-nums;
}

/* opacity: 0.85 over black text resolved to a cool grey once --ht-text became
   #000; --ht-muted is the palette's own secondary copy colour. */
.vd-vid--feature .vid-aside-takeaways .vid-highlights__text {
  color: var(--ht-muted);
  font-size: 0.875rem;
  opacity: 1;
}

/* ── Aside CTA card ──────────────────────────────────────────── */

.vd-vid--feature .vid-aside-cta {
  padding: 28px 26px;
  border-radius: var(--ht-radius);
  background: var(--ht-dark);
  color: var(--ht-white);
}

/* Same sidebar-card-head role as the takeaways heading above, so the same
   18/24 sub scale. Stays white — .vd-ht h2's --ht-brown is unreadable on the
   card's --ht-dark ground. */
.vd-vid--feature .vid-aside-cta h2 {
  margin-bottom: 10px;
  color: var(--ht-white);
  font-size: var(--ht-fs-sub);
  line-height: var(--ht-lh-sub);
}

.vd-vid--feature .vid-aside-cta p {
  margin-bottom: 20px;
  color: var(--vid-dim);
  font-size: var(--ht-fs-body);
  line-height: var(--ht-lh-body);
}

.vd-vid--feature .vid-aside-cta .ht-btn {
  width: 100%;
}

/* 800 → Black 900. --ht-gold on --ht-dark is 7.8:1, so the gold stays. */
.vd-vid--feature .vid-aside-cta__phone {
  display: block;
  margin-top: 14px;
  color: var(--ht-gold);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.vd-vid--feature .vid-aside-cta__phone:hover,
.vd-vid--feature .vid-aside-cta__phone:focus-visible {
  text-decoration: underline;
}

/* ── Transcript ──────────────────────────────────────────────── */

/*
 * The transcript panel's own styles live in video/base.css because the short
 * layout renders the same partial. These three fixes are scoped to
 * .vd-vid--feature so they stay inside this file; the short template wants them
 * too, and moving them into base.css is a cross-file follow-up.
 */

/* "Full Transcript" is a page section head, so it takes the design's h2 rather
   than its own clamp. It was capped at 1.5rem, which put it *below* the 30px an
   editor's own <h2> inside the panel renders at. */
.vd-vid--feature .vid-transcript__summary .vid-transcript__heading {
  font-size: var(--ht-fs-h2);
  line-height: var(--ht-lh-h2);
}

/*
 * Weight, stated rather than inherited. .vd-ht is Sofia Pro Light 300 now, and
 * the only reason transcript paragraphs are not Light is that the theme's
 * style.css carries an element-level `p, li { font-weight: 400 }` that shadows
 * the inherited value. Anything an editor pastes that is not a <p> or an <li>
 * — a <div>, a <blockquote>, a bare text node — falls through to 300, and a
 * wall of Light 16px is a genuinely hard read. 400 for the whole panel makes
 * that a decision instead of an accident. The 1rem/1.8 long-read setting is
 * kept: --ht-fs-body/--ht-lh-body (15.5/24) is a UI scale, not a reading one.
 */
.vd-vid--feature .vid-transcript__body {
  font-weight: 400;
}

/*
 * .vd-ht h1–h6 zero out margin-top, which is right for a section head that owns
 * its own spacing and wrong for a heading in a run of flow content: an editor's
 * <h2> in the transcript butts straight into the paragraph above it.
 * .vid-prose already restores this for the body copy; the transcript panel had
 * nothing.
 */
.vd-vid--feature .vid-transcript__body h2 {
  margin-top: 32px;
  margin-bottom: 8px;
}

.vd-vid--feature .vid-transcript__body h3 {
  margin-top: 26px;
  margin-bottom: 6px;
}

.vd-vid--feature .vid-transcript__body > :first-child {
  margin-top: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 991px) {
  .vd-vid--feature .vid-feature-body__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vd-vid--feature .vid-feature-body__aside {
    position: static;
  }
}

@media (max-width: 767px) {
  .vd-vid--feature .vid-feature-hero {
    padding-top: clamp(110px, 26vw, 150px);
  }

  .vd-vid--feature .vid-feature-hero__stage .vid-player {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}