/* =========================================================
   STORM — SENIOR
   -----------------------------------------------------------
   Loads on top of base-web-style.css + storm-programs.css.

   Base does nearly all of it: .spi-section-padded/.spi-container
   for the shell, .spi-figure.is-flush for the lockup,
   .spi-split.is-vcenter.has-gap for the club panel,
   .spi-banner.is-overlay for the ambassadors' photo band,
   .spi-card-article for the Legends' Library, .spi-card-athlete
   (the Pro Staff card) for the ambassadors, .spi-accordion for
   the FAQ, and .spi-scroll.is-aligned for both carousels. The
   person cards come from storm-programs.css. There is no hero
   banner: the page opens on the intro lockup.

   What is left is only what is Senior's alone.
   ========================================================= */

/* ---------------------------------------------------------
   1. INTRO LOCKUP
   .spi-figure.is-flush caps, centres and un-margins it; this is
   only the size, which base leaves to --spi-figure-w.
--------------------------------------------------------- */
.senior-lockup {
  --spi-figure-w: 340px;
}

/* ---------------------------------------------------------
   2. SENIOR CLUB PANEL
   .spi-split.is-vcenter.has-gap supplies the two equal columns,
   the gap, the vertical centring and the stack below 768px.
   What base has no answer for is a photo that keeps a floor
   height beside its copy on desktop and a fixed crop when
   stacked.
--------------------------------------------------------- */
/* `height: auto` is load-bearing: without it the 649px height
   attribute stands as the image's CSS height. */
.senior-club-img {
  width: 100%;
  height: auto;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--spi-radius-md);
  background: var(--spi-gray-200);
}

.senior-club-body .spi-body {
  margin: 12px 0 20px;
}

@media (max-width: 768px) {
  .senior-club-img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------
   3. LEGENDS' LIBRARY CARD
   Base's .spi-card-article styles its heading as a short
   uppercase label. These are full titles — "Different Strokes
   for Different Folks" — so they keep sentence case, the same
   call Newsroom made for its headlines.
--------------------------------------------------------- */
.senior-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: var(--spi-ease);
}

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

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

.senior-card .spi-card-article-body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.senior-card .spi-meta {
  margin: 0;
}

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

/* ---------------------------------------------------------
   4. AMBASSADORS
   A photographic band with the section title written on it,
   with the carousel beneath. The band is base's
   .spi-banner.is-overlay — frame, cover crop, scrim, white type,
   padding — at a shorter height than a page hero, set through
   its own three knobs.
--------------------------------------------------------- */
.senior-ambassadors {
  padding-bottom: 0;
}

.senior-ambassadors-banner {
  --spi-banner-h: 300px;
  --spi-banner-h-tablet: 240px;
  --spi-banner-h-mobile: 200px;
}

.senior-ambassadors-banner .spi-body {
  margin: 8px 0 0;
}

.senior-ambassadors-rail {
  padding-top: 0;
}

/* Ambassadors are base's .spi-card-athlete — the same card as Pro
   Staff and Junior.

   Three staff have no Pro Staff photo, only a ROUND cut-out on a
   transparent ground. Scaled by 1.42 (a hair over the square root of
   2) about the centre, the circle's inner square fills the frame and
   none of its transparent corners show — at the cost of the circle's
   outer edge, a little hair included. */
.senior-people .is-cutout .spi-card-athlete-img {
  overflow: hidden;
}

.senior-people .is-cutout .spi-card-athlete-img img {
  object-position: center;
  transform: scale(1.42);
}