/* =====================================================================
   Blog article template — Toolzin
   Loaded only on /blog/* pages (see wrapper.php). Reuses design tokens
   and shared classes from custom.css (--paper/--ink/--indigo, .eyebrow,
   .article, .share-icon, .chip/.chip-row, .similar-grid/.similar-card,
   .custom-breadcrumbs, .btn/.btn-solid).
   ===================================================================== */

/* ---------- table of contents ---------- */
.toc-box{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper-alt);padding:22px 24px;margin:0 0 36px;}
.toc-box h2{font-size:16px;margin-bottom:0;}
.toc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:5px;}
.toc-list li{list-style:disc;margin-left:20px;margin-bottom:0}
.toc-list a{font-size:14px;color:var(--ink-soft);}
.toc-list a:hover{color:var(--indigo);}
.toc-list .toc-level-3{list-style:none;margin-left:38px;}
.toc-list .toc-level-3 a{font-size:13px;color:var(--ink-faint);}
.toc-box ul {padding:0 !important}

/* ---------- blog index hero: popular posts strip ---------- */
.hero-popular{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;}
.hero-popular-label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);}
.hero-popular a{color:var(--ink-soft);}
.hero-popular a:hover{color:var(--indigo);}
.hero-popular .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;}

/* ---------- post list (index / category pages) ---------- */
.post-list{display:flex;flex-direction:column;gap:30px;}
.post-card{display:block;padding-bottom:30px;border-bottom:1px solid var(--line);}
.post-card:last-child{border-bottom:none;padding-bottom:0;}
.post-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:16px;background:var(--paper-alt);}
.post-card h2{font-size:21px;margin-bottom:8px;}
.post-card:hover h2{color:var(--indigo);}
.post-card-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-faint);margin-bottom:10px;flex-wrap:wrap;}
.post-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;}
.post-card .excerpt{font-size:14.5px;color:var(--ink-soft);line-height:1.65;margin:0;}

/* ---------- post head ---------- */
.cat-badge{
	display:inline-flex;font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
	color:var(--indigo-deep);background:var(--indigo-tint);padding:6px 12px;border-radius:999px;font-weight:600;margin-bottom:16px;
}
.post-head{padding:24px 0 8px;max-width:800px;margin:0 auto}
.post-head h1{font-size:clamp(26px,4.2vw,38px);margin-bottom:16px;}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);}
.post-meta a{color:var(--ink-faint);}
.post-meta a:hover{color:var(--indigo);}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;}

.post-image{
	width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);
	margin:26px 0 0;background:var(--paper-alt);
}
.article img{max-width:100%}
.article h2[id],.article h3[id],#overview{scroll-margin-top:90px;}
/* ---------- two-column layout ---------- */
.layout-grid{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start;margin-top:34px;}
.layout-left{min-width:0;}
.layout-right{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px;}
.side-card{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--solidbw);padding:20px 22px;}
.side-card .section-head{max-width:none;margin-bottom:16px;}
.side-card .section-head h2{font-size:16px;margin-top:8px;}

/* ---------- rich article components (usable inside .article body) ---------- */
.tip-block{margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid var(--line);}
.tip-block:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0;}
sub, .tip-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--indigo);font-weight:600;margin-bottom:8px;display:block;}
.tip-block h3{font-size:20px;margin-bottom:14px;}
.tip-img{width:100%;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:16px;background:var(--paper-alt);}
.tip-img-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}

blockquote, .pro-tip{
	background:var(--paper-alt);border-left:3px solid var(--amber);border-radius:0 4px 4px 0;
	padding:14px 18px;font-size:14.5px;color:var(--ink);line-height:1.65;
}
.pro-tip b{color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px;font-weight:600;}

.conclusion{background:var(--paper-alt);border-radius:var(--radius);padding:28px 30px;margin-top:8px;}
.conclusion h3{font-size:18px;margin-bottom:12px;}
.conclusion p:last-child{margin-bottom:0;}

.created-on{font-size:12.5px;color:var(--ink-faint);margin-top:26px;}

/* ---------- share row ---------- */
.share-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}

/* ---------- sidebar: categories / popular ---------- */
.popular-list{border-top:1px solid var(--line);}
.popular-row{display:block;padding:16px 0;border-bottom:1px solid var(--line);}
.popular-row:last-child{border-bottom:none;padding-bottom:0;}
.popular-row .title{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;}
.popular-row .topic{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-top:5px;}
.popular-row:hover .title{color:var(--indigo);}

/* ---------- related posts (reuses .similar-grid/.similar-card look) ---------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.related-card{background:var(--paper);padding:22px;transition:background .15s ease;display:block;}
.related-card:hover{background:var(--indigo-tint);text-decoration:none;}
.related-card .tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:10px;display:block;}
.related-card .title{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink);}
.related-card:hover .title{color:var(--indigo-deep);}
.related-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:14px;background:var(--paper-alt);}

/* ---------- comments ---------- */
.comment-box{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);padding:26px 28px;}
.comment-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.comment-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--indigo-tint);}
.comment-head .who{font-size:13.5px;color:var(--ink-soft);}
.comment-head .who b{color:var(--ink);}
.comment-form{display:grid;gap:12px;}
.comment-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.comment-form input,.comment-form textarea{
	border:1.5px solid var(--line-strong);border-radius:4px;padding:11px 13px;font-size:14px;width:100%;
	background:var(--paper-alt);color:var(--ink);font-family:inherit;
}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--indigo);}
.comment-form textarea{min-height:100px;resize:vertical;}
.comment-submit{background:var(--ink);color:#fff;border:none;border-radius:4px;padding:11px 20px;font-size:13.5px;font-weight:600;justify-self:start;cursor:pointer;}
.comment-submit:hover{background:var(--indigo);}

.comment-list{display:flex;flex-direction:column;gap:18px;margin-bottom:24px;}
.comment-item{display:flex;gap:14px;align-items:flex-start;}
.comment-item .comment-body{flex:1;background:var(--paper-alt);border-radius:0 var(--radius) var(--radius) var(--radius);padding:14px 16px;}
.comment-item .comment-name{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.comment-item .comment-text{font-size:14px;color:var(--ink-soft);line-height:1.6;}
.comment-item .comment-date{font-size:11.5px;color:var(--ink-faint);margin-top:8px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:10px;}
.comment-reply-btn{background:none;border:none;padding:0;font-size:11.5px;font-family:'JetBrains Mono',monospace;color:var(--indigo);cursor:pointer;font-weight:600;}
.comment-reply-btn:hover{color:var(--indigo-deep);text-decoration:underline;}

.comment-replies{display:flex;flex-direction:column;gap:18px;margin:18px 0 0 30px;padding-left:24px;border-left:2px solid var(--line);}
.comment-item.is-reply .comment-avatar{width:32px;height:32px;}

.comment-reply-banner{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	background:var(--indigo-tint);color:var(--indigo-deep);font-size:13px;
	padding:10px 14px;border-radius:4px;margin-bottom:2px;
}
.comment-reply-banner button{background:none;border:none;color:var(--indigo-deep);font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer;padding:0;}

/* ---------- responsive ---------- */
@media (max-width:960px){
	.layout-grid{grid-template-columns:1fr;}
	.layout-right{position:static;}
}
@media (max-width:900px){
	.related-grid{grid-template-columns:1fr;}
	.tip-img-row{grid-template-columns:1fr;}
}
@media (max-width:560px){
	.comment-row{grid-template-columns:1fr;}
}