/* ==========================================================================
   KEYSTONE GROUPS — Find a Group          css/finder.css
   Prototype 2026-09-02. Speaks the Groups page's tokens (redesign.css + brand.css):
   Work Sans display / Roboto body, the campaign palette, pill CTAs, one card radius.
   ========================================================================== */

:root {
  --ks-display: 'Work Sans', Helvetica, Arial, sans-serif;
  --ks-body: 'Roboto', Helvetica, Arial, sans-serif;

  --ks-ink: #1c1f26;
  --ks-ink-2: #565c66;
  --ks-ink-3: #8b9098;
  --ks-hair: #e2e3e5;
  --ks-bg: #f1f1f1;
  --ks-paper: #ffffff;
  --ks-dark: #353a42;

  /* brand palette (sampled from the guide; see brand.css B1) */
  --ksb-deep-navy: #2c1f63;
  --ksb-deep-teal: #1d3844;
  --ksb-deep-purple: #622a93;
  --ksb-core-teal: #357684;
  --ksb-core-indigo: #4c379e;
  --ksb-core-purple: #913fda;
  --ksb-light-teal: #50b8b8;
  --ksb-light-green: #c0eb8e;

  --ksb-grad-hero: linear-gradient(180deg, #50b8b8 0%, #6b85c6 56%, #825cd2 100%);
  --ksb-grad-pill: linear-gradient(90deg, #357684 0%, #4c379e 52%, #913fda 100%);
  --ksb-grad-rule: linear-gradient(90deg, #50b6b8 0%, #4d67a8 42%, #4c3e9f 56%, #622a93 100%);

  /* card families — every one is a measured white-text ground (≥ 5:1) */
  --fam-mens: var(--ksb-core-teal);
  --fam-womens: var(--ksb-core-purple);
  --fam-couples: var(--ksb-deep-navy);
  --fam-everyone: var(--ksb-core-indigo);

  --accent: var(--ksb-core-purple);   /* job: active filter state + focus rings. nothing else. */
  --radius: clamp(14px, 1.6vw, 22px);
  --pill: 999px;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ks-bg); color: var(--ks-ink);
  font-family: var(--ks-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- site header stand-in ------------------------------------------------ */
.site-bar {
  background: var(--ks-dark); color: #fff; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); font-family: var(--ks-display);
}
.site-bar__mark { font-weight: 800; letter-spacing: 0.04em; font-size: 20px; }
.site-bar__nav { display: flex; gap: 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.site-bar__give { background: #cc5861; padding: 8px 18px; border-radius: 3px; margin-top: -8px; margin-bottom: -8px; }
@media (max-width: 760px) { .site-bar__nav span:not(.site-bar__give) { display: none; } }

/* ---- hero (compact; the campaign wash as a colour field) ------------------ */
.gf-hero {
  position: relative; color: #fff; background: var(--ksb-deep-navy);
  background-image: var(--ksb-grad-hero); isolation: isolate;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(44px, 6vw, 80px);
}
.gf-hero::after { /* darkens the lower edge so the lockup sits on a ground */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(44,31,99,0) 30%, rgba(44,31,99,0.55) 100%);
}
.gf-hero__inner { max-width: var(--wrap); margin: 0 auto; }
.gf-hero__meta {
  margin: 0 0 18px; font-family: var(--ks-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85;
}
/* --- living inside the Divi page (2026-09-24) ------------------------------------------------
   Two of the theme's own rules reach into this page and have to be pushed back:
   1. `h1,h2,h3,h4,h5,h6 { color:#333 }` — an explicit colour beats the white our headings inherit
      from their container, so every title (hero, banners, cards, drawer) rendered charcoal on the
      live page while the standalone preview looked right. `color: inherit` on a class (0,1,0)
      outranks the theme's element selector (0,0,1) and restores the intended inheritance.
   2. `article,aside,footer,header,hgroup,nav,section { display:block }` — an author rule, so it
      beats the `hidden` attribute's built-in `display:none`. Without this the map panel and the
      detail drawer are both visible from the start (the empty grey slab under the toolbar).
      Same class of bug as the filter badge (9/3) and the card chips. */
.gf h1, .gf h2, .gf h3, .gf h4, .gf-drawer h1, .gf-drawer h2, .gf-drawer h3 { color: inherit; }
[hidden] { display: none !important; }

.gf-hero__title {
  margin: 0; font-family: var(--ks-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 9.5vw, 132px); line-height: 0.92; letter-spacing: -0.01em;
}
.gf-hero__light { font-weight: 300; letter-spacing: 0.02em; }
.gf-hero__rule { display: block; width: 112px; height: 6px; border-radius: var(--pill); margin: 26px 0 22px; background: var(--ksb-grad-rule); }
.gf-hero__sub {
  margin: 0; font-family: var(--ks-display); font-weight: 300; font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.16em; text-transform: uppercase; max-width: 30ch; line-height: 1.5;
}

/* ---- toolbar ------------------------------------------------------------- */
.gf-toolbar {
  position: sticky; top: 0; z-index: 20; background: var(--ks-paper);
  border-bottom: 1px solid var(--ks-hair);
}
.gf-toolbar__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter) 10px;
  display: grid; grid-template-columns: minmax(220px, 360px) 1fr auto; gap: 12px 18px; align-items: center;
}
.gf-toolbar__inner .gf-filters { grid-column: 1 / -1; }
.gf-search {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--ks-hair); border-radius: var(--pill); color: var(--ks-ink-3); background: #fff;
}
.gf-search:focus-within { border-color: var(--ks-ink); color: var(--ks-ink); }
.gf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ks-ink); }
.gf-search input::placeholder { color: var(--ks-ink-3); }
.gf-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.gf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-fbtn {
  white-space: nowrap; position: relative; height: 40px; padding: 0 14px 0 16px; border-radius: var(--pill);
  border: 1.5px solid var(--ks-hair); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ks-display); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ks-ink);
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.gf-fbtn:hover { border-color: var(--ks-ink-3); }
.gf-fbtn[aria-expanded="true"] { border-color: var(--ks-ink); }
.gf-fbtn.is-active { background: var(--ks-ink); border-color: var(--ks-ink); color: #fff; }
.gf-fbtn__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.gf-fbtn__n[hidden] { display: none; }   /* the count badge only appears once something is picked */
.gf-fbtn__chev { width: 12px; height: 12px; transition: transform .15s ease-out; }
.gf-fbtn[aria-expanded="true"] .gf-fbtn__chev { transform: rotate(180deg); }

.gf-pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 220px; max-width: min(92vw, 360px);
  background: #fff; border: 1px solid var(--ks-hair); border-radius: 16px; padding: 8px;
  box-shadow: 0 12px 32px rgba(28, 31, 38, 0.10), 0 2px 6px rgba(28, 31, 38, 0.06);
  max-height: min(60vh, 420px); overflow: auto;
}
.gf-pop__opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.gf-pop__opt:hover { background: var(--ks-bg); }
.gf-pop__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.gf-pop__opt .n { margin-left: auto; color: var(--ks-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.gf-pop__opt.is-zero { color: var(--ks-ink-3); }
.gf-pop__foot { display: flex; justify-content: space-between; padding: 8px 10px 4px; border-top: 1px solid var(--ks-hair); margin-top: 4px; }
.gf-pop__link { border: 0; background: none; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--ks-ink-2); cursor: pointer; }
.gf-pop__link:hover { color: var(--ks-ink); }
.gf-fwrap { position: relative; }

/* Filters drop-down (phones + tablets). Desktop keeps the pill strip and never shows these. */
.gf-allbtn { display: none; }
.gf-sheet { display: none; }
.gf-sheet__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.gf-sec { border-bottom: 1px solid var(--ks-hair); }
.gf-sec__btn {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--ks-display); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--ks-ink);
}
.gf-sec__sum { margin-left: auto; font-family: var(--ks-body); font-weight: 400; font-size: 13px; color: var(--ks-ink-2); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-sec__sum:empty { display: none; }
.gf-sec__btn .gf-fbtn__chev { flex: none; margin-left: auto; }
.gf-sec__sum + .gf-fbtn__chev { margin-left: 0; }
.gf-sec__btn[aria-expanded="true"] .gf-fbtn__chev { transform: rotate(180deg); }
.gf-sec__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; padding: 0 0 10px; }
.gf-sec__body[hidden] { display: none; }
.gf-sheet__foot {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ks-hair);
}
.gf-sheet__foot .gf-btn--primary { flex: 0 1 auto; min-width: 180px; }

