/* =========================================================================
   EP3 Documents — page styles for /documents.html.

   EP3's documents index uses the SAME card vocabulary as the sibling
   webshield.io/documents page, so the two feel common across the QPN
   ecosystem. The card itself is the shared component in universal-card.css
   (.ws-uc--row + .ws-uc--resource); this file carries only the page-level
   scaffolding around it.

   Section scaffolding (.ws-doc-section*, .ws-doc-grid, .ws-doc-footnote) is
   ported from webshield-dev/website css/documents-page.css so spacing and
   rhythm match. The hero / closing CTA stay EP3's own ep3-marketing
   primitives. All tokens come from webshield-navy.css — no new tokens.
   ========================================================================= */

/* ── Section scaffolding (ported from website/css/documents-page.css) ── */
.ws-doc-section {
  background: var(--ws-page);
  padding: 64px 0 56px;
  border-top: 1px solid var(--ws-rule);
}
.ws-doc-section--surface { background: var(--ws-surface-2); }
.ws-doc-section--first { border-top: none; }

.ws-doc-section__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.ws-doc-section__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-accent);
  font-weight: 600;
  margin: 0 0 14px;
}

.ws-doc-section__title {
  font-family: var(--ws-font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: var(--ws-lh-tight);
  letter-spacing: -0.012em;
  color: var(--ws-ink);
  margin: 0 0 18px;
  max-width: 820px;
}

.ws-doc-section__intro {
  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-muted);
  margin: 0 0 36px;
  max-width: 760px;
}

/* Inline link to a source-of-truth page inside an intro line. */
.ws-doc-section__intro a {
  color: var(--ws-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
}
.ws-doc-section__intro a:hover {
  color: var(--ws-accent-hover);
  border-bottom-color: var(--ws-accent-hover);
}

/* ── Document grid · 3-up, collapses to 1fr ──────────────────────── */
.ws-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* ── Footnote — small italic muted line below a grid ─────────────── */
.ws-doc-footnote {
  margin: 28px 0 0;
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ws-ink-muted);
  max-width: 760px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ws-doc-section { padding: 44px 0 40px; }
  .ws-doc-section__wrap { padding: 0 24px; }
  .ws-doc-grid { grid-template-columns: 1fr; }
  .ws-doc-section__title { font-size: 26px; }
}