/*
  Home page components. Loaded only by Pages/Index.cshtml.

  Like site.css this reads role tokens and never a raw value. The one exception is layout arithmetic
  (clamp() sizes, aspect ratios, grid minimums): those are this page's composition, not theme.

  Four bands, top to bottom, each with its own surface role:
      opening  -> --section-opening-bg
      hero     -> --section-hero-bg
      gameday  -> --section-gameday-bg
      closer   -> --section-closer-bg
*/

/* ---------- shared ---------- */

/* Overrides the generic `section` well in site.css: bands run edge to edge. */
.band { max-width: none; margin-inline: 0; position: relative; }
.band h1, .band h2, .band h3, .band p { margin: 0; }

.well { max-width: var(--well-width); margin-inline: auto; display: flex; flex-direction: column; }

.eyebrow { font-family: var(--font-code); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

.band code { font-family: var(--font-code); font-size: 0.9em; padding: 0; }

/* ---------- 01 opening ---------- */

.band-opening {
  background: var(--section-opening-bg);
  color: var(--text-strong);
  --button-outline: var(--outline-on-opening);
}

.banner {
  position: relative;
  height: clamp(300px, 36vw, 520px);
  overflow: hidden;
  background: var(--section-opening-bg);
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--section-opening-bg));
  pointer-events: none;
}
.banner .chip {
  position: absolute;
  z-index: 1;
  top: var(--space-32);
  right: var(--gutter);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  color: var(--text-strong);
  font: 500 0.875rem/1 var(--font-code);
}

.opening-body { padding: 0 var(--gutter) clamp(72px, 10vw, 140px); }
.opening-body .well { gap: var(--space-48); }
.opening-head { display: flex; flex-direction: column; gap: var(--space-20); }
.opening-head .actions { margin-top: var(--space-12); }

.opening-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 16ch;
  text-wrap: balance;
}

.rotator {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text-soft);
}
.rotator-word {
  color: var(--text-strong);
  border-bottom: 3px solid var(--accent-bright);
  transition: opacity var(--duration-base) var(--ease-standard);
}
.rotator-word.is-fading { opacity: 0; }

.moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-16); }
.moment { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; }
.moment img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-media); display: block; }
.moment figcaption { font-size: 0.875rem; color: var(--text-soft); }

/* ---------- 02 hero ---------- */

.band-hero {
  background: var(--section-hero-bg);
  overflow: hidden;
  padding: clamp(96px, 14vw, 180px) var(--gutter) clamp(64px, 8vw, 120px);
  --button-outline: var(--outline-on-hero);
}
.band-hero .well { position: relative; gap: var(--space-28); }

.hero-mark {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(260px, 34vw, 520px);
  height: auto;
  opacity: 0.22;
  pointer-events: none;
}
.hero-stamp {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-32);
  font: 500 0.75rem/1 var(--font-code);
  color: var(--text-muted);
  white-space: nowrap;
}

.band-hero .eyebrow { font-weight: 500; line-height: 1; color: var(--accent-bright); }
.hero-title {
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--text-strong);
  max-width: 14ch;
  text-wrap: balance;
}
.hero-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 60ch;
  text-wrap: pretty;
}
.hero-lede code { color: var(--code-text); }
.band-hero .fineprint { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- 03 game day ---------- */

.band-gameday {
  background: var(--section-gameday-bg);
  border-top: 1px solid var(--border);
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) var(--gutter);
}
.band-gameday .well { position: relative; gap: var(--space-56); }

/* The photo is black on its left ~60% by design, so the headline sits on black. */
.gameday-photo {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  z-index: 1;
}
.gameday-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gameday-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--section-gameday-bg));
}

.gameday-head { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-20); max-width: 720px; }
.gameday-head .eyebrow { font-weight: 600; line-height: 1; color: var(--accent-strong); }
.gameday-title {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-strong);
}
.gameday-sub { font-size: 1.25rem; line-height: 1.55; color: var(--text-lead); max-width: 46ch; text-wrap: pretty; }

/* 1px gaps over a --border background read as hairline dividers between cards. */
.plays {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.play { background: var(--section-gameday-bg); padding: var(--space-28); display: flex; flex-direction: column; gap: var(--space-10); }
.play-number { font: 500 0.75rem/1 var(--font-code); color: var(--text-faint); }
.play-title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--text-strong); }
.play-tech { font-size: 0.875rem; font-weight: 600; color: var(--accent-bright); }
.play-body { font-size: 0.9375rem; line-height: 1.6; color: var(--text-dim); text-wrap: pretty; }

/* ---------- 04 closer ---------- */

.band-closer { background: var(--section-closer-bg); padding: clamp(96px, 12vw, 160px) var(--gutter); }
.band-closer .well { max-width: 720px; align-items: center; gap: var(--space-24); text-align: center; }
.closer-logo { width: min(100%, 520px); height: auto; border-radius: var(--radius-media); margin-bottom: var(--space-24); }
.closer-title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--text-strong); }
.closer-sub { font-size: 1.25rem; font-weight: 600; color: var(--accent-bright); }
.closer-body { font-size: 1.0625rem; line-height: 1.65; color: var(--text-lead); text-wrap: pretty; }