/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · SCOREBOARD APP
   The scoreboard app page (/scoreboard): the live board under the opening,
   the scorekeeper pad, the Virtual Board, the sports, the sheets. Blocks .sch-sb-*.
   ============================================================================ */

/* ── 1 · Opening + the live board ────────────────────────────────────────── */
.sch-sb-top { padding-bottom: var(--sch-pad-y); }
.sch-sb-top .sch-top__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); }
.sch-sb-demo { display: flex; flex-direction: column; gap: 32px; margin-top: 48px; }
.sch-sb-stage {
  min-height: clamp(480px, 36vw, 640px);
  padding: clamp(64px, 5vw, 80px) clamp(16px, 5vw, 80px);
  border-radius: var(--wr-radius-card);
}
.sch-sb-stage > .sch-plate__label { right: 12px; }
.sch-sb-board {
  width: min(100%, 1040px);
  padding: clamp(24px, 3vw, 48px);
  box-shadow: var(--wr-shadow-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "home mid away";
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.sch-sb-side,
.sch-sb-mid { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; text-align: center; }
.sch-sb-side--home { grid-area: home; }
.sch-sb-side--away { grid-area: away; }
.sch-sb-mid { grid-area: mid; }
.sch-sb-board .sch-segs { gap: clamp(6px, 0.8vw, 12px); }
.sch-sb-score { height: clamp(80px, 7vw, 128px); }
.sch-sb-clock { height: clamp(56px, 5vw, 88px); }
.sch-sb-mid .sch-label[hidden] { display: none; }

.sch-sb-keys { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.sch-sb-team { display: flex; align-items: center; gap: 8px; }
.sch-sb-team--home > .sch-label { margin-right: 8px; }
.sch-sb-team--away > .sch-label { margin-left: 8px; }
.sch-sb-sports { justify-content: center; }
.sch-sb-key { justify-content: center; min-width: 52px; padding: 0 16px; }
.sch-sb-key[hidden] { display: none; }
.sch-sb-key:active { transform: scale(0.96); }

/* ── 2 · The line under the three halls ─────────────────────────────────── */
.sch-sb-say { margin-top: 16px; }
.sch-sb-say .sch-h3 { max-width: 960px; }

/* ── 3 · Game night: the panorama with its three callouts ───────────────── */
.sch-sb-call--1 { top: 18%; left: 8%; }
.sch-sb-call--2 { top: 40%; right: 10%; }
.sch-sb-call--3 { bottom: 16%; left: 30%; }
.sch-sb-call--2 .sch-dot { animation-delay: 0.5s; }
.sch-sb-call--3 .sch-dot { animation-delay: 1s; }

/* ── 5 · The board is the control ───────────────────────────────────────── */
.sch-sb-zoom { border-radius: var(--wr-radius-card); aspect-ratio: 4 / 5; }
.sch-sb-zoom .sch-zoom__img { padding: 16px; }

/* ── 6 · The pad: a QR code and a phone ─────────────────────────────────── */
.sch-sb-pad { display: flex; gap: clamp(32px, 4vw, 64px); align-items: flex-end; justify-content: center; }
.sch-sb-qr { width: 40%; height: auto; flex-shrink: 0; }
.sch-sb-stop-a { stop-color: var(--wr-yellow); }
.sch-sb-stop-b { stop-color: var(--wr-orange); }
.sch-sb-phone {
  width: 44%;
  flex-shrink: 0;
  aspect-ratio: 9 / 18;
  padding: 12px;
  border-radius: var(--wr-radius-card);
  box-shadow: var(--wr-shadow-md);
}

/* ── 7 · The Virtual Board: four screens, four shapes ───────────────────── */
.sch-sb-screens {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr 3fr;
  gap: 16px;
  height: clamp(320px, 26vw, 480px);
}
.sch-sb-screens > .sch-plate { padding: 16px; border-radius: var(--wr-radius-card); }
.sch-sb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.sch-sb-foot__text { display: flex; flex-direction: column; gap: 4px; max-width: 800px; }

/* ── 8 · Sports: the count in board digits ──────────────────────────────── */
.sch-sb-fifty { display: flex; justify-content: center; align-items: center; }
.sch-sb-fifty__segs { height: clamp(160px, 16vw, 288px); gap: clamp(16px, 1.6vw, 28px); }

/* ── 9 · The sheets: three A4 pages ─────────────────────────────────────── */
.sch-sb-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; }
.sch-sb-sheet {
  position: relative;
  aspect-ratio: 1 / 1.414;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sch-sb-sheet:first-child { transform: rotate(-2deg); }
.sch-sb-sheet:last-child { transform: rotate(2deg); }
.sch-sb-blank { fill: none; stroke: var(--wr-black-15); }

/* ── 11 · Offline band ──────────────────────────────────────────────────── */
.sch-sb-band .sch-body { max-width: 720px; }

/* ── Breakpoints (1260 · 1024 · 768 · 480) ──────────────────────────────── */
@media (max-width: 1260px) {
  .sch-sb-keys {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "home away" "sports sports";
    gap: 20px 12px;
  }
  .sch-sb-team--home { grid-area: home; }
  .sch-sb-team--away { grid-area: away; justify-content: flex-end; }
  .sch-sb-sports { grid-area: sports; }
}
@media (max-width: 1024px) {
  .sch-sb-top .sch-top__grid { grid-template-columns: minmax(0, 1fr); }
  .sch-sb-screens { height: clamp(280px, 34vw, 340px); }
}
@media (max-width: 768px) {
  .sch-sb-stage { min-height: 0; padding: 104px 16px 24px; }
  .sch-sb-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "mid mid" "home away";
    row-gap: 28px;
    padding: 24px 16px;
  }
  .sch-sb-score { height: clamp(56px, 12vw, 88px); }
  .sch-sb-clock { height: clamp(48px, 10vw, 72px); }
  .sch-sb-team { flex-wrap: wrap; }
  .sch-sb-team > .sch-label { flex-basis: 100%; margin: 0; }
  .sch-sb-team--away { text-align: right; }
  .sch-sb-team--away > .sch-label { order: -1; }
  .sch-sb-key { min-width: 44px; padding: 0 12px; }

  .sch-sb-pano {
    height: auto;
    min-height: 340px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    padding: 72px 16px 20px;
  }
  .sch-sb-pano > .sch-callout { position: static; padding: 1.125rem 20px; text-align: left; }
  .sch-sb-zoom { aspect-ratio: 4 / 3; }

  .sch-sb-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; height: auto; }
  .sch-sb-fifty__segs { height: 128px; }
}
@media (max-width: 480px) {
  .sch-sb-sports .sch-pill { padding: 0 14px; }
  .sch-sb-screens { grid-auto-rows: 180px; gap: 12px; }
  .sch-sb-pad { gap: 24px; }
  .sch-sb-sheets { gap: 10px; }
  .sch-sb-sheet { padding: 1rem; gap: 12px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sch-sb-key:active { transform: none; }
}