/* ============================================
   Blog Article Page — extends style.css tokens
   Loaded only on article pages (keeps other
   pages' CSS payload untouched for speed)
   ============================================ */

/* ---------- Reading progress bar ---------- */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--gradient-primary);z-index:1100;transition:width .1s linear}

/* ---------- Article header ---------- */
.post-hero{padding:150px 0 40px;background:var(--gradient-hero)}
.post-hero .breadcrumb{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:20px}
.post-hero .breadcrumb a{color:rgba(255,255,255,.75)}
.post-hero .breadcrumb a:hover{color:var(--white)}
.post-hero__cat{display:inline-block;padding:6px 14px;border-radius:var(--radius-full);background:#EEF2FF;color:var(--primary);font-size:13px;font-weight:700;margin-bottom:18px}
.post-hero__title{font-size:clamp(28px,4.2vw,46px);font-weight:800;color:var(--white);line-height:1.25;max-width:900px;margin-bottom:20px}
.post-hero__excerpt{font-size:18px;color:rgba(255,255,255,.75);max-width:760px;line-height:1.7;margin-bottom:28px}
.post-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;color:rgba(255,255,255,.65);font-size:14px}
.post-hero__author{display:flex;align-items:center;gap:10px}
.post-hero__avatar{width:40px;height:40px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.post-hero__author strong{color:var(--white);display:block;font-size:14px}
.post-hero__dot{opacity:.5}

/* ---------- Layout ---------- */
.post-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;padding-top:48px}
.post-toc{position:sticky;top:96px}
.post-toc__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray-400);margin-bottom:14px}
.post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:10px}
.post-toc li{list-style:none;counter-increment:toc;font-size:14px}
.post-toc a{color:var(--gray-600);display:block;padding:4px 0 4px 22px;position:relative;line-height:1.4;border-left:2px solid var(--gray-200)}
.post-toc a::before{content:counter(toc);position:absolute;left:-1px;top:2px;transform:translateX(-50%);background:var(--white);width:16px;font-size:11px;color:var(--gray-400)}
.post-toc a:hover,.post-toc a.active{color:var(--primary);border-left-color:var(--primary);font-weight:600}

.post-content{min-width:0}

/* Typography rules are scoped to .post-prose (the actual write-up only) so
   they never bleed into the CTA / share bar / author box / prev-next nav /
   related-article cards that follow the article body. */
.post-prose h2{font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--dark);margin:44px 0 16px;scroll-margin-top:90px}
.post-prose h3{font-size:19px;font-weight:700;color:var(--dark);margin:28px 0 12px;scroll-margin-top:90px}
.post-prose p{color:var(--gray-700);font-size:16.5px;line-height:1.85;margin-bottom:18px}
.post-prose ul,.post-prose ol{margin:0 0 20px 0;padding-left:22px;color:var(--gray-700)}
.post-prose li{line-height:1.8;margin-bottom:8px;font-size:16.5px}
.post-prose ol{padding-left:20px}
.post-prose a:not(.btn){color:var(--primary);font-weight:600;text-decoration:underline;text-decoration-color:var(--primary-light)}
.post-prose a:not(.btn):hover{color:var(--primary-dark)}
.post-prose strong{color:var(--dark);font-weight:700}
.post-prose code{background:var(--gray-100);color:var(--primary-dark);padding:2px 7px;border-radius:5px;font-size:14px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace}

/* ---------- Quick answer / key takeaways ---------- */
.post-answer{background:#EEF2FF;border:1px solid #C7D2FE;border-radius:var(--radius-md);padding:24px 26px;margin-bottom:32px}
.post-answer__label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--primary);margin-bottom:10px}
.post-answer p{margin:0;color:var(--gray-800);font-size:16px;line-height:1.75}

.post-takeaways{background:var(--gray-50);border-left:4px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:22px 26px;margin-bottom:36px}
.post-takeaways__label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:12px}
.post-takeaways ul{margin:0;padding-left:20px}
.post-takeaways li{color:var(--gray-700);font-size:15.5px;margin-bottom:6px}

