/* ==========================================================================
   QRA · Blog — listing, post, prose typography, lead-magnet banner.
   Load AFTER qra-components.css. Tokens only.
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--surface-0);}
body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;}
a{color:var(--text-link);text-decoration:none;}

.qra-blogwrap{padding:var(--hero-top) var(--gutter) var(--section-y);}
.qra-blog-head{max-width:760px;margin-bottom:var(--space-6);}
.qra-blog-h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-lg);line-height:1.1;letter-spacing:-.025em;color:var(--text-strong);margin:0;}
.qra-blog-h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);letter-spacing:-.02em;color:var(--text-strong);margin:0 0 var(--space-5);}

/* Category chips */
.qra-blog-cats{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-7);}
.qra-chip2{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-0);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-body);transition:border-color .12s,background .12s,color .12s;}
.qra-chip2:hover{border-color:var(--primary-400);background:var(--primary-50);color:var(--primary-700);}
.qra-chip2.is-active{background:var(--primary-500);border-color:var(--primary-500);color:#fff;}
.qra-chip2-n{font-family:var(--font-mono);font-size:var(--text-2xs);opacity:.7;}

/* Post grid + card */
.qra-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-5);}
.qra-postcard{display:flex;flex-direction:column;background:var(--surface-0);border:1px solid var(--border-default);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s;}
.qra-postcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.qra-postcard-cover{display:block;width:100%;aspect-ratio:2/1;background-size:cover;background-position:center;}
.qra-postcard-body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);}
.qra-postcard-cat{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--primary-600);}
.qra-postcard-title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:1.3;letter-spacing:-.01em;color:var(--text-strong);}
.qra-postcard-meta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);margin-top:auto;}

.qra-pager{display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-8);}

/* Infinite scroll (ADR-0013) — the pager above lives only in <noscript>.
   Sentinel is invisible; the IntersectionObserver's rootMargin does the work. */
.qra-blog-sentinel{height:1px;margin-top:var(--space-8);pointer-events:none;}

/* Sticky pill · bottom-right, out of the reading flow. Fades in/out via
   .is-visible — kept in the DOM (aria-live) rather than display:none. */
.qra-blog-pill{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:20;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-full);background:var(--ink-800);color:#fff;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;box-shadow:var(--shadow-lift);pointer-events:none;user-select:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;}
.qra-blog-pill.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.qra-blog-pill{transition:none;}}

/* End-of-feed marker — subtle line under the grid when there's nothing more. */
.qra-blog-endfeed{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-8);padding:var(--space-6) var(--space-5);border-top:1px solid var(--border-default);font-size:var(--text-sm);color:var(--text-muted);}
.qra-blog-endfeed-text{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);}
.qra-blog-endfeed-cta{font-weight:var(--weight-semibold);color:var(--text-link);}
.qra-blog-endfeed-cta:hover{color:var(--text-link-hover);}

/* Inline error at the sentinel — no toast, no console, just this. */
.qra-blog-error{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-8);padding:var(--space-5);border:1px dashed var(--border-default);border-radius:var(--radius-2xl);background:var(--surface-1,var(--surface-0));text-align:center;}
.qra-blog-error-msg{font-size:var(--text-sm);color:var(--text-muted);}

/* Single post — centered header, wide hero, then a 3-column editorial layout */
.qra-post{padding-bottom:var(--section-y);--post-aside:250px;--post-toc:230px;}
.qra-post-head{max-width:820px;margin-inline:auto;text-align:center;padding-top:var(--hero-top);padding-bottom:var(--space-6);}
.qra-post-back{display:inline-block;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);margin-bottom:var(--space-4);}
.qra-post-back:hover{color:var(--primary-600);}
.qra-post-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-lg);line-height:1.08;letter-spacing:-.03em;color:var(--text-strong);margin:var(--space-3) 0 var(--space-3);text-wrap:balance;}
.qra-post-lead{font-size:var(--text-xl);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0 auto var(--space-4);max-width:680px;}
.qra-post-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);}
.qra-post-cover{aspect-ratio:16/8;border-radius:var(--radius-2xl);background-size:cover;background-position:center;margin-bottom:var(--space-8);box-shadow:var(--shadow-card);}
.qra-post-related{margin-top:var(--space-9);padding-top:var(--space-7);border-top:1px solid var(--border-default);}

