/* =====================================================================
   BLOG — listing page.  Card + list styles live in site.css (.hv-art*).
   ===================================================================== */

.hv-blog-body {
    padding-top: 56px;
    padding-bottom: 20px;
}
.hv-blog-body .hv-article-grid + .hv-article-grid {
    margin-top: 44px;
    padding-top: 44px;
    border-top: 1px solid var(--line);
}

/* pagination */
.hv-blog-pagination {
    padding-top: 20px;
    padding-bottom: 64px;
    display: flex;
    justify-content: center;
}
.hv-blog-pagination .pagination { gap: 4px; }
.hv-blog-pagination .page-item .page-link {
    border-radius: 8px !important;
    border-color: var(--line-strong);
    color: var(--text);
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 6px 14px;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hv-blog-pagination .page-item.active .page-link {
    background: var(--hv);
    border-color: var(--hv);
    color: #fff;
}
.hv-blog-pagination .page-item .page-link:hover {
    background: rgba(107, 47, 214, 0.08);
    border-color: var(--hv);
    color: var(--hv-deep);
}

/* ── back-compat: keep old .ki-blog / .ki-card selectors from breaking
   any cached markup during rollout ───────────────────────────────── */
.ki-blog-section { padding: 8px 0 12px; }
.ki-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
}
@media (max-width: 900px) { .ki-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ki-cards-grid { grid-template-columns: 1fr; } }