/**
 * Video templates — short-form (vertical) layout.
 *
 * Two columns: 9:16 player left, headline + description + covered points right.
 */

.vd-vid--short .vid-short {
  padding-top: clamp(150px, 13vw, 190px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.vd-vid--short .vid-short__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  align-items: center;
}

/* ── Left column: the vertical player ────────────────────────── */

.vd-vid--short .vid-short__media {
  position: relative;
}

/*
 * The drop shadow this used to carry — `0 30px 70px rgba(0,0,0,.5)` — is dead
 * now that --ht-dark is #000000: a black shadow on a black ground renders zero
 * pixels (sampled 2/10/20/40/70/120px below the frame, all #000). Its job was
 * to give the 9:16 frame an edge, and dark posters still bleed into the
 * section, so a hairline does that job on the palette instead.
 */
.vd-vid--short .vid-short__media .vid-player {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--vid-hairline);
}

/* Gold frame offset behind the player. */
.vd-vid--short .vid-short__media::before {
  position: absolute;
  z-index: 0;
  top: -14px;
  left: -14px;
  width: 120px;
  height: 120px;
  border-top: 3px solid var(--ht-gold);
  border-left: 3px solid var(--ht-gold);
  content: '';
}

.vd-vid--short .vid-short__runtime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--vid-dim);
  font-size: 14px;
  font-weight: 600;
}

/* ── Right column: title, description, points ────────────────── */

.vd-vid--short .vid-short__copy h1 {
  margin-bottom: 18px;
  font-size: clamp(2.125rem, 3vw, 3rem);
}

/*
 * The eyebrow is editor copy and it is stored ALL CAPS ("V&D LAW MYTHBUSTERS").
 * base.css now renders .ht-eyebrow as Granville with `font-variant-caps:
 * small-caps`, which only folds *lowercase* letters — so all-caps source came
 * out as full-size 18px serif capitals, twice the weight of the homepage
 * eyebrow. Figma's textCase is SMALL_CAPS_FORCED, which is `all-small-caps`
 * (the same call base.css already makes for .ht-numbers__label), and that
 * renders correctly whatever case the editor types.
 */
.vd-vid--short .vid-short__copy .ht-eyebrow {
  font-variant-caps: all-small-caps;
}

/* Lead paragraph: on the type scale (sub) rather than its own 17–19px ramp. */
.vd-vid--short .vid-short__intro {
  margin-bottom: 32px;
  color: var(--vid-dim);
  font-size: var(--ht-fs-sub);
  line-height: 1.7;
}

.vd-vid--short .vid-short__intro p:last-child {
  margin-bottom: 0;
}

.vd-vid--short .vid-highlights {
  padding-top: 28px;
  border-top: 1px solid var(--vid-hairline);
}

/*
 * This label used to be a copy of the old .ht-eyebrow recipe — Sofia Pro 13px,
 * weight 800, 2px tracking, uppercase — so the two gold labels in this column
 * matched. That recipe no longer exists anywhere in the design: eyebrows are
 * Granville small-caps and there is no 800 face (800 resolved to Black 900).
 * Left alone it read as a tracked-out black-weight caps line sitting under a
 * serif small-caps eyebrow, which is two unrelated label styles in one column.
 * It is an <h2>, so it takes the h2 weight at the sub size — the h2 size (30/44)
 * would fight the h1 two elements above it. Staying gold keeps it reading as a
 * label; --ht-beige merges it into the white item titles below.
 */
.vd-vid--short .vid-highlights__heading {
  color: var(--ht-gold);
  font-size: var(--ht-fs-sub);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--ht-lh-sub);
  text-transform: none;
}

.vd-vid--short .vid-highlights__list {
  gap: 20px;
}

/* The numeral shares the title's line box so the two sit on one optical line. */
.vd-vid--short .vid-highlights__marker {
  line-height: var(--ht-lh-sub);
}

/* An <h3> — put it on the h3 role from the scale (18/24, weight 600). */
.vd-vid--short .vid-highlights__title {
  color: var(--ht-white);
  font-size: var(--ht-fs-sub);
  font-weight: 600;
  line-height: var(--ht-lh-sub);
}

.vd-vid--short .vid-highlights__text {
  color: var(--vid-dim);
  font-size: var(--ht-fs-body);
  line-height: var(--ht-lh-body);
  opacity: 1;
}

.vd-vid--short .vid-short__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.vd-vid--short .vid-short__actions .ht-btn-outline {
  color: var(--ht-white);
}

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

@media (max-width: 991px) {
  .vd-vid--short .vid-short__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .vd-vid--short .vid-short__media {
    width: min(100%, 380px);
  }

  .vd-vid--short .vid-short__copy {
    width: 100%;
    max-width: 620px;
  }
}

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

  .vd-vid--short .vid-short__media::before {
    width: 72px;
    height: 72px;
  }
}