/**
 * IEMA Projects styles.
 *
 * Shared by the homepage "Projects" block, the /projects/ archive, and
 * the single project page. Built on the same design tokens as the rest
 * of the theme (navy #002147, lime #c1d82a, grey #757575, Helvetica,
 * 16px card radius) so Projects reads as part of the same system.
 *
 * The homepage block renders as a carousel (`.iema-projects--carousel`)
 * matching its dedicated Figma frame; the archive/single keep the
 * original card grid. Carousel rules are all scoped to the modifier so
 * they never touch the archive.
 */

/* Section shell (block + archive) ----------------------------------- */
.iema-projects {
	background-color: #ffffff;
	color: #002147;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

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

.iema-projects__head {
	max-width: 720px;
	margin: 0 0 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.iema-projects__intro {
	color: #757575;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.iema-projects__intro p {
	margin: 0 0 12px;
}

.iema-projects__intro p:last-child {
	margin-bottom: 0;
}

/* Archive header: filter aligned right ------------------------------ */
.iema-projects__head--archive {
	max-width: none;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 32px;
}

.iema-projects__filter {
	position: relative;
}

.iema-projects__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #002147;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
}

.iema-projects__filter-current {
	font-weight: 400;
}

.iema-projects__filter-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 20;
	width: 300px;
	max-width: 84vw;
	padding: 24px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.iema-projects__filter-menu[hidden] {
	display: none;
}

.iema-projects__filter-option {
	display: block;
	padding: 16px 20px;
	border-radius: 8px;
	background: #f3f8fe;
	color: #121212;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.25s ease;
}

.iema-projects__filter-option:hover {
	background: #e6eff9;
}

.iema-projects__filter-option.is-active {
	background: #002147;
	color: #ffffff;
}

/* Card grid --------------------------------------------------------- */
.iema-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.iema-projects__actions {
	margin-top: 40px;
}

.iema-projects__empty {
	color: #757575;
	font-size: 16px;
}

/* Project card (archive grid) --------------------------------------- */
.iema-project-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: none;
	color: #002147;
}

.iema-project-card .iema-project-card__image {
	transition: transform 0.5s ease;
}

.iema-project-card:hover .iema-project-card__image {
	transform: scale(1.1);
}

.iema-project-card__figure {
	display: block;
	aspect-ratio: 5 / 4;
	border-radius: 12px;
	overflow: hidden;
	background-color: #e9e9e9;
}

.iema-project-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.iema-project-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.iema-project-card__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.iema-project-card__eyebrow {
	color: #707070;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
}

.iema-project-card__title {
	margin: 0;
	color: #002147;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
}

.iema-project-card__title a {
	color: inherit;
	text-decoration: none;
}

.iema-project-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iema-project-card__chip {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #757575;
	border-radius: 4px;
	color: #757575;
	font-size: 12px;
	line-height: 1.4;
}

