/* Blog / Learning Center — list + article detail styles. Loaded only on knowledge_center pages. */

/* ── Hero / list header ─────────────────────────────────────────────────── */
.blog-hero{padding:var(--space-4) 0 var(--space-3);}
.blog-hero h1{margin-bottom:.4rem;}
.blog-hero p{max-width:640px;}

/* ── Featured strip ─────────────────────────────────────────────────────── */
.featured-strip .pcard-img-wrap{aspect-ratio:16/9;}

/* ── Article detail layout ──────────────────────────────────────────────── */
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:2.5rem; align-items:start; padding:var(--space-3) 0 var(--space-5);}
@media(max-width:960px){.article-layout{grid-template-columns:1fr;}}

.article-header{margin-bottom:1.5rem;}
.article-header .pcard-cat{display:inline-block; margin-bottom:.6rem;}
.article-header h1{margin-bottom:.8rem;}
.article-meta{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.84rem; color:var(--light); margin-bottom:1.4rem;}
.article-meta i{margin-left:.3rem;}
.article-featured-img{width:100%; border-radius:var(--radius-card); overflow:hidden; margin-bottom:1.8rem; aspect-ratio:16/9;}
.article-featured-img img{width:100%; height:100%; object-fit:cover; display:block;}

/* Article body typography */
.article-body{font-size:1.04rem; line-height:1.95; color:var(--text-dim);}
.article-body h2{margin:2.2rem 0 1rem; scroll-margin-top:90px;}
.article-body h3{margin:1.8rem 0 .8rem; scroll-margin-top:90px;}
.article-body p{margin-bottom:1.2rem;}
.article-body ul, .article-body ol{margin-bottom:1.2rem; padding-right:1.4rem;}
.article-body li{margin-bottom:.4rem;}
.article-body img{max-width:100%; height:auto; border-radius:12px; margin:1rem 0;}
.article-body a{text-decoration:underline; text-decoration-color:rgba(224,123,57,.4);}
.article-body blockquote{border-right:3px solid var(--primary); padding:.6rem 1.2rem; margin:1.5rem 0; color:var(--text); background:var(--card-2); border-radius:0 10px 10px 0;}
.article-body table{width:100%; border-collapse:collapse; margin:1.2rem 0;}
.article-body table td, .article-body table th{border:1px solid var(--border); padding:.5rem .7rem;}
.article-body table th{background:var(--card-2);}
.article-body hr{border:none; border-top:1px dashed var(--border); margin:2rem 0;}

/* Rich-content media: figures (image + caption) and embedded video */
.article-body figure{margin:1.4rem 0;}
.article-body figure img{margin:0;}
.article-body figure figcaption{font-size:.84rem; color:var(--light); text-align:center; margin-top:.5rem;}
.article-body .rc-video-wrap{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; margin:1.4rem 0;}
.article-body .rc-video-wrap iframe, .article-body .rc-video-wrap video{width:100%; height:100%; border:0; display:block;}

/* Gallery within article */
.article-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:.7rem; margin:1.5rem 0;}
.article-gallery a{display:block; border-radius:10px; overflow:hidden; aspect-ratio:1; background:var(--card-2);}
.article-gallery img{width:100%; height:100%; object-fit:cover; transition:transform .25s;}
.article-gallery a:hover img{transform:scale(1.06);}

/* ── Sidebar: TOC + share ───────────────────────────────────────────────── */
.article-sidebar{position:sticky; top:90px; display:flex; flex-direction:column; gap:1.4rem;}
.toc-box{background:var(--card); border:1px solid var(--border); border-radius:var(--dr-md); padding:1.1rem 1.2rem;}
.toc-box h6{color:var(--primary); font-weight:700; font-size:.85rem; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.4px;}
.toc-box ul{list-style:none; margin:0; padding:0; font-size:.86rem;}
.toc-box li{margin-bottom:.5rem;}
.toc-box li.level-3{padding-right:1rem; font-size:.82rem;}
.toc-box a{color:var(--text-dim);}
.toc-box a:hover{color:var(--primary);}

.share-box{background:rgba(255,255,255,.6); backdrop-filter:blur(10px); border:1px solid rgba(38,35,31,.08); border-radius:var(--dr-md); padding:1rem 1.1rem; display:flex; gap:.6rem; flex-wrap:wrap;}
.share-box a{width:38px; height:38px; border-radius:50%; background:rgba(224,123,57,.12); border:1px solid rgba(224,123,57,.3); display:flex; align-items:center; justify-content:center; color:var(--primary); transition:transform .15s;}
.share-box a:hover{transform:translateY(-2px) scale(1.05); background:var(--primary); color:#fff;}

/* ── Prev/Next ──────────────────────────────────────────────────────────── */
.prev-next{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:var(--space-4) 0;}
.prev-next a{background:var(--card); border:1px solid var(--border); border-radius:var(--dr-md); padding:1rem 1.2rem; display:flex; flex-direction:column; gap:.3rem; transition:border-color .2s;}
.prev-next a:hover{border-color:var(--primary);}
.prev-next .pn-label{font-size:.74rem; color:var(--light); font-weight:600;}
.prev-next .pn-title{font-size:.92rem; color:var(--text); font-weight:600;}
@media(max-width:680px){.prev-next{grid-template-columns:1fr;}}

/* ── Comments ───────────────────────────────────────────────────────────── */
.comments-section{margin-top:var(--space-5);}
.comment-item{background:var(--card); border:1px solid var(--border); border-radius:var(--dr-md); padding:1.1rem 1.3rem; margin-bottom:1rem;}
.comment-item.reply{margin-right:2.2rem; border-color:rgba(224,123,57,.35);}
.comment-item.staff-reply{background:rgba(224,123,57,.08);}
.comment-author{font-weight:700; font-size:.92rem; color:var(--text);}
.comment-author .badge-admin{background:var(--primary); color:#fff; font-size:.65rem; padding:.1rem .5rem; border-radius:8px; margin-right:.4rem;}
.comment-date{font-size:.75rem; color:var(--light); margin-right:.6rem;}
.comment-body{margin-top:.4rem; color:var(--text-dim); font-size:.92rem; line-height:1.8;}
.comment-form .form-control{background:#fff !important; border-color:var(--border) !important; color:var(--text) !important; border-radius:var(--dr-sm) !important;}
.comment-honeypot{position:absolute; left:-9999px; opacity:0;}

@media(max-width:960px){.article-sidebar{position:static;}}