/* ═══════════════════════════════════════════════════════════════════════════
   blog.css — blog-only patterns for the /blog/ knowledge centre.
   Loads AFTER css/style.css and css/theme.css; consumes theme.css tokens.
   Scope discipline: every selector is prefixed .blg- (or nested under it) so
   nothing here can affect the main site. No frameworks, no dependencies.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page scaffold ─────────────────────────────────────────────────────── */
.blg-main { background:#fff; color:#40506a; font-family:var(--ff-sans,'Inter',sans-serif); overflow-x:clip; }
.blg-container { max-width:var(--container-max,1240px); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }

/* ── Article header ────────────────────────────────────────────────────── */
.blg-article-head { padding: clamp(8rem,14vw,11rem) 0 clamp(2rem,4vw,3rem); background:
  radial-gradient(900px 380px at 80% -10%, rgba(37,99,235,.06), transparent 60%), #fbfcfe;
  border-bottom:1px solid rgba(15,23,42,.08); }
.blg-breadcrumb { font-size:var(--fs-sm,.875rem); color:#64748b; margin-bottom:1.25rem; }
.blg-breadcrumb a { color:#64748b; text-decoration:none; }
.blg-breadcrumb a:hover { color:#2563eb; }
.blg-breadcrumb [aria-current] { color:#0f172a; font-weight:600; }
.blg-kicker { display:inline-block; font-size:var(--fs-xs,.75rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#2563eb; margin-bottom:.9rem; }
.blg-article-head h1 { font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; letter-spacing:-.02em; font-weight:800; color:#0f172a; margin:0 0 1rem; max-width:22em; }
.blg-standfirst { font-size:var(--fs-lead,1.125rem); line-height:1.6; color:#40506a; max-width:44em; margin:0 0 1.5rem; }
.blg-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:var(--fs-sm,.875rem); color:#64748b; }
.blg-meta strong { color:#0f172a; font-weight:600; }

/* ── Article body typography ───────────────────────────────────────────── */
.blg-article { padding: clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); }
.blg-prose { max-width:72ch; }
.blg-prose h2 { font-size:clamp(1.4rem,2.4vw,1.8rem); font-weight:700; color:#0f172a; letter-spacing:-.015em; margin:2.4em 0 .6em; scroll-margin-top:110px; }
.blg-prose h2:first-child { margin-top:0; }
.blg-prose h3 { font-size:1.12rem; font-weight:700; color:#0f172a; margin:1.8em 0 .5em; }
.blg-prose p { line-height:1.75; margin:0 0 1.1em; }
.blg-prose ul, .blg-prose ol { line-height:1.7; margin:0 0 1.2em; padding-left:1.4em; }
.blg-prose li { margin-bottom:.4em; }
.blg-prose a { color:#2563eb; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.blg-prose a:hover { color:#1d4ed8; }
.blg-prose strong { color:#0f172a; }
.blg-prose figure { margin:1.8em 0; }
.blg-prose figure img { max-width:100%; height:auto; border-radius:var(--r-md,12px); border:1px solid rgba(15,23,42,.08); display:block; }
.blg-prose figcaption { font-size:var(--fs-sm,.875rem); color:#64748b; margin-top:.55rem; }
.blg-figrow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.blg-prose pre { background:#0f172a; color:#e2e8f0; border-radius:var(--r-md,12px); padding:1.1rem 1.25rem; overflow-x:auto; font-size:.86rem; line-height:1.6; margin:0 0 1.2em; }
.blg-prose code { font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.blg-prose p code, .blg-prose li code { background:rgba(15,23,42,.06); color:#0f172a; padding:.1em .35em; border-radius:5px; font-size:.9em; }

/* Historical-context note */
.blg-note { border:1px solid rgba(37,99,235,.25); background:rgba(37,99,235,.05); border-radius:var(--r-md,12px); padding:1rem 1.25rem; font-size:var(--fs-sm,.875rem); line-height:1.6; color:#334155; margin:0 0 1.6em; }
.blg-note strong { color:#1d4ed8; }

/* ── Table of contents ─────────────────────────────────────────────────── */
.blg-toc { border:1px solid rgba(15,23,42,.08); border-radius:var(--r-md,12px); background:#f7f9fc; padding:1.1rem 1.35rem; margin:0 0 2em; max-width:72ch; }
.blg-toc strong { display:block; font-size:var(--fs-xs,.75rem); letter-spacing:.1em; text-transform:uppercase; color:#64748b; margin-bottom:.5rem; }
.blg-toc ol { margin:0; padding-left:1.2em; line-height:1.8; font-size:var(--fs-sm,.875rem); }
.blg-toc a { color:#334155; text-decoration:none; }
.blg-toc a:hover { color:#2563eb; text-decoration:underline; }

/* ── Related / pathway blocks ──────────────────────────────────────────── */
.blg-aside { border-top:1px solid rgba(15,23,42,.08); margin-top:2.5rem; padding-top:2rem; }
.blg-aside h2 { font-size:1.15rem; font-weight:700; color:#0f172a; margin:0 0 1rem; }
.blg-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.blg-card { display:block; border:1px solid rgba(15,23,42,.08); border-radius:var(--r-md,12px); background:#fff; padding:1.1rem 1.2rem; text-decoration:none; transition:box-shadow var(--dur-base,.2s) var(--ease-out,ease), transform var(--dur-base,.2s) var(--ease-out,ease), border-color var(--dur-base,.2s); }
a.blg-card:hover { box-shadow:var(--sh-md,0 4px 16px rgba(15,23,42,.06)); transform:translateY(-2px); border-color:rgba(37,99,235,.3); }
a.blg-card:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
.blg-card .blg-card-kicker { font-size:var(--fs-xs,.75rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#2563eb; display:block; margin-bottom:.35rem; }
.blg-card .blg-card-title { font-weight:600; color:#0f172a; line-height:1.4; display:block; }
.blg-card .blg-card-meta { font-size:var(--fs-xs,.75rem); color:#64748b; display:block; margin-top:.5rem; }
.blg-card--soon { opacity:.65; }
.blg-card--soon .blg-card-meta { font-style:italic; }

/* CTA panel */
.blg-cta { margin-top:2.5rem; border-radius:var(--r-lg,20px); background:linear-gradient(160deg,#0a0f1f 0%,#12234d 100%); color:#e2e8f0; padding:clamp(1.5rem,4vw,2.5rem); }
.blg-cta h2 { color:#fff; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:800; letter-spacing:-.015em; margin:0 0 .6rem; }
.blg-cta p { margin:0 0 1.4rem; color:rgba(203,213,225,.85); line-height:1.65; max-width:46em; }
.blg-cta .blg-cta-row { display:flex; flex-wrap:wrap; gap:.8rem; }
.blg-btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; padding:.9rem 1.5rem; border-radius:var(--r-pill,999px); text-decoration:none; transition:transform var(--dur-base,.2s) var(--ease-out,ease); }
.blg-btn--primary { background:#fff; color:#0a0f1f; }
.blg-btn--primary:hover { transform:translateY(-1px); color:#0a0f1f; }
.blg-btn--ghost { border:1px solid rgba(255,255,255,.35); color:#fff; }
.blg-btn--ghost:hover { border-color:#fff; color:#fff; transform:translateY(-1px); }
.blg-btn:focus-visible { outline:3px solid #7fa8f5; outline-offset:3px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .blg-figrow { grid-template-columns:1fr; }
  .blg-cta .blg-cta-row { flex-direction:column; align-items:stretch; }
  .blg-btn { justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .blg-main *, .blg-main *::before, .blg-main *::after { transition:none !important; animation:none !important; }
}

/* ── Landing page clusters ─────────────────────────────────────────────── */
.blg-landing-h { font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; color:#0f172a; letter-spacing:-.015em; margin:2.6rem 0 .4rem; }
.blg-main section:first-child .blg-landing-h { margin-top:0; }
.blg-landing-lead { color:#64748b; font-size:var(--fs-sm,.875rem); margin:0 0 1.1rem; max-width:60ch; }
.blg-cards--landing { margin-bottom:.5rem; }
.blg-cards--landing .blg-card-meta { margin-top:.55rem; line-height:1.5; }