/* =============================================================================
   Sport sections — hockey (ice) and football (turf) colour schemes, page
   backgrounds, the sport section bar, sport hubs and the home "doors".
   html[data-sport="hockey|football"] is set in the HTML (sport pages) or by
   article.js (articles about one league).
   ============================================================================= */

/* ---------------------------------------------------------------- tokens: hockey (ice) */
:root[data-sport="hockey"] {
  --bg: #EDF3F8;
  --surface: #FFFFFF;
  --surface-2: #E1EAF2;
  --line: #D2DDE7;
  --line-strong: #B5C5D3;
  --text: #0E1824;
  --muted: #536477;
  --faint: #8495A6;
  --header-bg: rgb(237 243 248 / .86);
  --league: var(--nhl);
  --sport-red: #C8102E;
  --sport-blue: #0B5FA5;
  --sport-tint: rgb(11 127 194 / .07);
  --sport-mark: rgb(11 95 165 / .10);
  --sport-mark-strong: rgb(200 16 46 / .10);
  --sport-glow: rgb(255 255 255 / .85);
}
:root[data-sport="hockey"][data-theme="dark"] {
  --bg: #07111C;
  --surface: #0D1A28;
  --surface-2: #132335;
  --line: #1D3145;
  --line-strong: #2C4660;
  --text: #EAF3FA;
  --muted: #8EA4B9;
  --faint: #5A7189;
  --header-bg: rgb(7 17 28 / .80);
  --sport-red: #FF4D63;
  --sport-blue: #5CC8FF;
  --sport-tint: rgb(92 200 255 / .06);
  --sport-mark: rgb(92 200 255 / .07);
  --sport-mark-strong: rgb(255 77 99 / .08);
  --sport-glow: rgb(92 200 255 / .10);
}
@media (prefers-color-scheme: dark) {
  :root[data-sport="hockey"]:not([data-theme="light"]) {
    --bg: #07111C;
    --surface: #0D1A28;
    --surface-2: #132335;
    --line: #1D3145;
    --line-strong: #2C4660;
    --text: #EAF3FA;
    --muted: #8EA4B9;
    --faint: #5A7189;
    --header-bg: rgb(7 17 28 / .80);
    --sport-red: #FF4D63;
    --sport-blue: #5CC8FF;
    --sport-tint: rgb(92 200 255 / .06);
    --sport-mark: rgb(92 200 255 / .07);
    --sport-mark-strong: rgb(255 77 99 / .08);
    --sport-glow: rgb(92 200 255 / .10);
  }
}

/* ---------------------------------------------------------------- tokens: football (turf) */
:root[data-sport="football"] {
  --bg: #EFF3EA;
  --surface: #FFFFFF;
  --surface-2: #E3EADB;
  --line: #D3DCC8;
  --line-strong: #B5C3A6;
  --text: #121A12;
  --muted: #56654F;
  --faint: #879480;
  --header-bg: rgb(239 243 234 / .86);
  --league: var(--nfl);
  --sport-red: #A8321E;
  --sport-blue: #0E6B3B;
  --sport-tint: rgb(17 131 74 / .07);
  --sport-mark: rgb(17 131 74 / .09);
  --sport-mark-strong: rgb(17 131 74 / .16);
  --sport-glow: rgb(255 255 255 / .8);
}
:root[data-sport="football"][data-theme="dark"] {
  --bg: #06110B;
  --surface: #0C1B12;
  --surface-2: #12261A;
  --line: #1C3526;
  --line-strong: #2A4A36;
  --text: #EDF5EE;
  --muted: #92A898;
  --faint: #5D7564;
  --header-bg: rgb(6 17 11 / .80);
  --sport-red: #FF7A59;
  --sport-blue: #4FD08A;
  --sport-tint: rgb(79 208 138 / .05);
  --sport-mark: rgb(237 245 238 / .045);
  --sport-mark-strong: rgb(237 245 238 / .09);
  --sport-glow: rgb(79 208 138 / .08);
}
@media (prefers-color-scheme: dark) {
  :root[data-sport="football"]:not([data-theme="light"]) {
    --bg: #06110B;
    --surface: #0C1B12;
    --surface-2: #12261A;
    --line: #1C3526;
    --line-strong: #2A4A36;
    --text: #EDF5EE;
    --muted: #92A898;
    --faint: #5D7564;
    --header-bg: rgb(6 17 11 / .80);
    --sport-red: #FF7A59;
    --sport-blue: #4FD08A;
    --sport-tint: rgb(79 208 138 / .05);
    --sport-mark: rgb(237 245 238 / .045);
    --sport-mark-strong: rgb(237 245 238 / .09);
    --sport-glow: rgb(79 208 138 / .08);
  }
}
:root[data-sport="hockey"] body, :root[data-sport="hockey"] main { --league: var(--nhl); }
:root[data-sport="football"] body, :root[data-sport="football"] main { --league: var(--nfl); }

