/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · BASKETBALL
   The basketball page (/en/sports/basketball/): the shot-clock stage with the rule
   presets, three ways to get the score, two boards in one session, the hall
   screen and the league table. Blocks .sch-bb-* on top of score-core.css.
   ============================================================================ */

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.sch-bb-center { justify-content: center; }
.sch-bb-links { gap: 16px 32px; align-items: center; }
.sch-bb-b { font-weight: 700; color: var(--wr-black); }
.sch-bb-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sch-bb-75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* ── 1 · Hero: the shot-clock stage ──────────────────────────────────────── */
.sch-bb-opening { padding-bottom: var(--sch-pad-y); }
.sch-bb-top { align-items: center; }
.sch-bb-lead { max-width: 600px; }
.sch-bb-hero { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sch-bb-stage {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
  min-height: clamp(560px, 40vw, 720px);
  padding: 32px;
  border-radius: var(--wr-radius-card);
  overflow: hidden;
  text-align: left;
}
.sch-bb-stage__veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--wr-hero-72), var(--wr-hero-50)); }
.sch-bb-stage__head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sch-bb-stage__head .sch-plate__label { position: static; color: var(--wr-white-65); }
.sch-bb-stage.is-photo .sch-bb-stage__head .sch-plate__label { display: none; }
.sch-bb-stage__preset { margin-left: auto; color: var(--wr-white); text-align: right; }
.sch-bb-clocks { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sch-bb-clocks .sch-label { color: var(--wr-white-65); }
.sch-bb-clocks__game { height: clamp(40px, 3.4vw, 64px); }
.sch-bb-clocks__shot { height: clamp(160px, 12.5vw, 240px); gap: 16px; margin-top: 16px; }
.sch-bb-keys { position: relative; display: flex; justify-content: center; gap: 16px; }
.sch-bb-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wr-white-38);
  background: transparent;
  color: var(--wr-white);
  cursor: pointer;
  transition: transform 0.2s var(--wr-ease-out), border-color 0.2s var(--wr-ease-out);
}
.sch-bb-key .sch-segs { height: 28px; gap: 4px; }
.sch-bb-key:active { transform: scale(0.96); }
.sch-page .sch-bb-key:focus-visible { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .sch-bb-key:hover { transform: translateY(-2px); border-color: var(--wr-yellow); }
}

/* ── 2 · Where WR Score started ─────────────────────────────────────────── */
.sch-bb-origin { gap: 64px; }
.sch-bb-proof { max-width: 1040px; }
.sch-bb-mark {
  padding: 0 6px;
  border-radius: var(--wr-radius-sm);
  background: var(--wr-grad) no-repeat left center / 100% 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sch-bb-mark {
      animation: schBbMark linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}
@keyframes schBbMark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ── 3 · Rule presets: resets, fouls, the score that never airs ─────────── */
.sch-bb-rules { position: relative; display: flex; flex-direction: column; padding: 8px 40px; }
.sch-bb-rules .sch-row { padding: 32px 0; }
.sch-bb-rules .sch-segs { height: 56px; }
.sch-bb-resets { display: flex; align-items: center; gap: 32px; }
.sch-bb-lamps { display: flex; gap: 8px; }
.sch-bb-lamp { display: block; width: 24px; height: 10px; border-radius: var(--wr-radius-pill); background: var(--wr-black-10); }
.sch-bb-lamp.is-on { background: var(--wr-grad); }
.sch-bb-ghost .sch-seg__on { fill: var(--wr-black-15); }

/* ── 4 · Three ways to get the score ────────────────────────────────────── */
.sch-bb-way { position: relative; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 32px; }
.sch-bb-way > .wr-btn--link { margin-top: auto; }
.sch-bb-way__demo {
  width: 100%;
  height: clamp(176px, 12vw, 224px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.sch-bb-way__segs { height: 72px; }
.sch-bb-brk { position: relative; display: flex; align-items: center; gap: 24px; padding: 20px 24px; }
.sch-bb-brk__c { position: absolute; width: 20px; height: 20px; border: 2px solid var(--wr-orange); }
.sch-bb-brk__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--wr-radius-sm); }
.sch-bb-brk__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: var(--wr-radius-sm); }
.sch-bb-brk__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: var(--wr-radius-sm); }
.sch-bb-brk__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--wr-radius-sm); }
.sch-bb-feed { align-items: stretch; gap: 0; }
.sch-bb-feed > .sch-state { padding-bottom: 8px; }

