/* =========================================================
   STORM — PROGRAM PAGES (shared)
   -----------------------------------------------------------
   Loads AFTER base-web-style.css, BEFORE the page sheet:

     base-web-style.css     global Storm system
     storm-programs.css     <- this file: SYC / Junior / Senior
     syc.css | storm-junior.css | storm-senior.css

   Storm Youth Championships, Storm Junior and Storm Senior are
   one family of program pages. Nearly everything they need is
   already in base — including the hero, which moved OUT of this
   file into base as .spi-banner once four pages were found to be
   building it separately — the athlete/ambassador/champion cards are
   .spi-card-product, their carousels are .spi-scroll.is-aligned,
   the Senior FAQ is .spi-accordion, and every heading, button,
   grid and container is base's.

   What is left here is the handful of things all three need that
   base has no equivalent for. It is deliberately small: if only
   ONE page needs a rule, it belongs in that page's own sheet.

   No tokens are redefined and no colours are invented.
   ========================================================= */

/* ---------------------------------------------------------
   1. HERO — now base's .spi-banner
   SYC and Senior open on a full-bleed photograph with the program
   name over it. That used to be .program-hero here; it is
   base-web-style.css section 7 (.spi-banner.is-overlay) now that
   Memory Lane and Pro Staff were found to be building the same
   thing privately. Nothing left to declare.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   2. SECTION HEADER WITH A TRAILING CTA (.program-header)
   Four sections across the family are "heading + a line of copy
   + a button, then a carousel" — Junior's Youth Staff, SUSBA and
   Colleges, and Senior's Legends' Library.

   Base's .spi-section-header stacks its children and zeroes the
   last one's bottom margin, which is right; what it has no
   opinion on is the paragraph and button BELOW the heading. This
   only sets that rhythm — the heading, copy and button are all
   base classes.
--------------------------------------------------------- */
.program-header .spi-body {
  margin: 12px 0 0;
  max-width: var(--spi-body-width, 720px);
}

.program-header .btn {
  margin-top: 16px;
}

/* ---------------------------------------------------------
   3. PERSON CARD (.program-person)
   Athletes, ambassadors and champions are all base's
   .spi-card-product — a square photo with centred type under it.
   Two things differ from a product tile, on all three pages:

   a) the card is a LINK, so the whole tile is the target;
   b) the photographs are cut-outs on a transparent ground, not
      packshots, so object-fit: cover crops heads. They need to
      sit INSIDE the square.
--------------------------------------------------------- */
.program-person {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: var(--spi-ease);
}

.program-person:hover {
  transform: translateY(-3px);
  border-color: var(--spi-gray-400);
}

.program-person:focus-visible {
  outline: 2px solid var(--spi-accent);
  outline-offset: 2px;
}

.program-person .spi-card-product-img {
  background: var(--spi-gray-100);
}

.program-person .spi-card-product-img img {
  object-fit: contain;
}

/* Base's product-card title is a 13px product name. These are
   people's names and read as the card's subject, so they take
   the display face at a size that carries. */
.program-person .spi-card-product-body h3 {
  margin: 0 0 4px;
  font-family: var(--spi-font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .program-person,
  .program-person:hover {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------
   4. LOADING / ERROR NOTICE (.program-notice)
   All three pages build their carousels from a data file, so
   each has a moment before the content exists and a state where
   it never arrives.
--------------------------------------------------------- */
.program-notice {
  margin: 0;
  padding: 24px 0;
  text-align: center;
}