/* HFN site layout — every class an element on the 4 pages actually needs
   that isn't already covered by the Broadsheet design system (_ds/.../styles.css)
   or brand-overrides.css's tokens/grid-responsive/nav-toggle rules.

   Two tiers, deliberately:
   - Utilities (bottom of file... actually top, see below): single CSS
     property each, named after the design token they carry. These exist
     because the same flex-row/gap/spacing/font-size combinations recur
     dozens of times verbatim — a real utility, not a one-off.
   - Component classes: named after what the thing IS (.hero-band,
     .countdown-box, .event-card), for anything with actual page meaning.
     Reused across pages ONLY where the underlying values are genuinely
     identical — verified by direct comparison, not assumed from similar
     appearance. Where two pages differ by even one property (e.g. the
     About/Sponsors hero eyebrow has no margin-bottom, Home/Schedule's
     does), they get distinct classes rather than a shared one with a
     silently-wrong value.

   Add a new page? Reach for what's here before writing a fresh inline
   style — see README's "Adding a new page" section. */

/* ---------- Utilities ---------- */
.flex           { display: flex; }
.flex-center    { align-items: center; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { display: flex; flex-direction: column; }
.justify-end    { justify-self: end; }
.w-fit          { width: fit-content; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: 2px; }

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-17 { font-size: 17px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }

.opacity-6  { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.opacity-8  { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }

/* ---------- Page shell ---------- */
.page {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

/* ---------- Header / nav ----------
   .nav, .nav-brand, .nav-links already exist as classes (design system +
   brand-overrides' hamburger rules) — these declarations ADD the
   properties that were still inline, onto the same selectors, rather
   than introducing new ones. */
.nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
}
.nav-brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-brand span { font-size: 20px; }
.nav-logo { width: 44px; height: 44px; flex: none; }

/* ---------- Hero band (all 4 pages) ---------- */
.hero-band { background: var(--color-accent-900); }
.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-2-500);
  color: #fff;
}
.hero-eyebrow--spaced { margin-bottom: var(--space-3); } /* home + schedule only */
.hero-title {
  margin: var(--space-2) 0 var(--space-4);
  text-wrap: pretty;
  color: var(--color-bg);
}
.hero-title--md { font-size: clamp(28px, 7vw, 44px); margin-bottom: var(--space-3); }
.hero-title--lg { font-size: clamp(30px, 7vw, 48px); }
.hero-title--xl { font-size: clamp(34px, 8vw, 64px); }
.home-hero-lead {
  font-size: 18px;
  max-width: 46ch;
  opacity: 0.8;
  margin-bottom: var(--space-6);
  color: var(--color-bg);
}
.about-hero-lead {
  font-size: 17px;
  opacity: 0.8;
  max-width: 50ch;
  color: var(--color-bg);
}
.wide-hero-lead { /* schedule + sponsors — identical on both */
  opacity: 0.8;
  max-width: 60ch;
  font-size: 17px;
  color: var(--color-bg);
}
.home-hero-figure  { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
.about-hero-figure { aspect-ratio: 4/3; border-radius: var(--radius-lg); }

/* ---------- Buttons (compose with the design system's .btn/.btn-primary/etc) ---------- */
.btn-lg { padding: var(--space-3) var(--space-6); } /* the common "bigger than default" CTA size */
.btn-hero-primary {
  font-size: 15px;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent-2-600);
}
.btn-hero-secondary {
  font-size: 15px;
  padding: var(--space-3) var(--space-6);
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 40%, transparent);
}
.button-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Event card (Home's "Next Livestream", Schedule's "Next Up") ---------- */
.event-card { padding: var(--space-6); gap: var(--space-6); }
.event-card--spaced { margin-bottom: var(--space-6); } /* schedule's, precedes the table */
.event-copy { display: flex; flex-direction: column; gap: var(--space-2); }
.event-title { margin: 0; }
.event-meta { margin: 0; font-size: 14px; }
.tag-row { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.event-description { opacity: 0.85; margin: 0 0 var(--space-3); }
.event-figure { border-radius: var(--radius-md); min-height: 220px; }
.live-badge { width: fit-content; font-size: 12px; margin-bottom: var(--space-3); }

/* Countdown — repeats 4x verbatim (days/hrs/min/sec) on the homepage */
.countdown-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.countdown-box {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  min-width: 56px;
}
.countdown-value { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1; }
.countdown-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: 2px; }

