/* Blog Page */
.blog-filter { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); flex-wrap: wrap; }
.filter-tag {
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600; border: 2px solid var(--gray-200);
    color: var(--gray-600); transition: all var(--transition-fast); cursor: pointer;
}
.filter-tag:hover, .filter-tag.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }

.blog-card-thumb { height: 200px; overflow: hidden; position: relative; background: var(--gray-100); }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card-thumb img { transform: scale(1.05); }
.thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--gradient-card); }
.blog-cat {
    position: absolute; top: 12px; left: 12px; padding: 4px 12px;
    background: var(--primary-500); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: var(--radius-full);
}

.blog-card-body { padding: var(--space-5); }
.blog-date { font-size: var(--text-xs); color: var(--gray-400); display: block; margin-bottom: var(--space-2); }
.blog-card-title { font-size: var(--text-lg); margin-bottom: var(--space-2); line-height: 1.4; }
.blog-card-title a:hover { color: var(--primary-600); }
.blog-card-excerpt { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--space-3); }

.empty-state { text-align: center; padding: var(--space-16) 0; }
.empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p { color: var(--gray-500); }

.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); }
.page-num {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm);
    border: 2px solid var(--gray-200); color: var(--gray-600); transition: all var(--transition-fast);
}
.page-num:hover, .page-num.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }

/* Blog Single */
.blog-single-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-10); }
.blog-single-header { margin-bottom: var(--space-6); }
.blog-single-header h1 { margin: var(--space-3) 0; }
.blog-meta { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--gray-400); }
.blog-single-thumb { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-8); }
.blog-single-thumb img { width: 100%; }

.prose { line-height: var(--leading-relaxed); }
.prose h2 { margin: var(--space-8) 0 var(--space-4); font-size: var(--text-2xl); }
.prose h3 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xl); }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); color: var(--gray-600); }
.prose img { border-radius: var(--radius-lg); margin: var(--space-6) 0; }

.blog-share { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--gray-100); margin-top: var(--space-8); }

.blog-sidebar { position: sticky; top: 96px; }
.sidebar-widget {
    background: #fff; border-radius: var(--radius-xl); padding: var(--space-6);
    border: 1px solid var(--gray-100); margin-bottom: var(--space-6);
}
.sidebar-widget h4 { margin-bottom: var(--space-4); font-size: var(--text-base); }
.sidebar-widget li { padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-50); }
.sidebar-widget a { font-size: var(--text-sm); color: var(--gray-600); }
.sidebar-widget a:hover { color: var(--primary-600); }

.sidebar-cta {
    background: var(--gradient-primary); color: #fff; border-radius: var(--radius-xl);
    padding: var(--space-6); text-align: center;
}
.sidebar-cta h4 { color: #fff; margin-bottom: var(--space-2); }
.sidebar-cta p { color: rgba(255,255,255,0.85); font-size: var(--text-sm); margin-bottom: var(--space-4); }

@media (max-width: 768px) {
    .blog-single-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
}