/* 3-column body: author card · prose · table of contents */
.qra-post-layout{display:grid;grid-template-columns:var(--post-aside) minmax(0,1fr) var(--post-toc);gap:var(--space-7);align-items:start;max-width:1200px;margin-inline:auto;}
.qra-post-side{position:sticky;top:96px;align-self:start;}
.qra-post-main{min-width:0;}

/* Author card */
.qra-post-author{border:1px solid var(--border-default);border-radius:var(--radius-2xl);background:var(--surface-0);box-shadow:var(--shadow-card);padding:var(--space-5);}
.qra-post-author-eyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);}
.qra-post-author-id{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);}
.qra-post-author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex-shrink:0;display:block;}
.qra-post-author-avatar--initials{display:flex;align-items:center;justify-content:center;background:var(--primary-100);color:var(--primary-700);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);}
.qra-post-author-who{display:flex;flex-direction:column;min-width:0;}
.qra-post-author-name{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-base);color:var(--text-strong);}
.qra-post-author-role{font-size:var(--text-sm);color:var(--text-muted);}
.qra-post-author-bio{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted);margin:var(--space-3) 0 0;}
.qra-post-author-cta{margin-top:var(--space-4);width:100%;justify-content:center;white-space:normal;height:auto;min-height:40px;padding-top:9px;padding-bottom:9px;line-height:1.2;text-align:center;}

/* Table of contents */
.qra-post-toc-label{display:block;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--space-3);}
.qra-post-toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--border-default);}
.qra-post-toc-list a{display:block;padding:6px 0 6px var(--space-4);margin-left:-1px;border-left:2px solid transparent;font-size:var(--text-sm);line-height:1.35;color:var(--text-muted);}
.qra-post-toc-list a:hover{color:var(--primary-600);border-left-color:var(--primary-300);}

/* Share bar (end of article) */
.qra-post-share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-default);}
.qra-post-share-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);}
.qra-post-share-btns{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);}
.qra-share-btn{appearance:none;font:inherit;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:4px;border:1px solid var(--border-default);background:var(--surface-0);color:var(--text-body);cursor:pointer;transition:border-color .12s,background .12s,color .12s,transform .12s;}
.qra-share-btn:hover{border-color:var(--primary-400);background:var(--primary-50);color:var(--primary-700);transform:translateY(-1px);}
.qra-share-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.qra-share-btn svg{transition:transform .45s ease;}
.qra-share-btn:hover svg{transform:rotate(360deg);}
@media(prefers-reduced-motion:reduce){.qra-share-btn svg{transition:none;}.qra-share-btn:hover svg{transform:none;}}
.qra-share-feedback{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--primary-600);}
.qra-share-feedback:empty{display:none;}