/* ---------------------------------------------------------------- page backgrounds */
/* Ice: a cold sheen from the top plus faint skate scratches. */
:root[data-sport="hockey"] body {
  background:
    radial-gradient(120% 60% at 15% -10%, var(--sport-glow), transparent 60%),
    radial-gradient(80% 50% at 100% 0%, var(--sport-tint), transparent 70%),
    repeating-linear-gradient(-28deg, transparent 0 46px, var(--sport-mark) 46px 47px, transparent 47px 140px),
    repeating-linear-gradient(17deg, transparent 0 90px, var(--sport-mark) 90px 91px, transparent 91px 260px),
    var(--bg);
  background-attachment: fixed;
}
/* Turf: mowing stripes running across the page, like yard-line bands. */
:root[data-sport="football"] body {
  background:
    radial-gradient(120% 60% at 15% -10%, var(--sport-glow), transparent 60%),
    repeating-linear-gradient(180deg, var(--sport-tint) 0 120px, transparent 120px 240px),
    var(--bg);
  background-attachment: fixed;
}

/* Page heads on sport pages carry the playing surface's markings. */
.sport-page .page-head { position: relative; isolation: isolate; }
.sport-page .page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
/* Hockey: centre red line, blue lines and the centre-ice faceoff circle. */
[data-sport="hockey"] .sport-page .page-head::before {
  background:
    radial-gradient(circle at 78% 52%, transparent 96px, var(--sport-mark-strong) 97px 99px, transparent 100px),
    radial-gradient(circle at 78% 52%, var(--sport-mark-strong) 0 6px, transparent 7px),
    linear-gradient(90deg, transparent calc(78% - 3px), var(--sport-mark-strong) calc(78% - 3px) calc(78% + 3px), transparent calc(78% + 3px)),
    linear-gradient(90deg, transparent calc(60% - 5px), var(--sport-mark) calc(60% - 5px) calc(60% + 5px), transparent calc(60% + 5px)),
    linear-gradient(90deg, transparent calc(96% - 5px), var(--sport-mark) calc(96% - 5px) calc(96% + 5px), transparent calc(96% + 5px));
}
/* Football: yard lines every 5 "yards" with hash marks. */
[data-sport="football"] .sport-page .page-head::before {
  background:
    repeating-linear-gradient(90deg, var(--sport-mark) 0 2px, transparent 2px 12.8px) 0 72% / 100% 12px repeat-x,
    repeating-linear-gradient(90deg, var(--sport-mark) 0 2px, transparent 2px 12.8px) 0 28% / 100% 12px repeat-x,
    repeating-linear-gradient(90deg, var(--sport-mark-strong) 0 2px, transparent 2px 64px);
}

/* ---------------------------------------------------------------- nav: league dots, sport bar */
.site-nav__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--league);
  vertical-align: .1em;
}