.iema-project-card__summary {
	margin: 0;
	color: #707070;
	font-weight: 400;
	font-size: 14px;
	line-height: 19.6px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.iema-project-card__cta {
	display: inline-block;
	margin-top: 8px;
	padding: 13px 28px;
	border: 1px solid #002147;
	border-radius: 999px;
	background: transparent;
	color: #002147;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.15;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.iema-project-card__cta:hover,
.iema-project-card__cta:focus-visible {
	border-color: #C1D82A;
	background-color: #002147;
	color: #ffffff;
}

/* Single project ---------------------------------------------------- */
.iema-project-single__hero {
	max-width: 1120px;
	margin: 0 auto 32px;
	border-radius: 16px;
	overflow: hidden;
	background-color: #e9e9e9;
}

.iema-project-single__hero-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.iema-project-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0 0 24px;
	padding: 24px 0;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.iema-project-single__meta-item dt {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #757575;
}

.iema-project-single__meta-item dd {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	color: #002147;
}

.iema-project-single__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #e9e9e9;
}

.iema-project-single__back {
	font-weight: 700;
	font-size: 16px;
	color: #002147;
	text-decoration: none;
}

.iema-project-single__back:hover {
	text-decoration: underline;
}

/* Mobile (card grid / archive) -------------------------------------- */
@media (max-width: 1024px) {
	.iema-projects__inner {
		padding: 40px 24px;
	}

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

	.iema-projects__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.iema-projects__grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================== */
/* Homepage carousel (.iema-projects--carousel) ----------------------- */
/* Scoped entirely to the modifier so the archive/single are untouched. */
/* ==================================================================== */
.iema-projects--carousel {
	--iema-gap: 40px;
	--iema-peek: 56px;
	background-color: #f5f5f5;
}

/* Header: heading on the left, controls on the right ----------------- */
.iema-projects--carousel .iema-projects__head {
	max-width: none;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 40px;
}

.iema-projects--carousel .iema-projects__head-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.iema-projects--carousel .iema-projects__controls {
	display: flex;
	align-items: center;
	gap: 40px;
	flex: 0 0 auto;
}

.iema-projects--carousel .iema-projects__nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.iema-projects--carousel .iema-projects__nav--foot {
	display: none;
}

/* Round prev/next arrow buttons ------------------------------------- */
.iema-projects__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #002147;
	border-radius: 50%;
	background-color: transparent;
	color: #002147;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

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

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

.iema-projects__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Scrollable track -------------------------------------------------- */
.iema-projects--carousel .iema-projects__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

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

.iema-projects--carousel .iema-projects__viewport::-webkit-scrollbar {
	display: none;
}

.iema-projects--carousel .iema-projects__track {
	display: flex;
	gap: var(--iema-gap);
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.iema-projects--carousel .iema-projects__slide {
	flex: 0 0 calc((100% - 2 * var(--iema-gap) - var(--iema-peek)) / 3);
	margin: 0;
	scroll-snap-align: start;
}

/* Slide card: rounded image + title (+ mobile "Learn More") --------- */
.iema-project-slide {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #002147;
	text-decoration: none;
}

.iema-project-slide__figure {
	display: block;
	position: relative;
	aspect-ratio: 400 / 320;
	overflow: hidden;
	border-radius: 12px;
	background-color: #e9e9e9;
}

.iema-project-slide__figure img {
	transition: transform 0.50s ease;
}

.iema-project-slide:hover .iema-project-slide__figure img,
.iema-project-slide:focus-visible .iema-project-slide__figure img {
	transform: scale(1.1);
}

.iema-project-slide:focus-visible {
	outline: none;
}

.iema-project-slide:focus-visible .iema-project-slide__figure {
	box-shadow: 0 0 0 2px #c1d82a, 0 12px 32px rgba(0, 0, 0, 0.15);
}

.iema-project-slide__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.iema-project-slide__title {
	margin: 0;
	color: #002147;
	font-weight: 700;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 0;
}

/* "Learn More" button is mobile-only. */
.iema-projects--carousel .iema-project-slide__more {
	display: none;
	align-self: flex-start;
}

/* Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.iema-projects--carousel .iema-projects__slide {
		flex: 0 0 calc((100% - var(--iema-gap) - var(--iema-peek)) / 2);
	}
}

/* Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
	.iema-projects--carousel {
		--iema-gap: 16px;
		--iema-peek: 0px;
	}

	.iema-projects--carousel .iema-projects__head {
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 40px;
	}

	.iema-projects--carousel .iema-projects__nav--head {
		display: none;
	}

	.iema-projects--carousel .iema-projects__slide {
		flex: 0 0 100%;
	}

	.iema-projects--carousel .iema-project-slide {
		gap: 24px;
	}

	.iema-projects--carousel .iema-project-slide__more {
		display: inline-flex;
		margin-top: 24px;
	}

	.iema-projects--carousel .iema-projects__nav--foot {
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-top: 40px;
	}

	.iema-project-slide__figure {
		aspect-ratio: 382 / 320;
	}
}