/* ---------- Callouts ---------- */
.post-callout{border-radius:var(--radius-md);padding:20px 22px;margin:26px 0;font-size:15.5px;line-height:1.7;border:1px solid var(--gray-200)}
.post-callout--tip{background:#ECFDF5;border-color:#A7F3D0}
.post-callout--warn{background:#FFFBEB;border-color:#FDE68A}
.post-callout strong{display:block;margin-bottom:4px}

/* ---------- Tables ---------- */
.post-table-wrap{overflow-x:auto;margin:24px 0 32px;border-radius:var(--radius-md);border:1px solid var(--gray-200)}
.post-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.post-table th{background:var(--gray-50);color:var(--dark);text-align:left;padding:12px 16px;font-weight:700;border-bottom:2px solid var(--gray-200);white-space:nowrap}
.post-table td{padding:12px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-700);vertical-align:top}
.post-table tr:last-child td{border-bottom:none}

/* ---------- Code blocks ---------- */
.post-code{position:relative;background:var(--dark);border-radius:var(--radius-md);margin:20px 0 30px;overflow:hidden}
.post-code__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--dark-light)}
.post-code__lang{font-size:12px;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.post-code__copy{background:transparent;color:var(--gray-300);border:1px solid var(--gray-700);border-radius:var(--radius-sm);padding:4px 10px;font-size:12px}
.post-code__copy:hover{color:var(--white);border-color:var(--gray-500)}
.post-code pre{margin:0;padding:18px 20px;overflow-x:auto}
.post-code code{background:none;color:#E2E8F0;padding:0;font-size:13.5px;line-height:1.7;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace}
.post-code .tok-key{color:#F59E0B}
.post-code .tok-str{color:#34D399}
.post-code .tok-com{color:#64748B}
.post-code .tok-fn{color:#818CF8}

/* ---------- Checklist ---------- */
.post-checklist{list-style:none;padding:0;margin:20px 0 30px;display:grid;gap:10px}
.post-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:var(--gray-700);background:var(--gray-50);border-radius:var(--radius-sm);padding:12px 14px}
.post-checklist li::before{content:"✓";flex-shrink:0;width:20px;height:20px;background:var(--accent);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ---------- Share ---------- */
.post-share{display:flex;align-items:center;gap:12px;margin:36px 0;padding:18px 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.post-share__label{font-size:13px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px}
.post-share__links{display:flex;gap:8px}
.post-share__links a{width:36px;height:36px;border-radius:50%;background:var(--gray-100);color:var(--gray-600);display:flex;align-items:center;justify-content:center}
.post-share__links a:hover{background:var(--primary);color:var(--white)}

/* ---------- FAQ heading spacing (reuses .faq-list from style.css) ---------- */
.post-prose .faq-list{margin:8px 0 32px}

/* ---------- Author box ---------- */
.post-author-box{display:flex;gap:18px;background:var(--gray-50);border-radius:var(--radius-md);padding:26px;margin:40px 0}
.post-author-box__avatar{width:64px;height:64px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.post-author-box h4{font-size:16px;color:var(--dark);margin-bottom:4px}
.post-author-box p{font-size:14.5px;color:var(--gray-500);margin:0;line-height:1.6}

/* ---------- CTA ---------- */
.post-cta{background:var(--gradient-hero);border-radius:var(--radius-lg);padding:40px;text-align:center;margin:44px 0}
.post-cta h3{color:var(--white);font-size:24px;margin-bottom:10px}
.post-cta p{color:rgba(255,255,255,.75);margin-bottom:22px;max-width:520px;margin-left:auto;margin-right:auto}
.post-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Prev/Next ---------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0}
.post-nav a{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:18px 20px;display:block}
.post-nav a:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md)}
.post-nav__dir{font-size:12px;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:6px;display:block}
.post-nav__title{font-size:15px;font-weight:700;color:var(--dark);text-decoration:none!important}
.post-nav--next{text-align:right}

/* ---------- Related ---------- */
.post-related{margin-top:56px}
.post-related h2{font-size:24px;font-weight:800;color:var(--dark);margin-bottom:24px}
.post-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------- Mobile TOC toggle ---------- */
.post-toc-mobile{display:none}

@media (max-width:1100px){
    .post-layout{grid-template-columns:1fr}
    .post-toc{position:static;order:-1;margin-bottom:8px}
    .post-toc-mobile{display:block}
    .post-toc-mobile summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px 18px;font-weight:700;color:var(--dark);font-size:14px}
    .post-toc-mobile summary::-webkit-details-marker{display:none}
    .post-toc-mobile[open] summary::after{content:"▲"}
    .post-toc-mobile summary::after{content:"▼";font-size:11px;color:var(--gray-400)}
    .post-toc-mobile .post-toc{border:1px solid var(--gray-200);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);padding:16px 18px}
    aside.post-toc.desktop-only{display:none}
    .post-related__grid{grid-template-columns:1fr}
}

@media (max-width:768px){
    .post-hero{padding:120px 0 32px}
    .post-nav{grid-template-columns:1fr}
    .post-nav--next{text-align:left}
    .post-author-box{flex-direction:column;text-align:center;align-items:center}
    .post-share{flex-wrap:wrap}
    .post-code pre{padding:16px}
}