.blog-tabs{display:flex;gap:.25rem;margin-bottom:1.2rem;overflow-x:auto;scrollbar-width:none;padding:.2rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.blog-tabs::-webkit-scrollbar{display:none}
.blog-tab{padding:.42rem 1rem;border-radius:7px;font-size:.84rem;font-weight:700;color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:background .1s,color .1s}
.blog-tab:hover{color:var(--accent);text-decoration:none}
.blog-tab-active{background:var(--accent);color:var(--text-on-accent);pointer-events:none}
.blog-tab-active:hover{color:var(--text-on-accent)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s,transform .13s,border-color .13s;text-decoration:none;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.blog-card-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg)}
.blog-card-thumb-ph{width:100%;aspect-ratio:4/3;background:var(--thumb-placeholder-bg);display:flex;align-items:center;justify-content:center;color:var(--thumb-placeholder-text);font-size:2rem}
.blog-card-body{padding:.75rem .85rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.blog-card-category{display:inline-block;padding:.12rem .48rem;border-radius:999px;font-size:.68rem;font-weight:800;background:var(--accent-light);color:var(--accent);border:1px solid var(--accent-mid)}
.blog-card-title{font-size:.92rem;font-weight:800;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card:hover .blog-card-title{color:var(--accent)}
.blog-card-desc{font-size:.78rem;color:var(--text-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-footer{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--text-muted);margin-top:auto;padding-top:.4rem}
.blog-card-author{font-weight:700}