/**
 * fanorate/knockout-rounds — the bracket, as a TREE.
 *
 * A horizontal bracket on a tinted band: columns left→right (R32 → R16 → QF →
 * SF → Final), each round halving into the next, joined by CSS connector elbows
 * so the eye follows winners through to the final. Each tie is a small card with
 * the two sides (flag + team); the predicted winner is a navy row + green ✓, the
 * loser muted. Upset ties get an amber frame. Round notes stack beneath. The
 * bracket scrolls horizontally on narrow screens. Deliberately NOT a table — so
 * it never reads like the group standings.
 */

.section-knockout-rounds {
  padding-block: clamp(40px, 6vw, 72px);
  --kob-gap: 30px;
  --kob-line: var(--border-default, #cfcfd6);
  background: var(--surface-card);
}

.section-knockout-rounds .knockout-rounds__wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section-knockout-rounds .knockout-rounds__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font: var(--eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}
.section-knockout-rounds .knockout-rounds__kicker::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 100px;
  background: currentColor;
  display: inline-block;
}
.section-knockout-rounds .knockout-rounds__title {
  color: var(--color-accent);
  margin: 12px 0 0;
}
.section-knockout-rounds .knockout-rounds__intro {
  font: var(--body);
  font-family: var(--font-ui);
  color: var(--text-secondary);
  margin: var(--space-md) 0 var(--space-xl);
  max-width: 72ch;
}

/* ---------- Bracket scroller ---------- */
.section-knockout-rounds .knockout-rounds__scroll {
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
}

.section-knockout-rounds .kob {
  display: flex;
  gap: var(--kob-gap);
  min-width: 880px;
  align-items: stretch;
}

.section-knockout-rounds .kob__round {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}

.section-knockout-rounds .kob__round-head {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--color-accent, #0a2240);
}
.section-knockout-rounds .kob__round-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
  line-height: 1.05;
}
.section-knockout-rounds .kob__round-dates {
  font: var(--caption);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

/* column of flush match slots (no gap — connectors rely on this) */
.section-knockout-rounds .kob__col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-knockout-rounds .kob__match {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Connector elbows ----------
   Each round halves into the next; flush flex:1 slots mean a later match spans
   exactly its two feeders. Feeder slots send a horizontal line across the gap;
   the receiving match draws a vertical line down its left edge joining the two
   incoming lines (at 25%/75% of its taller box). */
.section-knockout-rounds .kob__round:not(:last-child) .kob__match::after {
  content: "";
  position: absolute;
  left: 100%;
  width: var(--kob-gap);
  top: 50%;
  height: 2px;
  background: var(--kob-line);
}
.section-knockout-rounds .kob__round:not(:first-child) .kob__match::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--kob-line);
}

/* ---------- Tie card ---------- */
.section-knockout-rounds .kob__card {
  position: relative;
  background: var(--surface-page, #fff);
  border: 1px solid var(--border-subtle, #e3e3e8);
  border-radius: var(--radius-md, 12px);
  padding: 8px 10px 10px;
  margin-block: 6px;
  box-shadow: var(--shadow-sm);
}
.section-knockout-rounds .kob__card--upset {
  border-color: var(--color-warning, #d98a1f);
  box-shadow: 0 0 0 1px rgba(217, 138, 31, 0.35), var(--shadow-sm);
}

.section-knockout-rounds .kob__num {
  display: block;
  font: var(--caption);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.section-knockout-rounds .kob__card--upset .kob__num {
  color: var(--color-warning, #d98a1f);
}

.section-knockout-rounds .kob__teams {
  display: grid;
  gap: 4px;
}
.section-knockout-rounds .kob__side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  min-width: 0;
}
.section-knockout-rounds .kob__side--win {
  background: var(--color-accent, #0a2240);
}
.section-knockout-rounds .kob__side--win .kob__team {
  color: var(--text-inverse, #fff);
  font-weight: 800;
}
.section-knockout-rounds .kob__side--lose {
  background: var(--surface-card, #f7f7f8);
}
.section-knockout-rounds .kob__side--lose .kob__team {
  color: var(--text-tertiary, #8a8a92);
}
.section-knockout-rounds .kob__flag {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}
.section-knockout-rounds .kob__team {
  font: var(--body-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-knockout-rounds .kob__check {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-success, #1f8a4d);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Final cap node ---------- */
.section-knockout-rounds .kob__round--final { min-width: 130px; }
.section-knockout-rounds .kob__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-block: 6px;
  padding: 16px 12px;
  color: var(--text-inverse, #fff);
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(46, 105, 181, 0.5) 0%, transparent 65%),
    linear-gradient(150deg, var(--color-accent-light, #14315a), var(--color-accent-dark, #061528));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md);
}
.section-knockout-rounds .kob__final-trophy { font-size: 24px; line-height: 1; }
.section-knockout-rounds .kob__final-label {
  font: var(--eyebrow);
  font-family: var(--font-ui);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #ff8b98;
}
.section-knockout-rounds .kob__final-teams {
  font: var(--h4);
  font-family: var(--font-ui);
  font-weight: 800;
}

/* ---------- Round notes (stacked beneath the bracket) ---------- */
.section-knockout-rounds .knockout-rounds__notes {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-md);
}
.section-knockout-rounds .knockout-rounds__note {
  background: var(--surface-page, #fff);
  border: 1px solid var(--border-subtle, #e3e3e8);
  border-left: 3px solid var(--color-primary, #e5253d);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-md) var(--space-lg);
}
.section-knockout-rounds .knockout-rounds__note-head {
  margin: 0 0 6px;
  font: var(--eyebrow);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.section-knockout-rounds .knockout-rounds__note-body {
  font: var(--body-sm);
  font-family: var(--font-ui);
  color: var(--text-secondary);
}
.section-knockout-rounds .knockout-rounds__note-body p { margin: 0 0 8px; }
.section-knockout-rounds .knockout-rounds__note-body ul { margin: 8px 0 0; padding-left: 18px; }
.section-knockout-rounds .knockout-rounds__note-body li { margin: 0 0 6px; }
.section-knockout-rounds .knockout-rounds__note-body strong { color: var(--color-accent); }

/* ---------- Responsive: below the bracket's min width, drop the tree and
   stack rounds vertically with their matchups in a wrapping grid — natural
   vertical scroll, NO horizontal scroll (mobile / narrow tablet). ---------- */
@media (max-width: 1000px) {
  .section-knockout-rounds .knockout-rounds__scroll {
    overflow: visible;
    padding-bottom: 0;
  }
  .section-knockout-rounds .kob {
    display: block;
    min-width: 0;
  }
  .section-knockout-rounds .kob__round {
    margin-bottom: var(--space-lg);
  }
  .section-knockout-rounds .kob__round:last-child {
    margin-bottom: 0;
  }
  .section-knockout-rounds .kob__col {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-sm);
  }
  .section-knockout-rounds .kob__match {
    flex: none;
    display: block;
  }
  .section-knockout-rounds .kob__card {
    margin-block: 0;
    height: 100%;
  }
  /* connectors only make sense in the tree — hide when stacked */
  .section-knockout-rounds .kob__match::before,
  .section-knockout-rounds .kob__match::after {
    display: none;
  }
  /* the Final cap sits on its own row, centered */
  .section-knockout-rounds .kob__round--final .kob__col {
    display: block;
  }
  .section-knockout-rounds .kob__final {
    max-width: 340px;
    margin-inline: auto;
  }
}

/* ---------- Reveal-on-scroll ---------- */
.section-knockout-rounds [data-reveal] {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.section-knockout-rounds.is-reveal-armed [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}
@media (prefers-reduced-motion: reduce) {
  .section-knockout-rounds.is-reveal-armed [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}