/* blog-post.css , individual /post/[slug] article pages. Loaded with
   pg-base.css (shared vars, wrap, buttons, scroll reveal already defined). */

/* ═══════════════════════════════════════════════════════════
   1. HEADER , breadcrumb, category, title, meta, hero image
   ═══════════════════════════════════════════════════════════ */
#pg .bp-header{background:var(--darker);padding:clamp(140px,14vw,180px) 0 0}
#pg .bp-breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;margin-bottom:28px}
#pg .bp-breadcrumb a{color:rgba(255,255,255,.7);transition:color .2s}
#pg .bp-breadcrumb a:hover{color:var(--orange)}
#pg .bp-breadcrumb span[aria-current]{color:#fff}
#pg .bp-cat{display:inline-block;font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);background:rgba(255,165,3,.12);padding:6px 14px;border-radius:9999px;margin-bottom:22px}
#pg .bp-title{font-family:var(--font-h);font-size:clamp(30px,4.4vw,52px);font-weight:800;color:#fff;line-height:1.14;letter-spacing:-.02em;max-width:900px;margin-bottom:26px}
#pg .bp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--font-b);font-size:14px;color:rgba(255,255,255,.65);padding-bottom:clamp(40px,5vw,56px)}
#pg .bp-meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
#pg .bp-hero-img{aspect-ratio:16/8;overflow:hidden;border-radius:20px 20px 0 0;margin:0 auto;max-width:1100px}
#pg .bp-hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ═══════════════════════════════════════════════════════════
   2. BODY , article prose + sidebar CTA
   ═══════════════════════════════════════════════════════════ */
#pg .bp-layout{padding:clamp(56px,7vw,88px) 0 clamp(80px,10vw,120px)}
#pg .bp-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(40px,5vw,64px);align-items:start;max-width:1100px;margin:0 auto;padding:0 32px}

#pg .bp-body{font-family:var(--font-b);font-size:17px;line-height:1.75;color:var(--text)}
#pg .bp-body p{margin:0 0 22px}
#pg .bp-body h2{font-family:var(--font-h);font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--dark);letter-spacing:-.01em;line-height:1.3;margin:44px 0 18px}
#pg .bp-body h3{font-family:var(--font-h);font-size:clamp(18px,1.8vw,21px);font-weight:750;color:var(--dark);letter-spacing:-.005em;line-height:1.35;margin:32px 0 14px}
#pg .bp-body strong{color:var(--dark);font-weight:700}
#pg .bp-body a{color:var(--orange);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,165,3,.35);text-underline-offset:2px;transition:text-decoration-color .2s}
#pg .bp-body a:hover{text-decoration-color:var(--orange)}
#pg .bp-body ul,#pg .bp-body ol{margin:0 0 22px;padding-left:22px}
#pg .bp-body li{margin-bottom:8px}
#pg .bp-body .bp-inline-img{margin:32px 0;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08)}
#pg .bp-body .bp-inline-img img{width:100%;display:block}
#pg .bp-body .bp-inline-img figcaption{font-size:13px;color:var(--muted);padding:10px 4px 0;text-align:center}

#pg .bp-sidebar{position:sticky;top:124px;display:flex;flex-direction:column;gap:20px}
#pg .bp-cta-card{background:var(--darker);border-radius:18px;padding:28px 24px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
#pg .bp-cta-card__title{font-family:var(--font-h);font-size:18px;font-weight:750;color:#fff;line-height:1.3;margin-bottom:10px}
#pg .bp-cta-card__sub{font-family:var(--font-b);font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:18px}
#pg .bp-cta-card .btn{width:100%;text-align:center}
#pg .bp-share{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px}
#pg .bp-share__label{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#pg .bp-share__author{font-family:var(--font-b);font-size:14px;color:var(--dark);font-weight:600}

/* ═══════════════════════════════════════════════════════════
   3. BACK TO BLOG / RELATED
   ═══════════════════════════════════════════════════════════ */
#pg .bp-back{border-top:1px solid var(--border);background:var(--cream)}
#pg .bp-back__inner{max-width:1100px;margin:0 auto;padding:32px 32px}
#pg .bp-back a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
#pg .bp-back a:hover{color:var(--orange)}

@media(max-width:900px){
  #pg .bp-grid{grid-template-columns:1fr}
  #pg .bp-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  #pg .bp-sidebar>*{flex:1;min-width:240px}
}
@media(max-width:640px){
  #pg .bp-sidebar{flex-direction:column}
}

/* ═══════════════════════════════════════════════════════════
   4. FAQ , static Q&A block inside the article body
   ═══════════════════════════════════════════════════════════ */
#pg .bp-faq{margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
#pg .bp-faq__h2{font-family:var(--font-h);font-size:clamp(20px,2.2vw,25px);font-weight:800;color:var(--dark);letter-spacing:-.01em;margin-bottom:24px}
#pg .bp-faq__item{margin-bottom:22px}
#pg .bp-faq__item:last-child{margin-bottom:0}
#pg .bp-faq__q{font-family:var(--font-h);font-size:16px;font-weight:750;color:var(--dark);margin-bottom:8px}
#pg .bp-faq__a{font-family:var(--font-b);font-size:15.5px;line-height:1.7;color:var(--muted);margin:0}