/* =============================================================
   Copa do Mundo — bracket layout.

   Structure:
     .bracket (4 columns: Oitavas | Quartas | Semi | Final)
       .bracket-col
         .bracket-phase-header
         .bracket-col-slots
           .bracket-pair (except Final)
             .bracket-slot × 2
       .bracket-final-wrapper (holds Final slot + 3rd-place, Final col only)
         .bracket-slot (Final)
         .bracket-third-place (absolutely positioned below Final)

   All slots are the same height (58px, two team rows) so the ] connectors
   stay aligned. The 3rd-place match sits in the Final column, just below
   the Final itself — the layout position reflects that it's the round
   after the Semifinal.
   ============================================================= */


/* The site-wide `.table-dark { text-transform: uppercase }` rule
   suits BSA's all-caps faixa siglas (LIB, SUL, REB), but the WC
   siglas include mixed case ("8as", "Semi", "Campeão"). Opt WC
   tooltipped sigla spans out of the uppercase transform. */
.copa-do-mundo .table-dark th span[data-bs-toggle="tooltip"] {
    text-transform: none;
}

/* Classificação Geral — 14 numeric columns + name/logo. Tight padding
   on stat cells so the whole table fits within the site's .container
   without needing horizontal scroll. */
.cdm-classificacao-geral { table-layout: auto; }
.cdm-classificacao-geral th,
.cdm-classificacao-geral td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    white-space: nowrap;
}
.cdm-classificacao-geral th:first-child,
.cdm-classificacao-geral td:first-child { padding-left: 0.5rem; }
.cdm-classificacao-geral th:last-child,
.cdm-classificacao-geral td:last-child  { padding-right: 0.5rem; }

/* Discreet "Grupo A" / "Rodada 1" label shown above a match table.
   Matches the site's breadcrumb style (.stitch-breadcrumb): small,
   muted, regular case — a hint, not a title. Positioned much closer
   to the table below than to the one above, so it visually belongs
   to what follows. */
.cdm-phase-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tema-texto-secundario, #6c757d);
    margin: 1.75rem 0 0.35rem;
    padding-left: 0.25rem;
    line-height: 1.2;
}
.card-body > .cdm-phase-label:first-child,
.cdm-phase-label:first-child { margin-top: 0; }
/* When a label immediately precedes a card, cancel the card's top margin
   so the gap below the label (label ↔ card) stays tight. */
.cdm-phase-label + .card.section-block,
.cdm-phase-label + .section-block { margin-top: 0 !important; }

/* Horizontal scroll wrapper — viewport clips at ~4 columns, any further
   phases slide into view via native overflow-x. The bracket itself is
   sized to its content so column widths stay constant regardless of how
   many phases a given competition has (WC2022 = 4 cols, WC2026 = 5 cols,
   future 64-team brackets = 6 cols). */
.bracket-wrapper {
    overflow-x: auto;
    width: 100%;
}
.bracket {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 0 1.8rem;
    padding: 0.25rem 0;
    width: max-content;
    /* Vertical modulus: every column stretches to the tallest, which is
       col 1 (most pairs × 11rem minmax floor). No explicit bracket
       min-height needed — the .bracket-col-slots minmax drives it. */
}

.bracket-col {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
}

.bracket-phase-header {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    text-align: center;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #0d6efd;
    margin-bottom: 0.6rem;
}

/* Slot grid — equal 1fr rows, count driven by the column's --pairs var.
   The minmax floor enforces a comfortable pair height: 2 slot cards
   (68px each) + breathing room + top-label clearance = ~11rem. Column 1
   always sets the tallest grid (it has the most pairs); columns 2/3/…
   share the same total height and therefore get 2×, 4×, 8× roomier
   pairs — pair midpoints align to the phase that consumes them. */
.bracket-col-slots {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: repeat(var(--pairs, 1), minmax(11rem, 1fr));
}

/* Pair:
     - ::before = vertical segment, only between the two slot midpoints
       (25% → 75% of pair height), so adjacent pairs don't fuse into one
       long continuous line.
     - ::after  = outgoing horizontal line that spans the full grid gap
       (1.8rem) and lands on the next column's slot left edge. */
.bracket-pair {
    display: grid;
    grid-template-rows: 1fr 1fr;
    position: relative;
    padding-right: 0.5rem;
}
.bracket-pair::before {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #9aa2aa;
}
.bracket-pair::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.8rem;
    width: 1.8rem;
    height: 1px;
    background: #9aa2aa;
}

