/*
 * NEMRA Blocks — Mission Cards widget (V2 "What we stand for." navy band,
 * Figma 571:22549). Full-bleed navy wrapper with 120px vertical padding and
 * 64px gutters; the light gap above comes from the Elementor container.
 */

.nemra-mission-cards {
	width: 100%;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
}

.nemra-mission-cards__band {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 120px 64px;
	box-sizing: border-box;
	background: var(--nemra-blue-dark, #042a48);
	color: var(--nemra-light, #fcfdfd);
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* Header — divider, eyebrow, serif heading, wide body */
.nemra-mission-cards__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(252, 253, 253, 0.16);
}

.nemra-mission-cards__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-mission-cards__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nemra-blue, #2173b3);
}

.nemra-mission-cards__eyebrow-dot--lg { width: 9px; height: 9px; }

.nemra-mission-cards__heading {
	margin: 0;
	max-width: 680px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 48px;
	line-height: 1.2;
	letter-spacing: -1.5px;
	font-weight: 500;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-mission-cards__heading-accent {
	color: var(--nemra-blue-vibrant, #0074cf);
}

.nemra-mission-cards__body {
	margin: 0;
	max-width: 991px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(252, 253, 253, 0.88);
}

/* Feature items — 2-up row, green icon chip + bold title + muted body */
.nemra-mission-cards__features {
	display: flex;
	gap: 30px;
}

.nemra-mission-cards__feature {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nemra-mission-cards__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 8px;
	background: var(--nemra-green, #4c7f39);
	color: var(--nemra-light, #fcfdfd);
	font-size: 22px;
}

.nemra-mission-cards__feature-icon svg { width: 26px; height: 26px; fill: currentColor; }
.nemra-mission-cards__feature-icon svg.nemra-icon { fill: none; stroke: currentColor; }

.nemra-mission-cards__feature-title {
	margin: 0;
	/* Explicit family — heading tags otherwise inherit the theme serif. */
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-mission-cards__feature-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(252, 253, 253, 0.56);
}

/* Sponsors — centered label + white logo row with navy edge fades */
.nemra-mission-cards__sponsors {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.nemra-mission-cards__sponsors-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-size: 18px;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-mission-cards__logos-wrap {
	position: relative;
	width: 100%;
}

.nemra-mission-cards__logos-wrap::before,
.nemra-mission-cards__logos-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;
	z-index: 1;
	pointer-events: none;
}

.nemra-mission-cards__logos-wrap::before {
	left: 0;
	background: linear-gradient(to right, var(--nemra-blue-dark, #042a48), rgba(4, 42, 72, 0));
}

.nemra-mission-cards__logos-wrap::after {
	right: 0;
	background: linear-gradient(to left, var(--nemra-blue-dark, #042a48), rgba(4, 42, 72, 0));
}

.nemra-mission-cards__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.nemra-mission-cards__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

	/* Scoped through the li.nemra-mission-cards__logo wrapper on purpose: Elementor's
	 * `.elementor img { max-width: 100% }` is (0,1,1) and silently beat the
	 * bare class (0,1,0), so this cap never applied. A wide wordmark then
	 * sized off max-height alone and pushed the row into a second line. */
.nemra-mission-cards__logo .nemra-mission-cards__logo-img {
	display: block;
	max-height: 48px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.nemra-mission-cards__logo-fallback {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgba(252, 253, 253, 0.55);
	white-space: nowrap;
}

@media (max-width: 991px) {
	.nemra-mission-cards__band {
		/*
		 * The comp (797:22477) runs this band full bleed from the section's
		 * top edge with 64/20 inside it, the same shape as community's. The
		 * container carries nothing here; 80/24 plus a padded container put
		 * the eyebrow at 144/44 against the comp's 80/20.
		 */
		padding: 64px 20px;
		gap: 48px;
	}


	.nemra-mission-cards__features { flex-direction: column; gap: 32px; }

	.nemra-mission-cards__sponsors-eyebrow { font-size: 14px; }

	.nemra-mission-cards__logos { gap: 28px; }
}

/* Mobile mode type - appended at the END of the file so it outranks the
 * rules above at equal specificity (same pattern as events-featured).
 * Mobile comp 797:22482: heading binds Heading/H2 - 36/-1.5 in the mobile
 * mode. */
@media (max-width: 991px) {
	.nemra-mission-cards .nemra-mission-cards__heading {
		font-size: var(--nemra-t-h2-size, 48px);
		line-height: var(--nemra-t-h2-lh, 1.2);
		letter-spacing: var(--nemra-t-h2-ls, -1.5px);
	}

}