/**
 * IEMA "Latest Articles" section styles.
 *
 * Header (heading + "Read all Articles" button) over a row of post cards
 * (image, date, title). Full-bleed light-grey band, inner constrained to
 * 1440px. On mobile the cards become a one-at-a-time carousel with
 * prev/next controls beneath. Matches the Figma "Latest Articles" section
 * and reuses the shared IEMA tokens.
 */

.iema-articles {
	background-color: #f6f6f6;
	color: #002147;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.iema-articles__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 80px;
}

/* Header ------------------------------------------------------------ */
.iema-articles__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 40px;
}

.iema-articles__heading {
	margin: 0;
	color: #002147;
	font-weight: 700;
	font-size: 40px;
	line-height: 44px;
	letter-spacing: 0;
}

.iema-articles__cta {
	flex: 0 0 auto;
}

/* Track ------------------------------------------------------------- */
.iema-articles__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.iema-articles__viewport:focus-visible {
	outline: 2px solid #c1d82a;
	outline-offset: 4px;
}

.iema-articles__viewport::-webkit-scrollbar {
	display: none;
}

.iema-articles__track {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iema-articles__slide {
	flex: 0 0 calc((100% - 2 * 40px) / 3);
	margin: 0;
	scroll-snap-align: start;
}

/* Article card ------------------------------------------------------ */
.iema-article-card {
	display: flex;
	flex-direction: column;
	color: #002147;
	text-decoration: none;
}

.iema-article-card__figure {
	display: block;
	position: relative;
	aspect-ratio: 400 / 240;
	overflow: hidden;
	border-radius: 8px;
	background-color: #e9e9e9;
}

.iema-article-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.iema-article-card:hover .iema-article-card__image,
.iema-article-card:focus-visible .iema-article-card__image {
	transform: scale(1.04);
}

.iema-article-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #002147 0%, #00152d 100%);
}

.iema-article-card__date {
	display: block;
	margin: 16px 0 0;
	color: #687800;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

.iema-article-card__title {
	margin: 8px 0 0;
	color: #002147;
	font-weight: 700;
	font-size: 24px;
	line-height: 110%;
	letter-spacing: 0;
}

/* Prev/next controls (mobile) --------------------------------------- */
.iema-articles__nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
}

.iema-articles__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #002147;
	cursor: pointer;
	border: 1px solid var(--Secondary-Dark-Blue---500, #002147);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.iema-articles__arrow:hover:not(:disabled),
.iema-articles__arrow:focus-visible {
	background-color: #002147;
	border-color: #002147;
	color: #ffffff;
	outline: none;
}

.iema-articles__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.iema-articles__arrow svg {
	display: block;
}

/* Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.iema-articles__inner {
		padding: 48px 24px;
	}

	.iema-articles__heading {
		font-size: 32px;
		line-height: 35.2px;
	}

	.iema-articles__slide {
		flex: 0 0 calc((100% - 40px) / 2);
	}
}

/* Mobile: one card + controls --------------------------------------- */
@media (max-width: 640px) {
	.iema-articles__head {
		align-items: flex-start;
	}

	.iema-articles__track {
		gap: 20px;
	}

	.iema-articles__slide {
		flex: 0 0 100%;
	}

	.iema-articles__nav {
		display: flex;
	}

	.iema-article-card__figure {
		aspect-ratio: 382 / 240;
	}
}