.gf-toolbar__right { display: flex; align-items: center; gap: 10px; }
.gf-seg { display: inline-flex; border: 1.5px solid var(--ks-hair); border-radius: var(--pill); padding: 3px; background: #fff; }
.gf-seg__btn { border: 0; background: none; height: 32px; padding: 0 14px; border-radius: var(--pill); font-family: var(--ks-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ks-ink-2); cursor: pointer; }
.gf-seg__btn.is-on { background: var(--ks-ink); color: #fff; }
.gf-mapbtn {
  height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1.5px solid var(--ks-hair); background: #fff;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--ks-display); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.gf-mapbtn[aria-pressed="true"] { background: var(--ksb-deep-navy); border-color: var(--ksb-deep-navy); color: #fff; }

.gf-toolbar__status {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 34px;
}
.gf-countwrap { display: flex; flex-direction: column; gap: 2px; }
.gf-count { margin: 0; font-family: var(--ks-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-ink-2); }
/* "Updated 12 min ago" — only rendered when the data comes from the live sync */
.gf-updated { margin: 0; font-size: 12px; line-height: 1.2; color: var(--ks-ink-3); }
.gf-active { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 12px; border-radius: var(--pill); background: var(--ks-bg); border: 0; font-size: 13px; color: var(--ks-ink); cursor: pointer; }
.gf-chip:hover { background: var(--ks-hair); }
.gf-chip svg { width: 14px; height: 14px; }
.gf-clear { border: 0; background: none; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--ks-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- map ------------------------------------------------------------------ */
.gf-map { max-width: var(--wrap); margin: 22px auto 0; padding: 0 var(--gutter); }
/* Leaflet's panes and controls carry z-index 400–1000; without a stacking context of its own the map
   paints over the sticky toolbar (20), the Filters panel (30) and the drawer (50). z-index 0 + isolation
   keeps all of it inside this box. */
.gf-map__canvas { position: relative; z-index: 0; isolation: isolate; height: clamp(320px, 46vh, 480px); border-radius: var(--radius); overflow: hidden; background: #e9edf0; border: 1px solid var(--ks-hair); }
.gf-map__note { margin: 10px 0 0; font-size: 13px; color: var(--ks-ink-3); }
.gf-pin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: var(--ks-body); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.4; }
.leaflet-popup-content b { font-family: var(--ks-display); }
.leaflet-popup-content .gf-poplink { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--ksb-deep-purple); }

/* ---- results grid ----------------------------------------------------------- */
.gf-results { max-width: var(--wrap); margin: 0 auto; padding: 26px var(--gutter) 40px; }
.gf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .gf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gf-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Card = "Wash" layout on the group's own Church Center art, shown in its own colour
   (the category art is already tinted per group type; the campaign-gradient overlay was
   removed 2026-09-03). The name sits on the art as a lockup, the facts as chips under it. */
.gf-card {
  display: flex; flex-direction: column; background: var(--ks-paper);
  border-radius: var(--radius); border: 1px solid var(--ks-hair); overflow: hidden;
  transition: border-color .15s ease-out;
}
.gf-card:hover { border-color: var(--ks-ink-3); }

.gf-card__art { position: relative; aspect-ratio: 16 / 9; background: var(--ksb-deep-navy); isolation: isolate; }
.gf-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gf-card__chips { position: absolute; z-index: 1; top: 14px; left: 14px; right: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gf-card__chip {
  font-family: var(--ks-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.25; color: var(--ksb-deep-navy); background: #fff; padding: 5px 10px; border-radius: var(--pill);
}
.gf-card__chip[hidden] { display: none; }
.gf-card__chip--status { margin-left: auto; text-align: right; }
/* The name block sits at the top of the card body, not over the artwork (2026-09-24, Jose): most of
   the Church Center category art carries its own headline ("WOMENS GROUP", "COUPLES GROUP") and an
   overlaid lockup fought with it. The art now holds nothing but the family chip. */
.gf-card__lock { margin: 0 0 10px; font-family: var(--ks-display); color: var(--ks-ink); }
.gf-card__kicker {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.3;
  color: var(--ks-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.gf-card__kicker { padding: 0; }   /* same Divi padding leak (p padding-bottom) */
.gf-card__kicker:empty { display: none; }
.gf-card__title {   /* clamped to two lines, and it may break mid-word: some group names are very long */
  margin: 4px 0 0;
  font-weight: 800; font-size: 22px; line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0;   /* Divi gives every h2 padding-bottom:10px; the clamped 3rd line showed through it (Jose 10/12) */
}

.gf-card__body { padding: 16px 18px 6px; flex: 1; }
.gf-card__by { margin: 0 0 10px; color: var(--ks-ink-2); font-size: 13.5px; }
.gf-card__by[hidden] { display: none; }
.gf-card__row { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-card__row:empty { display: none; }
.gf-card__row span { font-size: 12.5px; padding: 5px 10px; border-radius: var(--pill); background: var(--ks-bg); color: var(--ks-ink); }
.gf-card__row .kids { display: inline-flex; align-items: center; gap: 6px; }
.gf-card__row .kids svg { width: 15px; height: 15px; color: #299f3a; }
.gf-card__desc { margin: 12px 0 0; color: var(--ks-ink-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gf-card__desc[hidden] { display: none; }
.gf-card__row:empty + .gf-card__desc { margin-top: 0; }   /* a group with no tags shouldn't leave a hole */
.gf-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 18px 18px; }
.gf-card__foot .gf-btn { white-space: nowrap; }   /* a narrow card drops "See more" to its own row rather than breaking the labels */
.gf-card__foot .gf-btn--grad { padding: 0 16px; }
.gf-card__foot .gf-btn--text { font-size: 14px; }

.gf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 20px;
  border-radius: var(--pill); border: 0; text-decoration: none; cursor: pointer;
  font-family: var(--ks-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.gf-btn--primary { color: #fff; background: var(--ksb-deep-navy); }
.gf-btn--primary:hover { background: var(--ksb-core-indigo); }
.gf-btn--primary:active { transform: translateY(1px); }
.gf-btn--grad { color: #fff; background-image: var(--ksb-grad-pill); }
.gf-btn--grad:hover { opacity: .92; }
.gf-btn--ghost { color: var(--ks-ink); background: #fff; border: 1.5px solid var(--ks-ink); }
.gf-btn--ghost:hover { background: var(--ks-bg); }
.gf-btn--text { padding: 0 4px; color: var(--ks-ink); background: none; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; }
.gf-btn--text:hover svg { transform: translateX(2px); }
.gf-btn--text svg { transition: transform .12s ease-out; }

.gf-empty { text-align: center; padding: 64px 20px; }
.gf-empty__title { margin: 0; font-family: var(--ks-display); font-weight: 700; font-size: 22px; }
.gf-empty__body { margin: 8px 0 22px; color: var(--ks-ink-2); }

.gf-skel { height: 300px; border-radius: var(--radius); background: linear-gradient(90deg, #e9e9eb 25%, #f4f4f5 37%, #e9e9eb 63%); background-size: 400% 100%; animation: gf-shimmer 1.2s ease-in-out infinite; }
@keyframes gf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .gf-skel { animation: none; } * { transition: none !important; } }

.gf-foot { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 64px; color: var(--ks-ink-2); font-size: 14.5px; }
.gf-foot p { max-width: 68ch; margin: 0; }
.gf-foot a { color: var(--ksb-deep-purple); font-weight: 600; }

/* ---- drawer ---------------------------------------------------------------- */
.gf-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(28, 31, 38, 0.45); opacity: 0; transition: opacity .2s ease-out; }
.gf-backdrop.is-open { opacity: 1; }
.gf-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(540px, 100vw);
  background: var(--ks-paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
  box-shadow: -8px 0 40px rgba(28,31,38,.18);
}
.gf-drawer.is-open { transform: translateX(0); }
.gf-drawer__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: var(--ks-ink); display: grid; place-items: center; cursor: pointer;
}
.gf-drawer__close:hover { background: #fff; }
.gf-drawer__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; }
.gf-drawer__hero { position: relative; height: 200px; background: var(--fam, var(--fam-everyone)); overflow: hidden; }
.gf-drawer__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-drawer--mens .gf-drawer__hero { --fam: var(--fam-mens); } .gf-drawer--womens .gf-drawer__hero { --fam: var(--fam-womens); }
.gf-drawer--couples .gf-drawer__hero { --fam: var(--fam-couples); } .gf-drawer--everyone .gf-drawer__hero { --fam: var(--fam-everyone); }
.gf-drawer__content { padding: 24px 28px 28px; }
.gf-drawer__kicker { margin: 0; font-family: var(--ks-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-ink-2); }
.gf-drawer__title { margin: 6px 0 0; font-family: var(--ks-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.gf-drawer__by { margin: 6px 0 0; color: var(--ks-ink-2); font-size: 16px; }
.gf-drawer__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--ks-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #204737; }
.gf-drawer__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #299f3a; }
.gf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 22px 0 0; padding: 20px 0; border-top: 1px solid var(--ks-hair); border-bottom: 1px solid var(--ks-hair); }
.gf-facts div { min-width: 0; }
.gf-facts dt { font-family: var(--ks-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks-ink-3); }
.gf-facts dd { margin: 3px 0 0; font-size: 15px; line-height: 1.4; }
.gf-facts dd small { display: block; color: var(--ks-ink-3); font-size: 13px; }
.gf-facts .wide { grid-column: 1 / -1; }
.gf-drawer__desc { margin-top: 20px; font-size: 15.5px; line-height: 1.6; color: var(--ks-ink); font-weight: 400; }
/* regular body (the page around it is medium) so Planning Center's bold reads as bold */
.gf-drawer__desc strong, .gf-drawer__desc b { font-weight: 700; }
.gf-drawer__desc p { margin: 0 0 12px; }
.gf-drawer__desc p:empty { display: none; }
.gf-drawer__desc a { color: var(--ksb-deep-purple); }
.gf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.gf-tag { font-size: 12.5px; padding: 5px 11px; border-radius: var(--pill); background: var(--ks-bg); color: var(--ks-ink-2); }
.gf-leaders { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.gf-leaders__avs { display: flex; }
.gf-leaders__avs img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: var(--ks-bg); object-fit: cover; }
.gf-leaders__avs img:first-child { margin-left: 0; }
.gf-drawer__foot { display: flex; gap: 10px; padding: 14px 28px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ks-hair); background: #fff; }
.gf-drawer__foot .gf-btn { flex: 1; min-height: 48px; }
.gf-drawer__hint { margin: 0; padding: 0 28px 12px; font-size: 12.5px; color: var(--ks-ink-3); background: #fff; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .gf-toolbar__inner { grid-template-columns: 1fr; gap: 10px; }
  .gf-filters { display: none; }                 /* the pill strip; small screens get the Filters drop-down */
  .gf-allbtn { display: inline-flex; }
  .gf-toolbar__right { flex-wrap: wrap; }
  .gf-sheet {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--ks-hair); box-shadow: 0 18px 36px rgba(28, 31, 38, 0.14);
    max-height: min(72vh, 640px); overflow: auto; overscroll-behavior: contain;
  }
  .gf-sheet[hidden] { display: none; }
}
@media (max-width: 640px) {
  .gf-toolbar__inner { gap: 10px; padding-top: 10px; }
  .gf-toolbar__right { justify-content: space-between; grid-column: 1 / -1; }
  .gf-allbtn { flex: 1 1 auto; }
  .gf-allbtn .gf-fbtn__chev { margin-left: auto; }
  .gf-seg { order: 3; width: 100%; display: flex; }
  .gf-seg__btn { flex: 1; padding: 0 11px; }
  .gf-sheet__foot .gf-btn--primary { flex: 1; min-width: 0; }
  .gf-card__foot { flex-wrap: wrap; }
  .gf-drawer { width: 100vw; }
  .gf-drawer__content { padding: 20px; }
  .gf-drawer__foot { padding-left: 20px; padding-right: 20px; }
  .gf-drawer__hint { padding-left: 20px; }
  .gf-facts { grid-template-columns: 1fr; }
}

/* ---- series banner (one per big series, first row of the grid) ------------- */
.gf-series {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px); border-radius: var(--radius); color: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--series-base, var(--fam, var(--fam-everyone)));   /* each series keeps its family colour */
}
/* Photo layer (feedback via Carmen/Elle, 2026-09-08): a real photo from the study behind the banner,
   grayscale at low opacity, over a base colour muted toward the site's dark gray. A soft left-side
   scrim keeps the white lockup legible where the photo is bright. Base = charcoal for every series (Jose's pick
   2026-09-08, over muted plum); the photo is per series family. */
.gf-series::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--series-photo, none) center var(--series-photo-y, 42%) / cover no-repeat;
  opacity: var(--series-photo-opacity, .22);   /* the photo ships already grayscale — no browser filter, nothing added to it */
}
.gf-series::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,var(--series-scrim, .26)), rgba(0,0,0,0) 62%);
}
.gf-series--womens { --fam: var(--fam-womens); --series-photo: url(../img/series-womens-study.webp);
  /* Option 02 on banner-options.html — Jose's pick "for now" (2026-09-08): the site's mid gray under the grayscale
     photo at 26%, soft left scrim for the lockup. Option 04 (original purple, photo fading in via a mask gradient)
     stays on the gallery. */
  --series-base: var(--ks-ink-2); --series-photo-opacity: .26; --series-scrim: .18; }
.gf-series--mens { --fam: var(--fam-mens); --series-base: var(--ks-ink-2); --series-scrim: .18; }
/* Men's Fall Study banner (Jose 2026-09-08): the Keystone Men breakfast photo, grayscale baked in, sign + crowd kept in the crop. */
.gf-series--mens-daniel { --series-photo: url(../img/series-mens-daniel.webp); --series-photo-opacity: .26; --series-photo-y: 70%; }   /* crop zoomed on the crowd, sits low (Jose) */
/* Banner row: the automatic series banner + the configured ones, side by side on wide screens, stacked below 900px. */
.gf-banners { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 22px; }
.gf-banners .gf-series { grid-column: auto; }   /* inside the row a banner takes one column, not the whole grid */
.gf-banners--2, .gf-banners--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gf-banners--2 .gf-series, .gf-banners--3 .gf-series { flex-direction: column; align-items: flex-start; }
.gf-banners--2 .gf-series__title, .gf-banners--3 .gf-series__title { font-size: clamp(22px, 2.3vw, 32px); }
@media (max-width: 900px) { .gf-banners--2, .gf-banners--3 { grid-template-columns: 1fr; } }
.gf-series--couples { --fam: var(--fam-couples); } .gf-series--everyone { --fam: var(--fam-everyone); }
.gf-series__kicker { margin: 0; font-family: var(--ks-display); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; opacity: .85; }
.gf-series__title { margin: 6px 0 0; font-family: var(--ks-display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.01em; }
.gf-series__sub { margin: 10px 0 0; font-size: 15px; max-width: 52ch; opacity: .92; }
.gf-series__btn { flex: none; color: var(--ks-ink); background: #fff; border-color: #fff; }
.gf-series__btn:hover { background: var(--ks-bg); }
@media (max-width: 640px) { .gf-series { flex-direction: column; align-items: flex-start; } .gf-series__btn { width: 100%; } }