/* ============================================================
   JagaSec — blog styles (index + articles).
   Loads AFTER legal.css and reuses its :root tokens, header,
   footer, .brand, .btn, and .prose typography.
   ============================================================ */

/* ---- breadcrumbs ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;}
.crumbs a:hover{color:var(--brand);}
.crumbs .sep{opacity:.45;}
.crumbs .here{color:var(--ink);}

/* ---- blog index head ---- */
.bloghead{padding:64px 0 8px;}
.bloghead .wrap{max-width:var(--maxw);}
.bloghead h1{font-size:clamp(34px,5vw,50px);letter-spacing:-.03em;font-weight:800;margin-top:14px;line-height:1.05;}
.bloghead .intro{margin-top:16px;font-size:18px;color:#54484c;max-width:62ch;text-wrap:pretty;}

/* ---- post grid ---- */
.postlist{padding:34px 0 40px;}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.postcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);transition:.22s;min-height:236px;}
.postcard:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--brand) 22%,var(--line));}
.postcard .cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800;}
.postcard h2,.postcard h3{font-size:21px;line-height:1.24;letter-spacing:-.02em;font-weight:800;margin-top:12px;color:var(--ink);}
.postcard p{color:var(--muted);font-size:14.5px;margin-top:10px;flex:1;text-wrap:pretty;}
.postcard .pmeta{margin-top:16px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.postcard .pmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);}
.postcard .go{margin-top:12px;font-weight:700;font-size:14px;color:var(--brand);}

/* featured (first) post spans the full row on wide screens */
.postcard.feat{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;min-height:0;padding:34px;}
.postcard.feat .fbody{display:flex;flex-direction:column;}
.postcard.feat h2{font-size:clamp(24px,2.6vw,32px);}
.postcard.feat p{font-size:16px;}
.postcard.feat .fart{align-self:stretch;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--card));min-height:220px;display:grid;place-items:center;position:relative;overflow:hidden;}
.postcard.feat .fart::before{content:"";position:absolute;width:320px;height:320px;top:-80px;right:-80px;background:radial-gradient(closest-side,color-mix(in oklab,var(--brand) 13%,transparent),transparent);}
.postcard.feat .fart img{width:112px;height:112px;object-fit:contain;position:relative;filter:drop-shadow(0 8px 20px rgba(20,15,18,.16));}
@media(max-width:900px){.postgrid{grid-template-columns:1fr 1fr;}.postcard.feat{grid-template-columns:1fr;}.postcard.feat .fart{order:-1;min-height:180px;}}
@media(max-width:600px){.postgrid{grid-template-columns:1fr;}}

/* ---- article head ---- */
.arthead{padding:56px 0 6px;}
.arthead .wrap{max-width:var(--prose);}
.arthead .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800;}
.arthead h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.03em;line-height:1.08;font-weight:800;margin-top:14px;text-wrap:balance;}
.artmeta{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--muted);}
.artmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);}
.artmeta .by{font-weight:700;color:#54484c;}
.lead .wrap{max-width:var(--prose);}
.lead p{font-size:19px;line-height:1.6;color:#4a3f42;margin:22px 0 6px;text-wrap:pretty;}

/* ---- key takeaways box ---- */
.takeaways{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:14px;padding:20px 22px;margin:26px 0;}
.takeaways h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:800;margin-bottom:12px;}
.takeaways ul{margin:0;padding-left:20px;color:#48403f;font-size:15.5px;}
.takeaways li{margin:0 0 8px;}

/* ---- tables inside prose ---- */
.prose .tablewrap{overflow-x:auto;margin:22px 0;}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px;}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;}
.prose thead th{background:var(--surface);font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.prose tbody tr:nth-child(even){background:color-mix(in oklab,var(--surface) 45%,transparent);}

/* ---- in-article CTA band ---- */
.cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border-radius:20px;padding:34px 32px;margin:38px 0;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 60px -34px rgba(122,31,43,.6);}
.cta-band::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);pointer-events:none;}
.cta-band h3{font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff;position:relative;}
.cta-band p{margin:10px auto 0;color:rgba(255,255,255,.85);max-width:46ch;font-size:15.5px;position:relative;}
.cta-band .btn{margin-top:20px;background:#fff;color:var(--brand);border-color:#fff;position:relative;}
.cta-band .btn:hover{background:#f3e9e9;}

/* ---- FAQ ---- */
.faqs{margin:28px 0 8px;}
.faqs details{border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow);}
.faqs summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-size:16px;font-weight:700;color:var(--ink);}
.faqs summary::-webkit-details-marker{display:none;}
.faqs summary::after{content:"+";font-size:24px;font-weight:300;color:var(--gold);line-height:1;transition:transform .2s ease;}
.faqs details[open] summary::after{transform:rotate(45deg);}
.faqs p{margin:0 20px 16px;color:#54484c;font-size:15px;line-height:1.65;}

/* ---- article foot: tags + related ---- */
.artfoot{max-width:var(--prose);margin:44px auto 0;padding-top:26px;border-top:1px solid var(--line);}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;}
.chip{font-size:12.5px;font-weight:600;color:var(--brand);background:color-mix(in oklab,var(--brand) 7%,#fff);border:1px solid color-mix(in oklab,var(--brand) 16%,transparent);padding:6px 13px;border-radius:100px;}
.related h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px;}
.relgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.relcard{display:block;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card);transition:.2s;}
.relcard:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--brand) 22%,var(--line));}
.relcard .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800;}
.relcard b{display:block;margin-top:8px;font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);}
@media(max-width:600px){.relgrid{grid-template-columns:1fr;}}

/* generous bottom spacing before footer */
.prose.artbody{padding-bottom:8px;}