/* The Club page (/clubs/{slug}/, templates/club.html): the landing's own
   bands around the game's components (the round row and badge from
   style.css, CupTable and LeadersCard from their compiled contracts). One
   band shape for the whole page (owner, 2026-10-26): every block is a
   full-width band with its content in the wrap — no inset sheets. Loaded
   only by this page. --club / --club-2 are the Club's colours, validated in
   Go (club_page.go), never a raw value. */

.club-band { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--border); }
.club-band--alt { background: var(--bg-elev); }
.club-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.01em; margin-bottom: 16px; }
.club-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 12px; color: var(--text); }
.club-note { color: var(--text-muted); max-width: 70ch; margin-bottom: 16px; font-size: 0.95rem; }
.club-more { margin-top: 14px; }
.club-more a { color: var(--accent); font-weight: 600; }

/* Two columns on a wide screen, one on a phone. */
.club-duo { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .club-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 1. The hero: the Club's colours wash the band, its crest leads. */
.club-hero { position: relative; isolation: isolate; border-top: 0; overflow: hidden; padding-block: clamp(36px, 6vw, 80px); }
.club-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--club) 42%, transparent), transparent 70%),
    radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--club-2) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--club) 10%, var(--bg)), var(--bg));
}
/* On a phone the crest stands beside the name, so the next match still
   reaches the first screen; from 760px it leads the band on its own. */
