/* Blog post template — components (hero, figure, key takeaways, FAQ, related, TOC) */
/* Inherits design tokens from inline <style> in each blog post: --bg, --bg2, --gold, --t, --td, --tdd, --b, --bG, --r */

/* ---- Component 1: Hero image ---- */
.post-hero{max-width:740px;margin:0 auto 8px;padding:0 clamp(24px,5vw,80px)}
.post-hero[hidden]{display:none}
.post-hero figure{margin:0}
.post-hero picture,.post-hero img{display:block;width:100%;height:auto;border-radius:14px;overflow:hidden}
.post-hero figcaption{font-size:14px;color:#666;text-align:center;font-style:italic;margin-top:10px;line-height:1.5}

/* ---- Component 2: Inline figure ---- */
.b-article figure{margin:32px 0;display:block}
.b-article figure picture,.b-article figure img{display:block;width:100%;height:auto;border-radius:14px}
.b-article figure figcaption{font-size:14px;color:#666;text-align:center;font-style:italic;margin-top:10px;line-height:1.5}
.b-article figure.figure-wide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;padding:0 clamp(16px,4vw,40px)}
.b-article figure.figure-wide picture,.b-article figure.figure-wide img{max-width:1100px;margin:0 auto}

/* ---- Component 3: Key Takeaways ---- */
.post-takeaways{max-width:740px;margin:0 auto 32px;padding:0 clamp(24px,5vw,80px)}
.post-takeaways[hidden]{display:none}
.post-takeaways-box{background:#F5F1E8;border-left:4px solid var(--gold);border-radius:14px;padding:24px 28px}
.post-takeaways-box h2{font-family:'DM Serif Display',serif;font-size:22px;letter-spacing:-.01em;margin:0 0 14px;color:var(--t)}
.post-takeaways-box ul{list-style:none;margin:0;padding:0}
.post-takeaways-box li{position:relative;padding-left:28px;font-size:16px;line-height:1.6;color:var(--t);margin-bottom:10px;font-weight:400}
.post-takeaways-box li:last-child{margin-bottom:0}
.post-takeaways-box li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
@media(max-width:480px){.post-takeaways-box{padding:20px 18px}.post-takeaways-box li{font-size:15px;padding-left:24px}}

/* ---- Component 5: FAQ accordion ---- */
.post-faqs{max-width:740px;margin:48px auto 0;padding:0 clamp(24px,5vw,80px)}
.post-faqs[hidden]{display:none}
.post-faqs-h{font-family:'DM Serif Display',serif;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;margin:0 0 18px;color:var(--t)}
.post-faq{border-bottom:1px solid #E5E5E5}
.post-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-size:18px;font-weight:700;color:var(--t);display:flex;justify-content:space-between;align-items:center;gap:14px;line-height:1.4}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"";flex-shrink:0;width:14px;height:14px;border-right:2px solid var(--td);border-bottom:2px solid var(--td);transform:rotate(45deg);transition:transform .25s ease;margin-top:-4px}
.post-faq[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.post-faq summary:hover{color:var(--gold)}
.post-faq-a{padding:0 0 22px;font-size:16px;line-height:1.6;color:var(--td);font-weight:300}
.post-faq-a p{margin-bottom:12px}
.post-faq-a p:last-child{margin-bottom:0}
.post-faq-a a{color:var(--gold);font-weight:700}

/* ---- Component 4: Related Posts ---- */
.post-related{max-width:1100px;margin:56px auto 0;padding:0 clamp(24px,5vw,80px)}
.post-related[hidden]{display:none}
.post-related-h{font-family:'DM Serif Display',serif;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;margin:0 0 22px;color:var(--t);text-align:center}
.post-related-g{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){.post-related-g{grid-template-columns:repeat(3,1fr)}.post-related-g.two-up{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}}
.post-related-c{background:#fff;border:1px solid var(--b);border-radius:14px;overflow:hidden;display:block;color:inherit;transition:transform .25s,box-shadow .25s}
.post-related-c:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,42,30,.08)}
.post-related-c .post-related-img{width:100%;aspect-ratio:16/9;background:var(--bg2);overflow:hidden}
.post-related-c .post-related-img img{width:100%;height:100%;object-fit:cover}
.post-related-body{padding:18px 20px 20px}
.post-related-tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.post-related-title{font-family:'DM Serif Display',serif;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--t);margin-bottom:8px}
.post-related-excerpt{font-size:14px;color:#666;line-height:1.55;font-weight:300;margin-bottom:10px}
.post-related-time{font-size:11px;color:var(--tdd);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* Card fallback (no hero image): gradient block with category + title overlay */
.post-related-c-fallback{background:transparent;border:none;display:block}
.post-related-fallback{background:linear-gradient(135deg,#1E2A1E 0%,#2d3d2d 100%);background-image:radial-gradient(circle at 85% 15%,rgba(201,168,76,.08) 0%,transparent 55%),linear-gradient(135deg,#1E2A1E 0%,#2d3d2d 100%);border-radius:14px;padding:24px;min-height:240px;display:flex;align-items:center;color:#FAFAFA;transition:transform .25s,box-shadow .25s}
.post-related-c-fallback:hover .post-related-fallback{transform:none}
.post-related-fallback-i{text-align:left;width:100%}
.post-related-fallback-tag{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c9a84c;margin-bottom:14px}
.post-related-fallback-title{font-family:'DM Serif Display',serif;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:#FAFAFA;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px}
.post-related-fallback-time{font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(250,250,250,.55)}

/* ---- Component 7: Sticky Table of Contents (desktop only) ---- */
.post-toc{display:none}
@media(min-width:1024px){
  .post-toc{display:block;position:fixed;top:100px;right:32px;width:220px;z-index:50;max-height:calc(100vh - 140px);overflow-y:auto;font-family:'Outfit',sans-serif}
  .post-toc[hidden]{display:none}
  .post-toc-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#666;margin:0 0 12px;padding:0}
  .post-toc-l{list-style:none;margin:0;padding:0;border-left:1px solid var(--b)}
  .post-toc-l li{margin:0}
  .post-toc-l a{display:block;font-size:14px;line-height:1.4;padding:6px 0 6px 14px;margin-left:-1px;color:var(--t);font-weight:400;border-left:2px solid transparent;transition:color .2s,border-color .2s}
  .post-toc-l a:hover{color:var(--gold)}
  .post-toc-l a.active{color:var(--gold);border-left-color:var(--gold);font-weight:600}
}
@media(min-width:1320px){.post-toc{right:max(32px,calc(50vw - 600px))}}

/* ---- Quick facts (Pass 2c — AI-citation surface) ---- */
.quick-facts{max-width:740px;margin:0 auto 32px;padding:20px 24px;background:#F5F1E8;border-radius:14px;border:1px solid var(--bG);font-family:'Outfit',sans-serif}
.quick-facts dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:14px;margin-bottom:4px}
.quick-facts dt:first-child{margin-top:0}
.quick-facts dd{font-size:15px;line-height:1.55;color:var(--t);margin:0 0 4px;font-weight:400}
.quick-facts dd strong{font-weight:700}
@media(max-width:600px){.quick-facts{margin-left:24px;margin-right:24px;max-width:none;padding:16px 18px}.quick-facts dd{font-size:14px}}