/* /sports — the Lambton sports directory.
 *
 * A quiet, compact light interface shared with /clubs: a warm grey ground,
 * crisp white cards and one blue action colour. The page still answers the same four questions
 * in the same order — who is it for, what do they want to do, what can they
 * join right now, who offers it locally — the redesign changes the finish,
 * not the structure.
 *
 * The shared header, footer and mobile bar come from nav-footer.css and are
 * deliberately not touched here; page rules for them are what broke the
 * mobile bar before (see CLAUDE.md).
 *
 * /clubs loads this file too and borrows the --sp-* tokens below (its own
 * pastel palette lives under .clubs-page in clubs.css); the :root block, the
 * bare .search-form/.selection-status/.site-shell rules and the bare
 * h1–h4 rule are that shared foundation and are left exactly as they were.
 */

:root {
  --sp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sp-serif: "Inter", Georgia, "Times New Roman", serif;

  /* Palette: cream ground, crisp white surfaces with cool borders, and the
     same soft blue /clubs paints its actions in (--cc-forest there, despite
     the name), so the two directory pages read as one product. --sp-green-2
     is the hover: lighter than the resting colour on purpose, because iOS
     keeps :hover after a tap and a darker tapped button reads as broken (see
     CLAUDE.md). */
  --sp-paper: #f2f5f3;
  --sp-paper-deep: #ebf0ec;
  --sp-surface: #ffffff;
  --sp-surface-2: #fbfcfb;
  --sp-chip: #f2f5f3;
  --sp-ink: #2a2622;
  --sp-ink-2: #574f47;
  --sp-muted: #55635c;
  --sp-line: #e3e8e4;
  --sp-line-strong: #d5dcd7;
  --sp-stone: #d5dcd7;
  --sp-green: #356382;
  --sp-green-2: #3c7194;
  --sp-sage-soft: #dce8df;
  --sp-sage-mist: #edf3ee;
  --sp-on-green: #ffffff;
  /* One soft lift for cards and controls: barely there, so the ground stays flat. */
  --sp-lift: 0 1px 2px rgba(42, 38, 34, .04), 0 2px 10px rgba(42, 38, 34, .03);
  --sp-lift-hover: 0 1px 2px rgba(42, 38, 34, .05), 0 4px 12px rgba(42, 38, 34, .06);

  /* Spacing scale and shared measurements. */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-radius: 12px;
  --sp-radius-lg: 16px;
  --sp-radius-sm: 10px;
  --sp-radius-pill: 999px;
  --sp-control: 44px;
  --sp-section: clamp(var(--sp-7), 6vw, 4.5rem);
  --sp-wrap: var(--page-w, 1240px);
  --sp-gutter: var(--page-pad, 1.6rem);

  font-family: var(--sp-sans);
  color: var(--sp-ink);
  background: var(--sp-paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Inter, self-hosted for /sports; /clubs never references this family so
   loading it here cannot change anything on that page. */
/* /sports and /clubs now share one light discovery family. Every hover tint
   is lighter than the resting colour on purpose (iOS keeps :hover after a
   tap; a darker tapped control reads as broken). */
body.sports-page {
  --sp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sp-serif: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --sp-paper: #f2f5f3;
  --sp-paper-deep: #ebf0ec;
  --sp-surface: #ffffff;
  --sp-surface-2: #fbfcfb;
  --sp-chip: #f2f5f3;
  --sp-ink: #2a2622;
  --sp-ink-2: #574f47;
  --sp-muted: #55635c;
  --sp-line: #e3e8e4;
  --sp-line-strong: #d5dcd7;
  --sp-stone: #82918a;
  --sp-green: #356382;
  --sp-green-2: #3c7194;
  --sp-sage-soft: #dce8df;
  --sp-sage-mist: #e6eef3;
  --sp-on-green: #ffffff;
  --sp-lift: 0 1px 2px rgba(42, 38, 34, .05), 0 10px 24px -18px rgba(42, 38, 34, .18);
  --sp-lift-hover: 0 1px 2px rgba(42, 38, 34, .05), 0 14px 32px -14px rgba(42, 38, 34, .2);

  /* Compatibility tokens used by the compact cards below. Each text token
     meets normal-text contrast on the page and card backgrounds. */
  --sp-n100: #ffffff; --sp-n200: #f2f5f3; --sp-n300: #4e5c56; --sp-n400: #55635c;
  --sp-n500: #55635c; --sp-n600: #55635c; --sp-n700: #d5dcd7; --sp-n800: #d5dcd7; --sp-n900: #edf3ee;
  --sp-a100: #f7faf8; --sp-a200: #e6eef3; --sp-a300: #356382; --sp-a400: #3c7194;
  --sp-a500: #356382; --sp-a600: #315b77; --sp-a700: #284b62; --sp-a800: #e6eef3; --sp-a900: #edf3ee;
  --sp-divider: #d5dcd7;
  --sp-radius-md: 8px;
  --sp-shadow-sm: 0 0 0 1px var(--sp-line), var(--sp-lift);
  --sp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-family: var(--sp-font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.site-shell { width: 100%; background: var(--sp-paper); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.ph { display: inline-block; flex: 0 0 auto; line-height: 1; }

/* Keyboard focus is the same everywhere: a two-pixel ring in the page's own accent. */
.site-shell :is(a, button, input):focus-visible { outline: 2px solid var(--sp-green); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--sp-serif); font-weight: 600; letter-spacing: -.01em; }
/* Keep headings strong enough to match /clubs without making the dense card
   list feel heavy. */
body.sports-page h1, body.sports-page h2, body.sports-page h3, body.sports-page h4 {
  font-family: var(--sp-sans); font-weight: 600; letter-spacing: -.01em;
}

/* Shared wayfinding for the two activity directories. */
.directory-switch {
  width: min(100%, 430px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  margin-top: 18px; padding: 4px;
  background: var(--sp-surface); border: 1px solid var(--sp-line-strong); border-radius: 12px; box-shadow: var(--sp-lift);
}
.directory-switch a {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px;
  border-radius: 8px; color: var(--sp-ink-2); font-size: 13px; font-weight: 700; text-align: center;
}
.directory-switch a:hover { color: var(--sp-green); background: var(--sp-sage-mist); }
.directory-switch a[aria-current="page"] { color: var(--sp-on-green); background: var(--sp-green); }

/* Search (foundation only): /clubs builds its own pill search on these bare
   rules; /sports' organization box is a .finder-input in the finder below,
   so nothing here is reachable from this page's own markup. Left exactly as
   it was. */
.search-form {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  max-width: 760px; margin: 0 auto;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-pill);
  background: var(--sp-surface); box-shadow: var(--sp-lift);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form:focus-within { border-color: var(--sp-green); box-shadow: 0 0 0 3px var(--sp-sage-mist), var(--sp-lift); }
.search-form > .ph { font-size: 19px; color: var(--sp-muted); }
.search-form input { min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--sp-ink); } /* 16px or iOS zooms the page on focus. */
.search-form input::placeholder { color: var(--sp-muted); opacity: 1; }
.search-submit {
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 8px;
  background: var(--sp-green); color: var(--sp-on-green);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease;
}
.search-submit:hover { background: var(--sp-green-2); }

/* Status line (foundation only): /clubs renders "selection-status cc-status"
   on these bare rules for its own count line. /sports uses the same classes
   for its own status line, so this is now shared by both pages on purpose —
   each page's --sp-* tokens give it that page's own colours. */
.selection-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: var(--sp-4); font-size: 14px; color: var(--sp-muted); }
.selection-status-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--sp-green); }
.selection-status strong { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.selection-reset { min-height: 32px; padding: 0 2px; border: 0; background: transparent; font-size: 14px; font-weight: 700; color: var(--sp-green); cursor: pointer; }
.selection-reset::before { content: '·'; margin-right: 10px; color: var(--sp-stone); }
.selection-reset:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   /sports — everything below is private to this page.
   ========================================================================== */

.sp-shell { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px; }

/* Opening ----------------------------------------------------------------- */
.hero { padding: 26px 0 8px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sp-green);
}
.eyebrow::before { content: ''; flex: none; width: 18px; height: 1px; background: currentColor; }
.hero-copy h1 { margin: 12px 0 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -.02em; color: var(--sp-ink); }
/* On a phone the title and the finder are the whole opening: the intro
   sentence, the three stat numbers (the status line under the finder already
   carries the counts) and the section notes only appear from 860px, where
   they cost nothing a parent has to scroll past. Measured before this: the
   first program card began at 952px on an 844px screen. */
.intro { display: none; margin: 12px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--sp-n400); text-wrap: pretty; }

.sp-stats { display: none; gap: 22px; margin-top: 22px; }
.sp-stat-num { font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--sp-ink); }
.sp-stat-label { margin-top: 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-n500); }

/* The finder ---------------------------------------------------------------
   Unchanged from the rest of the site: one sentence, three native selects.
   Show me [sport] for [age] in [town]. Sticky under the shared header so it
   stays reachable while scrolling a long list. */
.sp-finder-wrap {
  position: sticky; top: 76px; z-index: 5;
  margin: 14px -20px 0; padding: 12px 20px;
  background: linear-gradient(var(--sp-paper) 82%, transparent);
}
/* Under 860px the four controls sit two across and speak for themselves
   ("any sport", "anywhere in Lambton"); their labels stay for screen readers
   only. The label column they replaced cost a phone 100px before the first
   program. */
.finder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.finder-word { display: none; }
.finder-field { display: block; min-width: 0; }
.finder-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.finder .finder-go { grid-column: 1 / -1; }
.finder-select, .finder-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 44px; max-width: 100%; padding: 6px 30px 6px 12px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-md);
  background: var(--sp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239184d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  color: var(--sp-ink); font-family: var(--sp-sans); font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; transition: border-color .15s ease;
}
.finder-select:hover { border-color: var(--sp-green); }
.finder-select:focus-visible, .finder-input:focus-visible { outline: 2px solid var(--sp-green); outline-offset: 2px; }
.finder-input { appearance: none; -webkit-appearance: none; background-image: none; padding-right: 12px; font-size: 16px; } /* 16px or iOS zooms the page on focus. */
.finder-input::placeholder { color: var(--sp-n500); opacity: 1; }
.finder-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Chrome draws its own datalist arrow inside the box; the suggestions appear as soon as a letter is typed, so the box needs none. */
.finder-input::-webkit-calendar-picker-indicator { display: none !important; }
.finder-go { min-height: 40px; margin-top: 4px; padding: 0 18px; border: 0; border-radius: var(--sp-radius-md); background: var(--sp-green); color: var(--sp-on-green); font-size: 14px; font-weight: 500; cursor: pointer; }

/* Status line placement only; the rule itself lives in the foundation block above. */
/* On a phone nothing sits between the filters and "Open to join right now":
   the count line is read to screen readers only and the free strip waits
   for 860px, where there is room for it beside nothing a parent must scroll
   past. */
.sp-finder-wrap .selection-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sp-free { display: none; }

/* Free this week ------------------------------------------------------------ */
.sp-free { margin-top: 18px; }
.sp-free-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-free-head h6 { margin: 0; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-n400); }
.sp-free-head span { font-size: 12px; color: var(--sp-n600); }
.sp-free-scroll { display: flex; gap: 10px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.sp-free-scroll::-webkit-scrollbar { display: none; }
/* One compact row per free program on a phone (tag, title, organizer and
   date on a single line each); the taller card returns from 860px. */
.sp-free-card {
  flex: none; width: min(300px, 82vw); padding: 10px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm);
  background: linear-gradient(160deg, var(--sp-sage-mist), var(--sp-surface) 70%);
}
.sp-free-card .sp-tag { grid-row: 1 / 3; }
.sp-free-card .sp-free-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-free-when { display: none; font-size: 12.5px; line-height: 1.45; color: var(--sp-n300); }
.sp-free-meta { margin: 0; font-size: 12px; line-height: 1.3; color: var(--sp-n500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tags ---------------------------------------------------------------------- */
.sp-tag { display: inline-flex; align-self: flex-start; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.sp-tag-accent { color: var(--sp-a300); background: color-mix(in srgb, var(--sp-green) 16%, transparent); }
.sp-tag-neutral { color: var(--sp-n400); background: var(--sp-n900); }

/* Section headings ----------------------------------------------------------
   Shared by "Open to join right now" and "Every club we know of". */
.sp-section { margin-top: 34px; }
.sp-section h2 { margin: 0; font-size: 24px; letter-spacing: -.015em; color: var(--sp-ink); }
.sp-section-note { display: none; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--sp-n400); text-wrap: pretty; }
.sp-group { margin-top: 28px; }
.sp-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sp-group-head h3 { margin: 0; font-size: 17px; font-weight: 500; color: var(--sp-ink); }
.sp-group-count { font-size: 12px; color: var(--sp-n500); }
.sp-group-rule { flex: 1; height: 1px; min-width: 20px; background: linear-gradient(to right, var(--sp-divider), transparent); }

/* Empty states ---------------------------------------------------------------*/
.sp-empty { margin-top: 22px; padding: 26px 20px; text-align: center; border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); background: var(--sp-surface); }
.sp-empty strong { display: block; font-size: 16px; font-weight: 500; color: var(--sp-ink); }
.sp-empty p { margin: 6px 0 0; font-size: 13.5px; color: var(--sp-n400); }
.sp-empty-quiet { margin: 0; padding: 20px; text-align: center; font-size: 14px; color: var(--sp-n400); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); background: var(--sp-surface); }
.program-load-error { margin: 48px 0; font-size: 15.5px; line-height: 1.6; color: var(--sp-n400); text-align: center; }

/* Program cards --------------------------------------------------------------
   One card per open program: org, title, an optional flag, the facts as a
   small grid, a two-line description that expands, the address and the way
   in. */
.sp-programs { display: grid; gap: 10px; }
/* min-width: 0 because a grid item defaults to min-width: auto, and a card
   whose "Starts Sep 24, 2026" flag sits beside its title once grew past the
   390px viewport by 15px and put a horizontal scroll on the phone. */
.sp-program { display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); background: var(--sp-surface); }
.sp-program-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-program-heading { min-width: 0; }
.sp-program-org { margin: 0; font-size: 12.5px; color: var(--sp-n400); }
.sp-program-title { margin: 3px 0 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--sp-ink); text-wrap: balance; overflow-wrap: break-word; }
.sp-program-top .sp-tag { flex: none; margin-top: 2px; }
.sp-program-facts { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 5px 12px; margin: 14px 0 0; font-size: 13px; line-height: 1.45; }
.sp-program-facts dt { margin: 0; color: var(--sp-n500); font-weight: 400; }
.sp-program-facts dd { margin: 0; color: var(--sp-ink-2); }
.sp-program-desc {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sp-n300); cursor: pointer; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-program-desc.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.sp-program-address { margin: 10px 0 0; font-size: 12px; color: var(--sp-n500); }
.sp-program-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }

.sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--sp-radius-md); border: 1px solid transparent; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.sp-btn-primary { flex: 1 1 auto; min-width: 0; border-color: var(--sp-green); color: var(--sp-on-green); background: var(--sp-green); text-align: center; }
.sp-btn-primary:hover { border-color: var(--sp-green-2); color: var(--sp-on-green); background: var(--sp-green-2); }
.sp-btn-secondary { flex: 1 1 auto; min-width: 0; border-color: var(--sp-line-strong); color: var(--sp-ink-2); background: transparent; text-align: center; }
.sp-btn-secondary:hover { border-color: var(--sp-green); color: var(--sp-green); }
.sp-btn-quiet { flex: 1 1 auto; color: var(--sp-n500); background: transparent; border-style: dashed; cursor: default; }
.sp-btn:focus-visible { outline: 2px solid var(--sp-green); outline-offset: 2px; }
.sp-more { flex: none; align-self: flex-start; }

/* ==========================================================================
   Standing directory: the year-round clubs, grouped by sport.
   ========================================================================== */
.sp-clubs { display: block; padding: 0 16px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-lift); }
.sp-club { border-bottom: 1px solid var(--sp-divider); }
.sp-club-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sp-club-row:hover { color: var(--sp-green); }
.sp-club-info { flex: 1; min-width: 0; }
.sp-club-name { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: inherit; }
.sp-club-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sp-n500); }
.sp-club-row .sp-tag { flex: none; }
.sp-club-caret { flex: none; width: 16px; height: 16px; color: var(--sp-n500); transition: transform .18s ease; }
.sp-club-row[aria-expanded="true"] .sp-club-caret { transform: rotate(180deg); }
.sp-club-panel { padding: 0 0 18px; display: grid; gap: 12px; }
.sp-club-blurb { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sp-n300); text-wrap: pretty; }
.sp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--sp-n500); }
.sp-open-now { display: grid; gap: 6px; }
.sp-open-now-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-n500); }
.sp-open-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--sp-radius-md); background: var(--sp-chip); font-size: 13px; color: var(--sp-ink-2); }
.sp-open-row span:last-child { flex: none; color: var(--sp-n500); }
.sp-club-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-club-actions .sp-btn { flex: none; min-height: 44px; padding: 0 14px; }

/* Sponsor line ---------------------------------------------------------------*/
.sp-sponsor { margin: 48px 0 0; padding: 18px 0; border-top: 1px solid var(--sp-divider); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sp-n500); }
.sp-sponsor a { flex: none; color: var(--sp-green); font-size: 13px; }
.sp-sponsor a:hover { color: var(--sp-green-2); }

