/* =========================================================================
   qpn-roles — "Three roles, one network" QPN explainer block.

   Answers the one question the ecosystem strip never does: how do the three
   QPN sites relate? Pairs an eyebrow/title + lead with three role cards
   (which REUSE .ws-eco__card from ecosystem-block.css — the site's existing
   QPN cross-link card) and a gold-ruled "build" strip with target pills.

   Lives on the home page (leads the ecosystem summary) and as the lead
   section of /ecosystem.html. Mirrored copy across both.

   ── SHARED CONTRACT ──────────────────────────────────────────────────────
   The COPY is a cross-site shared block — title, lead, the three role
   descriptions + function tags, and the build-strip model are identical
   across webshield.io / ep3foundation.org / qpncatalyst.io. Any change to
   that copy must be coordinated across all three repos (EP3 side tracked
   under issue #224's sibling). The SKIN is local: this file is EP3's own,
   authored ONLY from this repo's existing webshield-navy.css tokens — nothing
   is copied from webshield's site/css/qpn-roles.css.

   Foundation-first order (deliberately the reverse of the ecosystem strip's
   Catalyst-first roster — the strip optimizes for the participation-first
   sibling audience; this block builds from the foundation up):
     01 · QPN Architecture (WebShield)      — the foundation
     02 · QPN Accelerators (EP3 Foundation) — how the network grows  ← --here
     03 · QPN Catalyst                      — how you take part & own
   ========================================================================= */

.qpn-roles {
  background: var(--ws-page);
  border-top: 1px solid var(--ws-rule);
}
.qpn-roles__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 48px 96px;
}

/* ── Heading block (mirrors the ws-eco / ep3-mkt section-head rhythm) ──── */
.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;
}
.qpn-roles__title {
  font-family: var(--ws-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 16px;
  max-width: 760px;
}
/* Lead line — the serif anchor sentence; weight 400 with bold role names. */
.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 36px;
  max-width: 860px;
  text-wrap: pretty;
}
.qpn-roles__lead strong { font-weight: 600; }

/* ── Three role cards ──────────────────────────────────────────────────
   Host grid only; the cards themselves are reused .ws-eco__card elements.
   ws-eco__grid is a 5-up compact grid, so we host a roomier 3-up here. */
.qpn-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
/* The role cards carry a touch more body weight than the 5-up ecosystem
   cards, and a bold run-in opener on the description ("The foundation."). */
.qpn-roles__grid .ws-eco__card-ord {
  text-transform: uppercase;
}
.qpn-roles__grid .ws-eco__card-desc {
  font-size: 14px;
}
.qpn-roles__grid .ws-eco__card-desc strong {
  color: var(--ws-ink);
  font-weight: 600;
}

/* Per-card function tag (what / where / how) — gold mono micro, pinned to
   the card foot so the three tags align regardless of body length. */
.qpn-roles__tag {
  margin-top: auto;
  padding-top: 14px;
  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 ─────────────────────
   The key conceptual point: a contribution builds ANY part of the QPN, not
   only an Accelerator. The 2px gold top rule reuses the site's accent-rule
   motif (--ws-rule-anchor / --ws-accent). */
.qpn-roles__build {
  border-top: var(--ws-rule-anchor) solid var(--ws-accent);
  padding-top: 22px;
}
.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 16px;
  max-width: 860px;
}
.qpn-roles__build-text strong {
  color: var(--ws-ink);
  font-weight: 600;
}

/* Target pills — what a contribution can build. */
.qpn-roles__targets {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.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: 1px solid var(--ws-rule);
  border-radius: 2px;
  padding: 7px 12px;
}
.qpn-roles__target--more {
  color: var(--ws-ink-faint);
  font-style: italic;
  background: transparent;
  border-style: dashed;
}

/* CTA — gold underline link, matching the site's prose-link idiom. */
.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;
}
.qpn-roles__cta:hover {
  color: var(--ws-accent-hover);
  border-bottom-color: var(--ws-accent-hover);
}

/* ── Responsive ────────────────────────────────────────────────────────
   3 cards collapse straight to 1 column — a 2+1 reads awkwardly. */
@media (max-width: 900px) {
  .qpn-roles__grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .qpn-roles__wrap { padding: 56px 24px 64px; }
}