/* === BLOG-SPECIFIC STYLES === */

/* --- Featured Post --- */
.blog-featured{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:2.5rem;transition:border-color 0.3s}
.blog-featured:hover{border-color:var(--accent)}
.blog-featured-img{position:relative;min-height:240px;overflow:hidden}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease)}
.blog-featured:hover .blog-featured-img img{transform:scale(1.03)}
.blog-featured-body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.blog-featured-body h2{margin-bottom:0.5rem}
.blog-featured-body p{font-size:0.95rem;color:var(--text-2);line-height:1.7;margin-bottom:1rem}
.blog-featured-label{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--bg);background:var(--accent);display:inline-block;padding:0.2rem 0.6rem;border-radius:3px;margin-bottom:0.75rem}

/* --- Search Bar --- */
.blog-search{position:relative;max-width:420px;margin-bottom:1.5rem}
.blog-search input{width:100%;padding:0.7rem 1rem 0.7rem 2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:0.9rem;transition:border-color 0.2s,box-shadow 0.2s}
.blog-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.blog-search input::placeholder{color:var(--text-3)}
.blog-search-icon{position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.blog-search-icon svg{width:16px;height:16px}

/* --- Category Filter Pills --- */
.category-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2rem}
.category-pill{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.4rem 1rem;border:1px solid var(--border);border-radius:99px;color:var(--text-3);background:transparent;cursor:pointer;transition:all 0.2s}
.category-pill:hover{border-color:var(--accent);color:var(--text)}
.category-pill.active{background:var(--accent);border-color:var(--accent);color:var(--text)}

/* --- Tag Pills --- */
.tag-pills{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.75rem}
.tag-pill{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.04em;text-transform:uppercase;padding:0.25rem 0.6rem;border:1px solid var(--border);border-radius:99px;color:var(--text-3);transition:all 0.2s;text-decoration:none}
.tag-pill:hover{border-color:var(--accent);color:var(--accent-h)}

/* --- Tag Cloud --- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:0.5rem}
.tag-cloud .tag-pill{font-size:0.65rem;padding:0.3rem 0.7rem}
.tag-cloud .tag-pill.tag-lg{font-size:0.72rem;padding:0.35rem 0.8rem}
.tag-cloud .tag-pill.tag-sm{font-size:0.58rem;padding:0.2rem 0.5rem}

/* --- Blog Layout (Main + Sidebar) --- */
.blog-layout{display:grid;gap:3rem}
.blog-main-col{min-width:0}
.blog-sidebar{display:flex;flex-direction:column;gap:2rem}
.sidebar-section h3{font-size:1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}

/* --- Newsletter Box --- */
.newsletter-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.newsletter-box p{font-size:0.88rem;color:var(--text-2);margin-bottom:1rem}
.newsletter-form{display:flex;gap:0.5rem}
.newsletter-form input{flex:1;padding:0.6rem 0.8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:0.85rem}
.newsletter-form input:focus{outline:none;border-color:var(--accent)}
.newsletter-form button{padding:0.6rem 1rem;background:var(--accent);border:none;border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;white-space:nowrap}
.newsletter-form button:hover{background:var(--accent-h)}

/* --- Pagination --- */
.pagination{display:flex;align-items:center;justify-content:center;gap:0.35rem;margin-top:3rem}
.pagination-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);font-size:0.72rem;color:var(--text-3);background:transparent;cursor:pointer;transition:all 0.2s}
.pagination-btn:hover{border-color:var(--accent);color:var(--text)}
.pagination-btn.active{background:var(--accent);border-color:var(--accent);color:var(--text)}
.pagination-ellipsis{color:var(--text-3);font-size:0.72rem;padding:0 0.25rem}

/* --- Author Bio --- */
.author-bio{display:flex;align-items:center;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--border);margin-bottom:2rem}
.author-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border)}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.author-info .author-name{font-weight:500;color:var(--text);font-size:0.92rem}
.author-info .author-desc{font-size:0.82rem;color:var(--text-3);margin-top:0.15rem}

/* --- Breadcrumb --- */
.breadcrumb{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.5rem}
.breadcrumb a{color:var(--text-3);transition:color 0.2s}
.breadcrumb a:hover{color:var(--accent-h)}
.breadcrumb-sep{color:var(--text-3);opacity:0.5}

/* --- Share Bar --- */
.share-bar{display:flex;align-items:center;gap:0.75rem;padding:1.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:2rem 0}
.share-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);margin-right:0.5rem}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);transition:all 0.2s;cursor:pointer;background:transparent}
.share-btn:hover{border-color:var(--accent);color:var(--accent-h)}
.share-btn svg{width:16px;height:16px}