/* ── 5 · Two boards in one session ──────────────────────────────────────── */
.sch-bb-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: start;
  gap: 24px;
  height: clamp(520px, 40vw, 720px);
  margin-top: 48px;
  padding: 48px;
  border-radius: var(--wr-radius-card);
  overflow: hidden;
  text-align: left;
}
.sch-bb-band__veil { position: absolute; inset: 0; background: var(--wr-hero-50); }
.sch-bb-band > .sch-plate__label { position: relative; top: auto; left: auto; grid-area: 1 / 1; color: var(--wr-white-65); }
.sch-bb-band .sch-label { color: var(--wr-white); }
.sch-bb-band .sch-zone__box { padding: 16px 20px; }
.sch-bb-band__shot { position: relative; grid-area: 1 / 2 / 3 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sch-bb-band__main { position: relative; grid-area: 3 / 1 / 4 / 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sch-bb-band__zones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.sch-bb-z--shot { height: clamp(80px, 6vw, 112px); }
.sch-bb-z--score { height: clamp(72px, 5.4vw, 104px); }
.sch-bb-z--clock { height: clamp(48px, 3.6vw, 72px); }

/* ── 6 · On the stream: the scorebug ────────────────────────────────────── */
.sch-bb-screen { border-radius: var(--wr-radius-card); aspect-ratio: 16 / 10; }
.sch-bb-bug {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 12px 24px;
  border-radius: var(--wr-radius-pill);
  box-shadow: var(--wr-shadow-md);
}
.sch-bb-bug__team { display: inline-flex; align-items: center; gap: 12px; }
.sch-bb-bug__shot { color: var(--wr-orange); }

/* ── 7 · On the hall screen: the Virtual Board ──────────────────────────── */
.sch-bb-vb { aspect-ratio: 16 / 9; padding: 32px; }
.sch-bb-vb > .sch-swap { align-items: stretch; justify-content: center; }
.sch-bb-vb__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.sch-bb-vb__team,
.sch-bb-vb__mid { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sch-bb-vb__score { height: clamp(64px, 4.6vw, 88px); }
.sch-bb-vb__clock { height: 40px; gap: 8px; }
.sch-bb-vb__shot { height: 32px; gap: 6px; }
.sch-bb-vb__poss { width: 24px; height: 24px; color: var(--wr-orange); }
.sch-bb-vb__gap { display: block; height: calc(var(--sch-t-label) * 1.4); }
.sch-bb-vb > .sch-bb-vb__sponsor { align-items: center; }

/* ── 8 · The league table ───────────────────────────────────────────────── */
.sch-bb-league { position: relative; padding: 32px 40px 16px; }
.sch-bb-table { width: 100%; border-collapse: collapse; }
.sch-bb-table caption { caption-side: top; text-align: left; padding-bottom: 8px; }
.sch-bb-table th,
.sch-bb-table td { padding: 16px 0 16px 16px; border-bottom: 1px solid var(--wr-black-10); text-align: right; }
.sch-bb-table th:first-child,
.sch-bb-table td:first-child { width: 8%; padding-left: 0; text-align: left; }
.sch-bb-table th:nth-child(2),
.sch-bb-table td:nth-child(2) { text-align: left; }
.sch-bb-table th:nth-child(n+3) { width: 12%; }
.sch-bb-table tbody tr:last-child td { border-bottom: 0; }

/* ── 9 · Youth basketball: on air ───────────────────────────────────────── */
.sch-bb-air { padding: 0; overflow: hidden; align-items: flex-end; }
.sch-bb-air__info { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sch-bb-air__on { color: var(--wr-white); }
.sch-bb-vu { display: flex; align-items: flex-end; gap: 4px; width: 40%; height: 48px; }
.sch-bb-vu span {
  flex: 1;
  height: 100%;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-grad-vert);
  transform-origin: bottom;
  transform: scaleY(0.4);
  animation: schBbVu 1.1s var(--wr-ease-out) infinite;
}
.sch-bb-vu span:nth-child(3n+1) { animation-duration: 1.3s; animation-delay: -0.2s; }
.sch-bb-vu span:nth-child(3n+2) { animation-duration: 0.9s; animation-delay: -0.5s; }
.sch-bb-vu span:nth-child(4n) { animation-delay: -0.8s; }
@keyframes schBbVu { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* ── 10 · Time back: the photo row ──────────────────────────────────────── */
.sch-bb-gallery {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr 3fr;
  gap: 16px;
  height: clamp(240px, 22vw, 400px);
  margin-top: 48px;
}
.sch-bb-gallery > .sch-plate { padding: 16px; border-radius: var(--wr-radius-card); }

/* ── Breakpoints (1260 · 1024 · 768 · 480) ──────────────────────────────── */
@media (max-width: 1260px) {
  .sch-bb-way__segs { height: 56px; }
  .sch-bb-brk { gap: 16px; padding: 16px 20px; }
}
@media (max-width: 1024px) {
  .sch-bb-57,
  .sch-bb-75 { grid-template-columns: minmax(0, 1fr); }
  .sch-bb-hero { width: 100%; max-width: 640px; }
  .sch-bb-origin { gap: 48px; }
  .sch-bb-origin .sch-shot,
  .sch-bb-air { aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .sch-bb-way__segs { height: 72px; }
  .sch-bb-band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: auto;
    gap: 32px;
    margin-top: 32px;
    padding: 24px;
  }
  .sch-bb-band > .sch-plate__label,
  .sch-bb-band__shot,
  .sch-bb-band__main { grid-area: auto; }
  .sch-bb-band__shot { align-items: flex-start; }
  .sch-bb-band .sch-zone__box { padding: 10px 12px; }
  .sch-bb-band__zones { gap: 12px; }
  .sch-bb-z--shot { height: 72px; }
  .sch-bb-z--score { height: 56px; }
  .sch-bb-z--clock { height: 36px; }
  .sch-bb-vb { aspect-ratio: auto; min-height: 280px; padding: 32px 24px; }
  .sch-bb-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(160px, 36vw, 260px);
    height: auto;
    margin-top: 32px;
  }
}
@media (max-width: 480px) {
  .sch-bb-stage { min-height: 0; gap: 28px; padding: 20px; }
  .sch-bb-clocks { gap: 16px; }
  .sch-bb-clocks__game { height: 36px; }
  .sch-bb-clocks__shot { height: 124px; gap: 12px; margin-top: 8px; }
  .sch-bb-key { width: 64px; height: 64px; }
  .sch-bb-key .sch-segs { height: 22px; }
  .sch-bb-rules { padding: 4px 20px; }
  .sch-bb-rules .sch-row { padding: 24px 0; }
  .sch-bb-rules .sch-segs { height: 40px; gap: 8px; }
  .sch-bb-resets { gap: 16px; }
  .sch-bb-lamps { gap: 6px; }
  .sch-bb-lamp { width: 18px; }
  .sch-bb-way { padding: 24px; }
  .sch-bb-way__segs { height: 56px; }
  .sch-bb-screen { aspect-ratio: 4 / 3; }
  .sch-bb-bug { left: 12px; bottom: 12px; max-width: calc(100% - 24px); gap: 6px 14px; padding: 10px 16px; border-radius: var(--wr-radius-sm); }
  .sch-bb-vb { padding: 24px 12px; }
  .sch-bb-vb__grid { gap: 12px; }
  .sch-bb-vb__score { height: 48px; }
  .sch-bb-vb__clock { height: 26px; gap: 5px; }
  .sch-bb-vb__shot { height: 22px; gap: 4px; }
  .sch-bb-league { padding: 24px 20px 8px; }
  .sch-bb-table th,
  .sch-bb-table td { padding: 12px 0 12px 10px; }
  .sch-bb-air__info { gap: 16px; padding: 40px 16px 16px; }
  .sch-bb-band .sch-segs { gap: 6px; }
  .sch-bb-band .sch-zone__box { padding: 8px 10px; }
  .sch-bb-z--shot { height: 64px; }
  .sch-bb-z--score { height: 44px; }
  .sch-bb-z--clock { height: 28px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sch-bb-key { transition: none; }
  .sch-bb-key:active { transform: none; }
  .sch-bb-vu span { animation: none; transform: scaleY(0.8); }
}

/* Two ways to get the score (FIBA LiveStats out, owner 17:46): two columns, no empty third. */
@media (min-width: 721px) { .sch-bb-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }