/* /clubs — Clubs & activities.
   A directory a parent can read in one glance: a title, a pill search, a
   row of tinted activity circles, two pill selects, and then every listing as
   one white card -- a tinted avatar carrying the activity's icon, a status
   badge, a serif name, a category pill, the facts as chips, and one
   full-width forest button for the way in. One ground, no bands; the cards
   make the structure. Built on the --sp-* tokens sports.css already defines (both
   pages load it), so /sports and /clubs still read as one product.
   clubs-render.mjs owns the markup and every data-attribute the filters bind
   to; the classes here are its classes.

   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). */

/* The two families sports.css names, served from here rather than Google
   Fonts: no third-party request before first paint, and with the preload in
   clubs.html the swap from the fallback face is rarely visible. Latin subset
   only; variable weight, and optical size on the serif. */
.clubs-page {
  background: var(--sp-paper);
  color: var(--sp-ink);
  /* One soft lift for every card: barely there, so the ground stays flat. */
  --cc-lift: 0 1px 2px rgba(42, 38, 34, .05), 0 10px 24px -18px rgba(42, 38, 34, .18);
  /* The forest that every action on the page is painted in, and the tints
     the two status badges sit on. */
  --cc-forest: #356382;
  --cc-forest-2: #3c7194;
  --cc-mint: #e6eef3;
  --cc-amber: #e6eef3;
  --cc-amber-ink: #356382;
  --cc-card: #ffffff;
  --cc-card-line: rgba(0, 0, 0, .06);
  --cc-chip: #f2f5f3;
  --cc-control-line: #e3e8e4;
}
.clubs-page main { line-height: 1.5; }
.clubs-page .site-shell { width: min(100%, 1240px); margin: 0 auto; padding-top: var(--sp-5); }

/* The activity tints. Dealt out by clubs-render.mjs in activity order, so a
   circle and the rows under it always match, and neighbours never share. */