/* --- Post Navigation (Prev/Next) --- */
.post-nav{display:grid;gap:1rem;margin:2.5rem 0}
.post-nav-item{display:flex;flex-direction:column;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color 0.3s,transform 0.3s var(--ease);text-decoration:none}
.post-nav-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.post-nav-label{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:0.5rem}
.post-nav-title{font-family:var(--serif);font-size:1.05rem;color:var(--text);line-height:1.3}

/* --- Related Posts --- */
.related-posts{margin:3rem 0}
.related-posts h2{margin-bottom:1.5rem}
.related-grid{display:grid;gap:1.25rem}

/* --- Comments Section --- */
.comments-section{margin:3rem 0}
.comments-header{font-family:var(--serif);font-size:1.25rem;color:var(--text);margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}

/* Comment Form */
.comment-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem}
.comment-form h3{font-size:1rem;margin-bottom:1rem}
.comment-form-row{display:grid;gap:0.75rem;margin-bottom:0.75rem}
.comment-form input,.comment-form textarea{width:100%;padding:0.65rem 0.8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:0.88rem;transition:border-color 0.2s}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--accent)}
.comment-form textarea{min-height:100px;resize:vertical}
.comment-form button{margin-top:0.5rem}

/* Comment Items */
.comment-list{display:flex;flex-direction:column;gap:1.25rem}
.comment-item{padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.comment-item-reply{margin-left:2rem;margin-top:0.75rem;border-color:var(--accent-dim)}
.comment-top{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}
.comment-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-family:var(--mono);font-size:0.72rem;font-weight:500}
.comment-meta .comment-name{font-weight:500;color:var(--text);font-size:0.88rem}
.comment-meta .comment-date{font-family:var(--mono);font-size:0.65rem;color:var(--text-3);letter-spacing:0.04em;margin-top:0.1rem}
.comment-text{font-size:0.9rem;color:var(--text-2);line-height:1.7}
.comment-actions{display:flex;gap:1rem;margin-top:0.75rem}
.comment-action{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3);cursor:pointer;background:none;border:none;padding:0;transition:color 0.2s}
.comment-action:hover{color:var(--accent-h)}
.load-more-btn{display:block;width:100%;padding:0.75rem;margin-top:1rem;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:all 0.2s}
.load-more-btn:hover{border-color:var(--accent);color:var(--text)}

/* --- Reading Progress --- */
.reading-progress{position:fixed;top:0;left:0;height:3px;z-index:201;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-h));transition:width 0.1s linear}

/* --- Archive Page --- */
.archive-year{font-family:var(--serif);font-size:1.75rem;color:var(--text);margin-top:2.5rem;margin-bottom:0.5rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.archive-year:first-child{margin-top:0}
.archive-month{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin-top:1.5rem;margin-bottom:0.75rem}
.archive-list{list-style:none;padding:0}
.archive-item{display:flex;align-items:baseline;gap:1rem;padding:0.6rem 0;border-bottom:1px solid rgba(42,42,58,0.5)}
.archive-item a{font-family:var(--serif);font-size:1.05rem;color:var(--text);transition:color 0.2s;text-decoration:none;flex:1}
.archive-item a:hover{color:var(--accent-h)}
.archive-item-meta{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.archive-item-date{font-family:var(--mono);font-size:0.65rem;color:var(--text-3);letter-spacing:0.04em}

/* --- Sidebar Archive (compact) --- */
.sidebar-archive-list{list-style:none;padding:0}
.sidebar-archive-item{padding:0.4rem 0;border-bottom:1px solid rgba(42,42,58,0.4)}
.sidebar-archive-item a{font-size:0.85rem;color:var(--text-2);transition:color 0.2s}
.sidebar-archive-item a:hover{color:var(--accent-h)}
.sidebar-archive-item span{font-family:var(--mono);font-size:0.62rem;color:var(--text-3);margin-left:0.5rem}

/* === RESPONSIVE === */
@media(min-width:640px){
  .blog-featured{grid-template-columns:1fr 1fr}
  .blog-featured-img{min-height:300px}
  .comment-form-row{grid-template-columns:1fr 1fr}
  .post-nav{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .blog-layout{grid-template-columns:1fr 280px}
}
@media(min-width:1024px){
  .related-grid{grid-template-columns:repeat(3,1fr)}
}