/* ============================================================
   CrisisShieldAI — Content pages (Docs + Blog articles)
   Builds on styles.css design tokens
   ============================================================ */

.content-main{padding-top:7.5rem;padding-bottom:5rem;position:relative;z-index:1}
.back-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--txt-dim);font-size:.9rem;font-weight:500;margin-bottom:1.8rem;transition:.2s}
.back-link:hover{color:var(--blue);transform:translateX(-3px)}

/* ---------- Page hero ---------- */
.page-hero{max-width:50rem;margin-bottom:3rem}
.page-hero .eyebrow{margin-bottom:.9rem}
.page-hero h1{font-family:var(--font-d);font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.page-hero p{color:var(--txt-dim);font-size:1.08rem;margin-top:1.1rem;max-width:42rem}

/* ---------- Article ---------- */
.article{max-width:46rem}
.article-head{margin-bottom:2.4rem;padding-bottom:1.8rem;border-bottom:1px solid var(--stroke)}
.article-head .bc-cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(77,163,255,.1);border:1px solid var(--stroke-strong);padding:.32rem .7rem;border-radius:999px;margin-bottom:1.2rem}
.article-head .bc-cat.violet{color:var(--violet);background:rgba(139,107,255,.1)}
.article-head .bc-cat.cyan{color:var(--cyan);background:rgba(55,224,216,.1)}
.article-head .bc-cat.green{color:var(--green);background:rgba(61,220,135,.1)}
.article-head .bc-cat.amber{color:var(--amber);background:rgba(255,184,77,.1)}
.article-head h1{font-family:var(--font-d);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;color:var(--txt-mute);font-size:.88rem;margin-top:1.2rem}
.article-meta i{width:4px;height:4px;border-radius:50%;background:var(--txt-mute);display:inline-block}

/* ---------- Prose ---------- */
.prose{color:var(--txt-dim);font-size:1.02rem;line-height:1.75}
.prose>p{margin:1.15rem 0}
.prose .lead{font-size:1.18rem;color:var(--txt);line-height:1.6}
.prose h2{font-family:var(--font-d);color:var(--txt);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:2.6rem 0 .9rem;scroll-margin-top:6rem}
.prose h3{color:var(--txt);font-size:1.16rem;font-weight:700;margin:1.9rem 0 .7rem;scroll-margin-top:6rem}
.prose a{color:var(--blue);font-weight:500;border-bottom:1px solid rgba(77,163,255,.35);transition:.2s}
.prose a:hover{color:#7cc0ff;border-color:#7cc0ff}
.prose strong{color:var(--txt);font-weight:600}
.prose ul,.prose ol{margin:1.1rem 0;padding-left:1.3rem}
.prose li{margin:.5rem 0}
.prose li::marker{color:var(--blue)}
.prose code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:rgba(120,150,210,.12);border:1px solid var(--stroke);border-radius:6px;padding:.1rem .4rem;color:#bcd4ff}
.prose blockquote{margin:1.6rem 0;padding:.6rem 0 .6rem 1.3rem;border-left:3px solid var(--blue);color:var(--txt);font-size:1.08rem}

/* Callout */
.callout{display:flex;gap:.85rem;margin:1.8rem 0;padding:1.1rem 1.25rem;border-radius:14px;background:rgba(77,163,255,.06);border:1px solid var(--stroke-strong);font-size:.95rem;line-height:1.6}
.callout svg{color:var(--blue);flex-shrink:0;margin-top:.15rem}
.callout.warn{background:rgba(255,184,77,.07);border-color:rgba(255,184,77,.3)}
.callout.warn svg{color:var(--amber)}
.callout b{color:var(--txt)}

/* Key takeaways box */
.takeaways{margin:2rem 0;padding:1.4rem 1.6rem;border-radius:16px;background:var(--panel);border:1px solid var(--stroke)}
.takeaways h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);margin-bottom:.8rem;font-family:'JetBrains Mono',monospace}
.takeaways ul{margin:0;padding-left:1.2rem}
.takeaways li{color:var(--txt-dim);margin:.45rem 0}

