/* Purpose: Blog listing page section styles. Ported from AXL axl-blog.html. Loaded only on the Blog page. */

/* ---- Content hero (light chevron) ---- */
.chero { padding: 140px 0 60px; background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .92)), var(--chero-img, url("../../images/bg-chevron-hero.jpg")) center / cover; position: relative; }
.chero h1 { font-size: clamp(34px, 5vw, 62px); font-weight: 800; letter-spacing: -.03em; }
.chero h1 .red { color: var(--accent); }
.chero .lead { margin: 22px 0 28px; font-size: clamp(17px, 2vw, 20px); color: var(--slate); max-width: 46ch; }
.chero-copy { max-width: 720px; }
.crumb { font-size: 13px; color: var(--slate); margin-bottom: 22px; display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--accent); }
.crumb span { opacity: .5; }
.crumb .current { opacity: 1; color: var(--ink); }

/* Blog card grid (.bgrid/.bcard) is global — see assets/css/components.css */

/* ---- Pagination ---- */
.axl-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.axl-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 11px; color: var(--ink); font-weight: 600; font-size: 14px; transition: .25s; }
.axl-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.axl-pagination .page-numbers.current { background: var(--grad); color: #fff; border-color: transparent; }

/* Get-in-touch band styles are global — see assets/css/components.css + template-parts/global/git-cta.php */