.blog-filters-wrap{padding-bottom:32px}
.blog-filters{display:flex;flex-wrap:wrap;gap:10px}
.blog-filter{padding:9px 20px;border-radius:999px;border:1px solid #d4d0c7;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.blog-filter:hover{border-color:var(--accent-dark)}
.blog-filter.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px;padding-bottom:56px}
.blog-card{display:block;border-radius:0 0 30px 0;overflow:hidden;border:1px solid #e5e2db;background:#fff;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:0 16px 34px -14px rgba(0,0,0,.18);transform:translateY(-2px)}
.blog-card img{width:100%;aspect-ratio:1.3333;object-fit:cover}
.blog-card-body{padding:22px 24px}
.blog-meta{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
.blog-tag{color:var(--accent-dark);font-weight:700}
.blog-card h3{font-size:19px;line-height:1.3;margin-bottom:10px;color:var(--ink)}
.blog-card p{font-size:14px;margin:0}
.blog-empty{display:none;padding:20px 0 60px;color:var(--muted)}

.blog-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding-bottom:80px}
.page-num,.page-nav{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 6px;border-radius:50%;font-size:14px;font-weight:600;color:var(--ink)}
a.page-num:hover,a.page-nav:hover{background:var(--accent-light)}
.page-num.is-current{background:var(--ink);color:#fff}
.page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:38px;color:var(--muted)}

@media(max-width:480px){
  .blog-grid{grid-template-columns:1fr}
  .page-num,.page-nav{min-width:32px;height:32px;font-size:13px}
}