/*
 * ElderCare — blog index ("Guides & Articles") page, matching the
 * approved CareScout mockup (how-to.html). Card styling itself is shared
 * with single.php via single-post.css (.bp-guide-card etc., enqueued
 * alongside this file) — this file only covers what's unique to the
 * index page: the header and the larger grid. Same conventions as every
 * other page: fixed px not rem, no font-family set, neutral grays reused.
 */

.bi-wrap { max-width: 1160px; margin: 0 auto; padding: 56px 22px; }

.bi-title { font-size: 32px; font-weight: 700; color: #1A1A1A; margin-bottom: 8px; }
.bi-sub { color: #666; max-width: 540px; margin-bottom: 28px; font-size: 15px; line-height: 1.6; }

.bi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .bi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .bi-grid { grid-template-columns: 1fr; } }

.bi-pagination { margin-top: 32px; display: flex; justify-content: center; gap: 6px; }
.bi-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid #E8E8E8; color: #1A1A1A; font-size: 13px; text-decoration: none; }
.bi-pagination .page-numbers.current { background: var(--listeo-primary-color, #B04C2F); border-color: var(--listeo-primary-color, #B04C2F); color: #fff; }
.bi-pagination .page-numbers:not(.current):hover { border-color: var(--listeo-primary-color, #B04C2F); color: var(--listeo-primary-color, #B04C2F); }