/*
 * Homepage-specific layout (Task 1.17). Loaded only by templates/core/
 * homepage.html via the extra_head block - not sitewide, since nothing
 * here is reused by another page yet. Built entirely from existing
 * tokens/primitives (.card, .surface-analytical, .filter-group, .badge,
 * .metric-row, .u-grid-auto-fit, ...) - no new colors.
 *
 * The desktop "prediction board | Prediction Slip" composition (Task
 * 1.16, item 7) needs no layout code here: the Prediction Slip sidecar
 * is a fixed-position island and static/css/responsive.css already
 * reserves space for it via `.site-main { padding-right: ... }` at
 * >=1024px, sitewide - the homepage's own grid just fills whatever
 * width `.site-main` leaves it, automatically.
 */

/* ============ Hero ============ */
.homepage-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
  padding-block: var(--section-spacing-mobile);
}

/* Brand banner: spans both columns of the desktop 2-col grid below (CSS
   Grid auto-placement naturally puts it in its own full-width row since
   it comes first in DOM order and spans every column - see the two grid
   items after it, which then auto-flow into the row underneath). Never
   cropped/masked - width:100% + height:auto preserves the image's own
   aspect ratio exactly; the width/height attributes on the <img> itself
   reserve that ratio's space before the file loads (no layout shift). */
.homepage-hero__banner {
  grid-column: 1 / -1;
}

.homepage-hero__banner-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.homepage-hero__eyebrow {
  /* Task 1.72 Group 2: was --color-intelligence, a deliberately
     theme-INVARIANT brand token (tokens.css: "analytics, data,
     probability support, data viz" - meant for use ON a navy analytical
     surface, e.g. .surface-analytical, where it's always high-contrast).
     This eyebrow sits directly on the page's own swapping --color-bg
     (white in light theme, navy in dark theme), not on an analytical
     surface - axe-core's color-contrast rule confirmed the light-theme
     result: #9cdae9 on white computes to 1.54:1, nowhere near the
     required 4.5:1. --color-primary is the token this codebase already
     uses specifically because it swaps WITH the page background (navy
     in light theme, yellow in dark theme - tokens.css's own "in dark
     mode --color-primary resolves to Yellow... navy IS the dark-mode
     canvas" reconciliation) - both resolved values verified >15:1
     against --color-bg in their own theme. */
  color: var(--color-primary);
  margin-bottom: var(--space-12);
}

/* Headline: its own full-width row (spans both columns, same width as
   the banner above it) - never confined to the narrower copy column, and
   deliberately a SMALLER, hero-specific size scale rather than the
   sitewide --font-size-display token (which is tuned for a much wider
   single-column measure and wrapped this exact two-sentence headline
   into 3-4 short, awkward lines both on mobile and on desktop, where the
   copy column is further squeezed by the reserved Prediction Slip
   sidecar). Tuned to read as two clean lines at every width. */
.homepage-hero__heading {
  grid-column: 1 / -1;
}

/* The H1's own default bottom margin (12px, from the shared .text-display
   rule) would stack on top of the grid row-gap above - zeroed here so the
   row-gap alone controls the heading-to-lead spacing. */
.homepage-hero__heading .text-display {
  margin-bottom: 0;
}

/* Lead paragraph: also its own full-width row, matching the headline and
   banner above it exactly - only the actions/stats + Featured Prediction
   Card below it stay in the narrower two-column split. */
.homepage-hero__lead {
  grid-column: 1 / -1;
}

/* Kill the browser's default <p> margin - the grid row-gap alone controls
   spacing both above (from the heading) and below (to the actions row). */
.homepage-hero__lead p {
  margin: 0;
}

.homepage-hero__heading .text-display {
  font-size: 2rem;
}

@media (min-width: 480px) {
  .homepage-hero__heading .text-display {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .homepage-hero__heading .text-display {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .homepage-hero__heading .text-display {
    font-size: 3.25rem;
  }
}

.homepage-hero__copy {
  max-width: 640px;
  /* Grid items default to min-width: auto, which floors this column at
     its content's min-content width (here, inflated by the hero stats
     grid below) instead of letting it shrink and wrap inside the
     viewport - the classic CSS Grid overflow gotcha. Without this, the
     H1 doesn't wrap at narrow widths and gets silently clipped by
     html/body's overflow-x: hidden safety net (responsive.css) instead
     of visibly overflowing, which is what made this easy to miss. */
  min-width: 0;
}

/* Always side by side, at every width - never stacked. Below 480px each
   button shares the row equally and may shrink (its "extra" wording is
   hidden via .homepage-hero__action-full, and text-overflow:ellipsis is
   only a defensive floor - the shortened labels are sized to actually
   fit at 320-390px, ellipsis should never visibly trigger). At 480px+
   there's room for the full labels at their natural width, side by side
   without stretching. */
.homepage-hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  /* No margin-top: the paragraph this used to trail directly beneath now
     lives in .homepage-hero__lead, its own grid row above - the grid's
     row-gap alone separates that row from this one. */
}

.homepage-hero__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homepage-hero__action-full {
  display: none;
}

@media (min-width: 480px) {
  .homepage-hero__actions {
    gap: var(--space-12);
  }

  .homepage-hero__actions .btn {
    flex: 0 0 auto;
    padding-inline: var(--space-16);
  }

  .homepage-hero__action-full {
    display: inline;
  }
}

.homepage-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-40);
  max-width: 640px;
}

