/**
 * Video archive + cards.
 *
 * Loaded on /videos/, the format archives, and under the "More videos" row on
 * a single video. Layers on video/base.css for the --vid-* tokens and reuses
 * the --ht-* palette and button vocabulary from home-test/base.css.
 */

/* ── Archive hero ────────────────────────────────────────────── */

.vd-vid .vid-archive-hero {
  padding-block: clamp(112px, 11vw, 152px) clamp(38px, 4vw, 54px);
  background: var(--ht-dark);
  color: var(--ht-white);
}

/* Same H1 as the homepage hero (base.css `.ht-hero__copy h1`): the shared
   clamp from `.vd-ht h1`, Black 900, -0.9px tracking. The old override ran
   clamp(38px, 4vw, 60px), which made an archive title *larger* than the
   homepage H1 at every width above ~1200. */
.vd-vid .vid-archive-hero h1 {
  max-width: 18ch;
  margin: 6px 0 0;
  color: var(--ht-white);
  font-weight: 900;
  letter-spacing: -0.9px;
}

.vd-vid .vid-archive-hero__intro {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--vid-dim);
  font-size: 17px;
  line-height: 1.6;
}

.vd-vid .vid-archive-hero__intro p {
  margin: 0;
}

/* ── Format filters ──────────────────────────────────────────── */

.vd-vid .vid-archive-filters {
  padding-block: 0 clamp(30px, 3vw, 44px);
  background: var(--ht-dark);
}

.vd-vid .vid-archive-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Filter tabs speak the design's control vocabulary — Sofia Pro 600 at the
   button scale on the 5px radius every button and practice tab uses. The old
   13px/0.06em uppercase label is the idiom base.css dropped when the eyebrow
   moved to Granville small-caps; it is the last place on these pages that
   still spoke it. Term names ("Long Form") already read as titles, so the
   uppercase transform goes too. */
/* These render as <a> on first paint and archive.js swaps them for <button>, so
   the rule has to neutralise the UA button styling too — without `appearance`
   and an explicit background, an inactive tab inherits `buttonface` (#EFEFEF)
   and the near-white label on it is invisible. `font: inherit` for the same
   reason: buttons do not inherit the page font. The inactive border is gold at
   40% rather than the ivory hairline so the control boundary clears the 3:1 that
   WCAG 1.4.11 asks of a UI component. */
.vd-vid .vid-filter {
  display: inline-block;
  appearance: none;
  padding: 12px 22px;
  border: 1px solid color-mix(in srgb, var(--ht-gold) 40%, transparent);
  border-radius: var(--ht-radius);
  background: transparent;
  color: var(--vid-dim);
  font-family: inherit;
  font-size: var(--ht-fs-btn);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--ht-lh-btn);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.vd-vid .vid-filter:hover,
.vd-vid .vid-filter:focus-visible {
  border-color: var(--ht-gold);
  color: var(--ht-white);
}

.vd-vid .vid-filter.is-current {
  border-color: var(--ht-gold);
  background: var(--ht-gold);
  color: var(--ht-dark);
}

/* ── Grid ────────────────────────────────────────────────────── */

.vd-vid .vid-archive {
  padding-block: clamp(48px, 5vw, 76px);
  background: var(--ht-ivory);
}

.vd-vid .vid-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 38px);
}

.vd-vid .vid-archive__empty {
  margin: 0;
  color: var(--ht-muted);
  font-size: var(--ht-fs-body);
  font-weight: 300;
  line-height: var(--ht-lh-body);
}

/* ── Card ────────────────────────────────────────────────────── */

.vd-vid .vid-card {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--vid-radius);
  background: var(--ht-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vd-vid .vid-card:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ht-dark) 14%, transparent);
  transform: translateY(-3px);
}

/* Black, not --ht-brown. This is the ground a poster is composited on, and
   --ht-brown is now #4B3D2A — a mid warm brown that flashed as a coloured
   bar on the ivory grid before each poster decoded, and would letterbox a
   clip in brown rather than the black `.vid-player` already uses. */
.vd-vid .vid-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ht-dark);
}

.vd-vid .vid-card--vertical .vid-card__thumb {
  aspect-ratio: 9 / 16;
}

.vd-vid .vid-card__thumb img,
.vd-vid .vid-card__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown only when a video has neither a poster nor a featured image. The three
   browns that used to be here (#201709 / #2E2110 / #3A2B18) were lifted from
   the footer's gradient and exist nowhere in the palette. */
.vd-vid .vid-card__thumb-fallback {
  background: linear-gradient(105deg, var(--ht-dark) 0%, var(--ht-brown) 100%);
}

/* Play badge — decorative; the title carries the link. */
.vd-vid .vid-card__play {
  display: grid;
  position: absolute;
  inset: 50% auto auto 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ht-dark) 62%, transparent);
  color: var(--ht-white);
  place-items: center;
  transform: translate(-50%, -50%);
  transition: background-color 0.18s ease;
}

.vd-vid .vid-card:hover .vid-card__play {
  background: var(--ht-gold);
  color: var(--ht-dark);
}