.sport-bar {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  background: color-mix(in srgb, var(--league) 9%, var(--header-bg));
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--league) 30%, var(--line));
}
.sport-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sport-bar__inner::-webkit-scrollbar { display: none; }
.sport-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  color: var(--text);
  text-decoration: none;
}
.sport-bar__logo { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 .5px var(--logo-edge, transparent)); }
.sport-bar__name { font-weight: 800; font-stretch: 112%; font-size: 1rem; letter-spacing: .01em; }
.sport-bar__league {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--league-ink);
}
.sport-bar__list { display: flex; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.sport-bar__list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--s-3);
  border-radius: 999px;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sport-bar__list a:hover { color: var(--text); background: color-mix(in srgb, var(--league) 12%, transparent); }
.sport-bar__list a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--league) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--league) 45%, transparent); }
@media (max-width: 599px) {
  .sport-bar__league { display: none; }
  .sport-bar__inner { gap: var(--s-3); }
}

/* League buttons (home hero): league-colour fill, ink shadow. */
.btn--nhl, .btn--nfl { --btn-bg: var(--league); --btn-border: var(--league); --btn-fg: #fff; --btn-shadow: var(--text); }
.btn--nhl { --league: var(--nhl); }
.btn--nfl { --league: var(--nfl); }
:root[data-theme="dark"] .btn--nhl, :root[data-theme="dark"] .btn--nfl { --btn-fg: #06110B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--nhl, :root:not([data-theme="light"]) .btn--nfl { --btn-fg: #06110B; }
}

/* ---------------------------------------------------------------- sport hub hero */
.sport-hero { min-height: min(72vh, 660px); }
[data-sport="hockey"] .sport-hero {
  background:
    radial-gradient(70% 90% at 70% 30%, var(--sport-glow), transparent 70%),
    linear-gradient(to bottom, var(--sport-tint), transparent 70%);
}
[data-sport="football"] .sport-hero {
  background:
    radial-gradient(70% 90% at 70% 30%, var(--sport-glow), transparent 70%),
    linear-gradient(to bottom, var(--sport-tint), transparent 70%);
}
.sport-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  padding-top: calc(min(72vh, 660px) * .16);
  padding-bottom: var(--s-7);
}
.sport-hero__title {
  font-size: clamp(3.5rem, 2rem + 7vw, 8rem);
  line-height: .9;
  letter-spacing: -0.035em;
  max-width: none;
}
.sport-hero__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(160px, 22vw, 260px);
  aspect-ratio: 1;
}
.sport-hero__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--league) 22%, transparent), transparent 68%);
}
[data-sport="hockey"] .sport-hero__mark::after {
  /* faceoff circle around the crest */
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--sport-red) 45%, transparent);
}
[data-sport="football"] .sport-hero__mark::after {
  content: "";
  position: absolute;
  inset: -4% 18%;
  border-left: 3px solid color-mix(in srgb, var(--sport-blue) 35%, transparent);
  border-right: 3px solid color-mix(in srgb, var(--sport-blue) 35%, transparent);
}
.sport-hero__logo {
  position: relative;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / .18)) drop-shadow(0 0 .5px var(--logo-edge, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .sport-hero__mark { animation: sport-mark-in 1100ms var(--ease) 200ms both; }
}
@keyframes sport-mark-in {
  from { opacity: 0; transform: perspective(600px) rotateY(-25deg) scale(.9); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 759px) {
  .sport-hero { min-height: 0; }
  .sport-hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-7); gap: var(--s-4); }
  .sport-hero__mark { order: -1; width: 120px; }
}

/* Team-logo marquee along the bottom of the hub hero. */
.sport-logos {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--s-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--league) 25%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--league) 25%, var(--line));
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sport-logos__track { display: flex; width: max-content; }
.sport-logos__group { display: flex; gap: var(--s-6); padding: 0 var(--s-3); margin: 0; list-style: none; }
.sport-logos__item { flex: none; display: grid; place-items: center; }
.sport-logos__item .team-badge--lg { --h: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .sport-logos__track { animation: sport-logos-scroll 70s linear infinite; }
  .sport-logos:hover .sport-logos__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .sport-logos { overflow-x: auto; }
  .sport-logos__group[aria-hidden] { display: none; }
}
@keyframes sport-logos-scroll {
  to { transform: translateX(-50%); }
}

