/* Blog + Resources pages. Uses the site's existing design tokens; nothing in styles.css is changed. */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom: var(--space-4); }
.chip { padding:.4rem 1rem; border:1px solid var(--border-glass); border-radius:999px; font-size:.85rem; color:var(--text-muted); transition:border-color .2s, color .2s; }
.chip:hover, .chip.is-active { border-color: var(--gold); color: var(--gold-light); }
.search-form { display:flex; gap:.6rem; flex:1 1 260px; max-width: 420px; margin-left:auto; }
.search-form input { flex:1; padding:.6rem 1rem; border:1px solid var(--border-glass); border-radius:999px; background:rgba(255,255,255,.04); color:var(--text-light); font-size:.95rem; }
.search-form input:focus { outline:none; border-color: var(--red); }

.post-card, .resource-card { display:flex; flex-direction:column; height:100%; }
.post-cover { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); aspect-ratio: 16/9; overflow:hidden; background: var(--navy-mid); }
.post-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.card-meta { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); margin-bottom:.6rem; }
.card-meta .cat { color: var(--red-light); }
.post-card h3, .resource-card h3 { margin-bottom:.6rem; }
.post-card p, .resource-card p { color: var(--text-muted); flex:1; }
.card-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: var(--space-3); }
.empty-state { text-align:center; padding: var(--space-6) 0; color: var(--text-muted); }

.pager { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top: var(--space-5); }
.pager-btn { min-width:40px; height:40px; padding:0 .9rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-glass); border-radius:999px; color: var(--text-light); font-size:.9rem; transition:border-color .2s, color .2s; }
a.pager-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.pager-btn.is-current { background: var(--red); border-color: var(--red); color: var(--text-white); }
.pager-btn.is-disabled { opacity:.35; }
.pager-gap { align-self:center; color: var(--text-dim); }

.article { max-width: 760px; margin: 0 auto; }
.article-cover { border-radius: var(--radius-lg); overflow:hidden; margin-bottom: var(--space-4); }
.article-cover img { width:100%; display:block; }
.article-body { font-size: var(--text-lg); color: var(--text-light); line-height:1.75; }
.article-body > * + * { margin-top: 1.1rem; }
.article-body h2, .article-body h3, .article-body h4 { margin-top: 2rem; color: var(--text-white); }
.article-body a { color: var(--gold-light); text-decoration: underline; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body ul { list-style: disc; } .article-body ol { list-style: decimal; }
.article-body blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--text-muted); font-style: italic; }
.article-body pre { background: rgba(255,255,255,.05); padding: 1rem; border-radius: var(--radius); overflow-x:auto; }
.article-nav { display:grid; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top:1px solid var(--border-glass); }
@media (min-width: 700px) { .article-nav { grid-template-columns: 1fr 1fr; } .article-nav .next { text-align:right; } }
.article-nav a { color: var(--text-light); } .article-nav a:hover { color: var(--gold-light); }
.article-nav small { display:block; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-bottom:.3rem; }