@import "main.css";

.page-title{font-size:2.5rem;margin-bottom:2rem;text-align:center}

/* ----------  FILTER BUTTONS  ---------- */
.filter-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.filter-btn{background:none;border:1px solid var(--border);color:var(--txt);padding:.75rem 1.5rem;cursor:pointer;transition:background .2s,color .2s}
.filter-btn:hover{background:var(--hover)}
.filter-btn.active{background:var(--txt);color:var(--bg);border-color:var(--txt)}

/* ----------  POST LIST  ---------- */
.blog-list-item{border-bottom:1px solid var(--border);padding:2rem 0}
.blog-list-item:last-child{border-bottom:none}
.blog-list-item h3{font-size:1.5rem;margin-bottom:.5rem}
.blog-list-item h3 a{color:var(--txt);text-decoration:none}
.blog-list-item h3 a:hover{text-decoration:underline}
.blog-meta{font-size:.9rem;opacity:.7;margin-bottom:1rem}
.blog-excerpt{font-size:1rem;line-height:1.7;margin-bottom:1rem}
.blog-tags .tag{font-size:.7rem;padding:.4rem .8rem}

/* ----------  PAGINATION  ---------- */
.pagination-controls{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.pagination-btn{background:none;border:1px solid var(--border);color:var(--txt);padding:.75rem 1.5rem;cursor:pointer;transition:background .2s}
.pagination-btn:hover{background:var(--hover)}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}
.page-info{font-size:.9rem;opacity:.8}