.sport-ticker { border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- hub: top three */
.sport-tops {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.sport-top { --team: var(--league); --team-alt: var(--league); display: flex; min-width: 0; }
.sport-top__card {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--team) 26%, transparent), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.sport-top__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--team), var(--team-alt));
}
.sport-top__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb, var(--team) 40%, var(--line)); }
.sport-top__rank {
  position: absolute;
  z-index: -1;
  right: var(--s-4);
  top: var(--s-2);
  font-size: clamp(4.5rem, 3rem + 4vw, 7.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--team) 55%, var(--muted));
  opacity: .7;
}
.sport-top__logo .team-badge--xl { --h: 88px; }
.sport-top__name { font-weight: 800; font-stretch: 104%; font-size: 1.25rem; line-height: 1.15; }
.sport-top__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  color: var(--muted);
  font-size: .9375rem;
}
.sport-top__meta .num { font-family: var(--font-num); font-stretch: 82%; font-weight: 650; }
.sport-top .bar { width: 100%; }
.sport-top--1 .sport-top__card { border-color: color-mix(in srgb, var(--team) 35%, var(--line)); }
@media (max-width: 859px) {
  .sport-tops { grid-template-columns: minmax(0, 1fr); }
  .sport-top__card { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-4); }
  .sport-top__logo { grid-row: span 3; }
  .sport-top__logo .team-badge--xl { --h: 64px; }
  .sport-top__rank { font-size: 4rem; opacity: .35; }
  .sport-top__name { padding-right: 2.5rem; }
}
.sport-rk-list .home-rk__row:first-child .home-rk__rank { color: var(--muted); }

/* ---------------------------------------------------------------- hub: leaders */
.sport-leaders { row-gap: var(--s-7); }

/* ---------------------------------------------------------------- home: sport doors */
.home-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 859px) {
  .home-doors { grid-template-columns: minmax(0, 1fr); }
}
.door { isolation: isolate; }
.door--hockey {
  --door-bg:
    radial-gradient(circle at 88% 0%, transparent 70px, color-mix(in srgb, #C8102E 22%, transparent) 71px 73px, transparent 74px),
    linear-gradient(90deg, transparent 72%, color-mix(in srgb, var(--nhl) 14%, transparent) 72% calc(72% + 6px), transparent calc(72% + 6px)),
    linear-gradient(160deg, color-mix(in srgb, var(--nhl) 16%, var(--surface)), var(--surface) 60%);
}
.door--football {
  --door-bg:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--nfl) 16%, transparent) 0 2px, transparent 2px 48px),
    linear-gradient(160deg, color-mix(in srgb, var(--nfl) 18%, var(--surface)), var(--surface) 60%);
}
.door__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--door-bg);
}
.door__logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 .5px var(--logo-edge, transparent)); }
.door__titles { display: grid; gap: 2px; }
.door__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-stretch: 112%; font-weight: 850; letter-spacing: -0.02em; line-height: 1; }
.door__title a { color: inherit; text-decoration: none; }
.door__title a::after { content: ""; position: absolute; inset: 0; }
.door__go { grid-column: 3; justify-self: end; position: relative; z-index: 1; --btn-bg: var(--league); --btn-border: var(--league); --btn-fg: #fff; --btn-shadow: var(--text); }
.door__sub {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.door__sub .home-rk__label { font-size: inherit; }
.door__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
@media (max-width: 479px) {
  .door__head { grid-template-columns: auto minmax(0, 1fr); }
  .door__go { display: none; }
  .door__logo { width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------- power-rankings page: bigger logos */
.rk-pod__team .team-badge--xl { --h: 72px; }
.sport-page .rk-snapshot { justify-items: start; text-align: left; }

/* Marquee logos link to team pages. */
.sport-logos__link { display: grid; place-items: center; border-radius: 10px; transition: transform var(--t-fast) var(--ease); }
.sport-logos__link:hover { transform: translateY(-2px) scale(1.06); }
.sport-logos__link:focus-visible { outline: 2px solid var(--league); outline-offset: 3px; }