/* Prose (rendered Markdown body) — measure controlled by the grid column */
html{scroll-behavior:smooth;}
.qra-prose{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-body);}
.qra-prose h2{scroll-margin-top:96px;}
.qra-prose > * + *{margin-top:var(--space-5);}
.qra-prose h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-3xl);letter-spacing:-.02em;color:var(--text-strong);margin-top:var(--space-8);line-height:1.2;}
.qra-prose h3{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-2xl);letter-spacing:-.01em;color:var(--text-strong);margin-top:var(--space-7);line-height:1.25;}
/* body links only — a .qra-btn dropped into an article stays a button */
.qra-prose a:not(.qra-btn){color:var(--text-link);text-decoration:underline;text-underline-offset:2px;}
.qra-prose a:not(.qra-btn):hover{color:var(--text-link-hover);}
.qra-prose strong{color:var(--text-strong);font-weight:var(--weight-semibold);}
.qra-prose ul,.qra-prose ol{padding-left:1.4em;}
.qra-prose li + li{margin-top:var(--space-2);}
.qra-prose img{max-width:100%;height:auto;border-radius:var(--radius-xl);display:block;}
.qra-prose blockquote{border-left:3px solid var(--primary-300);padding-left:var(--space-4);color:var(--text-muted);font-style:italic;}
.qra-prose code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:2px 6px;border-radius:var(--radius-sm);}
.qra-prose pre{background:var(--ink-900);color:#fff;padding:var(--space-5);border-radius:var(--radius-lg);overflow-x:auto;}
.qra-prose pre code{background:none;padding:0;color:inherit;}
.qra-prose hr{border:none;border-top:1px solid var(--border-default);}

/* Lead-magnet banner (placed via ::leadmagnet{}) */
.qra-lm{display:flex;gap:var(--space-5);align-items:center;background:var(--ink-800);color:#fff;border-radius:var(--radius-2xl);padding:var(--space-6);margin:var(--space-8) 0;overflow:hidden;box-shadow:var(--shadow-lift);}
.qra-lm-media{flex-shrink:0;width:140px;}
.qra-lm-media img{width:100%;height:auto;border-radius:var(--radius-lg);display:block;}
.qra-lm-body{flex:1;min-width:0;}
.qra-lm .qra-lm-eyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--secondary-200);}
/* higher specificity than .qra-prose h3 so the title stays white */
.qra-lm .qra-lm-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);letter-spacing:-.02em;color:#fff;margin:var(--space-2) 0;}
.qra-lm .qra-lm-sub{font-size:var(--text-base);line-height:var(--leading-normal);color:rgba(255,255,255,.72);margin:0 0 var(--space-4);}
/* the banner's CTA is .qra-btn[data-variant="inverse"] — no override needed */

/* ---- Mermaid diagrams inside posts. Loaded on-demand from CDN by an inline
   ESM script the author drops in the .md; see docs/BLOG_I18N_DESIGN.md. The
   :not([data-processed]) rule hides the raw text before Mermaid rewrites the
   div into <svg>, so the reader never sees the source code flash. ---- */
.qra-prose .mermaid{
  display:block;margin:var(--space-6) 0;padding:var(--space-6) var(--space-5);
  background:var(--primary-50);border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-card);overflow-x:auto;text-align:center;
  font-family:var(--font-body);
}
.qra-prose .mermaid:not([data-processed="true"]){visibility:hidden;min-height:200px;}
.qra-prose .mermaid svg{max-width:100%;height:auto;display:inline-block;}

/* Grid layout — up to 3 diagrams per row. `--n` set by JS based on run length;
   each row wraps naturally on narrow columns via minmax. */
.qra-prose .qra-mermaid-grid{
  display:grid;
  grid-template-columns:repeat(var(--n,1),minmax(0,1fr));
  gap:var(--space-4);margin:var(--space-6) 0;
}
.qra-prose .qra-mermaid-grid > .mermaid{margin:0;}
@media(max-width:767px){
  .qra-prose .qra-mermaid-grid{grid-template-columns:1fr;}
}

/* ---- Responsive · three breakpoints, desktop-first (see docs/adr/0004) ---- */

/* --bp-lg 1024 — three editorial columns no longer fit: drop the TOC, keep
   the author card beside the prose. */
@media(max-width:1023px){
  .qra-post-layout{grid-template-columns:var(--post-aside) minmax(0,1fr);max-width:900px;}
  .qra-post-side--toc{display:none;}
}

/* --bp-md 768 — stack: author card on top (no longer sticky), prose below. */
@media(max-width:767px){
  .qra-post-layout{grid-template-columns:1fr;gap:var(--space-6);}
  .qra-post-side{position:static;}
}

/* --bp-sm 640 — lead-magnet banner reflows. */
@media(max-width:639px){
  .qra-lm{flex-direction:column;align-items:flex-start;padding:var(--space-5);}
  .qra-lm-media{width:96px;}
}