/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · SPORTS
   The 50 sports: how each keeps score, what each gets, and the full list by
   family, every sport linking to its page in the Playbook.
   ============================================================================ */

/* Three sports in pictures */
.sch-sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sch-sp-tile {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--wr-radius-card);
  overflow: hidden;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
}
.sch-sp-tile .sch-callout { position: relative; }

/* Three boards, three ways of keeping score */
.sch-sp-board {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(24px, 2.4vw, 40px);
  box-shadow: var(--wr-shadow-sm);
}
.sch-sp-board__segs { height: clamp(56px, 5vw, 88px); gap: 10px; }

/* What every sport gets: five tiles, the last row centred */
.sch-sp-gets { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sch-sp-gets > li { grid-column: span 2; }
.sch-sp-gets > li:nth-child(4) { grid-column: 2 / span 2; }

/* The camera, reading a board */
.sch-sp-cam {
  aspect-ratio: 4 / 3;
  border-radius: var(--wr-radius-card);
  overflow: hidden;
  background-color: var(--wr-hero);
  background-image: repeating-linear-gradient(135deg, var(--wr-white-10) 0 1px, transparent 1px 24px);
}
.sch-sp-cam > .sch-plate__label { color: var(--wr-white-65); }
.sch-sp-cam__segs { position: relative; height: clamp(64px, 7vw, 120px); gap: 10px; }

/* All 50, by family */
.sch-sp-families { display: flex; flex-direction: column; gap: 48px; }
.sch-sp-family {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  scroll-margin-top: 120px;
}
.sch-sp-family__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sch-sp-family__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.sch-sp-sport {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--wr-radius-pill);
  border: 1px solid var(--wr-black-15);
  font-size: var(--sch-t-body);
  font-weight: 600;
  line-height: 1.2;
  color: var(--wr-black);
  text-decoration: none;
  transition: border-color 0.24s var(--wr-ease-out), background-color 0.24s var(--wr-ease-out), transform 0.24s var(--wr-ease-out);
}
.sch-sp-sport svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--wr-orange); transition: transform 0.24s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sch-sp-sport:hover { border-color: var(--wr-black); background-color: var(--wr-white); transform: translateY(-1px); }
  .sch-sp-sport:hover svg { transform: translateX(3px); }
}

/* Missing your sport */
.sch-sp-missing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: clamp(32px, 4vw, 56px);
}
.sch-sp-missing .sch-body { max-width: 640px; }
.sch-sp-missing .sch-actions { flex-shrink: 0; }

@media (max-width: 1024px) {
  .sch-sp-family { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sch-sp-missing { flex-direction: column; align-items: flex-start; }
  .sch-sp-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-sp-gets > li,
  .sch-sp-gets > li:nth-child(4) { grid-column: auto; }
}
@media (max-width: 768px) {
  .sch-sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sch-sp-tile { padding: 10px; aspect-ratio: 3 / 4; }
  .sch-sp-tile > .sch-plate__label { display: none; }
  .sch-sp-tile .sch-callout { padding: 8px 12px; font-size: 13px; }
  .sch-sp-gets { grid-template-columns: minmax(0, 1fr); }
  .sch-sp-cam > .sch-plate__label { display: none; }
  .sch-sp-sport { min-height: 40px; padding: 0 14px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-sp-sport, .sch-sp-sport svg { transition: none; }
}