/* ============================================================
   THE SIDE OUT — Signature Components
   ============================================================ */

/* ── Eyebrow label ────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete-400);
}
.eyebrow--gold { color: var(--gold-500); }
.eyebrow--court { color: var(--court-400); }

/* ── Court-line divider ───────────────────────────────────── */
.court-divider {
  position: relative;
  width: 100%;
  overflow: visible;
  margin: 0;
  padding: 0;
  display: block;
}
.court-divider svg {
  width: 100%;
  height: 24px;
  overflow: visible;
}

/* ── Court tile (card) ────────────────────────────────────── */
.court-tile {
  background: var(--navy-700);
  border-radius: var(--r-md);
  border: 1px solid rgba(30, 116, 230, 0.22);
  border-top: 3px solid var(--gold-500);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease-out), border-color 180ms;
}
.court-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 116, 230, 0.4);
}
.court-tile--live { border-top-color: var(--lime-500); }

/* ── Status badge ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--live    { background: rgba(184,226,24,.15); color: var(--lime-500);  border: 1px solid rgba(184,226,24,.3);  }
.badge--stale   { background: rgba(139,149,163,.12); color: var(--concrete-400); border: 1px solid rgba(139,149,163,.2); }
.badge--pending { background: rgba(244,180,26,.12);  color: var(--warn);     border: 1px solid rgba(244,180,26,.25); }
.badge--hold    { background: rgba(244,180,26,.12);  color: var(--warn);     border: 1px solid rgba(244,180,26,.25); }
.badge--confirmed  { background: rgba(47,182,124,.12); color: var(--ok);    border: 1px solid rgba(47,182,124,.25); }
.badge--rejected,
.badge--expired,
.badge--failed  { background: rgba(229,72,77,.10);  color: var(--error);    border: 1px solid rgba(229,72,77,.22);  }
.badge--upcoming { background: rgba(30,116,230,.12); color: var(--court-400); border: 1px solid rgba(30,116,230,.25); }
.badge--completed { background: rgba(74,85,102,.2); color: var(--concrete-200); border: 1px solid rgba(74,85,102,.3); }

.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge--live .badge__dot { animation: live-pulse 1.6s ease-in-out infinite; }

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .badge--live .badge__dot { animation: none; }
}

/* ── Scoreboard panel ─────────────────────────────────────── */
.scoreboard {
  background: var(--navy-800);
  padding: var(--sp-12) var(--gutter);
}
.scoreboard__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-8);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: center;
}
@media (max-width: 639px) {
  .scoreboard__inner {
    grid-template-columns: 1fr 1fr;
  }
  .scoreboard__updated { grid-column: 1 / -1; }
}
.scoreboard__segment { text-align: center; }
.scoreboard__number {
  font-family: var(--font-display);
  font-size: var(--t-score);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
  line-height: 1;
  display: block;
}
.scoreboard__label {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete-400);
  margin-top: var(--sp-2);
  display: block;
}
.scoreboard__updated { text-align: center; }
.scoreboard__updated-text { font-family: var(--font-body); font-size: var(--t-small); color: var(--concrete-400); }

/* ── Two-path selector ────────────────────────────────────── */
.two-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
@media (max-width: 767px) {
  .two-path { grid-template-columns: 1fr; }
  .two-path__net { width: 100%; height: 2px; flex-direction: row; }
}
.two-path__side {
  background: var(--navy-700);
  border: 1px solid rgba(30,116,230,.2);
  padding: var(--sp-12) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-4);
  text-decoration: none;
  transition: background 180ms, border-color 180ms;
}
.two-path__side:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.two-path__side:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
@media (max-width: 767px) {
  .two-path__side:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
  .two-path__side:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
}
.two-path__side:hover { background: var(--navy-600); border-color: rgba(30,116,230,.38); }
.two-path__net {
  width: 2px;
  background: rgba(245,248,253,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.two-path__net-icon {
  width: 32px; height: 32px;
  background: var(--navy-800);
  border: 1px solid rgba(245,248,253,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--concrete-400);
  font-size: .7rem; font-weight: 700;
  flex-shrink: 0;
}
.two-path__rule { font-size: var(--t-small); color: var(--concrete-200); line-height: 1.55; }
.two-path__rule li { list-style: none; padding-left: var(--sp-4); position: relative; margin-top: var(--sp-1); }
.two-path__rule li::before { content: "→"; position: absolute; left: 0; color: var(--concrete-400); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .75em 1.5em;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), filter 150ms, box-shadow 150ms;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--gold-500); color: var(--ink-900); }
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 4px rgba(244,180,26,.25);
}
.btn--secondary { background: transparent; color: var(--court-400); border: 1.5px solid var(--court-500); }
.btn--secondary:hover { background: rgba(30,116,230,.12); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--chalk); border: 1.5px solid rgba(245,248,253,.25); }
.btn--ghost:hover { background: rgba(245,248,253,.07); }
.btn--sm { padding: .5em 1em; font-size: var(--t-small); }
.btn--lg { padding: 1em 2em; font-size: 1.0625rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--danger { background: var(--error); color: white; }
.btn--ok { background: var(--ok); color: white; }

/* ── Corner bracket frame ─────────────────────────────────── */
.corner-frame {
  position: absolute; inset: 0; pointer-events: none;
}
.corner-frame::before, .corner-frame::after {
  content: ""; position: absolute;
  width: 24px; height: 24px;
  border-color: rgba(244,180,26,.45);
  border-style: solid;
}
.corner-frame::before { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.corner-frame::after  { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }

/* ── Live chip ────────────────────────────────────────────── */
.live-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(10,28,61,.7);
  border: 1px solid rgba(184,226,24,.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--chalk);
}
.live-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--lime-500); flex-shrink: 0;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-chip__dot { animation: none; } }

/* ── Section title group ──────────────────────────────────── */
.section-title { margin-bottom: var(--sp-8); }
.section-title h2 {
  font-size: var(--t-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--chalk);
  margin-top: var(--sp-2);
}
.section-title__underline {
  display: inline-block;
  width: 48px; height: 3px;
  background: var(--gold-500);
  margin-top: var(--sp-2);
  transform-origin: left;
}

/* ── Rate display ─────────────────────────────────────────── */
.rate-value {
  font-family: var(--font-display);
  font-size: var(--t-score);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
  line-height: 1;
}
.rate-currency { font-size: .55em; vertical-align: super; color: var(--gold-500); }
.rate-unit { font-size: .35em; color: var(--concrete-400); font-weight: 600; }
.rate-note { font-size: var(--t-small); color: var(--concrete-400); margin-top: var(--sp-2); }

/* ── Provisional notice ───────────────────────────────────── */
.provisional {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t-micro); font-weight: 600; color: var(--warn);
  letter-spacing: .04em; text-transform: uppercase;
}
.provisional::before { content: "⚠ "; }

/* ── Tiles grid ───────────────────────────────────────────── */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
}

/* ── Venue photo ──────────────────────────────────────────── */
.venue-photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/10; }
.venue-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tournament card ──────────────────────────────────────── */
.tournament-card {
  background: var(--navy-700);
  border-radius: var(--r-md);
  border: 1px solid rgba(244,180,26,.2);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tournament-card__poster { overflow: hidden; max-height: 380px; }
.tournament-card__poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.tournament-card:hover .tournament-card__poster img { transform: scale(1.03); }
.tournament-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.tournament-card__title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; text-transform: uppercase; }
.tournament-card__date { font-size: var(--t-small); color: var(--concrete-200); }
.tournament-card__cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.tournament-card__cat {
  font-size: var(--t-micro); color: var(--concrete-400);
  padding: 2px var(--sp-3);
  border: 1px solid rgba(74,85,102,.4); border-radius: 999px;
}