.homepage-hero__stat {
  padding: var(--space-16);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.homepage-hero__stat-value {
  display: block;
}

.homepage-hero__stat-label {
  display: block;
  margin-top: var(--space-4);
}

.homepage-hero__featured {
  min-width: 0; /* same grid min-content fix as .homepage-hero__copy above */
}

@media (min-width: 1024px) {
  .homepage-hero {
    grid-template-columns: 1.1fr 0.9fr;
    padding-block: var(--section-spacing-desktop);
  }
}

/* ============ Section rhythm ============ */
.homepage-section {
  padding-block: var(--section-spacing-mobile);
}

@media (min-width: 1024px) {
  .homepage-section {
    padding-block: var(--section-spacing-desktop);
  }
}

.homepage-section__header {
  max-width: 720px;
  margin-bottom: var(--space-24);
}

.homepage-section__footer {
  margin-top: var(--space-24);
}

/* ============ Prediction board filters ============ */
.homepage-board__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.homepage-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

.homepage-board__grid[hidden],
.homepage-tomorrow-panel[hidden] {
  display: none;
}

.homepage-tomorrow-panel {
  padding: var(--space-32) 0;
}

/* Basketball is architecturally supported but not launched (CLAUDE.md
   "Homepage architecture" / Basketball launch-state rule) - the filter
   stays visible but genuinely inert, and "Coming Soon" is always shown
   as text, never implied by disabled styling alone. */
.filter-option[data-sport="basketball"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
}

/* All 3 sport options (plus the "Coming Soon" pill) don't fit
   .filter-group's fixed pill shape at 320-360px viewports - rather than
   letting them clip/overflow (or wrapping inside the pill, which breaks
   its rounded shape), this one instance scrolls horizontally, a common
   pattern for a filter-chip row that doesn't fit. .filter-group itself
   (used elsewhere) is left untouched. */
.homepage-sport-filter {
  max-width: 100%;
  overflow-x: auto;
}

.homepage-sport-filter .filter-option {
  flex-shrink: 0;
}

/* ============ How Chag Works ============ */
.homepage-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .homepage-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.homepage-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-12);
}

/* ============ Model performance ============ */
.homepage-performance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  align-items: start;
}

@media (min-width: 1024px) {
  .homepage-performance__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.homepage-trend {
  display: flex;
  align-items: flex-end;
  gap: var(--space-12);
  height: 140px;
  padding: var(--space-16);
}

.homepage-trend__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  height: 100%;
}

.homepage-trend__bar-fill {
  width: 100%;
  max-width: 32px;
  background: var(--color-intelligence);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 2px;
}

/* A week with no scored predictions (Task 1.26) - never a fabricated
   0% bar, a visibly muted "no data" bar instead. */
.homepage-trend__bar-fill--empty {
  background: var(--color-border);
}

/* ============ Latest analysis ============ */
/* Task 1.68: templates/components/content/article_card.html graduated
   from a homepage-only component to a genuinely shared one (also used
   by /news/ and article detail) - its styles now live in the shared
   static/css/news.css, loaded by this page alongside homepage.css. */

/* ============ Premium CTA ============
   Hallmark · component: CTA band · states: default · hover · focus (light-blue ring on navy) · active (pressed,
   the shared .btn press) · disabled/loading/error/success n/a (a plain link).
   Phone: heading, copy, benefits, then the action (full width). From 768 px: copy and action on the left,
   benefits on the right - the action never floats alone under the list. */
.homepage-premium {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "list" "action";
  gap: var(--space-24);
}

.homepage-premium__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.homepage-premium__copy .text-h2,
.homepage-premium__copy .text-body {
  margin: 0;
}

.homepage-premium__action {
  grid-area: action;
}

.homepage-premium__cta {
  width: 100%;
}

@media (min-width: 480px) {
  .homepage-premium__cta {
    width: auto;
  }
}

@media (min-width: 768px) {
  .homepage-premium {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "copy list" "action list";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-48);
    align-items: start;
  }
}

.homepage-premium__list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

.homepage-premium__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.homepage-premium__list svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

/* Launch promotion: the banner row above the hero (only rendered while the promotion is active). */
.homepage-promo {
  padding-top: var(--space-16);
}

.homepage-promo .promo-banner {
  margin-bottom: 0;
}

/* The banner already separates the hero from the header, so the hero's own top spacing would leave a gap. */
.homepage-promo + .homepage-hero {
  padding-top: var(--space-24);
}