/* Landing page (/): one card per league. Tokens, masthead, .league-switch,
   footer and the skeleton pulse all come from main.css; this file only
   adds the hero and the card grid. */

.landing { max-width: 1060px; margin: 0 auto; padding: 24px 16px 60px; }

.landing-hero { text-align: center; max-width: 60ch; margin: clamp(16px, 5vh, 48px) auto 34px; }
.landing-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--info);
}
.landing-hero h2 {
  margin: 0 0 12px; font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 2.8rem); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance;
  color: var(--text-primary);
}
.landing-hero p { margin: 0 auto; color: var(--text-muted); font-size: .98rem; line-height: 1.55; text-wrap: pretty; }

.league-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 880px) { .league-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.league-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 24px 22px 20px; min-height: 100%;
  background: var(--card-bg); border: 1px solid var(--divider); border-radius: 16px;
  color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .3);
  transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .league-card:not(.soon):hover {
    transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .45);
  }
}
.league-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.league-card.soon { opacity: .6; }
.league-card.soon .league-cta { color: var(--text-muted); }

.league-card .tag {
  position: absolute; top: 16px; right: 16px;
  font-family: 'IBM Plex Mono', monospace; font-size: .62rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--divider); color: var(--text-muted);
}
.league-card .tag.live { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
.league-card .tag.warn { color: var(--low-confidence); }

.league-head { padding-right: 96px; }
.league-key {
  font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 700;
  font-size: 2.5rem; letter-spacing: -.03em; line-height: 1; color: var(--text-primary);
}
.league-name {
  margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted);
}

.league-stats {
  /* Columns size to their numbers (a 9-character record must never wrap),
     spread across the card's width. */
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px 14px;
  padding-top: 14px; border-top: 1px solid var(--divider);
}
.league-stats .label {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
}
.league-stats .value {
  margin-top: 4px; font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.01em; color: var(--text-primary); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.league-stats .value.positive { color: var(--win); }
.league-stats .value.negative { color: var(--loss); }

.league-status { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-muted); min-height: 2.5em; }
.league-cta {
  margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: .74rem; font-weight: 600;
  letter-spacing: .3px; color: var(--accent);
}

.landing-foot-note { margin: 28px auto 0; max-width: 60ch; text-align: center; font-size: .84rem; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 480px) {
  .league-card { padding: 20px 18px 18px; }
  .league-key { font-size: 2.1rem; }
}