/* ─────────────────────────────────────────────────────────────
   Homepage-specific styles
   ───────────────────────────────────────────────────────────── */

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  margin: 14px var(--gutter) 0;
  height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  background: var(--canvas-2);
}

.hero__photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(184,148,54,0.15) 0%, rgba(29,35,59,0) 50%),
    radial-gradient(ellipse at 30% 30%, rgba(184,148,54,0.25), transparent 55%),
    repeating-linear-gradient(180deg, #88a4c9 0 18%, #2c7a3e 18% 100%);
}

[data-theme="dark"] .hero__photo {
  background:
    linear-gradient(135deg, rgba(184,148,54,0.18) 0%, rgba(20,25,49,0) 50%),
    radial-gradient(ellipse at 30% 30%, rgba(184,148,54,0.35), transparent 55%),
    repeating-linear-gradient(180deg, #1a233f 0 18%, #133015 18% 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero__photo {
    background:
      linear-gradient(135deg, rgba(184,148,54,0.18) 0%, rgba(20,25,49,0) 50%),
      radial-gradient(ellipse at 30% 30%, rgba(184,148,54,0.35), transparent 55%),
      repeating-linear-gradient(180deg, #1a233f 0 18%, #133015 18% 100%);
  }
}

.hero__crest {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  height: 92%;
  width: auto;
  object-fit: contain;
  /* No mix-blend-mode. Screen was here to knock out the navy panel baked into
     the old crest file; kits/crest-cutout.png has no panel, and screening a
     real cutout only washes the gold. */
  opacity: 0.30;
  pointer-events: none;
  user-select: none;
}

.hero__pitch-lines {
  position: absolute;
  left: 0; right: 0; top: 18%; bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 32px, rgba(255,255,255,0.06) 32px 64px);
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

.hero__tag {
  position: absolute;
  top: 12px; right: 12px;
}

.hero__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px 18px;
  color: #F7F4EE;
}

.hero__kicker {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--yellow);
  margin-bottom: 4px;
}

.hero__title {
  font-family: var(--t-display);
  font-size: 42px;
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: #F7F4EE;
}

.hero__title em {
  font-family: var(--t-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--yellow);
}

.hero__sub {
  font-size: 12px;
  color: rgba(247,244,238,0.85);
  max-width: 300px;
  line-height: 1.5;
}

/* ── WORDMARK + IDENTITY STRIP ─────────────────────────────── */
.identity {
  padding: 18px var(--gutter) 4px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}