/* Bottom clearance for the fixed mobile bar is nav-footer.css's job, not
   this page's (see CLAUDE.md); .sp-shell carries no bottom padding for it. */
.sp-shell { padding-bottom: 40px; }

/* Desktop: a single narrow column stretched into a wide viewport is not
   responsive, it is unfinished (see CLAUDE.md) — the column widens, the
   finder goes back to one flowing sentence (the room a wide screen gives
   it, same as it always had), and open programs run two to a row. The
   standing club list stays a single column of rows; /clubs uses the same
   shape at this width and it reads as a deliberate list, not a stretch. */
@media (min-width: 860px) {
  .sp-shell { max-width: 1080px; }
  /* A 34ch measure is a phone measure: at this width it broke the sentence
     after "we know" and left "of," starting the second line. */
  .intro { display: block; max-width: 52ch; font-size: 16px; }
  .sp-stats { display: flex; gap: 44px; margin-top: 26px; }
  .sp-section-note { display: block; }

  /* The sticky band is opaque from here down. It used to fade to transparent
     over its last 18%, which on a phone hid 11px of nothing and on a desktop
     ran a club row and a section heading straight through the finder and the
     "Showing N" line — the page's roughest moment, and it read as a
     rendering fault rather than a design. */
  .sp-finder-wrap {
    margin-top: 22px; padding: 16px 20px 14px;
    background: var(--sp-paper);
    border-bottom: 1px solid var(--sp-divider);
    box-shadow: 0 14px 22px -22px rgba(42, 38, 34, .38);
  }

  /* One line, always. The fields flex from a shared zero basis instead of
     carrying fixed widths, so the sentence cannot break: 180px + 220px of
     minimums used to push "any organization" onto a second row on its own,
     orphaned from the "from" that introduces it. */
  .finder { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; font-size: 17px; color: var(--sp-ink); }
  .finder-word { display: inline; flex: none; font-size: 15px; white-space: nowrap; color: var(--sp-n500); }
  .finder-field { display: inline-flex; flex: 1 1 0; min-width: 0; }
  .finder-select, .finder-input { width: 100%; min-width: 0; }
  .finder .finder-go { flex: none; grid-column: auto; margin-top: 0; }

  .sp-finder-wrap .selection-status { position: static; width: auto; height: auto; margin: 12px 0 0; overflow: visible; clip: auto; white-space: normal; font-size: 13px; }

  /* The free strip wraps here instead of scrolling sideways. A phone has a
     good reason to scroll a row — a desktop does not, and the fixed 200px
     cards in an overflow row always left one sliced in half against the
     column's right edge, with no scrollbar to say there was more. */
  .sp-free { display: block; margin-top: 26px; }
  .sp-free-scroll {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px; margin: 0; padding: 0; overflow: visible;
  }
  .sp-free-card { width: auto; padding: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .sp-free-card .sp-free-title { font-size: 16px; white-space: normal; overflow: visible; text-wrap: balance; }
  .sp-free-when { display: block; }
  .sp-free-meta { white-space: normal; overflow: visible; }

  .sp-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* An in-page jump has two sticky things above it, the shared header and
     the finder; without this the heading it lands on sits underneath them. */
  .sp-section, .sp-group, .sp-club { scroll-margin-top: 190px; }
}

/* Wider still: a little more column, and that is all. Three program cards to
   a row was tried and put the flag beside a three-line title; the club list
   stays one column on purpose (see CLAUDE.md). */
@media (min-width: 1280px) {
  .sp-shell { max-width: 1160px; }
}

/* Pointer-only polish. Every resting state already works without it, and it
   is gated on (hover: hover) so iOS, which keeps :hover after a tap, never
   leaves a card looking pressed. */
@media (hover: hover) and (min-width: 860px) {
  .sp-program { transition: box-shadow .16s ease; }
  .sp-program:hover { box-shadow: 0 0 0 1px var(--sp-n700); }
  .sp-club-row { transition: color .16s ease; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .sp-club-caret { transition: none; }
}

/* Sponsor spots use the same soft surfaces as the rest of the directory. */
body.sports-page .premier-band,
body.sports-page .community-sponsors {
  background: var(--sp-surface-2);
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-md);
  margin: 28px 0;
}
body.sports-page .pb-label,
body.sports-page .csx-head { color: var(--sp-ink-2); }
body.sports-page .pb-spot,
body.sports-page .csx-spot { background: #fbfcfb; border-color: var(--sp-line-strong); }
body.sports-page .csx-join { color: var(--sp-green-2); }