.vd-vid .vid-card__play svg {
  width: 24px;
  height: 24px;
}

.vd-vid .vid-card__duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: var(--vid-radius);
  background: color-mix(in srgb, var(--ht-dark) 82%, transparent);
  color: var(--ht-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.vd-vid .vid-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 24px;
}

/*
 * Same micro-label as `.ht-practice-callout-title` on the homepage — Granville
 * 700 at the eyebrow size, all-small-caps, no tracking — rather than the 12px
 * tracked uppercase sans the design dropped. Two deliberate departures:
 *
 * - 21.6px leading, not the 27.9px of --ht-lh-eyebrow. mid.css retunes the
 *   eyebrow to 21.6 in three places for the same reason: a section eyebrow can
 *   afford the air, a label stacked inside a card cannot.
 * - --ht-gold-deep, not the --ht-gold that homepage callout uses. Plain gold
 *   measures 2.7:1 on white; gold-deep is 4.4:1. Neither clears AA at this
 *   size (see the note on --ht-gold-deep in the report), but gold-deep is the
 *   token meant for small gold text on a light ground.
 *
 * all-small-caps rather than small-caps so the label reads the same whether a
 * format term is entered as "Short Form" or "SHORT FORM".
 */
.vd-vid .vid-card__badge {
  margin: 0 0 6px;
  color: var(--ht-gold-deep);
  font-family: "Granville", Georgia, serif;
  font-size: var(--ht-fs-eyebrow);
  font-weight: 700;
  -webkit-font-variant-caps: all-small-caps;
  font-variant-caps: all-small-caps;
  letter-spacing: 0;
  line-height: 21.6px;
}

/* Card titles are the h3 role: 18/24 Sofia Pro 600, same as `.ht-plan-card h3`.
   They were 20px at weight 800, which had no face and rendered as Black 900. */
.vd-vid .vid-card__title {
  margin: 0;
  color: var(--ht-text);
  letter-spacing: 0;
}

.vd-vid .vid-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Stretch the title link over the whole card so the thumb is clickable
   without adding a second link for assistive tech to announce. */
.vd-vid .vid-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vd-vid .vid-card__title a:hover,
.vd-vid .vid-card__title a:focus-visible {
  color: var(--ht-gold-deep);
}

/* Body scale and Sofia Pro Light, like every other card paragraph in the
   design. The global `p { font-weight: 400 }` in style.css overrides the 300
   on `.vd-ht`, so card copy has to restate it — `.ht-plan-card p` and
   `.ht-practice-callout p` do the same. */
.vd-vid .vid-card__excerpt {
  margin: 10px 0 0;
  color: var(--ht-muted);
  font-size: var(--ht-fs-body);
  font-weight: 300;
  line-height: var(--ht-lh-body);
}

/* ── Pagination ──────────────────────────────────────────────── */

.vd-vid .vid-pagination {
  margin-top: clamp(36px, 3.6vw, 54px);
}

.vd-vid .vid-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.vd-vid .vid-pagination .page-numbers {
  display: inline-block;
  min-width: 42px;
  padding: 12px 14px;
  border: 1px solid var(--vid-rule);
  border-radius: var(--ht-radius);
  color: var(--ht-text);
  font-size: var(--ht-fs-btn);
  font-weight: 600;
  line-height: var(--ht-lh-btn);
  text-align: center;
  text-decoration: none;
}

.vd-vid .vid-pagination .page-numbers:hover,
.vd-vid .vid-pagination .page-numbers:focus-visible {
  border-color: var(--ht-gold);
  color: var(--ht-gold-deep);
}

.vd-vid .vid-pagination .page-numbers.current {
  border-color: var(--ht-gold);
  background: var(--ht-gold);
  color: var(--ht-dark);
}

.vd-vid .vid-pagination .page-numbers.dots {
  border-color: transparent;
}

/* ── "More videos" row on a single video ─────────────────────── */

.vd-vid .vid-related {
  padding-block: clamp(48px, 5vw, 76px);
  background: var(--ht-ivory);
}

.vd-vid .vid-related__header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(22px, 2.2vw, 32px);
}

/* Plain `.vd-ht h2`: 30/44 Sofia Pro 700 in --ht-brown, like every section
   heading on the homepage. It was 34.6px Black 900 in pure black, which read
   as a heavier, larger heading than anything the design contains. */
.vd-vid .vid-related__header h2 {
  margin: 0;
}

.vd-vid .vid-related__all {
  color: var(--ht-gold-deep);
  font-size: var(--ht-fs-btn);
  font-weight: 600;
  line-height: var(--ht-lh-btn);
  text-decoration: none;
}

.vd-vid .vid-related__all:hover,
.vd-vid .vid-related__all:focus-visible {
  text-decoration: underline;
}

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

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

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

  .vd-vid .vid-card--vertical .vid-card__thumb {
    aspect-ratio: 4 / 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vd-vid .vid-card,
  .vd-vid .vid-card__play {
    transition: none;
  }

  .vd-vid .vid-card:hover {
    transform: none;
  }
}