/* blog.css - Blog listing page styles - Refined Dark Authority */

/* ═══ BLOG SECTION LAYOUT ═══ */
.blog-section{
    max-width:1100px;
    padding-top:8rem
}

.blog-header{
    margin-bottom:3rem
}
.blog-header .section-title{
    font-size:2.8rem;
    margin-bottom:.8rem
}
.blog-header .section-subtitle{
    max-width:1000px
}

/* ═══ TAG FILTERS ═══ */
.tag-filters{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-bottom:2.5rem
}
.tag-filter{
    background:var(--bg-surface);
    border:1px solid var(--border);
    color:var(--text-secondary);
    padding:.4rem 1rem;
    border-radius:var(--radius-pill);
    font-family:var(--font-mono);
    font-size:.78rem;
    cursor:pointer;
    transition:all .25s;
    white-space:nowrap;
    text-decoration:none
}
.tag-filter:hover{
    border-color:var(--border-hover);
    color:var(--text-primary);
    background:var(--bg-surface-hover)
}
.tag-filter.active{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-dim)
}
.tag-filter.show-all{
    border-style:dashed;
    font-size:.72rem;
    color:var(--text-muted)
}
.tag-filter.show-all:hover{
    color:var(--text-secondary);
    border-color:var(--border-hover)
}
/* Post count trailing each pill. Subdued by default; picks up the accent
   when the pill itself is active so the number stays visually tied to the
   label rather than fighting it. */
.tag-filter-count{
    display:inline-block;
    margin-left:.4rem;
    color:var(--text-muted);
    font-weight:400;
    opacity:.85
}
.tag-filter.active .tag-filter-count{color:var(--accent);opacity:.7}
/* Collapse everything past the top N tags by default so the filter strip
   fits on one line on most viewports. The "+N more" button reveals them. */
.tag-filter-extra{display:none}
.tag-filters.expanded .tag-filter-extra{display:inline-flex}
/* Auto-expand when the landing page's active tag lives in the hidden
   group; otherwise the user lands on /tags/X without seeing their own
   pill highlighted. :has() is supported everywhere we care about. */
.tag-filters:has(.tag-filter-extra.active) .tag-filter-extra{display:inline-flex}
.tag-filters:has(.tag-filter-extra.active) .tag-filter-more{display:none}
.tag-filter-more{
    cursor:pointer;
    background:transparent;
    border:1px dashed var(--border);
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.72rem;
    padding:.4rem 1rem;
    border-radius:var(--radius-pill);
    transition:all .25s
}
.tag-filter-more:hover{color:var(--accent);border-color:var(--accent)}
.tag-filters.expanded .tag-filter-more{border-style:solid}

/* ═══ POST LIST ═══ */
.post-list{
    display:flex;
    flex-direction:column;
    gap:1.5rem
}

/* ═══ POST CARD ═══ */
.post-card{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:all .3s;
    overflow:hidden
}
.post-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-3px);
    box-shadow:0 8px 40px rgba(0,0,0,.3)
}
.post-card a{
    text-decoration:none;
    color:inherit;
    display:block;
    padding:2rem
}

/* Card with image */
.post-card.has-img a{
    padding:0
}
.post-card-img{
    width:100%;
    height:280px;
    object-fit:contain;
    background:var(--bg-primary);
    display:block
}
.post-card.has-img .post-inner{
    padding:1.5rem 2rem 2rem
}

/* ─── Post meta row ─── */
.post-meta{
    display:flex;
    gap:.8rem;
    align-items:center;
    margin-bottom:.8rem;
    flex-wrap:wrap
}
.post-date{
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.3px
}
.post-tag{
    color:var(--text-secondary);
    font-size:.72rem;
    font-family:var(--font-mono);
    background:var(--accent-dim);
    padding:.2rem .65rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border);
    letter-spacing:.2px;
    transition:border-color .2s
}
.post-tag:hover{border-color:var(--border-hover)}
.post-read-time{
    color:var(--text-muted);
    font-size:.72rem;
    font-family:var(--font-mono);
    margin-left:auto
}

/* ─── Post content ─── */
.post-card h2{
    font-family:var(--font-display);
    font-size:1.35rem;
    color:var(--text-bright);
    margin-bottom:.6rem;
    line-height:1.3;
    transition:color .2s
}
.post-card:hover h2{
    color:var(--accent)
}
.post-card .excerpt{
    color:var(--text-secondary);
    font-size:.92rem;
    line-height:1.7
}
.post-read{
    color:var(--accent);
    font-size:.82rem;
    font-family:var(--font-mono);
    margin-top:1rem;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    transition:gap .2s
}
.post-card:hover .post-read{
    gap:.7rem
}

/* ═══ EMPTY STATE ═══ */
.no-posts{
    color:var(--text-secondary);
    text-align:center;
    padding:5rem 0;
    font-size:1.05rem;
    font-family:var(--font-body)
}

/* ═══ LOAD MORE ═══ */
.load-more-wrap{
    text-align:center;
    margin-top:2.5rem
}
.load-more-btn{
    background:transparent;
    border:1.5px solid var(--accent);
    color:var(--accent);
    padding:.75rem 2.2rem;
    border-radius:var(--radius);
    font-family:var(--font-mono);
    font-size:.85rem;
    letter-spacing:.3px;
    cursor:pointer;
    transition:all .25s
}
.load-more-btn:hover{
    background:var(--accent-dim);
    transform:translateY(-1px);
    box-shadow:0 4px 20px rgba(100,255,218,.1)
}

/* ═══ RSS LINK ═══ */
.rss-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.75rem;
    text-decoration:none;
    transition:color .2s;
    margin-top:.6rem
}
.rss-link:hover{
    color:var(--accent)
}
.rss-link svg{
    width:.9em;
    height:.9em
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
    .blog-section{
        padding-top:6rem
    }
    .blog-header .section-title{
        font-size:2rem
    }
    .post-card a{
        padding:1.5rem
    }
    .post-card.has-img .post-inner{
        padding:1.2rem 1.5rem 1.5rem
    }
    .post-card-img{
        height:180px
    }
    .post-card h2{
        font-size:1.15rem
    }
    .post-meta{
        gap:.5rem
    }
    .post-read-time{
        margin-left:0
    }
    .tag-filters{
        gap:.4rem;
        margin-bottom:2rem
    }
}