.cc-ta { --tint: #ebf0ec; }
.cc-tb { --tint: #D9EBDF; }
.cc-tc { --tint: #ebf0ec; }
.cc-td { --tint: #E4DEF3; }
.cc-te { --tint: #F6DADE; }
.cc-tf { --tint: #D6E6F4; }
.cc-tn { --tint: #ebf0ec; }

/* Title --------------------------------------------------------------------
   Static in clubs.html, ahead of the search: a page needs its h1 whether or
   not the listings arrive. */
.cc-title { padding: 0 var(--sp-gutter) var(--sp-4); }
.cc-title .eyebrow { margin-bottom: 12px; }
.cc-title h1 { margin: 0 0 6px; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
.cc-title p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--sp-ink-2); }
.cc-title strong { color: var(--sp-ink); font-weight: 700; }

/* Search --------------------------------------------------------------------
   sports.css styles the form, input and focus ring; here it becomes a pill
   and the classless submit gets the evergreen recipe. width:auto matters:
   sports.css sets the form to width:100% on phones, and 100% plus side
   margins overflows the screen by one gutter, which widens the mobile layout
   viewport and shows up as dead space under the footer in check-mobile-bar. */
.clubs-page .search-form {
  width: auto; max-width: 720px; min-height: 56px; margin: 0 var(--sp-gutter) var(--sp-5);
  padding: 5px 5px 5px 18px; gap: 10px;
  background: var(--cc-card); border: 1px solid var(--cc-control-line); border-radius: 12px;
  box-shadow: var(--cc-lift);
}
.clubs-page .search-form:focus-within { border-color: var(--cc-forest); box-shadow: 0 0 0 3px var(--cc-mint), var(--cc-lift); }
.clubs-page .search-form > svg { width: 20px; height: 20px; color: var(--sp-muted); }
.clubs-page .search-form input { min-height: 44px; }
.clubs-page .search-form button[type="submit"] {
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 8px;
  background: var(--cc-forest); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease;
}
.clubs-page .search-form button[type="submit"]:hover { background: var(--cc-forest-2); }

/* Finder --------------------------------------------------------------------
   Circles first, so the shape of what's on offer reads before a single word
   is; then the two questions a parent actually has, as selects. */
.cc-finder { padding: 0 0 var(--sp-2); }
.cc-cats {
  display: flex; gap: 6px 18px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 6px var(--sp-gutter) 14px; scroll-padding: 0 var(--sp-gutter);
}
.cc-cats::-webkit-scrollbar { display: none; }
.cc-cat {
  flex: none; width: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  color: var(--sp-ink); text-align: center; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.cc-cat-icon {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--tint); color: var(--sp-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-cat-icon .cc-ic { width: 27px; height: 27px; opacity: 1; }
.cc-cat-label { text-wrap: balance; transition: color .15s ease; }
.cc-cat:hover .cc-cat-icon { transform: translateY(-2px); box-shadow: var(--cc-lift); }
/* A pressed circle narrows the page to its activity, and the ring says so
   at a glance; pressed again, it lets go. */
.cc-cat.is-selected .cc-cat-icon { box-shadow: 0 0 0 2px var(--sp-paper), 0 0 0 4px var(--cc-forest); }
.cc-cat.is-selected .cc-cat-label { font-weight: 800; color: var(--cc-forest); }
.cc-cat:focus-visible { outline: 0; }
.cc-cat:focus-visible .cc-cat-icon { box-shadow: 0 0 0 2px var(--sp-paper), 0 0 0 4px var(--cc-forest); }

.cc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px var(--sp-gutter) 0; }
.cc-filter {
  position: relative; flex: 1 1 220px; max-width: 320px;
  display: flex; align-items: center;
  min-height: 48px;
  background: var(--cc-card); border: 1px solid var(--cc-control-line); border-radius: 12px;
  box-shadow: var(--cc-lift);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cc-filter > .cc-ic { position: absolute; left: 16px; width: 18px; height: 18px; opacity: 1; color: var(--sp-muted); pointer-events: none; }
.cc-filter select {
  flex: 1 1 auto; width: 100%; min-width: 0;
  min-height: 46px; padding: 0 2.6rem 0 44px;
  border: 0; border-radius: 12px;
  background-color: transparent; color: var(--sp-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232a2622" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 1rem center; -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
}
.cc-filter select:focus-visible { outline: 0; }
.cc-filter:focus-within { border-color: var(--cc-forest); box-shadow: 0 0 0 3px var(--cc-mint), var(--cc-lift); }
/* A filter that is narrowing the page wears the forest, so the state reads
   without the option text. */
.cc-filter.is-active { background: var(--cc-mint); border-color: var(--cc-forest); }
.cc-filter.is-active > .cc-ic, .cc-filter.is-active select { color: var(--cc-forest); }
.cc-filter.is-active select { font-weight: 700; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23356382" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); }
.cc-clear {
  min-height: 44px; padding: 0 6px;
  border: 0; background: transparent;
  color: var(--cc-forest); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Sections ------------------------------------------------------------------ */
.cc-open { padding: var(--sp-6) var(--sp-gutter) 0; scroll-margin-top: 90px; }
.cc-open-head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.018em; }
.cc-open-head h2::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-green); }
.cc-open-head p { margin: 0 0 var(--sp-4); color: var(--sp-ink-2); font-size: 15px; }
.cc-open.is-empty h2 { margin: 0 0 8px; font-size: clamp(21px, 2.2vw, 25px); }
.cc-open.is-empty p { margin: 0; max-width: 62ch; color: var(--sp-ink-2); font-size: 15px; line-height: 1.6; }
.cc-open-list, .cc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.cc-directory { padding: var(--sp-7) var(--sp-gutter) var(--sp-6); }
.cc-directory-head h2 { margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.018em; }
.cc-directory-head p { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--sp-ink-2); }
.cc-activity { padding-top: var(--sp-6); scroll-margin-top: 90px; }
.cc-activity h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 22px; letter-spacing: -.015em; }
.cc-activity h2 span { font-family: var(--sp-sans); font-size: 13px; font-weight: 600; color: var(--sp-muted); }

/* Cards -------------------------------------------------------------------
   One shape for a program and an organization, in the strip and in the
   directory: avatar, then a column of name, facts and the way in. */
.cc-program, .cc-organization {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 16px; align-items: start;
  padding: 20px;
  background: var(--cc-card); border: 1px solid var(--cc-card-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42, 38, 34, .04), 0 8px 24px -12px rgba(42, 38, 34, .14);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-program:hover, .cc-organization:hover { box-shadow: 0 1px 2px rgba(42, 38, 34, .05), 0 14px 32px -14px rgba(42, 38, 34, .2); }
.cc-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tint); color: var(--sp-ink); }
.cc-avatar .cc-ic { width: 26px; height: 26px; opacity: 1; }
/* The body fills its row so that in a row of equal-height cards the facts
   sink to the same line; the way in is its own grid row underneath. */
.cc-body { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 56px; }
.cc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.cc-head h3 { flex: 1 1 180px; margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
.cc-cat-pill {
  flex: none; align-self: flex-start;
  padding: 5px 12px; border-radius: 6px;
  background: var(--tint); color: var(--sp-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
/* The status badge: which kind of open a session is. Mint for taking
   registrations, amber for drop in. */
.cc-flag {
  display: inline-flex; align-self: flex-start; align-items: center;
  margin: 0 0 -2px; padding: 3px 10px;
  background: var(--cc-mint); color: var(--cc-forest); border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.cc-flag-dropin { background: var(--cc-amber); color: var(--cc-amber-ink); }
.cc-org-name { margin: -6px 0 0; font-weight: 600; font-size: 14px; color: var(--sp-ink-2); hyphens: none; }
.cc-offer { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sp-ink-2); }
.cc-ic { width: 16px; height: 16px; flex: none; opacity: .8; }
/* The facts, one chip each. */
.cc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--cc-chip); color: var(--sp-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.cc-chip .cc-ic { width: 14px; height: 14px; opacity: .7; }
/* In a row of equal-height cards the spare space sits between the
   description and the facts, where it reads as air; the facts stay at the
   bottom so they line up across the row. */
.cc-meta { margin-top: auto; }
:is(h3, .cc-head, .cc-org-name, .cc-offer) + .cc-jump { margin-top: auto; }
/* The way in: one full-width forest button, and square icon buttons beside
   it. Everything here is 44px tall, and the hover is lighter than the
   resting colour, so a tap that leaves iOS's hover state behind never reads
   as a broken button. */
.cc-links { grid-column: 2; grid-row: 2; display: flex; align-items: stretch; gap: 8px; margin: 12px 0 0; }
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; border-radius: 10px;
  font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cc-btn-primary { flex: 1 1 auto; min-width: 0; padding: 0 16px; background: var(--cc-forest); color: #fff; text-align: center; }
.cc-btn-primary .cc-ic { width: 15px; height: 15px; opacity: .9; }
.cc-btn-primary:hover { background: var(--cc-forest-2); color: #fff; text-decoration: none; }
.cc-btn-icon { flex: none; width: 44px; height: 44px; background: var(--cc-card); color: var(--cc-forest); border: 1px solid var(--cc-control-line); }
.cc-btn-icon .cc-ic { width: 19px; height: 19px; opacity: 1; }
.cc-btn-icon:hover { border-color: var(--cc-forest); background: var(--cc-mint); }
.cc-btn:focus-visible { outline: 2px solid var(--cc-forest); outline-offset: 2px; }
.cc-jump { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cc-forest); font-weight: 700; font-size: 13.5px; }
.cc-jump:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Help with the cost --------------------------------------------------------
   One forest card between what is open and the directory. */
.cc-subsidy-card {
  margin: var(--sp-6) var(--sp-gutter) 0;
  padding: 20px;
  background: var(--cc-forest); color: #fff; border-radius: 18px;
  box-shadow: 0 12px 32px -16px rgba(31, 61, 43, .55);
}
.cc-subsidy-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #cfe6d6; }
.cc-subsidy-kicker .cc-ic { width: 18px; height: 18px; opacity: 1; }
.cc-subsidy-card h2 { margin: 0 0 8px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.cc-subsidy-card p { margin: 0 0 16px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.cc-subsidy-card p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cc-subsidy-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px;
  background: #fff; color: var(--cc-forest); border-radius: 10px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color .15s ease;
}
.cc-subsidy-cta:hover { background: var(--cc-mint); text-decoration: none; }
.cc-subsidy-cta .cc-ic { width: 15px; height: 15px; opacity: 1; }
.cc-subsidy-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The card is the pause before the directory, which follows without its
   own top gap doubling up. */
.cc-subsidy-card + .cc-directory { padding-top: var(--sp-6); }

.cc-empty { padding: var(--sp-6) var(--sp-gutter); background: var(--sp-surface); border: 1px dashed var(--sp-line-strong); border-radius: 22px; text-align: center; }
.cc-empty strong { display: block; margin-bottom: 6px; font-family: var(--sp-serif); font-size: 19px; font-weight: 600; }
.cc-empty p { margin: 0; color: var(--sp-ink-2); font-size: 14.5px; }
.cc-empty a { color: var(--cc-forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Submit ------------------------------------------------------------------ */
.cc-submit {
  margin: 0 var(--sp-gutter) clamp(var(--sp-7), 5vw, var(--sp-8));
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 22px; box-shadow: var(--cc-lift);
  text-align: center;
}
.cc-submit h2 { margin: 0 0 8px; font-size: clamp(21px, 2.2vw, 25px); letter-spacing: -.018em; }
.cc-submit p { margin: 0 0 var(--sp-4); color: var(--sp-ink-2); font-size: 15px; }
.cc-button {
  display: inline-block; min-height: var(--sp-control);
  padding: 12px 24px; line-height: 20px;
  background: var(--cc-forest); color: #fff; border-radius: 10px;
  font-weight: 700; font-size: 14px;
  transition: background-color .15s ease, transform .15s ease;
}
.cc-button:hover { background: var(--cc-forest-2); transform: translateY(-1px); }

@media (max-width: 860px) {
  .clubs-page .site-shell { padding-top: var(--sp-4); }
  .cc-title h1 { font-size: 30px; }
  .cc-title p { font-size: 15px; }
  .clubs-page .search-form { max-width: none; margin-bottom: var(--sp-4); padding-left: 16px; }
  /* Sized so a fifth circle peeks in at the edge of a 390px screen: the
     row scrolls, and the peek is what says so. */
  .cc-cats { gap: 6px 10px; padding-bottom: 10px; }
  .cc-cat { width: 80px; font-size: 12px; }
  .cc-filters { gap: 10px; }
  .cc-filter { flex: 1 1 0; min-width: 0; max-width: none; }
  .cc-filter > .cc-ic { left: 14px; width: 16px; height: 16px; }
  .cc-filter select { padding: 0 2rem 0 38px; font-size: 14px; background-position: right .8rem center; }
  .cc-clear { flex-basis: 100%; text-align: left; }
  .cc-open { padding-top: var(--sp-5); }
  .cc-directory { padding-top: var(--sp-6); }
  .cc-subsidy-card { margin-top: var(--sp-5); border-radius: 18px; }
  .cc-open-list, .cc-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cc-program, .cc-organization { grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 20px 18px; }
  /* Under the body, the buttons take the card's full width, so the label
     never wraps beside two icon buttons. */
  .cc-links { grid-column: 1 / -1; margin-top: 14px; }
  .cc-avatar { width: 48px; height: 48px; }
  .cc-avatar .cc-ic { width: 23px; height: 23px; }
  .cc-body { min-height: 0; }
  /* The pill keeps its top-right seat; the title wraps beside it. */
  .cc-head { gap: 6px 10px; }
  .cc-head h3 { flex-basis: 130px; font-size: 19px; }
  .cc-submit { margin-bottom: var(--sp-7); }
}

/* Shared family language with /sports: the standing count reuses sports.css's
   .selection-status, and an entry filed once names its other activities. */
.cc-status { margin: var(--sp-4) var(--sp-gutter) 0; }
.cc-also { margin: 2px 0 0; font-size: 13px; color: var(--sp-muted); }
.cc-also a { color: var(--cc-forest); font-weight: 700; text-decoration: none; }
.cc-also a:hover { text-decoration: underline; }