.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .blog-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: transform 0.2s; }
    .blog-card:hover { transform: translateY(-4px); }
    .blog-card-img { width: 100%; height: 200px; object-fit: cover; }
    .blog-card-body { padding: 1.5rem; }
    .blog-card-meta { font-size: 0.8rem; color: var(--color-muted); margin: 0.5rem 0; }
    .blog-card-title { font-size: 1.1rem; margin: 0.5rem 0 0.75rem; color: var(--color-text); }
    .blog-card-excerpt { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 1rem; }
    .blog-filter-tabs { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 3rem; }
    .blog-filter-tab { padding: 0.5rem 1.25rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted); cursor: pointer; }
    .blog-filter-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    .pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; align-items: center; }
    .pagination a, .pagination span { padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); }
    .pagination a.active, .pagination span.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    @media(max-width:768px){ .blog-grid { grid-template-columns: 1fr; } }