/* BLOG / RESOURCE HUB */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
    background: #fff; border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-border); }
.blog-card-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-tint); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: 13px; color: var(--color-text-lighter); margin-bottom: 10px; font-weight: 500; }
.blog-card-title { font-size: 19px; margin-bottom: 12px; line-height: 1.35; }
.blog-card-title a { color: var(--color-primary); }
.blog-card-title a:hover { color: var(--color-accent); }
.blog-card-excerpt { font-size: 14px; color: var(--color-text-light); margin-bottom: 16px; line-height: 1.6; flex: 1; }
.blog-card-link { font-size: 14px; font-weight: 600; color: var(--color-accent); display: inline-flex; gap: 4px; transition: gap 0.2s; }
.blog-card:hover .blog-card-link { gap: 8px; }

.pagination { margin-top: 56px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 11px 16px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-secondary); font-size: 14px; font-weight: 500;
    transition: all 0.2s;
}
.pagination .page-numbers.current { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }

.single-featured-image { margin: 0 auto 40px; max-width: var(--max-width); padding: 0 var(--space-md); }
.single-featured-image img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.single-meta { font-size: 14px; color: var(--color-text-light); margin-bottom: 16px; }
.single-meta a { color: var(--color-accent); }
.single-content { text-align: left; }
.single-content h2 { margin-top: 40px; }
.single-content h3 { margin-top: 28px; }
.single-content img { border-radius: var(--radius-md); margin: 28px 0; }
.single-tags { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }

.ssu-search-form { display: flex; gap: 8px; max-width: 480px; margin: 24px auto 0; }
.ssu-search-input { flex: 1; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px; }
.ssu-search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }

.error-404 { padding: clamp(72px,10vw,120px) 0; position: relative; overflow: hidden; }
.error-404-links { margin-top: 48px; }
.error-404-links ul { display: inline-block; text-align: left; }

.comments-area { margin-top: 56px; }
.comment-list { list-style: none; padding: 0; }

/* Infographic inside post content */
.ssu-post-illu { margin: 32px 0; max-width: 520px; }
.single-content .ssu-illu-frame { margin-left: auto; margin-right: auto; }