/* =========================================================
   STADIUM DAYLIGHT — Bracket page (/bracket)
   Read-only knockout tree: R32 → R16 → QF → SF → Final.
   Tokens: tokens.css. Conventions: BEM, mobile-first.
   ========================================================= */

.bracket-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
}

.bracket-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bracket-page__heading {
  margin: 0;
}

.bracket-page__intro {
  margin: 0;
  font-size: 14px;
  color: var(--slate);
  max-width: 56ch;
}

.bracket-page__empty {
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--slate);
  text-align: center;
  margin: 0;
}

/* ---- Tree layout ---------------------------------------------------- */

/* Five columns on desktop: R32 | R16 | QF | SF | Final (+ 3rd-place
   tucked under the Final column). On mobile, the columns stack so
   each round becomes a vertically-scrolling section. */
.bracket-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.bracket-tree__round {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.bracket-tree__matches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bracket-tree__round-heading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0 0 var(--space-xs);
  position: sticky;
  top: 0;
  background: var(--chalk);
  padding: var(--space-xs) 0;
  z-index: 1;
}

.bracket-tree__round-heading--secondary {
  margin-top: var(--space-lg);
  color: var(--slate);
  font-size: 14px;
}

/* ---- Match cell ----------------------------------------------------- */

/* Layout wrapper only — the visual treatment is delegated to the
   shared matches/_card partial (.match-card). Keep `position: relative`
   so the connector-line pseudo-elements below anchor against this
   wrapper, but suppress the link's default underline that bubbles up
   through the nested anchor. */
.bracket-match {
  position: relative;
}
.bracket-match .match-card-link { text-decoration: none; color: inherit; }

/* ---- Desktop layout ------------------------------------------------- */

@media (min-width: 880px) {
  .bracket-tree {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
  }
  /* Round column fills the tallest column's height so later rounds can
     distribute their fewer cards across the same vertical span — gives
     the classic tournament-bracket alignment (R16 cards align with the
     midpoint of their R32 feeders). */
  .bracket-tree__round {
    height: 100%;
  }
  .bracket-tree__matches {
    flex: 1;
    justify-content: space-around;
    position: relative;
    --n: 1;
  }
  /* Third-place sits at natural height under the Final column instead
     of distributing across the same span — it isn't part of the main
     elimination path. */
  .bracket-tree__matches--secondary {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .bracket-tree__round-heading {
    position: static;
  }
  /* Tighten the shared match-card inside the bracket: 5 cells per row
     at desktop don't have room for the full DESIGN.md poster layout.
     Compact padding, smaller mono codes, smaller flag, smaller meta. */
  .bracket-match .match-card {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }
  .bracket-match .match-card__team { gap: var(--space-xs); }
  .bracket-match .match-card__team-code { font-size: 12px; }
  .bracket-match .match-card__team .flag { width: 20px; }
  .bracket-match .match-card__centerline { font-size: 14px; }
  .bracket-match .match-card__meta { font-size: 11px; }

  /* ---- Connector lines (CSS-only) ----------------------------------
     Two ingredients, no JS:
       1. Horizontal nubs grow out of every card's mid-height into the
          column gap (::before to the left, ::after to the right).
       2. A vertical pair-line at the right edge of each column draws
          one segment per pair via a repeating-linear-gradient. The
          gradient is parameterised by --n (number of cards in the
          column) so one declaration per round covers all segments.
     Pair midpoints already align with the next round's card centers
     thanks to `justify-content: space-around`, so the nubs land on
     the gradient segments exactly where the math expects. */
  .bracket-match {
    position: relative;
  }
  .bracket-match::before,
  .bracket-match::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(var(--space-md) / 2);
    height: 1px;
    background: var(--border);
  }
  .bracket-match::before { right: 100%; }
  .bracket-match::after  { left: 100%; }

  /* First column has nothing to the left; last column nothing to the
     right; troostfinale is a one-off match that sits unconnected. */
  .bracket-tree__round:first-child .bracket-match::before,
  .bracket-tree__round:last-child .bracket-match::after,
  .bracket-tree__matches--secondary .bracket-match::before { display: none; }

  /* Pair-line: for N cards, each pair occupies (200/N)% of the column
     height. Within each period, the line spans (50/N)% → (150/N)%
     i.e., card 0's center → card 1's center. */
  .bracket-tree__matches::after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--space-md) / -2);
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0 calc(50% / var(--n)),
      var(--border) calc(50% / var(--n)) calc(150% / var(--n)),
      transparent calc(150% / var(--n)) calc(200% / var(--n))
    );
  }

  .bracket-tree__round:nth-child(1) .bracket-tree__matches { --n: 16; }
  .bracket-tree__round:nth-child(2) .bracket-tree__matches { --n: 8; }
  .bracket-tree__round:nth-child(3) .bracket-tree__matches { --n: 4; }
  .bracket-tree__round:nth-child(4) .bracket-tree__matches { --n: 2; }

  /* Final + troostfinale have no outgoing pair-line. */
  .bracket-tree__round:last-child .bracket-tree__matches::after,
  .bracket-tree__matches--secondary::after { display: none; }
}