/*
 * Blog index grid + pagination — Figma 216:2252.
 *
 * The cards themselves are the shared `post-card` component from the homepage
 * teaser; only the grid and the pager live here.
 */

.articles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 27px;
}

/* Pagination — WordPress markup from the_posts_pagination(). */

.articles .navigation.pagination {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

.articles .nav-links {
	display: flex;
	align-items: center;
	gap: 9px;
}

.articles .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
	transition: background-color 0.2s ease;
}

.articles .page-numbers:hover { background: #eaedf3; }

.articles .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-white);
}

.articles .page-numbers.current:hover { background: var(--color-accent); }

/* The two arrows share one right-pointing chevron; the previous one flips. */
.articles .page-numbers.prev img { transform: scaleX(-1); }
.articles .page-numbers.dots:hover { background: none; }

@media (min-width: 640px) {
	.articles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.articles__grid { grid-template-columns: repeat(3, 1fr); }
}

/*
 * On the blog index the grid sits straight on the inner-page band instead of
 * painting its own #F6F6F6 over it — otherwise the band's blue-grey top ends
 * in a hard seam right under the hero. The hero already carries 60px below the
 * headline, so the section adds no top padding of its own.
 */
body.blog .articles {
	background: transparent;
	padding-top: 0;
}