/* =============================================================================
   Horizon Core — hero lead (HORIZON-20260921-010)

   The thesis artefact composed INSIDE the full-bleed hero. Three treatments,
   one position: between the tagline and the CTAs, inside `.hp-hero__inner`.

   ⛔ DESIGNED AT 375x812 FIRST. Mobile is the product, not the fallback.
      Measured budget: the hero's copy stack is bottom-anchored
      (`justify-content:flex-end`), so a lead grows the stack UPWARD and can
      never push the CTAs below the fold. There are 437-461px of untouched
      background image above the copy on a 375x812 phone; the lead is designed
      to spend at most ~220px of it and leave the image reading as the ground.

   ⛔ TOKENS ONLY, NO COLOURS. Every value is a `var(--hp-*)` skin token with a
      neutral fallback, so all 14 skin presets carry this without an edit and a
      15th inherits it. This sheet is enqueued by Core with NO dependency array
      (an unregistered dependency handle makes wp_enqueue_style drop the sheet
      silently — memory `feedback-unregistered-style-dep-drops-silently`).

   ⚠️ Fully namespaced under `.hp-hero-lead`. It must not restyle anything the
      themes own.
   ========================================================================== */

.hp-hero-lead {
  position: relative;
  z-index: 2;
  margin: 0 0 var(--hp-sp-6, 1.5rem);
  padding-top: var(--hp-sp-5, 1.25rem);
  border-top: 1px solid var(--hp-border, rgba(255, 255, 255, 0.16));
}

/* The small caps line. Gold where the skin has one, muted text where it does
   not — never a hardcoded colour. */
.hp-hero-lead__label {
  display: block;
  font-family: var(--hp-font-body, inherit);
  font-size: var(--hp-text-xs, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-gold, var(--hp-text-muted, inherit));
  margin-bottom: var(--hp-sp-1, 0.25rem);
}

/* ── Treatment 1: stats ──────────────────────────────────────────────────────
   A hairline rail of label/value facts. Not links, by design: the hero's own
   CTAs stay the only tap targets in the copy stack. */

.hp-hero-lead__stats {
  display: grid;
  grid-template-columns: repeat(var(--hp-hero-lead-cols, 3), minmax(0, 1fr));
  /* Two shared rows: labels align with labels, values with values. Without
     this, "Inner Circle" wrapping to two lines pushed its own $49.99 below the
     $9.99 beside it and the rail stopped reading as a price list. */
  grid-template-rows: auto auto;
  gap: var(--hp-sp-4, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-hero-lead__stats--1 { --hp-hero-lead-cols: 1; }
.hp-hero-lead__stats--2 { --hp-hero-lead-cols: 2; }
.hp-hero-lead__stats--3 { --hp-hero-lead-cols: 3; }

/* ⚠️ `subgrid` is what makes the row alignment above work; where it is not
   supported the rule is simply ignored and each item stacks on its own, which
   is exactly the previous behaviour. Progressive, not load-bearing. */
.hp-hero-lead__stat {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
}

/* A vertical hairline between items, never before the first. */
.hp-hero-lead__stat + .hp-hero-lead__stat {
  padding-left: var(--hp-sp-4, 1rem);
  border-left: 1px solid var(--hp-border, rgba(255, 255, 255, 0.16));
}

.hp-hero-lead__value {
  font-family: var(--hp-font-body, inherit);
  font-size: var(--hp-text-base, 1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--hp-text, inherit);
  /* Two lines is the ceiling: a three-line "stat" is a paragraph. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⛔ THREE COLUMNS AT 375px IS 107px PER ITEM, AND 16px TYPE DOES NOT FIT IN IT.
   Measured: "We Negotiate Terms" clipped to "We Negotiat…" and "Touring Feature
   Showcase" to "Touring Feature…". A hero that truncates the creator's own
   words mid-word is not a premium hero. One step down in size plus a third line
   costs ~14px of a 437px image budget and shows the phrase whole. */
.hp-hero-lead__stats--3 .hp-hero-lead__value {
  font-size: var(--hp-text-sm, 0.875rem);
  -webkit-line-clamp: 3;
}

/* The live state. One item, full width, with a pulse. */
.hp-hero-lead__stat--live .hp-hero-lead__label {
  position: relative;
  padding-left: 1rem;
}

.hp-hero-lead__stat--live .hp-hero-lead__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--hp-error, #e0245e);
  box-shadow: 0 0 0 0 var(--hp-error, #e0245e);
  animation: hp-hero-lead-pulse 2s infinite;
}

@keyframes hp-hero-lead-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 36, 94, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(224, 36, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 36, 94, 0); }
}

/* ⚠️ Respect the OS setting. A pulsing dot is decoration; it is not worth a
   vestibular trigger on a page whose whole job is to feel good. */
@media (prefers-reduced-motion: reduce) {
  .hp-hero-lead__stat--live .hp-hero-lead__label::before { animation: none; }
}

/* ── Treatment 2: showcase ───────────────────────────────────────────────────
   A snap rail of image cards. A three-up grid inside the hero's 343px of usable
   width gives 107px cards, which read as thumbnails rather than as work. */

.hp-hero-lead__cards {
  display: flex;
  gap: var(--hp-sp-3, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--hp-sp-1, 0.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hp-hero-lead__cards::-webkit-scrollbar { display: none; }

.hp-hero-lead__card {
  flex: 0 0 auto;
  width: 126px;
  scroll-snap-align: start;
}

.hp-hero-lead__card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-hero-lead__thumb {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--hp-r-md, 8px);
  background: var(--hp-bg-surface, rgba(255, 255, 255, 0.06));
  /* A hairline keeps a dark image from dissolving into a dark hero. */
  box-shadow: inset 0 0 0 1px var(--hp-border, rgba(255, 255, 255, 0.16));
}

.hp-hero-lead__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--hp-dur, 0.3s) var(--hp-ease, ease);
}

