/* articles-archive — Figma 243:551: two columns of article cards (668 + 37 +
   675 in the 1380 column ≈ .container), 120px between rows. Card = the home
   strip's card (white, radius 32, --shadow-article) with the full excerpt.
   Tokens only (R8), logical props (R9), no heights (R1/R4). */

.articles-archive {
	padding-block: var(--space-fluid-xl) var(--space-archive-bottom); /* band → cards 117, cards → footer 183 */
}

.articles-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-fluid-xl) var(--space-article-gap);
	align-items: stretch; /* a row's cards share a height, as in Figma */
}

.articles-archive__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding-block-end: var(--space-8);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-article);
}

.articles-archive__media {
	display: block;
	aspect-ratio: 668 / 482; /* the shape lives on the container (R7) */
	overflow: hidden; /* radius mask */
	border-start-start-radius: var(--radius-md);
	border-start-end-radius: var(--radius-md);
}

.articles-archive__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.articles-archive__card:hover .articles-archive__media img {
	transform: scale(1.03);
}

.articles-archive__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: right edge */
	gap: var(--space-10);
	padding-inline: var(--space-8);
}

.articles-archive__title {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
}

.articles-archive__title a {
	text-decoration: none;
}

.articles-archive__excerpt {
	font-size: var(--fs-400);
}

/* ---- Pagination (not in the design): pill links in the site palette ---- */

.articles-archive__pagination {
	margin-block-start: var(--space-fluid-xl);
}

.articles-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.articles-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--space-12);
	padding-block: var(--space-3);
	padding-inline: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-white);
	box-shadow: var(--shadow-button);
	font-size: var(--fs-300);
	text-decoration: none;
}

.articles-archive__pagination .page-numbers.current {
	background: var(--color-primary);
}

@media (max-width: 767px) { /* bp: --bp-md — one card per row */
	.articles-archive__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}