/* ---------- Article footer / CTA ---------- */
.article-cta{margin-top:3rem;padding:1.8rem;text-align:center}
.article-cta h3{font-family:var(--font-d);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.article-cta p{color:var(--txt-dim);font-size:.95rem;margin-bottom:1.3rem}

/* Related posts */
.related{margin-top:3.5rem}
.related h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--txt-mute);margin-bottom:1.1rem;font-family:'JetBrains Mono',monospace}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.related-card{display:block;padding:1.2rem;border-radius:14px;background:var(--panel);border:1px solid var(--stroke);transition:.25s var(--ease)}
.related-card:hover{border-color:var(--stroke-strong);transform:translateY(-3px)}
.related-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:700}
.related-card b{display:block;color:var(--txt);font-size:.98rem;font-weight:600;margin-top:.5rem;line-height:1.35}

/* ============================================================
   Documentation layout
   ============================================================ */
.docs-layout{display:grid;grid-template-columns:230px 1fr;gap:3rem;align-items:start}
.docs-toc{position:sticky;top:6.5rem;align-self:start}
.docs-toc h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--txt-mute);margin-bottom:.9rem;font-family:'JetBrains Mono',monospace}
.docs-toc a{display:block;color:var(--txt-dim);font-size:.9rem;padding:.4rem .75rem;border-radius:9px;border-left:2px solid transparent;transition:.2s}
.docs-toc a:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.docs-toc a.active{color:var(--txt);border-left-color:var(--blue);background:rgba(77,163,255,.07)}
.docs-content{min-width:0;max-width:48rem}
.docs-section{margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--stroke)}
.docs-section:last-child{border-bottom:0}

/* Reference cards grid (docs) */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.5rem 0}
.ref-card{display:flex;flex-direction:column;gap:.4rem;padding:1.15rem;border-radius:14px;background:var(--panel);border:1px solid var(--stroke);transition:.25s var(--ease)}
.ref-card:hover{border-color:var(--stroke-strong);transform:translateY(-3px)}
.ref-card b{color:var(--txt);font-size:.98rem;display:flex;align-items:center;gap:.5rem}
.ref-card b svg{color:var(--blue)}
.ref-card p{color:var(--txt-dim);font-size:.85rem;line-height:1.5;margin:0}
.ref-card .ext{color:var(--blue);font-size:.82rem;font-weight:600;margin-top:auto;padding-top:.4rem}

/* Steps */
.steps{counter-reset:step;margin:1.4rem 0;padding:0;list-style:none}
.steps li{counter-increment:step;position:relative;padding:0 0 1.3rem 3rem;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:-.1rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:50%;background:var(--grad-2);color:#fff;font-weight:700;font-size:.9rem;font-family:'JetBrains Mono',monospace}
.steps li:not(:last-child)::after{content:"";position:absolute;left:.93rem;top:1.9rem;bottom:0;width:1px;background:var(--stroke-strong)}
.steps b{color:var(--txt);display:block;margin-bottom:.2rem}
.steps p{color:var(--txt-dim);font-size:.92rem;margin:0}

/* Code block */
.codeblock{margin:1.4rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);background:#070b14}
.codeblock-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.02);font-size:.78rem;color:var(--txt-mute);font-family:'JetBrains Mono',monospace}
.codeblock pre{margin:0;padding:1rem 1.1rem;overflow-x:auto}
.codeblock code{font-family:'JetBrains Mono',monospace;font-size:.83rem;line-height:1.6;color:#c4d6ff;background:none;border:0;padding:0}
.codeblock .k{color:#7b9dff}.codeblock .s{color:#5fd6a8}.codeblock .c{color:#5a6680}

/* Spec table */
.spec-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem}
.spec-table th,.spec-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--stroke)}
.spec-table th{color:var(--txt-mute);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.spec-table td{color:var(--txt-dim)}
.spec-table td:first-child{color:var(--txt);font-weight:500}
.spec-table tr:hover td{background:rgba(255,255,255,.02)}

@media (max-width:880px){
  .docs-layout{grid-template-columns:1fr;gap:1.5rem}
  .docs-toc{position:relative;top:0;border:1px solid var(--stroke);border-radius:14px;padding:1rem;background:var(--panel)}
  .docs-toc a{border-left:0}
}