/* Blog list (independent) */
.blog-hero{ padding:44px 0 24px; background:linear-gradient(180deg,#f7faff,transparent); border-bottom:1px solid var(--border); }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; margin-bottom:8px; }
.crumbs a{ color:var(--blue); text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.blog-hero h1{ font-size:clamp(28px,4vw,42px); font-weight:800; margin:0 0 6px; color:var(--ink); }
.muted{ color:var(--muted); }
.search{ margin-top:14px; display:flex; gap:10px; align-items:center; padding:12px; }
.search input{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; }
.search input:focus{ border-color:#c9d4ff; box-shadow:0 0 0 3px #e8eeff; }

.blog-grid{ display:grid; gap:16px; grid-template-columns:.9fr 2.1fr; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns:1fr; } }

.filters h3{ margin:0 0 8px; }
.group{ margin-top:10px; }
.lbl{ font-weight:700; color:var(--ink); display:block; margin-bottom:6px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--ink); background:#fff; }
.chip:hover{ color:var(--blue); border-color:#cfd7ff; }
.chip.active{ background:#eef3ff; border-color:#d9e2ff; color:#1f6fff; }

.posts{ display:grid; gap:14px; }
.post .tag{ display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#f3f6ff; color:#4f6bd9; text-decoration:none; margin-bottom:8px; }
.post h2{ margin:0 0 6px; font-size:clamp(18px,3vw,22px); }
.post h2 a{ color:var(--ink); text-decoration:none; }
.post h2 a:hover{ color:var(--blue); }
.post .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; color:var(--muted); }
.post .read{ text-decoration:none; font-weight:700; color:var(--blue); }

.pagination{ display:flex; gap:8px; margin-top:10px; }
.page{ padding:8px 12px; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--ink); background:#fff; }
.page:hover{ border-color:#cfd7ff; color:#1f6fff; }
.page.active{ background:#eef3ff; border-color:#d9e2ff; color:#1f6fff; }
.page.disabled{ opacity:.5; pointer-events:none; }