/* Each slot's stub to the pair's vertical line. */
.bracket-slot::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.5rem;
    width: 0.5rem;
    height: 1px;
    background: #9aa2aa;
}

/* -------- Slot card (uniform height, 2 team rows, no legend) --------
   All slots are the same height regardless of whether the match ended
   in regular time, extra time, or penalties. Score cells are added at
   the right of each team row only when applicable. Their positional
   order (regular · extra-time · penalties) is implicit. */
/* Wrap centers the card in its half of the pair. The label floats
   outside the card, positioned just above the card's top edge — it
   never competes with the card's interior and never displaces the
   card's centerline (critical: the bracket's horizontal connector
   stubs land on the card midpoint, so the card must sit at exactly
   50% of the wrap height). */
.bracket-slot-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.bracket-slot {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 1px solid #dee2e6;
    border-radius: 0.35rem;
    background: #fff;
    padding: 0.35rem 0.55rem;
    text-decoration: none;
    color: #333;
    font-size: 0.84rem;
    line-height: 1.25;
    height: 58px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
/* Breadcrumb-style match label, absolutely positioned above the card
   (outside). Bottom-anchored at "50% + half-card-height + 0.2rem" so
   the label's baseline sits just above the card top regardless of the
   wrap's total height. */
.bracket-slot-label {
    position: absolute;
    left: 0.25rem;
    bottom: calc(50% + 29px + 0.2rem);
    font-size: 0.65rem;
    font-weight: 500;
    color: #9aa2aa;
    letter-spacing: 0.02em;
    line-height: 1;
}
.bracket-slot:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.12);
    color: #113;
    z-index: 2;
}
.bracket-slot--resolved { background: #fafdff; }

/* Projected card: participants are the simulator's argmax picks from
   the feeding nodes, not actual qualified teams. Visual cue: subtle
   muted background + italic team names (no dashed border, no flag
   fade — flags keep their actual country colors). The slot-level
   probability sits inline with the team name (NOT in the score column)
   so it reads as "P(team at this slot)", not a match-winning odds. */
.bracket-slot--projected {
    background: #f6f7f9;
}
.bracket-slot-team.projected .bracket-name {
    font-style: italic;
    color: #556;
}
.bracket-proj-pct {
    font-size: 0.7rem;
    font-weight: 500;
    color: #8892a0;
    margin-left: 0.3rem;
    font-variant-numeric: tabular-nums;
    font-style: normal;
}

/* Final column: the Final slot is centered so it aligns with the
   Semifinal pair's midpoint. The 3rd-place match is absolutely
   positioned below the Final slot — close enough to read as "the
   round after the Semis" but not intruding on the Final match. */
.bracket-col[data-fase="final"] .bracket-slot::after { display: none; }
.bracket-col[data-fase="final"] > .bracket-col-slots {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.bracket-final-wrapper {
    align-self: center;
    position: relative;
    width: 100%;
}
.bracket-third-place {
    position: absolute;
    top: calc(100% + 2.5rem);
    left: 0;
    right: 0;
}
.bracket-third-place-header {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    text-align: center;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #ced4da;
    margin-bottom: 0.5rem;
}

.bracket-slot-team {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
/* Only the winner's NAME is emphasized — never the score numbers.
   Scores render as plain tabular numerals so no particular round
   (regular, ET, pens) is visually prioritised over another. */
.bracket-slot-team.winner .bracket-name { font-weight: 700; }
.bracket-slot-team.loser  { color: #999; }
/* Do NOT fade the loser's flag — opacity distorts the country's actual
   colors. Only the team name is muted. */

.bracket-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}
.bracket-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bracket-scores {
    display: inline-flex;
    gap: 0.6rem;
    font-variant-numeric: tabular-nums;
}
.bracket-score { min-width: 0.8em; text-align: right; }

/* -------- Mobile: stack vertically, drop connectors -------- */
@media (max-width: 960px) {
    .bracket {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        min-height: 0;
    }
    .bracket-col, .bracket-col-slots { display: block !important; min-height: 0; }
    .bracket-pair {
        display: block;
        padding-right: 0;
    }
    .bracket-pair::before,
    .bracket-pair::after,
    .bracket-slot::after { display: none !important; }
    .bracket-slot { margin-bottom: 0.5rem; }
    .bracket-final-wrapper { position: static; }
    .bracket-third-place { position: static; margin-top: 1rem; }
}

@media print {
    .bracket { gap: 0.8rem; page-break-inside: avoid; }
    .bracket-slot { break-inside: avoid; }
}