/* ---------- Generic section container ----------
   Reused across pages wherever the padding combo matches exactly —
   .section-a/.section-b/.section-c are literal padding profiles found
   in the source, not a designed scale; naming them "a/b/c" rather than
   pretending they're a deliberate system avoids implying a rhythm that
   isn't actually there. */
.section { max-width: 1240px; margin: 0 auto; }
.section-a { padding: var(--space-6) var(--space-4) var(--space-8); } /* home's Next Livestream card + about's What We Cover */
.section-b { padding: 0 var(--space-4) var(--space-8); }              /* home "From the Channel" — no top padding, follows a card */
.section-c { padding: var(--space-8) var(--space-4); }                 /* support/cameras/tiers bands */
.section-d { padding: var(--space-4) var(--space-4) var(--space-8); }  /* schedule's event+table section */
.section-e { padding: var(--space-2) var(--space-4) var(--space-6); }  /* about's footer (tighter top) */
.section-f { padding: var(--space-8) var(--space-4) var(--space-6); }  /* home/schedule/sponsors footer */

/* ---------- Home: From the Channel ---------- */
.channel-heading { font-size: 26px; margin-bottom: var(--space-4); }
.channel-card { text-decoration: none; color: inherit; }
.channel-card-figure { aspect-ratio: 16/9; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }

/* ---------- Shared "surface" band background ----------
   Home's support band, About's "Behind the Cameras", and Sponsors'
   tiers band all use this exact single-property background — same
   value every time, so one class rather than three identical ones. */
.surface-band { background: var(--color-surface); }
.support-heading { font-size: 28px; }
.tier-card { gap: var(--space-3); }
.tier-card--featured { border: 1px solid var(--color-accent); }
.tier-card--muted { opacity: 0.75; }

/* Shared 52ch/opacity-0.85 lead paragraph — identical across Home's
   support band, About's "grow" band, and Schedule's "missed a broadcast"
   band (verified byte-identical before merging). */
.band-copy { opacity: 0.85; max-width: 52ch; margin: 0; }

/* ---------- About page ---------- */
.section-heading { font-size: 26px; margin-bottom: var(--space-4); } /* "What We Cover" etc, 4px-margin variant */
.section-heading--loose { font-size: 26px; margin-bottom: var(--space-6); } /* "Behind the Cameras", "Sponsorship Tiers" */
.host-figure { aspect-ratio: 1; border-radius: 50%; max-width: 160px; margin-bottom: var(--space-3); }
.host-name { margin: 0 0 2px; }
.host-role { margin: 0; font-size: 13px; }

/* ---------- Schedule page ---------- */
.schedule-event-figure { border-radius: var(--radius-md); min-height: 200px; } /* 20px shorter than .event-figure — verified, not an oversight */
.table-scroll { overflow-x: auto; }
.table-time { font-size: 12px; }
/* .table td (0,1,1, from the design system) beats a bare .table-empty
   (0,1,0) and silently wins back its smaller padding — scope through
   .table so this rule actually outranks it. */
.table td.table-empty { text-align: center; padding: var(--space-6) 0; }

/* ---------- Sponsors page ---------- */
.partner-card { align-items: center; justify-content: center; min-height: 110px; }
.partner-card--link { text-decoration: none; color: inherit; }
.partner-cta {
  text-decoration: none;
  color: var(--color-accent-700);
  border: 1px dashed var(--color-divider);
  background: transparent;
  text-align: center;
  font-size: 13px;
}
.sponsor-section { text-align: left; }
.inquiry-copy { opacity: 0.85; max-width: 52ch; margin-bottom: var(--space-4); }

/* ---------- Footer (identical structure on all 4 pages) ----------
   .grid-footer already carries gap/margin-bottom (folded into
   brand-overrides.css since every usage was identical) — nothing
   extra needed on the footer's grid div itself. */
.footer-brand-copy { max-width: 36ch; margin-bottom: var(--space-3); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-heading { margin-bottom: var(--space-2); }
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-fineprint { font-size: 12px; margin: 0; }