/* =========================================================
   STORM — PRO STAFF
   -----------------------------------------------------------
   Loads ON TOP of base-web-style.css.

   FROM BASE, unchanged:
     shell      .spi-section-full / .spi-section-padded /
                .spi-container
     type       .spi-h1 / .spi-display / .spi-h3 / .spi-body /
                .spi-eyebrow / .spi-meta
     banner     .spi-banner.is-overlay.is-flow   (the hero band)
     carousel   .spi-row.spi-scroll.is-aligned  (the highlight
                rail — full-bleed, snap, no JS)
     filters    .spi-toggle + button.active     (both pill groups)
     button     .btn.default                    (clear filters)
     field      .spi-input                      (the search box)
     card       .spi-card-athlete               (every athlete,
                directory and rail — born here as .ps-card, moved
                to base once Junior and Senior needed it too)

   PAGE-SPECIFIC, and deliberately so. This page is a staff
   directory, which is a different thing from anything base
   carries:
     .ps-grid    an auto-fill directory grid, not a fixed
                 2/3/4-column card grid
     .ps-empty   the no-results state
     .ps-count   the live result count

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

/* ---------------------------------------------------------
   1. BANNER (.ps-hero)
   The band is base's .spi-banner.is-overlay.is-flow — .is-flow
   because this one carries the highlight rail as well as the
   title, so its height comes from its contents.

   The sketch is a pale line drawing, so the banner sits on
   --spi-black and the artwork is dropped back into it rather than
   running at full strength under base's standard scrim.
--------------------------------------------------------- */
.ps-hero {
  background-color: var(--spi-black);
}

.ps-hero > img {
  opacity: 0.28;
}

.ps-hero-copy {
  max-width: 800px;
  margin: 16px 0 0;
}

/* The rail's cards sit on the dark band, so the section below it
   starts clean. */
.ps-hero .spi-scroll {
  padding-bottom: 40px;
}

/* ---------------------------------------------------------
   2. FILTER BAR (.ps-filter-bar)
   Sticks to the top so the controls stay reachable while
   scrolling 194 cards — the whole point of a directory.
   Base's .spi-subnav is sticky too, but it is a row of anchor
   links with an underline indicator; this is a control panel.
--------------------------------------------------------- */
.ps-filter-bar {
  position: sticky;
  top: var(--ps-filter-top, 0px);
  z-index: 40;
  background: var(--spi-white);
  border-bottom: 1px solid var(--spi-border);
  padding: 16px var(--spi-pad-desktop);
}

.ps-filter-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 32px;
}

/* <fieldset> carries the group name for a screen reader but
   brings a border and padding of its own. */
.ps-filter-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ps-filter-group > legend,
.ps-filter-group > label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
}

/* Base centres .spi-toggle; in a left-aligned control bar the
   pills should start at the label. */
.ps-filter-group .spi-toggle {
  justify-content: flex-start;
}

.ps-search-group {
  margin-left: auto;
}

/* The field itself is base's .spi-input, as is its focus ring and
   the toggle pills' — both moved into base once this page proved to
   be the only thing declaring them. All that is left here is how
   wide the search box wants to be in this particular bar. */
.ps-search {
  min-width: 240px;
}

@media (max-width: 1024px) {
  .ps-filter-bar {
    padding-left: var(--spi-pad-tablet);
    padding-right: var(--spi-pad-tablet);
  }

  /* Below the desktop bar the groups stack, so pushing search to
     the right just leaves a gap. */
  .ps-search-group {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .ps-filter-bar {
    padding: 12px var(--spi-pad-mobile);
  }

  .ps-filter-inner {
    gap: 12px;
  }

  /* 194 cards on a phone means the filter bar is doing the real
     work, so its own pills scroll sideways rather than stacking
     six rows deep and eating the screen they are meant to help
     navigate — the same trade base makes in .spi-subnav. */
  .ps-filter-group .spi-toggle {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .ps-filter-group .spi-toggle::-webkit-scrollbar {
    display: none;
  }

  .ps-filter-group .spi-toggle button {
    flex: 0 0 auto;
    /* In the sideways scroller a label must not break: "Hall of Fame"
       was wrapping to two lines, and because .spi-toggle is a flex row
       every other pill stretched to match it — a 63px row of pills for
       one wrapped label. */
    white-space: nowrap;
    /* Base sizes a toggle pill at 33px tall, which is a reviewed
       decision, so it is raised HERE rather than in base: on a phone
       these pills are this page's navigation for 194 cards and need a
       44px target. (The search field gets its own from .spi-input.) */
    min-height: 44px;
  }
}

/* ---------------------------------------------------------
   3. RESULT COUNT + EMPTY STATE
   The legacy page had neither: filter down to nothing and you
   got a silent blank screen.
--------------------------------------------------------- */
.ps-count {
  margin: 0 0 24px;
}

.ps-notice {
  margin: 0;
  padding: 24px 0;
  text-align: center;
}

.ps-empty {
  padding: 56px 24px;
  text-align: center;
}

.ps-empty .spi-body {
  margin: 8px 0 20px;
}

/* ---------------------------------------------------------
   4. DIRECTORY GRID (.ps-grid)
   Base's grids are fixed 2/3/4-column card grids. A directory
   of 194 portraits wants as many columns as the width allows,
   down to one, which is auto-fill — a different primitive, not
   a variant of .spi-grid-4.
--------------------------------------------------------- */
/* Cards stretch to the tallest in their row (the grid default), as
   they do in the highlight rail, so every divider and "View Player
   Details" link in a row sits on one line. */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spi-gap);
}

/* Tablet. At the desktop track a 768px tablet lands on two 340px
   cards, which is a wide card and a long page for a directory;
   this holds three. */
@media (max-width: 1024px) {
  .ps-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 600px) {
  .ps-grid {
    /* Two portraits a row on a phone. One per row turns the
       directory into roughly 80 screens of scrolling, and 150px
       tracks drop a 320px screen back to one column — 132 keeps
       two all the way down. */
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--spi-gap-sm);
  }
}