/* ZonForge Blog — shared article enhancement styles (Phase 1: structure + SEO + placeholder hero)
   Linked by every /blog/<slug>/index.html in addition to that page's own inline <style> block.
   Phase 2 will swap .article-hero background treatments for real photography per article. */

/* ---- Hero band (category-coded abstract placeholder, NOT a reused icon/illustration) ---- */
.article-hero{position:relative;overflow:hidden;padding:56px 0 40px;border-bottom:1px solid rgba(148,189,255,.13)}
.article-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,20,0) 0%,rgba(5,9,20,.92) 100%);pointer-events:none}
.article-hero .container{position:relative;z-index:2}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;backdrop-filter:blur(6px)}
.hero-meta-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:#bcd2e8;margin-top:4px}
.hero-meta-strip .dot{width:3px;height:3px;border-radius:50%;background:#5e7a96}
.hero-glyph{position:absolute;top:50%;right:6%;transform:translateY(-50%);width:180px;height:180px;opacity:.16;pointer-events:none}
@media(max-width:900px){.hero-glyph{display:none}}

.hero-ai{background:radial-gradient(circle at 85% 20%,rgba(56,213,255,.22),transparent 55%),radial-gradient(circle at 10% 90%,rgba(47,128,255,.18),transparent 50%),linear-gradient(135deg,#050914,#08152b 60%,#06112a)}
.hero-ai .hero-kicker{background:rgba(56,213,255,.12);color:#38d5ff;border:1px solid rgba(56,213,255,.28)}
.hero-soc{background:radial-gradient(circle at 88% 15%,rgba(47,128,255,.22),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(52,211,153,.14),transparent 55%),linear-gradient(135deg,#050914,#071a2e 60%,#061224)}
.hero-soc .hero-kicker{background:rgba(47,128,255,.13);color:#5b9dff;border:1px solid rgba(47,128,255,.3)}
.hero-threat{background:radial-gradient(circle at 85% 18%,rgba(255,64,96,.22),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(255,64,96,.1),transparent 50%),linear-gradient(135deg,#0a0610,#1a0a14 60%,#0c0814)}
.hero-threat .hero-kicker{background:rgba(255,64,96,.12);color:#ff5d7d;border:1px solid rgba(255,64,96,.28)}
.hero-siem{background:radial-gradient(circle at 88% 20%,rgba(139,92,246,.24),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(47,128,255,.14),transparent 50%),linear-gradient(135deg,#08071a,#140d2e 60%,#0c0a22)}
.hero-siem .hero-kicker{background:rgba(139,92,246,.13);color:#a78bfa;border:1px solid rgba(139,92,246,.3)}
.hero-intel{background:radial-gradient(circle at 86% 18%,rgba(52,211,153,.22),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(56,213,255,.12),transparent 50%),linear-gradient(135deg,#050e10,#0a1f1c 60%,#081a18)}
.hero-intel .hero-kicker{background:rgba(52,211,153,.13);color:#4ee3a8;border:1px solid rgba(52,211,153,.3)}
.hero-mssp{background:radial-gradient(circle at 87% 18%,rgba(255,191,105,.22),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(255,64,96,.08),transparent 50%),linear-gradient(135deg,#0d0905,#1f140a 60%,#170f08)}
.hero-mssp .hero-kicker{background:rgba(255,191,105,.14);color:#ffc97e;border:1px solid rgba(255,191,105,.3)}
.hero-compliance{background:radial-gradient(circle at 86% 20%,rgba(148,189,255,.2),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(139,92,246,.1),transparent 50%),linear-gradient(135deg,#070a14,#0e1830 60%,#0a1326)}
.hero-compliance .hero-kicker{background:rgba(148,189,255,.13);color:#b9d4ff;border:1px solid rgba(148,189,255,.3)}
.hero-cloud{background:radial-gradient(circle at 88% 18%,rgba(56,213,255,.2),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(47,128,255,.16),transparent 50%),linear-gradient(135deg,#050b14,#081c30 60%,#06172a)}
.hero-cloud .hero-kicker{background:rgba(56,213,255,.12);color:#5fd9ff;border:1px solid rgba(56,213,255,.28)}
.hero-identity{background:radial-gradient(circle at 86% 18%,rgba(217,70,239,.18),transparent 55%),radial-gradient(ellipse at 5% 95%,rgba(139,92,246,.16),transparent 50%),linear-gradient(135deg,#0b0714,#1c0e2c 60%,#150b24)}
.hero-identity .hero-kicker{background:rgba(217,70,239,.13);color:#e879f9;border:1px solid rgba(217,70,239,.28)}

/* ---- Executive summary ---- */
.exec-summary{position:relative;background:rgba(56,213,255,.06);border:1px solid rgba(56,213,255,.22);border-left:3px solid #38d5ff;border-radius:12px;padding:20px 24px;margin:8px 0 28px}
.exec-summary .es-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#38d5ff;margin-bottom:8px;display:block}
.exec-summary p{color:#c3d8ec;font-size:15px;line-height:1.7;margin:0}
.exec-summary p+p{margin-top:10px}

/* ---- Key takeaways ---- */
.key-takeaways{background:rgba(52,211,153,.05);border:1px solid rgba(52,211,153,.2);border-radius:12px;padding:22px 26px;margin:24px 0}
.key-takeaways .kt-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#34d399;margin-bottom:12px;display:block}
.key-takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.key-takeaways li{position:relative;padding-left:26px;font-size:14.5px;color:#bcd2e8;line-height:1.6}
.key-takeaways li::before{content:'✓';position:absolute;left:0;top:0;color:#34d399;font-weight:800}

/* ---- Practical checklist ---- */
.practical-checklist{background:var(--glass,rgba(11,22,42,.72));border:1px solid var(--line,rgba(148,189,255,.13));border-radius:12px;padding:22px 26px;margin:24px 0}
.practical-checklist .pc-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#ffbf69;margin-bottom:12px;display:block}
.practical-checklist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.practical-checklist li{position:relative;padding-left:30px;font-size:14.5px;color:#bcd2e8;line-height:1.6}
.practical-checklist li::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;border:1.5px solid #ffbf69;border-radius:4px;background:rgba(255,191,105,.08)}

/* ---- Fallback callout / table / FAQ accordion (for templates that didn't already define them) ---- */
.callout{background:rgba(47,128,255,.07);border:1px solid rgba(47,128,255,.2);border-radius:14px;padding:20px 24px;margin:24px 0}
.callout-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2f80ff;margin-bottom:8px}
.callout p{color:#a0bcd8;font-size:15px;margin:0}
.art-table{width:100%;border-collapse:collapse;margin:20px 0;background:rgba(11,22,42,.72);border:1px solid rgba(148,189,255,.13);border-radius:14px;overflow:hidden;font-size:14px}
.art-table th{padding:12px 16px;background:rgba(5,9,20,.6);color:#5e7a96;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;text-align:left;border-bottom:1px solid rgba(148,189,255,.13)}
.art-table td{padding:12px 16px;border-bottom:rgba(148,189,255,.06) 1px solid;color:#8faac4}
.art-table td:first-child{color:#f0f6ff;font-weight:600}
.art-table .hl{color:#34d399;font-weight:700}
.art-table .neg{color:#5e7a96}
.art-table .warn{color:#ffbf69;font-weight:600}
.art-table tr:last-child td{border-bottom:none}
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.faq-item{background:rgba(11,22,42,.72);border:1px solid rgba(148,189,255,.13);border-radius:12px;overflow:hidden}
.faq-q{width:100%;background:transparent;border:none;padding:18px 22px;color:#e8f4ff;font-size:15px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:inherit}
.faq-q::after{content:'+';font-size:20px;color:#38d5ff;flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 18px;font-size:14px;color:#8faac4;line-height:1.7;border-top:1px solid rgba(148,189,255,.13)}
.faq-item.open .faq-a{display:block}

/* ---- Related articles (full width grid) ---- */
.related-section{margin-top:56px;padding-top:40px;border-top:1px solid rgba(148,189,255,.13)}
.related-section h2{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8faac4;margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{display:block;background:rgba(11,22,42,.72);border:1px solid rgba(148,189,255,.13);border-radius:12px;padding:20px;transition:.2s}
.related-card:hover{border-color:rgba(56,189,248,.35);transform:translateY(-2px)}
.related-card .rc-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#38d5ff;margin-bottom:8px}
.related-card h3{font-size:14.5px;font-weight:700;color:#e8f4ff;line-height:1.4}
@media(max-width:900px){.related-grid{grid-template-columns:1fr}}