.club-hero__inner { display: grid; gap: 10px 16px; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "kicker kicker" "crest title" "sub sub" "fact fact" "hook hook" "cta cta"; align-items: center; }
.club-hero__copy { display: contents; }
.club-hero__crest { grid-area: crest; display: grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border-strong); box-shadow: var(--shadow-panel); }
.club-hero__crest .badge { width: 74%; height: 74%; font-size: 1.3rem; border-radius: 16px; }
.club-hero__kicker { grid-area: kicker; }
.club-hero__title { grid-area: title; }
.club-hero__sub { grid-area: sub; }
.club-hero__fact { grid-area: fact; justify-self: start; }
.club-hero__hook { grid-area: hook; }
.club-hero__actions { grid-area: cta; }
@media (min-width: 760px) {
  .club-hero__inner { column-gap: clamp(28px, 4vw, 48px); row-gap: 0; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "crest kicker" "crest title" "crest sub" "crest fact" "crest hook" "crest cta"; }
  .club-hero__crest { width: clamp(150px, 18vw, 200px); border-radius: 32px; align-self: center; }
  .club-hero__crest .badge { font-size: 2.4rem; border-radius: 22px; }
}
.club-hero__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); }
.club-hero__kicker .comp-logo { width: 22px; height: 22px; }
.club-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
@media (min-width: 760px) { .club-hero__title { margin: 6px 0 10px; } }
.club-hero__sub { font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.club-hero__item { white-space: nowrap; }
.club-hero__dot { color: var(--text-muted); }
.club-hero__fact { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 14px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; }
.club-hero__fact--live { background: color-mix(in srgb, var(--live) 14%, transparent); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.club-hero__hook { margin-top: 4px; max-width: 60ch; color: var(--text-muted); }
.club-hero__actions { margin-top: 10px; }
@media (min-width: 760px) { .club-hero__fact, .club-hero__hook { margin-top: 14px; } .club-hero__actions { margin-top: 22px; } }

/* 2. The next match card. */
.club-next__card { padding: clamp(16px, 3vw, 24px); border-radius: var(--radius-lg); background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-top: 3px solid var(--club); }
.club-next__comp a, .club-next__comp { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.club-next__board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 16px; }
.club-next__side { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.club-next__name { font-weight: 700; overflow-wrap: anywhere; }
.club-next__centre { display: grid; justify-items: center; gap: 4px; }
.club-next__when { display: grid; justify-items: center; gap: 2px; }
.club-next__date { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; white-space: nowrap; }
.club-next__time { color: var(--text-muted); font-weight: 600; }
.club-next__score { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.club-next__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 14px; color: var(--text-muted); font-size: 0.9rem; text-align: center; }
.club-next .crowd { margin-inline: auto; }
.club-next .club-h3 { margin-top: 18px; text-align: center; }
.club-next__actions { display: flex; justify-content: center; margin-top: 18px; }
.club-next__pair { margin-top: 14px; text-align: center; }
.club-next__pair a { color: var(--accent); font-weight: 600; }

/* 3. Form: the chips, then each result linking to its page. */
.club-form .form-chips { justify-content: flex-start; margin-bottom: 12px; }
.club-form .form-chip { width: 32px; height: 32px; font-size: 0.85rem; border-radius: 8px; }
.club-form__list { list-style: none; }
.club-form__row { color: inherit; text-decoration: none; }
a.club-form__row:hover .form-row__name { color: var(--accent); }

/* 4. Fixtures & results: the top matches' cards in one column each. */
.club-fixtures { grid-template-columns: minmax(0, 1fr) !important; }

/* 5. Table windows. */
.club-tables { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .club-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.club-table__title { display: flex; align-items: center; gap: 8px; }

/* 7. Season in numbers. */
/* Two columns on a phone, four from tablet up: the eight figures read as two
   even rows instead of six and an orphaned two. */
.club-stats { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .club-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.club-stat { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); }
.club-stat__icon, .club-stat__chip, .club-stat__meter { width: 26px; height: 26px; margin-bottom: 4px; }
.club-stat__icon--muted { opacity: 0.55; }
.club-stat__chip { display: grid; place-items: center; border-radius: 7px; font-size: 0.8rem; }
.club-stat__meter { border-radius: 50%; background: conic-gradient(var(--club) calc(var(--p) * 1%), var(--bg-elev-2) 0);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%); mask: radial-gradient(circle, transparent 46%, #000 48%); }
.club-stat__value { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; line-height: 1.1; }
.club-stat__label { font-weight: 600; }
.club-stat__sub { color: var(--text-muted); font-size: 0.85rem; }

/* 8. Every opponent: one line on a wide screen — the opponent, its last
   meeting (home Club first, the result's colour), the record — two on a
   phone. */
.club-opps { list-style: none; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .club-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } }
.club-opp { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "club club" "last record"; gap: 6px 12px; align-items: center;
  padding: 10px 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); color: inherit; text-decoration: none; min-height: 44px; }
.club-opp:hover { border-color: var(--border-strong); }
.club-opp:hover .club-opp__name { color: var(--accent); }
.club-opp__club { grid-area: club; display: flex; align-items: center; gap: 10px; min-width: 0; }
.club-opp__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-opp__record { grid-area: record; display: flex; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.club-opp__record > span[aria-hidden] { display: grid; justify-items: center; min-width: 1.5rem; }
.club-opp__record small { color: var(--text-muted); font-size: 0.65rem; font-weight: 600; line-height: 1.2; }
.club-opp__last { grid-area: last; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text-muted); font-size: 0.82rem; min-width: 0; }
.club-opp__score { color: var(--text); font-weight: 600; white-space: nowrap; }
.club-opp__score b { display: inline-block; padding: 1px 7px; margin-inline: 2px; border-radius: 6px; color: var(--accent-ink); font-size: 0.85rem; line-height: 1.5; }
.club-opp__score--W b { background: #3ccf7a; }
.club-opp__score--D b { background: #8593a0; }
.club-opp__score--L b { background: var(--negative); }
@media (min-width: 1100px) {
  .club-opp { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "club last record"; }
  .club-opp__last { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* 9. Squad. */
.club-squad { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .club-squad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.club-squad__list { list-style: none; display: grid; gap: 8px; }
.club-player { display: grid; grid-template-columns: auto 2rem minmax(0, 1fr); gap: 12px; align-items: center; }
.club-player__no { color: var(--text-muted); font-weight: 700; text-align: right; }
.club-player__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 10. Facts. */
.club-facts__list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.club-fact { padding: 14px 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.club-fact dt { color: var(--text-muted); font-size: 0.85rem; }
.club-fact dd { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-top: 2px; }
.club-fact__flag { border-radius: 2px; }
.club-about p { max-width: 70ch; }
.club-about .club-note { margin-top: 14px; font-size: 0.85rem; }

/* The closing spotlight sits below the last band, its own rounded block. */
.club > .spot { margin-top: clamp(28px, 4vw, 48px); }