/* ============================================================
   world-cup-knockout-v2.css
   Sky-style knockout bracket for the /world-cup/ hub.
   v2 — 2026-06-26. Team-rows in match-pairs, L-shaped connectors,
   feeder-aligned columns. Light cards, navy text, blue accents.
   Pairs with world-cup-hub.css + shared.css.

   Palette: tokens from assets/shared.css (--navy #0d1b3e, --blue #2979e8,
   --blue-pale #e8f1fd, --navy-mid, --navy-light) — the same set
   .wc-group-card uses. Mapped via the scoped --bk-* block (with fallbacks).
   No --font-mono token, so the mono font is a literal ("DM Mono").

   Layout model: fixed match height (--mh) + per-round calculated offsets,
   so every match sits at the exact vertical midpoint of its two feeders.
   Connectors: 2 pseudo-elements per match (::after = outgoing elbow as a
   feeder, ::before = incoming stub as a receiver) — no pseudo conflict at
   any round. Bracket-ORDER columns (not match-number order) keep lines
   from crossing.
   ============================================================ */

.wc-bracket-v2{
  --mh:92px;                              /* fixed match height (meta + 2 team rows) */
  --g:18px;                               /* base gap between Round-of-32 matches */
  --gut:54px;                             /* gutter between round columns (holds connectors) */
  --col:240px;                            /* column width — fits "Bosnia-Herzegovina" without truncation */
  --pitch:calc(var(--mh) + var(--g));     /* Round-of-32 centre-to-centre pitch */
  --bk-line:2px solid rgba(41,121,232,.45);   /* subtle muted-blue connector */
  --bk-text:var(--navy,#0d1b3e);
  --bk-text-mid:var(--navy-mid,#1a2f5e);
  --bk-text-soft:var(--navy-light,#2a4080);
  --bk-card:var(--paper-card,#ffffff);
  --bk-surface:var(--blue-pale,#e8f1fd);
  --bk-accent:var(--blue,#2979e8);
  --bk-border:rgba(13,27,62,.12);
  --bk-border-soft:rgba(13,27,62,.08);
  --bk-mono:"DM Mono","JetBrains Mono",ui-monospace,monospace;
  margin:2.5rem 0; padding:0 var(--gut);
}

.wc-bracket-v2-head{ max-width:720px; margin:0 0 1.5rem; }
.wc-bracket-v2-head h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.1; color:var(--bk-text); margin:0 0 .4rem; }
.wc-bracket-v2-sub{ font-size:.95rem; line-height:1.5; color:var(--bk-text-soft); margin:0; }

/* horizontal scroll on narrow viewports — bracket structure is preserved */
.wc-bracket-scroll{
  overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
  padding:.25rem 0 1rem; scrollbar-width:thin;
}
.wc-bracket-grid{ display:flex; align-items:flex-start; gap:var(--gut); width:max-content; min-width:1240px; }

/* ---- per-round column ---- */
.wc-bracket-round{ display:flex; flex-direction:column; flex:0 0 var(--col); width:var(--col); }
.wc-bracket-round[data-round="r32"]  { --eh:calc(var(--pitch) * 0.5); }
.wc-bracket-round[data-round="r16"]  { --eh:var(--pitch); }
.wc-bracket-round[data-round="qf"]   { --eh:calc(var(--pitch) * 2); }
.wc-bracket-round[data-round="sf"]   { --eh:calc(var(--pitch) * 4); }
.wc-bracket-round[data-round="final"]{ --eh:0; }

.wc-bracket-round-header{
  font-family:var(--bk-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bk-text); background:var(--bk-surface); border:1px solid var(--bk-border-soft);
  border-radius:6px; padding:.4rem .6rem; margin:0 0 .9rem; text-align:center;
}

/* ---- the staircase: per-round vertical offset + gap so a match centres on its feeder pair ---- */
.wc-bracket-matches{ position:relative; }
.wc-bracket-round[data-round="r32"]   .wc-bracket-matches{ padding-top:0; }
.wc-bracket-round[data-round="r16"]   .wc-bracket-matches{ padding-top:calc(var(--pitch) * 0.5); }
.wc-bracket-round[data-round="qf"]    .wc-bracket-matches{ padding-top:calc(var(--pitch) * 1.5); }
.wc-bracket-round[data-round="sf"]    .wc-bracket-matches{ padding-top:calc(var(--pitch) * 3.5); }
.wc-bracket-round[data-round="final"] .wc-bracket-matches{ padding-top:calc(var(--pitch) * 7.5); }

.wc-bracket-round[data-round="r32"] .wc-bracket-match{ margin-bottom:var(--g); }
.wc-bracket-round[data-round="r16"] .wc-bracket-match{ margin-bottom:calc(var(--pitch) * 2 - var(--mh)); }
.wc-bracket-round[data-round="qf"]  .wc-bracket-match{ margin-bottom:calc(var(--pitch) * 4 - var(--mh)); }
.wc-bracket-round[data-round="sf"]  .wc-bracket-match{ margin-bottom:calc(var(--pitch) * 8 - var(--mh)); }

/* Each column's last match carries a trailing margin-bottom that inflates the
   column height (the SF column's 788px trailing margin drove the whole grid,
   leaving dead space below R32's last match). Zero it. Connectors are unaffected:
   they depend on padding-top + the margins BETWEEN matches, never the trailing one. */
.wc-bracket-matches .wc-bracket-match:last-child{ margin-bottom:0; }

/* ---- a match: meta row + two team rows, fixed height ---- */
.wc-bracket-match{
  position:relative; box-sizing:border-box; height:var(--mh);
  background:var(--bk-card); border:1px solid var(--bk-border); border-radius:9px;
  padding:.35rem .5rem; box-shadow:0 1px 2px rgba(13,27,62,.05);
  transition:box-shadow .15s ease;
}
.wc-bracket-match:hover{ box-shadow:0 3px 10px rgba(13,27,62,.1); }
.wc-bracket-match-tbd{ background:var(--bk-surface); border-style:dashed; box-shadow:none; opacity:.85; }
/* Final card emphasis */
.wc-bracket-round[data-round="final"] .wc-bracket-match[data-match="M104"]{ border-color:var(--bk-accent); border-width:1.5px; }

.wc-bracket-meta{
  display:flex; align-items:baseline; gap:.4rem; font-family:var(--bk-mono);
  font-size:.62rem; letter-spacing:.02em; color:var(--bk-text-soft); margin-bottom:.3rem;
}
.wc-bracket-num{ color:var(--bk-accent); font-weight:700; }
.wc-bracket-tag{ color:var(--bk-text-mid); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.wc-bracket-datetime{ font-weight:600; color:var(--bk-text-mid); }
.wc-bracket-venue{ margin-left:auto; text-transform:uppercase; font-size:.55rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:10.5rem; }

.wc-bracket-teams{ display:flex; flex-direction:column; }
.wc-bracket-team{
  display:flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--bk-text);
  font-size:.86rem; line-height:1.2; height:26px; border-radius:4px;
}
.wc-bracket-team + .wc-bracket-team{ border-top:1px solid var(--bk-border-soft); }
a.wc-bracket-team:hover .wc-bracket-team-name,
a.wc-bracket-team:focus-visible .wc-bracket-team-name{ text-decoration:underline; text-underline-offset:2px; }
.wc-bracket-team-flag.fi{ flex:0 0 auto; width:1.3em; height:1em; border-radius:2px; box-shadow:0 0 0 1px var(--bk-border); }
.wc-bracket-team-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-bracket-team-placeholder{ color:var(--bk-text-soft); font-style:italic; cursor:default; }
.wc-bracket-team-placeholder .wc-bracket-team-name{ font-weight:500; }
/* data-resolved states (build-world-cup-knockout.mjs): score chip + winner/eliminated */
.wc-bracket-team-score{ margin-left:auto; padding-left:.5rem; font-family:var(--bk-mono); font-weight:700; font-size:.8rem; color:var(--bk-text-mid); font-variant-numeric:tabular-nums; }
.wc-bracket-team--won .wc-bracket-team-name{ font-weight:700; color:var(--bk-text); }
.wc-bracket-team--won .wc-bracket-team-score{ color:var(--bk-accent); }
.wc-bracket-team--out{ opacity:.6; }

/* ============================================================
   CONNECTORS — 2 pseudo-elements per match, no conflict:
     ::after  = OUTGOING elbow (this match as a feeder): horizontal out of
                its centre, then vertical to the feeder-pair centreline.
     ::before = INCOMING horizontal stub (this match as a receiver).
   Top feeder    (:nth-child(odd))  -> elbow drops DOWN (border-top + border-right).
   Bottom feeder (:nth-child(even)) -> elbow rises UP  (border-bottom + border-right).
   Elbow height = half the feeder-pair pitch = --eh (set per round).
   ============================================================ */
.wc-bracket-round:not([data-round="final"]) .wc-bracket-match::after{
  content:""; position:absolute; left:100%; width:calc(var(--gut) / 2);
  height:var(--eh); border-right:var(--bk-line); box-sizing:border-box;
}
.wc-bracket-round:not([data-round="final"]) .wc-bracket-match:nth-child(odd)::after{
  top:50%; border-top:var(--bk-line);                          /* top of pair: out then down */
}
.wc-bracket-round:not([data-round="final"]) .wc-bracket-match:nth-child(even)::after{
  top:calc(50% - var(--eh)); border-bottom:var(--bk-line);     /* bottom of pair: out then up */
}
.wc-bracket-round:not([data-round="r32"]) .wc-bracket-match::before{
  content:""; position:absolute; right:100%; width:calc(var(--gut) / 2);
  top:50%; border-top:var(--bk-line); box-sizing:border-box;
}
/* the third-place card is not part of the bracket flow — no connectors */
.wc-bracket-match--standalone{ margin-top:2.25rem; }
.wc-bracket-match--standalone::before,
.wc-bracket-match--standalone::after{ content:none !important; }

/* ============================================================
   Group Stage Archive — demoted section below the bracket.
   ============================================================ */
.wc-group-archive{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--bk-border); }
.wc-group-archive-head h2{ font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--bk-text-mid); margin:0 0 .3rem; }
.wc-group-archive-head p{ font-size:.9rem; color:var(--bk-text-soft); margin:0 0 1.25rem; }
.wc-group-archive .wc-group-card{ opacity:.82; transform:scale(.99); transition:opacity .15s ease, transform .15s ease; }
.wc-group-archive .wc-group-card:hover{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1240px){
  .wc-bracket-v2{ padding:0 1rem; }
}
@media (max-width:600px){
  .wc-bracket-v2{ padding:0 .75rem; }
}
@media (prefers-reduced-motion:reduce){
  .wc-bracket-match,
  .wc-group-archive .wc-group-card{ transition:none; }
}