.identity__mark {
  font-family: var(--t-display);
  font-size: 62px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.identity__mark .small {
  display: block;
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  line-height: 1.2;
}

.identity__meta {
  text-align: right;
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.3;
  padding-bottom: 6px;
}

/* ── SEASON CARD ──────────────────────────────────────────── */
.season {
  position: relative;
  margin: 16px var(--gutter) 0;
  padding: 16px 16px 18px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}

[data-theme="dark"] .season,
[data-theme="dark"] .stats-row .card { backdrop-filter: blur(8px); }

.season::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184,148,54,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.season__ghost {
  position: absolute;
  right: -4px;
  top: -16px;
  font-family: var(--t-display);
  font-size: 120px;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.18;
  letter-spacing: -0.01em;
  pointer-events: none;
}
[data-theme="dark"] .season__ghost { opacity: 0.16; }

.season__kicker {
  position: relative;
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.season__title {
  position: relative;
  font-family: var(--t-display);
  font-size: 28px;
  line-height: 1;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.season__sub {
  position: relative;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
  max-width: 280px;
  line-height: 1.45;
}

.season__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
}

.stat {
  text-align: left;
}
.stat__num {
  font-family: var(--t-display);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.stat__num--accent { color: var(--yellow); }
[data-theme="light"] .stat__num--accent { -webkit-text-stroke: 1px var(--ink); }
:root:not([data-theme]) .stat__num--accent { -webkit-text-stroke: 1px var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .stat__num--accent { -webkit-text-stroke: 0; }
}
[data-theme="dark"] .stat__num--accent { -webkit-text-stroke: 0; }

.stat__label {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ── FIXTURES ─────────────────────────────────────────────── */
/* Two columns, built when this held exactly two cards (last + next). It now
   holds a heading and six upcoming fixtures, so anything that is not a plain
   card has to be told to span, or it takes a single cell and staggers
   everything after it -- which is what the heading did. */
.fixtures {
  margin: 12px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fixtures__head { grid-column: 1 / -1; }

/* Last and next sit side by side, as they always did. */

.fixture {
  border-radius: var(--radius);
  padding: 12px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.fixture--next {
  background:
    linear-gradient(135deg, rgba(184,148,54,0.12) 0%, rgba(184,148,54,0.02) 100%),
    var(--paper);
  border: 1px solid rgba(184,148,54,0.35);
}
.fixture--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fixture--link:hover, .fixture--link:active {
  border-color: var(--yellow);
  box-shadow: 0 2px 12px rgba(184,148,54,0.15);
}

.fixture__label {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fixture__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.fixture__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.team-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-family: var(--t-meta);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.team-badge--green { background: var(--green-pitch); color: #fff; }
.team-badge--alt   { background: var(--ink); color: var(--canvas); }
.team-badge--muted { background: var(--ink-3); color: var(--canvas); }
.team-badge--red   { background: var(--loss); color: #fff; }

.team-name {
  font-family: var(--t-meta);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.scoreline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--t-display);
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
}
.scoreline .sep { color: var(--ink-4); font-size: 18px; }
.scoreline .dim { color: var(--ink-3); }

.fixture__meta {
  margin-top: 6px;
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  text-align: center;
}

.vs {
  font-family: var(--t-meta);
  font-size: 18px;
  color: var(--yellow);
  padding: 0 6px;
  line-height: 1;
}

/* ── SQUAD STRIP ───────────────────────────────────────────── */
.squad-strip {
  margin: 18px var(--gutter) 0;
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.player-chip {
  aspect-ratio: 1 / 1.18;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: var(--canvas);
}

.player-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(184,148,54,0.14) 0 3px, transparent 3px 6px);
}

.player-chip__num {
  position: absolute;
  left: 5px; top: 4px;
  font-family: var(--t-display);
  font-size: 18px;
  color: var(--yellow);
  line-height: 1;
}

.player-chip__name {
  position: absolute;
  left: 5px; bottom: 4px;
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--canvas);
  text-transform: uppercase;
}

.player-chip__flag {
  position: absolute;
  right: 5px; top: 4px;
  font-size: 11px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.squad-cta {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.squad-cta strong {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ── SPONSOR BLOCK ─────────────────────────────────────────── */
.sponsors-block {
  margin: 22px var(--gutter) 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.sponsors-block__title {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 14px;
}
.sponsors-block__title em {
  font-family: var(--t-display);
  font-style: normal;
  background: var(--yellow);
  color: var(--yellow-ink);
  padding: 0 6px;
  letter-spacing: 0.02em;
}

.sponsors-tier1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.sponsor-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sponsor-cell__name {
  font-family: var(--t-meta);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.05;
}

.sponsor-cell__role {
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-top: 12px;
}

.sponsors-tier2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.sponsor-cell--logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-meta);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.sponsor-cell--ask {
  background: var(--ink);
  color: var(--yellow);
  border: 1px solid var(--ink);
  font-family: var(--t-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navy logo cell — used when rendering from sponsors-data.js */
.sponsor-cell--navy {
  background: var(--navy);
  border-color: rgba(184,148,54,0.15);
  /* Sponsors with no artwork fall back to their name as plain text in this
     cell. Without this it inherits --ink, which equals --navy in light mode,
     so the name renders navy-on-navy and vanishes. */
  color: #F7F4EE;
}
.sponsor-cell--navy .sponsor-cell__name {
  color: #F7F4EE;
}
.sponsor-cell--navy .sponsor-cell__role {
  color: rgba(184,148,54,0.75);
}
.sponsor-cell__logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.sponsor-cell__logo-wrap img {
  max-height: 26px;
  max-width: 80px;
  object-fit: contain;
  display: block;
}
.sponsor-cell--navy.sponsor-cell--logo img {
  max-height: 22px;
  max-width: 70px;
  object-fit: contain;
  display: block;
}

/* ── Footer breathing room ─────────────────────────────────── */
.page-footer-space { height: 24px; }

/* ── DESKTOP HOME LAYOUT (≥ 1024px) ────────────────────────── */
@media (min-width: 1024px) {
  .home-page .shell {
    display: grid;
    /* Three columns: two for the main flow, one rail.
       Hero spans the pair; Squad and Fixtures sit side by side beneath it;
       Sponsors spans the pair again; the fixture rail runs the full height
       on the right. Six fixture cards make that rail tall, which is why it
       spans three rows rather than sitting beside the hero alone. */
    grid-template-columns: 1fr 1fr 380px;
    grid-template-areas:
      "sitebar  sitebar  sitebar"
      "identity identity identity"
      "hero     hero     fixtures"
      "squad    links    fixtures"
      "sponsors sponsors fixtures"
      "footer   footer   footer";
    column-gap: 20px;
    padding: 0 32px;
    align-items: start;
  }

  /* Site bar spans full width and escapes the shell's 32px padding */
  .home-page .site-bar {
    grid-area: sitebar;
    margin-left: -32px;
    margin-right: -32px;
  }

  .home-page .identity {
    grid-area: identity;
    padding-left: 0;
    padding-right: 0;
  }

  .home-page .hero {
    grid-area: hero;
    margin-left: 0;
    margin-right: 0;
    height: 400px;
  }

  .home-page .fixtures {
    grid-area: fixtures;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 0;
    align-self: start;
  }

  /* NO FIXED HEIGHT, AND NO flex:1.
     This column was 400px tall with each card taking an equal share, which
     worked while there were exactly two. The homepage now shows six upcoming
     fixtures, so each card got ~55px and min-height:0 let it shrink below its
     own content -- team names, meta line and the call to action were all
     clipped away. Cards size to their content; the column is as tall as it
     needs to be. */
  .home-page .fixtures .fixture {
    flex: 0 0 auto;
  }

  .home-page .inline-links {
    grid-area: links;
    margin-left: 0;
    margin-right: 0;
  }

  .home-page .squad-strip {
    grid-area: squad;
    margin: 0 0 0 20px;
  }

  .home-page .sponsors-block {
    grid-area: sponsors;
    margin: 0 0 0 20px;
    padding-top: 14px;
  }

  .home-page .page-footer-space { grid-area: footer; }

  /* On desktop, fixture cards stack vertically (were 2-col on mobile) */
  .home-page .fixtures.fixtures {
    grid-template-columns: 1fr;
  }

  /* Wider hero title on desktop */
  .home-page .hero__title { font-size: 54px; }
  .home-page .hero__sub { max-width: 420px; }

  /* Squad grid — 3 chips per row on desktop side column */
  .home-page .squad-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* "Make yourself available" on the next fixture. Only rendered when the
   kick-off is confirmed, because availability is refused without one. */
.fixture__cta {
  display: block; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--yellow); border-radius: 999px;
  font-family: var(--t-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; text-align: center;
  color: var(--yellow); text-decoration: none; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.fixture__cta:hover, .fixture__cta:active { background: var(--yellow); color: var(--yellow-ink); }

/* Heading for the homepage fixture rail. Rendered by fixtures-data.js, which
   owns that section's contents. */
.fixtures__head {
  font-family: var(--t-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  margin: 0 0 4px;
}

/* Through to the season page. Spans both columns beneath the last/next pair. */
.fx-all {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); text-decoration: none;
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.fx-all:hover, .fx-all:active { border-color: var(--yellow); color: var(--yellow); }