.hp-hero-lead__card-link:hover .hp-hero-lead__thumb img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hp-hero-lead__thumb img { transition: none; }
  .hp-hero-lead__card-link:hover .hp-hero-lead__thumb img { transform: none; }
}

.hp-hero-lead__card-title {
  display: block;
  margin-top: var(--hp-sp-2, 0.5rem);
  font-family: var(--hp-font-body, inherit);
  font-size: var(--hp-text-sm, 0.875rem);
  line-height: 1.25;
  color: var(--hp-text, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-hero-lead__card-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--hp-font-body, inherit);
  font-size: var(--hp-text-xs, 0.75rem);
  color: var(--hp-text-muted, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Treatment 3: feature ────────────────────────────────────────────────────
   One item, given room. The whole card is the tap target, well over 44px. */

.hp-hero-lead__feature {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4, 1rem);
  padding: var(--hp-sp-3, 0.75rem);
  border-radius: var(--hp-r-md, 8px);
  background: var(--hp-card-veil, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--hp-border, rgba(255, 255, 255, 0.16));
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}

.hp-hero-lead__feature-art {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--hp-r-sm, 4px);
  overflow: hidden;
  background: var(--hp-bg-surface, rgba(255, 255, 255, 0.08));
}

.hp-hero-lead__feature-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-hero-lead__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-text, #fff);
}

/* Over artwork the glyph needs its own ground; on the empty tile it does not. */
.hp-hero-lead__feature-art:not(.hp-hero-lead__feature-art--empty) .hp-hero-lead__play {
  background: rgba(0, 0, 0, 0.35);
}

.hp-hero-lead__feature-body {
  min-width: 0;
  flex: 1 1 auto;
}

.hp-hero-lead__feature-title {
  font-family: var(--hp-font-body, inherit);
  font-size: var(--hp-text-base, 1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--hp-text, inherit);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Short viewports ─────────────────────────────────────────────────────────
   ⚠️ MEASURED AT 320x568 (the smallest phone still in use), not guessed. The
   hero's copy stack is bottom-anchored, so on a 568px-tall screen the tallest
   treatment pushed the eyebrow and title up under the sticky header. Giving the
   cards ~26px less costs nothing anyone can see and gives the name room back.
   ⛔ The hero itself is NOT shortened here: this is the LEAD's budget, not the
   hero's height. */
@media (max-height: 700px) {
  .hp-hero-lead { padding-top: var(--hp-sp-4, 1rem); }

  .hp-hero-lead__card { width: 100px; }

  .hp-hero-lead__feature-art { width: 60px; height: 60px; }
}

/* ── Tablet and up ───────────────────────────────────────────────────────────
   The rail becomes a row: the width is there, so nothing needs to scroll.

   ⛔⛔ 768, NOT 769, AND THE OFF-BY-ONE WAS REAL AND VISIBLE. This read
   `min-width: 769px` because the themes' own mobile rules are `max-width: 768px`
   and one-more-than-that looked like the right complement. **768 is the iPad
   portrait width**, so the single most common tablet fell on the phone side of
   every rule in this block: 126px cards in a 720px rail, 14px stat values, a
   72px episode thumbnail. Measured in the 768x1024 shots and fixed at Alex's
   instruction (`HORIZON-20260921-010`).

   ⚠️ SO THE THEME AND THE LEAD NOW DISAGREE AT EXACTLY 768, DELIBERATELY. The
   theme still treats 768 as narrow (full-width stacked CTAs); the lead treats it
   as wide. That is the intended outcome, not an oversight — at 768 there is room
   for the larger treatment and the CTA stacking is a separate decision in a file
   this work does not own.

   ⭐ AUDITED, NOT PATCHED: this is the ONLY width boundary in this stylesheet.
   The other media query keys on `max-height: 700px`, which is not a device width
   — it was derived from measuring a 568px-tall viewport against an 812px one and
   sits between the two shortest real phone heights (667 and 736). Both sides of
   it were re-measured after this change rather than assumed. */

@media (min-width: 768px) {
  .hp-hero-lead { max-width: 46rem; }

  .hp-hero-lead__cards { overflow-x: visible; }

  .hp-hero-lead__card { width: 150px; }

  .hp-hero-lead__value { font-size: var(--hp-text-lg, 1.125rem); }

  /*
   * ⛔⛔ THE SAME SELECTOR AS THE 375px RULE ABOVE, AND IT HAS TO BE. That rule
   * is `.hp-hero-lead__stats--3 .hp-hero-lead__value` (specificity 0,2,0) and
   * this block's general `.hp-hero-lead__value` is (0,1,0), so the PHONE rule
   * won at every width — measured 14px at 375, 768, 1024, 1280 and 1440, where
   * 18px was intended from 768 up. Nothing failed; it simply read as slightly
   * undersized on a 1440 screen, which is how it would have shipped.
   *
   * ⛔ Fixed by matching specificity here, NOT by raising the phone rule: 14px
   * with a three-line clamp is what 107px-wide columns at 375 were designed
   * with, and "We Negotiate Terms" clips mid-word without it.
   *
   * ⚠️ The line clamp is deliberately NOT restated. It is inherited from the
   * rule above and three lines is still right at this width.
   */
  .hp-hero-lead__stats--3 .hp-hero-lead__value { font-size: var(--hp-text-lg, 1.125rem); }

  .hp-hero-lead__feature-art { width: 88px; height: 88px; }
}