.blog-hero{padding:3.2rem 0 2.4rem}
.blog-hero p{color:var(--text);max-width:60ch;margin-top:.6rem}
.fade-up{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.8rem;padding-bottom:4rem}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(27,67,50,0.12)}
.blog-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease,transform .35s ease}
.blog-card:hover .blog-card-img.img-loaded img{transform:scale(1.04)}
.blog-card-img.img-loaded img{opacity:1}
@keyframes blog-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.blog-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,var(--line) 40%,#ded7c7 50%,var(--line) 60%,var(--bg) 100%);background-size:200% 100%;animation:blog-shimmer 1.4s ease-in-out infinite;pointer-events:none;transition:opacity .35s ease;z-index:1}
.blog-card-img.img-loaded::after{opacity:0}
.blog-card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.blog-card-meta{font-size:0.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.blog-card-body h3{font-size:1.15rem;line-height:1.3}
.blog-card-body p{font-size:0.95rem;color:var(--muted)}
.blog-empty{color:var(--muted);padding:2rem 0}