/* =========================================================================
   qpn-roles — "How the QPN fits together" explainer block.

   A self-contained section that answers the one question the rest of the
   chrome never does: how do the three QPN bits relate? It pairs an
   eyebrow/title + lead line with three role cards (reusing .ws-uc--row
   from universal-card.css) and a contribution-reach clarifier strip.

   Mirrored across /ecosystem, home, and /overview. Sources all color,
   type, spacing, rule weights from webshield-navy.css — no new tokens.
   Self-contained so each page adds exactly one stylesheet link.

   The three roles, foundation-first (deliberately the reverse of the
   ecosystem strip's Catalyst-first roster — the strip optimizes for the
   most-used site, this block for the logical dependency):
     01 · QPN Architecture (WebShield)      — the foundation
     02 · QPN Accelerators (EP3 Foundation) — how the network grows
     03 · QPN Catalyst                      — how you take part & own

   The build strip states the Catalyst's reach: a contribution builds ANY
   part of the QPN (an Accelerator, the Architecture, the funding behind
   it, …) — it is NOT confined to an Accelerator.
   ========================================================================= */

.ws-qpn-roles {
  background: var(--ws-page);
}
.ws-qpn-roles__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 24px;
}

/* ── Heading block ─────────────────────────────────────────────────── */
.ws-qpn-roles__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 500;
  margin-bottom: 14px;
}
.ws-qpn-roles__title {
  font-family: var(--ws-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 16px;
  max-width: 760px;
}
/* Lead line — serif anchor sentence (weight 400, matches .ws-uc__description). */
.ws-qpn-roles__lead {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-lede);
  font-weight: 400;
  color: var(--ws-ink);
  margin: 0 0 32px;
  max-width: 820px;
}
.ws-qpn-roles__lead strong { font-weight: 600; }

/* ── Three role cards (host grid; cards are .ws-uc--row) ───────────── */
.ws-qpn-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

/* Site/domain sub-label under the role name in the card rail. */
.ws-qpn-roles__site {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-muted);
  margin-top: 2px;
}

/* Per-card role tag (what / where / how) — gold mono micro under the body. */
.ws-qpn-roles__tag {
  margin-top: 4px;
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
}

/* ── Contribution clarifier — the Catalyst's reach ─────────────────
   2px gold top rule reuses the page's load-bearing proof-line motif. */
.ws-qpn-roles__build {
  border-top: var(--ws-rule-anchor) solid var(--ws-accent);
  padding-top: 20px;
}
.ws-qpn-roles__build-text {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-body);
  color: var(--ws-ink-muted);
  margin: 0 0 14px;
  max-width: 820px;
}
.ws-qpn-roles__build-text strong {
  color: var(--ws-ink);
  font-weight: 600;
}

/* Target pills — what a contribution can build. */
.ws-qpn-roles__targets {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ws-qpn-roles__targets li {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  color: var(--ws-ink);
  background: var(--ws-surface);
  border: var(--ws-rule-hair) solid var(--ws-rule);
  border-radius: 2px;
  padding: 7px 12px;
}
.ws-qpn-roles__target--more {
  color: var(--ws-ink-faint);
  font-style: italic;
  background: transparent !important;
  border-style: dashed !important;
}

/* CTA — gold link-out to the contribution on-ramp. */
.ws-qpn-roles__cta {
  display: inline-block;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  color: var(--ws-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
  padding-bottom: 2px;
}
.ws-qpn-roles__cta:hover {
  color: var(--ws-accent-hover);
  border-bottom-color: var(--ws-accent-hover);
}

/* ── Responsive ────────────────────────────────────────────────────
   3 narrow .ws-uc--row cards read poorly in the tablet band, so collapse
   straight to a single column rather than an awkward 2-up (2 + 1). */
@media (max-width: 900px) {
  .ws-qpn-roles__grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .ws-qpn-roles__wrap { padding: 40px 24px 16px; }
}