/**
 * Article archive (Figma "Article Main").
 *
 * Desktop 10344:5279 — 1440 wide, content inset 100 (the standard section
 *   padding), 80 above and below. H1 48/58 bold black centred, 40 to the grid,
 *   three columns 26 apart both ways. Card radius 6 with the "basic" shadow:
 *   a 220 cover photo over a white body padded 20, title 24/32 semibold.
 *   60 below the grid, a centred red pill 199 × 58.
 * Mobile 10344:5347 — 375 wide, inset 20, 40 above and below. H1 36/46, 24 to
 *   the grid, one column 10 apart, photo 200, title 20/28. 32 below the grid the
 *   button goes full width, still 58 tall.
 *
 * Between the two frames everything is fluid; the column count is the one
 * structural choice Figma does not draw.
 */

.ae-articles {
	width: 100%;
	/* Figma: 40 at 375 → 80 at 1440. */
	padding-block: clamp(40px, calc(40px + 40 * var(--ae-fluid)), 80px);
	/* Figma 10344:5281 — Greyscale/Grey 100 behind the white cards. */
	background-color: var(--ae-color-grey-100, #f8f8f8);
}

.ae-articles__inner {
	display: flex;
	flex-direction: column;
}

/* Heading ---------------------------------------------------------------- */

.ae-articles__heading {
	/* H1 is already 36/46 → 48/58 bold in main.css. */
	margin: 0;
	text-align: center;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

/* Grid ------------------------------------------------------------------- */

.ae-articles__list {
	display: grid;
	grid-template-columns: 1fr;
	/* Figma: 10 at 375 → 26 at 1440. */
	gap: clamp(10px, calc(10px + 16 * var(--ae-fluid)), 26px);
	/* Figma: 24 below the heading at 375 → 40 at 1440. */
	margin: clamp(24px, calc(24px + 16 * var(--ae-fluid)), 40px) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The heading is optional on an archive that has no title; without it the grid
 * must not carry the gap that belonged under it.
 */
.ae-articles__inner > .ae-articles__list:first-child {
	margin-top: 0;
}

.ae-articles__card {
	border-radius: 6px;
	background-color: var(--ae-color-white, #fff);
	box-shadow: var(--ae-shadow-basic, 5px 5px 20px 0 rgba(0, 0, 0, 0.1));
	overflow: hidden;
}

.ae-articles__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ae-articles__media {
	display: block;
	flex: none;
	width: 100%;
	/* Figma: 200 at 375 → 220 at 1440. */
	height: clamp(200px, calc(200px + 20 * var(--ae-fluid)), 220px);
	overflow: hidden;
}

.ae-articles__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ae-articles__body {
	display: block;
	flex: 1 1 auto;
	padding: 20px;
	background-color: var(--ae-color-white, #fff);
}

.ae-articles__title {
	display: block;
	/* Figma: 20/28 at 375 → 24/32 at 1440. */
	font-size: clamp(20px, calc(20px + 4 * var(--ae-fluid)), 24px);
	line-height: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

a.ae-articles__link:hover .ae-articles__title,
a.ae-articles__link:focus-visible .ae-articles__title {
	color: var(--ae-color-blue-600, #0c8ce9);
}

/* Load more -------------------------------------------------------------- */

.ae-articles__more {
	display: flex;
	justify-content: center;
	/* Figma: 32 below the grid at 375 → 60 at 1440. */
	margin-top: clamp(32px, calc(32px + 28 * var(--ae-fluid)), 60px);
}

.ae-articles__button {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
	padding: 20px 40px;
	border: 0;
	border-radius: 200px;
	background-color: var(--ae-color-red-600, #e90c0c);
	color: var(--ae-color-white, #fff);
	font-family: inherit;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* Figma draws no hover; this is the same one the contact form's red pill uses. */
.ae-articles__button:hover,
.ae-articles__button:focus-visible {
	background-color: var(--ae-color-black, #000);
	color: var(--ae-color-white, #fff);
}

.ae-articles__button.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.ae-articles__button-icon {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
}

.ae-articles__empty {
	margin: clamp(24px, calc(24px + 16 * var(--ae-fluid)), 40px) 0 0;
	text-align: center;
}

/* Tablet ----------------------------------------------------------------- */

@media (min-width: 768px) {

	/*
	 * Two across before three: at 768 a third column would leave cards narrower
	 * than the 335 the mobile frame draws.
	 */
	.ae-articles__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ae-articles__button {
		flex: 0 0 auto;
	}
}

/* Desktop ---------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ae-articles__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}