/* =============================================================
   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 — also the CSS container whose inline size
   drives the container-query breakpoints below.  Column widths are
   calculated from this container's width so the visible column count is
   always an integer — no fractional column clipped at the right edge. */
.bracket-wrapper {
    overflow-x: auto;
    width: 100%;
    container-type: inline-size;
}
.bracket {
    display: grid;
    grid-auto-flow: column;
    /* Column width + gap are driven by @container rules below.
       Fallback (no container-query support): fixed 240px columns. */
    grid-auto-columns: 240px;
    --gap: 1.5rem;
    --stub: 0.5rem;
    --half-card: 29px;       /* 58px / 2 — used by 3rd-place alignment */
    gap: 0 var(--gap);
    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-width: 0;            /* prevent content from inflating the
                                grid track beyond grid-auto-columns */
    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-width: 0;
    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
       and lands on the next column's slot left edge.
   Connector dimensions use --gap/--stub vars set on .bracket so they
   stay in sync when the gap changes across breakpoints. */
.bracket-pair {
    display: grid;
    grid-template-rows: 1fr 1fr;
    position: relative;
    padding-right: var(--stub);
    min-width: 0;
}
.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: calc(-1 * var(--gap));
    width: var(--gap);
    height: 1px;
    background: #9aa2aa;
}

/* Each slot's stub to the pair's vertical line. */
.bracket-slot::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--stub));
    width: var(--stub);
    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;
    min-width: 0;
    max-width: 100%;         /* hard cap: card + label never exceed
                                the column track width */
}
.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;
    min-width: 0;            /* allow card to respect grid track width
                                instead of expanding to fit content */
    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;
    right: 0.25rem;
    bottom: calc(50% + 29px + 0.2rem);
    font-size: 0.65rem;
    font-weight: 500;
    color: #9aa2aa;
    letter-spacing: 0.02em;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.bracket-slot-date {
    font-weight: 400;
    color: #b0b8c0;
    font-size: 0.6rem;
}
.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;
}

/* Projected-view confronto win probability — sits in the score column so
   it reads as the match-outcome odds, not a marginal "team at this slot"
   chance. Favorito/zebra tint comes from the site-wide CSS vars already
   consumed by the inline probability bar, keeping bracket and listings
   visually consistent. */
.bracket-proj-winpct {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0 0.4rem;
    border-radius: 0.25rem;
    line-height: 1.4;
}
/* Use the same tinted-background + dark-text treatment that the chances
   bar (probability_bar.html) and classificação row tints already use:
   rgba(var(...), 0.24-0.28) on white-ish background, color #333 on top.
   Bumping alpha to a vivid rgb(var(...)) breaks the site's visual
   language — keep it muted to match the rest of the page. */
.bracket-proj-winpct--favorito {
    color: #333;
    background: rgba(var(--cor-favorito), 0.28);
}
.bracket-proj-winpct--zebra {
    color: #333;
    background: rgba(var(--cor-zebra), 0.24);
}

/* Final column: the Final slot is centered so it aligns with the
   Semifinal pair's midpoint. The 3rd-place match is absolutely
   positioned within the col-slots container (not the wrapper) so it
   can be bottom-anchored to align with the bracket's geometry:
   card bottom == bottom of the lower Semifinal card.

   Math: Semi has 1 pair filling col-slots height H. Bottom slot wrap
   spans H/2→H. Card (58px) centered at 3H/4. Card bottom = 3H/4 + 29
   = H − (H/4 − 29). So bottom: calc(25% − half-card). */
.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;
    position: relative;      /* positioning context for 3rd-place */
}
.bracket-final-wrapper {
    align-self: center;
    width: 100%;
}
/* 3rd-place card bottom-aligned to the bracket's visual grid.
   The % references col-slots height H; --half-card tracks the
   responsive card height (29/24/21 px).

   4-col (WC2022): align with lower Semi card.
     Semi bottom card bottom = 3H/4 + half_card → 25% from bottom.
   5-col (WC2026): align with 3rd Quartas card (top of pair 2).
     QF card 3 bottom = 5H/8 + half_card → 37.5% from bottom.
*/
.bracket-third-place {
    position: absolute;
    bottom: calc(25% - var(--half-card));   /* 4-col default */
    left: 0;
    right: 0;
}
.bracket--5cols .bracket-third-place {
    bottom: calc(37.5% - var(--half-card)); /* 5-col: higher */
}
.bracket-sub-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;
    /* Clearance for the next card's absolutely-positioned "Jogo N" label
       (sits above the card top). 1.6rem keeps the 3rd-place card
       tight against the header while leaving visible gap above the
       label. */
    margin-bottom: 1.2rem;
}

.bracket-slot-team {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;            /* propagate shrink constraint to children */
}
/* 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;
    min-width: 0;           /* override flex min-width:auto so the item
                               can shrink below its content width and
                               text-overflow: ellipsis actually fires */
    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; }

/* -------- Name tiers: full / curto / sigla --------
   Three display tiers, switched by @container queries below:
     bracket-name-full  — full nome           (wide columns, ≥220px)
     bracket-name-curto — nome_curto or nome  (medium, 170–219px)
     bracket-name-sigla — sigla               (narrow, <170px)
   Default: show nome-curto (safe middle ground). */
.bracket-slot .bracket-name-full  { display: none; }
.bracket-slot .bracket-name-curto { display: inline; }
.bracket-slot .bracket-name-sigla { display: none; }

/* -------- Discreet Real · Projeção toggle (all viewports) --------
   Replaces the btn-group that used to sit next to the h1. Styled in the
   breadcrumb/phase-label aesthetic — muted text for inactive, primary
   + bold + underline for active, middle-dot separator. Applies at all
   sizes: the old buttons were visually heavy even on desktop. */
