/* Home page — tokens only (spec §2.4). */

/* ---------------------------------------------------------------- ticker */
.home-ticker { min-height: 0; }
.home-ticker__loading {
  padding: var(--s-3) var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.home-ticker__loading .skeleton-chips { overflow: hidden; }

/* League marker at the head of each league's run of chips. */
.home-ticker__league {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-2);
  flex: none;
  min-width: 76px;
  padding: 0 var(--s-2) 0 var(--s-3);
  border-left: 2px solid var(--league);
}
.home-ticker__league + .score-chip { margin-left: calc(var(--s-1) * -1); }
.home-ticker__when {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Space before the second league's marker. */
.score-chip + .home-ticker__league { margin-left: var(--s-4); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: min(78vh, 720px);
  overflow: hidden;
}
.hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
/* Bottom fade into the page, so the field settles under the first section. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg));
}
.hero__inner {
  position: relative;
  padding-top: calc(min(78vh, 720px) * .29);
  padding-bottom: var(--s-8);
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  margin-bottom: var(--s-5);
}
.hero__kicker-mark {
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.hero__title {
  max-width: 16ch;
}
.hero__dek {
  margin-top: var(--s-5);
  max-width: 46ch;
  color: var(--muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (max-width: 759px) {
  .hero { min-height: 0; }
  .hero__inner {
    padding-top: clamp(170px, 28svh, 230px);
    padding-bottom: var(--s-7);
  }
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.5rem); }
}
@media (max-width: 380px) {
  .hero__actions .btn { flex: 1 1 auto; }
}

/* Staggered entrance (text appears in place without motion under reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .hero__kicker,
  .hero__title,
  .hero__dek,
  .hero__actions {
    animation: home-hero-in 900ms var(--ease) both;
  }
  .hero__kicker { animation-delay: 80ms; }
  .hero__title { animation-delay: 160ms; }
  .hero__dek { animation-delay: 300ms; }
  .hero__actions { animation-delay: 420ms; }
  .hero__kicker-mark { animation: home-hero-rule 900ms var(--ease) 200ms both; transform-origin: left center; }
  .hero__field { animation: home-hero-field 1400ms var(--ease) both; }
}
@keyframes home-hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes home-hero-rule {
  from { transform: scaleX(0); }
  to { transform: none; }
}
@keyframes home-hero-field {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------- sections */
.home-section:first-of-type { padding-top: var(--s-6); }
.home-head-note {
  font-size: .8125rem;
  color: var(--muted);
  max-width: 46ch;
  text-align: right;
  text-wrap: balance;
}
@media (max-width: 599px) {
  .home-head-note { text-align: left; }
}

/* Compact error states inside cards and groups. */
.home-compact .error-state { padding: var(--s-4) var(--s-5); }
.home-compact .error-state__text { font-size: .9375rem; }
.home-rk__body .home-compact { padding: var(--s-4); }

/* ---------------------------------------------------------------- power rankings */
.home-rk__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.home-rk__card::before {
  /* league-coloured hairline along the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--league);
}
.home-rk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.home-rk__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: .02em;
}
.home-rk__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--league);
}
.home-rk__label {
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.home-rk__body { flex: 1; }
.home-rk__body > .skeleton-group { padding: 0 var(--s-5); }
.home-rk__list { list-style: none; margin: 0; padding: 0; }
.home-rk__row {
  display: grid;
  grid-template-columns: 2rem auto minmax(0, 1fr) auto minmax(64px, 104px);
  align-items: center;
  column-gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.home-rk__row:last-child { border-bottom: 0; }
.home-rk__rank {
  font-size: 1.875rem;
  color: var(--muted);
  text-align: left;
}
.home-rk__row:first-child .home-rk__rank { color: var(--league-ink); }
.home-rk__team { display: grid; min-width: 0; gap: 2px; }
.home-rk__name {
  font-weight: 650;
  font-size: .9875rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-rk__nick { display: none; }
.home-rk__record {
  font-family: var(--font-num);
  font-stretch: 78%;
  font-weight: 600;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
}
.home-rk__rating {
  display: grid;
  gap: 6px;
  justify-items: end;
}
.home-rk__value { font-size: 1.25rem; line-height: 1; }
.home-rk__rating .bar { width: 100%; }
.home-rk__note {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}
.home-rk__empty { padding: var(--s-5); }
.home-rk__foot {
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--line);
}
@media (max-width: 599px) {
  .home-rk__head { padding: var(--s-4); }
  .home-rk__row {
    grid-template-columns: 1.5rem auto minmax(0, 1fr) auto 52px;
    column-gap: 10px;
    padding: var(--s-3) var(--s-4);
  }
  .home-rk__rank { font-size: 1.5rem; }
  .home-rk__full { display: none; }
  .home-rk__nick { display: inline; }
  .home-rk__foot { padding-inline: var(--s-4); }
  .home-rk__note { padding-inline: var(--s-4); }
  .home-rk__body > .skeleton-group { padding: 0 var(--s-4); }
}

/* ---------------------------------------------------------------- latest */
.home-empty__sub { font-size: .9375rem; margin-top: calc(var(--s-2) * -1); }

/* ---------------------------------------------------------------- leaders */
.home-leaders__group + .home-leaders__group { margin-top: var(--s-7); }
.home-leaders__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.home-leaders__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 1.125rem;
}
.home-leaders__body .grid-3 { --gap: var(--s-6); }
@media (min-width: 760px) and (max-width: 1023px) {
  /* three lists don't fit two-up evenly: let the third span */
  .home-leaders__body .grid-3 > :nth-child(3) { grid-column: 1 / -1; }
}

/* Power-ranking rows link to the team page (stretched name link). */
a.home-rk__name { display: block; }
.home-rk__row.has-stretch:hover { background: color-mix(in srgb, var(--league, var(--accent)) 6%, transparent); }

/* ---------------------------------------------------------------- compact doors (home only)
   Smaller top-5 cards so the rankings sit under the articles-led hero without taking over. */
.home-doors--compact { gap: var(--s-4); }
.home-doors--compact .door__head { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
.home-doors--compact .door__logo { width: 36px; height: 36px; }
.home-doors--compact .door__title { font-size: 1.375rem; }
.home-doors--compact .door__sub { padding: var(--s-2) var(--s-4); font-size: .6875rem; }
.home-doors--compact .home-rk__row {
  grid-template-columns: 1.5rem auto minmax(0, 1fr) auto minmax(52px, 72px);
  column-gap: 10px;
  min-height: 44px;
  padding: 6px var(--s-4);
}
.home-doors--compact .home-rk__rank { font-size: 1.25rem; }
.home-doors--compact .home-rk__name { font-size: .9375rem; }
.home-doors--compact .home-rk__record { font-size: .8125rem; }
.home-doors--compact .home-rk__value { font-size: 1rem; }
.home-doors--compact .home-rk__rating { gap: 4px; }
.home-doors--compact .move { min-width: 22px; height: 22px; font-size: .6875rem; }
.home-doors--compact .door__foot { padding: var(--s-3) var(--s-4); gap: var(--s-4); }
.home-doors--compact .home-rk__body > .skeleton-group { padding: 0 var(--s-4); }
@media (max-width: 599px) {
  .home-doors--compact .home-rk__row { grid-template-columns: 1.25rem auto minmax(0, 1fr) auto 48px; padding: 6px var(--s-3); }
  .home-doors--compact .door__head { padding: var(--s-3); }
}