/* =========================================================
   BLOG — article typography, TOC, sidebar widgets
   ========================================================= */

.article-header{ max-width:820px; margin:0 auto 32px; text-align:center; }
.article-header__cat{ color:var(--accent-cyan); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.article-header h1{ margin:14px 0 18px; }
.article-meta{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; font-size:.86rem; color:var(--color-text-muted); }
.article-meta__author{ display:flex; align-items:center; gap:8px; }
.article-cover{
  width:100%; aspect-ratio:21/9; border-radius:var(--radius-lg); margin:32px 0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.4rem; text-align:center; padding:20px;
}

.article-body{ max-width:760px; margin:0 auto; }
.article-content{ font-family:var(--font-body); font-size:1.08rem; line-height:1.85; color:#e4e4e7; }
.article-content h2{ margin:44px 0 16px; font-size:1.55rem; scroll-margin-top:100px; }
.article-content h3{ margin:32px 0 14px; font-size:1.24rem; scroll-margin-top:100px; }
.article-content p{ margin-bottom:20px; color:#d4d4d8; }
.article-content ul,.article-content ol{ margin:0 0 20px 22px; color:#d4d4d8; list-style:disc; }
.article-content ol{ list-style:decimal; }
.article-content li{ margin-bottom:8px; }
.article-content a{ color:var(--accent-cyan); text-decoration:underline; text-underline-offset:3px; }
.article-content img{ border-radius:var(--radius-md); margin:24px 0; }
.article-content figure{ margin:28px 0; }
.article-content figure img{ width:100%; margin:0; border-radius:var(--radius-md); }
.article-content figcaption{ font-size:.82rem; color:var(--color-text-muted); text-align:center; margin-top:10px; font-style:italic; }
.article-content blockquote{
  border-left:3px solid var(--accent-violet); padding:14px 22px; margin:28px 0; font-style:italic;
  color:var(--color-text-primary); background:var(--glass-bg); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.article-content pre{ background:#0d0d0d; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px; overflow-x:auto; margin:22px 0; }
.article-content code{ font-family:'SFMono-Regular',Consolas,monospace; font-size:.88em; background:var(--color-surface-2); padding:2px 6px; border-radius:4px; }
.article-content pre code{ background:none; padding:0; }

.toc-box{ padding:22px; }
.toc-box h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-secondary); margin-bottom:14px; }
.toc-box ul{ display:flex; flex-direction:column; gap:10px; border-left:2px solid var(--color-border); }
.toc-box a{ display:block; padding-left:16px; font-size:.88rem; color:var(--color-text-secondary); border-left:2px solid transparent; margin-left:-2px; transition:all var(--transition-fast); }
.toc-box a:hover, .toc-box a.active{ color:var(--accent-cyan); border-left-color:var(--accent-cyan); }

.share-bar{ display:flex; align-items:center; gap:10px; padding:18px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin:32px 0; flex-wrap:wrap; }
.share-bar__label{ font-size:.85rem; color:var(--color-text-muted); margin-right:6px; }
.share-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--color-text-secondary); transition:all var(--transition-fast);
}
.share-btn:hover{ color:#04070a; background:var(--accent-gradient); border-color:transparent; transform:translateY(-2px); }

.author-box{ display:flex; gap:18px; padding:26px; margin:36px 0; align-items:flex-start; }
.author-box__avatar{ width:60px; height:60px; border-radius:50%; background:var(--accent-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; color:#04070a; flex-shrink:0; font-size:1.1rem; }
.author-box h4{ font-size:1.02rem; }
.author-box .role{ font-size:.8rem; color:var(--accent-cyan); margin-bottom:8px; }
.author-box p{ font-size:.9rem; }

.prev-next{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:40px 0; }
.prev-next a{ padding:20px; display:flex; flex-direction:column; gap:6px; transition:border-color var(--transition-fast); }
.prev-next a:hover{ border-color:var(--accent-cyan); }
.prev-next .dir{ font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); }
.prev-next .next-item{ text-align:right; align-items:flex-end; }

.comments-box{ margin:40px 0; }
.comment{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--color-border); }
.comment__avatar{ width:42px; height:42px; border-radius:50%; background:var(--color-surface-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex-shrink:0; }
.comment__name{ font-weight:600; font-size:.92rem; }
.comment__date{ font-size:.76rem; color:var(--color-text-muted); }
.comment__text{ font-size:.9rem; margin-top:6px; }

.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item__q{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; font-weight:600; cursor:pointer; }
.faq-item__q svg{ transition:transform var(--transition-fast); flex-shrink:0; }
.faq-item.is-open .faq-item__q svg{ transform:rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height var(--transition-base); }
.faq-item__a p{ padding-bottom:18px; }

.sidebar-widget{ padding:22px; margin-bottom:22px; }
.sidebar-widget h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:var(--color-text-secondary); }
.sidebar-post{ display:flex; gap:12px; margin-bottom:14px; align-items:center; }
.sidebar-post__thumb{ width:56px; height:56px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.72rem; }
.sidebar-post__title{ font-size:.85rem; font-weight:600; line-height:1.35; }
.sidebar-post__date{ font-size:.72rem; color:var(--color-text-muted); }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }

.blog-filters{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:32px; }
.blog-filters::-webkit-scrollbar{ height:6px; }
.blog-filters .tag{ flex-shrink:0; }

.featured-article{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:var(--radius-xl); overflow:hidden; }
.featured-article__visual{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.6rem; padding:32px; text-align:center; min-height:280px; }
.featured-article__body{ padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
@media (max-width:800px){
  .featured-article{ grid-template-columns:1fr; }
  .prev-next{ grid-template-columns:1fr; }
}