.bracket-view-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.2;
}
.bracket-view-toggle__opt {
    color: #8892a0;
    text-decoration: none;
    font-weight: 500;
}
.bracket-view-toggle__opt:hover { color: #0d6efd; }
.bracket-view-toggle__opt.is-active {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bracket-view-toggle__sep { color: #c0c6ce; }

/* =============================================================
   Container-query-driven column widths.

   Column width = (container - (visible - 1) × gap) / visible,
   capped at 240px. When all columns fit (visible = total), the
   bracket fills 100% of the container. When they don't, width
   stays max-content and the sized-for-N columns scroll naturally.

   Breakpoint formula: threshold(N) = N × 150 + (N − 1) × 24.
     5 cols: 846px   4 cols: 672px   3 cols: 498px   2 cols: 324px
   ============================================================= */

/* ── 5-column brackets (WC2026, 48+ team tournaments) ── */
@container (min-width: 846px) {
    .bracket--5cols {
        width: 100%;
        grid-auto-columns: min(240px, calc((100cqi - 4 * 1.5rem) / 5));
    }
}
@container (min-width: 672px) and (max-width: 845.98px) {
    .bracket--5cols {
        width: max-content;
        grid-auto-columns: calc((100cqi - 3 * 1.5rem) / 4);
    }
}
@container (min-width: 498px) and (max-width: 671.98px) {
    .bracket--5cols {
        width: max-content;
        grid-auto-columns: calc((100cqi - 2 * 1.5rem) / 3);
    }
}
@container (max-width: 497.98px) {
    .bracket--5cols {
        width: max-content;
        grid-auto-columns: calc((100cqi - 1.5rem) / 2);
    }
}

/* ── 4-column brackets (WC2022, 32-team tournaments) ── */
@container (min-width: 672px) {
    .bracket--4cols {
        width: 100%;
        grid-auto-columns: min(240px, calc((100cqi - 3 * 1.5rem) / 4));
    }
}
@container (min-width: 498px) and (max-width: 671.98px) {
    .bracket--4cols {
        width: max-content;
        grid-auto-columns: calc((100cqi - 2 * 1.5rem) / 3);
    }
}
@container (max-width: 497.98px) {
    .bracket--4cols {
        width: max-content;
        grid-auto-columns: calc((100cqi - 1.5rem) / 2);
    }
}

/* ── Name tier switching (container-query-driven) ──
   Thresholds tuned so the name tier matches the effective column
   width at each visible-column count.

   nome completo: container ≥ 1200px (col ≥ ~220px for 5, ≥ ~260px for 4)
   nome curto:    700px ≤ container < 1200px
   sigla:         container < 700px

   The date span inside the slot label follows the same tier:
   shown only when columns are wide enough for nome completo. */
@container (min-width: 1200px) {
    .bracket-slot .bracket-name-full  { display: inline; }
    .bracket-slot .bracket-name-curto { display: none; }
}
@container (max-width: 699.98px) {
    .bracket-slot .bracket-name-curto { display: none; }
    .bracket-slot .bracket-name-sigla { display: inline; }
    .bracket-slot-date { display: none; }
}


/* -------- Compact (≤767.98px): shrink slot cards, keep connectors --------
   Column widths and name tiers are now driven by @container queries
   above — this media query handles only viewport-dependent sizing
   (slot height, font sizes, label positioning, 3rd-place offset). */
@media (max-width: 767.98px) {
    .bracket { --stub: 0.4rem; --half-card: 24px; /* 48px/2 */ }
    .bracket-col-slots { grid-template-rows: repeat(var(--pairs, 1), minmax(8rem, 1fr)); }
    .bracket-phase-header { font-size: 0.7rem; padding-bottom: 0.25rem; margin-bottom: 0.45rem; }
    .bracket-slot {
        height: 48px;
        font-size: 0.72rem;
        padding: 0.25rem 0.4rem;
    }
    .bracket-flag { width: 18px; height: 12px; }
    .bracket-slot-team { gap: 0.3rem; }
    .bracket-scores { gap: 0.4rem; }
    .bracket-proj-pct { font-size: 0.62rem; margin-left: 0.2rem; }
    .bracket-proj-winpct { font-size: 0.66rem; padding: 0 0.3rem; }
    .bracket-slot-label {
        bottom: calc(50% + 24px + 0.15rem);
        font-size: 0.6rem;
    }
    .bracket-sub-header { font-size: 0.65rem; }
}

/* -------- xs (≤575.98px): ultra-compact phone portrait -------- */
@media (max-width: 575.98px) {
    .bracket { --stub: 0.35rem; --half-card: 21px; /* 42px/2 */ }
    .bracket-col-slots { grid-template-rows: repeat(var(--pairs, 1), minmax(7rem, 1fr)); }
    .bracket-phase-header { font-size: 0.65rem; letter-spacing: 0.02em; }
    .bracket-slot {
        height: 42px;
        font-size: 0.7rem;
        padding: 0.2rem 0.35rem;
        border-radius: 0.3rem;
    }
    .bracket-flag { width: 16px; height: 11px; }
    .bracket-slot-team { gap: 0.25rem; }
    .bracket-scores { gap: 0.3rem; }
    .bracket-proj-pct { font-size: 0.6rem; }
    .bracket-proj-winpct { font-size: 0.62rem; padding: 0 0.25rem; }
    /* Per-card "Jogo N" label — orientation aid that becomes noise at
       this size. Bracket position already conveys round + slot. */
    .bracket-slot-label { display: none; }
    .bracket-sub-header { font-size: 0.62rem; padding-bottom: 0.2rem; margin-bottom: 0.35rem; }
    /* Toggle shrinks in concert with the rest of the header. */
    .bracket-view-toggle { font-size: 0.75rem; }
}

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