/* ============================================================
   ICZ members.html page-scoped layer
   Extends the locked shared system (styles.css). Never forks the
   shell. Everything here is gated under body.page-members so it
   cannot leak onto other inner pages sharing the stylesheet.
   ============================================================ */

/* ---------- Secondary hero VARIANT (split: copy + institutional photo) ----------
   The home hero is a full-width headline over a faceted SVG motif.
   This page's hero reads as SECONDARY: a tighter split composition,
   a real photo plate on the right, smaller display size. Same grammar
   (pale band, sentence-case head, two pills), different composition. */
.page-members .subhero {
  position: relative; overflow: clip;
  padding-top: clamp(7rem, 6rem + 8vw, 10rem);
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  background:
    radial-gradient(110% 80% at 92% -10%, rgba(24,144,200,.16), transparent 55%),
    radial-gradient(80% 70% at -5% 0%, rgba(248,176,16,.08), transparent 50%),
    var(--canvas);
}
.page-members .subhero__inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.page-members .subhero__copy { max-width: 40rem; }
.page-members .subhero__eyebrow { margin-bottom: 1rem; }
.page-members .subhero h1 {
  /* SECONDARY: a step down from the home display size */
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.2rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 1.2rem;
}
.page-members .subhero__lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 1.8rem; max-width: 34rem; }
.page-members .subhero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.6rem; }
.page-members .subhero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; }
.page-members .subhero__metric .n { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.page-members .subhero__metric .n span { color: var(--accent); }
.page-members .subhero__metric .l { font-size: .82rem; color: var(--ink-soft); margin-top: .3rem; max-width: 11rem; }
.page-members .subhero__media {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-2);
  box-shadow: 0 30px 60px -40px rgba(10,22,34,.5);
}
.page-members .subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-members .subhero__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem .85rem;
  background: linear-gradient(transparent, rgba(10,22,34,.82));
  color: #fff; font-size: .85rem; font-weight: 500;
}

/* ---------- Directory band: this page leads with the full directory ----------
   Reuses the shared .members band + .member-card grammar verbatim.
   Page-scoped tweaks only: section-group headings + the "showing" line
   sit a touch differently as the page's PRIMARY surface. */
.page-members .members { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }
.page-members .members__lead-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; justify-content: space-between; margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.page-members .members__head { margin-bottom: 0; }

/* page-scoped class-of-business hint chips (a guided shortcut into search) */
.page-members .members__hints { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.page-members .members__hints .hint-label { width: 100%; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .2rem; }
.page-members .hint-chip {
  padding: .45rem .9rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9); font-weight: 500; font-size: .82rem;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.page-members .hint-chip:hover { background: rgba(255,255,255,.16); border-color: var(--accent-bright); }

/* ---------- "Who can join / how membership works" trust strip (light band) ---------- */
.page-members .joinstrip { background: var(--canvas); padding-block: var(--band-y); }
.page-members .joinstrip__head { max-width: 46rem; margin-bottom: clamp(2rem,4vw,3rem); }
.page-members .joinstrip__head .eyebrow { margin-bottom: .9rem; }
.page-members .joinstrip__head h2 { font-size: var(--fs-h2); }
.page-members .joinstrip__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.page-members .join-card {
  background: var(--surface); border-radius: var(--r-card); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.page-members .join-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(10,22,34,.35); }
.page-members .join-card__icon { width: 42px; height: 42px; color: var(--accent); }
.page-members .join-card__icon svg { width: 100%; height: 100%; }
.page-members .join-card h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.page-members .join-card p { color: var(--ink-soft); font-size: .92rem; }

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
  .page-members .joinstrip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 861px) {
  .page-members .subhero__inner { grid-template-columns: 1.05fr .95fr; }
  .page-members .joinstrip__grid { grid-template-columns: repeat(3, 1fr); }
}