/**
 * IEMA "Feature" section styles.
 *
 * Desktop: a full-bleed background image with a white content card
 * floated over it, aligned left (`--left`) or right (`--right`) and
 * vertically centred. Mobile: the card stacks above the image on a light
 * band, both rounded. Reused for About Us "Our History" (left) and "Our
 * Team" (right). Uses the shared IEMA tokens.
 */

.iema-feature {
	position: relative;
	background-color: #f5f5f5;
	color: #002147;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

/* Full-bleed background image (desktop). */
.iema-feature__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

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

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

/* Card layer. */
.iema-feature__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	min-height: 600px;
	padding: 134px 80px;
	display: flex;
	align-items: center;
}

.iema-feature--left .iema-feature__inner {
	justify-content: flex-start;
}

.iema-feature--right .iema-feature__inner {
	justify-content: flex-end;
}

.iema-feature__card {
	box-sizing: border-box;
	width: 620px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 38px;
	border-radius: 16px;
	background-color: #ffffff;
	background: var(--Neutral-White, #FFF);
}

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

.iema-feature__subtitle {
	margin: 0;
	color: #767676;
	font-weight: 700;
	font-style: italic;
	font-size: 16px;
	line-height: 140%;
}

.iema-feature__text {
	color: #767676;
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
}

.iema-feature__text p {
	margin: 0 0 16px;
}

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

.iema-feature__cta {
	align-self: flex-start;
	margin-top: 4px;
}

/* Mobile / tablet: stack card over image ---------------------------- */
@media (max-width: 1024px) {
	.iema-feature__media {
		position: static;
		margin: 0 24px 40px;
		border-radius: 16px;
		aspect-ratio: 16 / 9;
	}

	.iema-feature__inner {
		position: static;
		display: block;
		min-height: 0;
		padding: 40px 24px 24px;
	}

	.iema-feature__card {
		width: 100%;
		padding: 32px 28px;
		box-shadow: 0 10px 30px rgba(0, 33, 71, 0.08);
	}

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

/* ================================ Left-focused image (opt-in) ======== */
/* Add the class `iema-feature--focus-left` to a Feature block (editor:
   Advanced > Additional CSS class) when the subject sits in the left of a
   wide photo. On mobile the media box is 16/9 while the About Us team photo
   is 1500x800 (1.875:1) — almost the same ratio, so `cover` barely cropped
   and simply shrank everyone to thumbnail size with empty wall to the
   right. A square box crops to roughly the leftmost 53% of the frame
   (1 / 1.875), which is where the people are, so they fill the space. */
@media (max-width: 1024px) {
	.iema-feature--focus-left .iema-feature__media {
		aspect-ratio: 1 / 1;
	}

	.iema-feature--focus-left .iema-feature__image {
		object-position: left center;
	}
}