/*
 * About mission and vision (patterns/about-mission.php). Values from the old
 * about-mission-vision-section.tsx.
 *
 * Below lg (and always in the editor) the two panels are stacked cards. From
 * lg on the front end they share one pinned stage: the mission panel's cloud
 * and mountain are the stage layers, the vision panel's copies are hidden, and
 * about-mission.js scrubs from mission to vision.
 */
.sp-about-mission {
	position: relative;
	background: var(--wp--preset--color--sand);
}
.sp-about-mission .sp-about-mission__stage {
	position: relative;
	display: grid;
	overflow: hidden;
}

/* ---------- Cards (mobile, editor) ---------- */
.sp-about-mission .sp-about-mission__panel {
	position: relative;
	min-height: 560px;
	overflow: hidden;
}
.sp-about-mission .sp-about-mission__cloud,
.sp-about-mission .sp-about-mission__mountain,
.sp-about-mission .sp-about-mission__mountain-media,
.sp-about-mission .sp-about-mission__field {
	position: absolute;
	inset: 0;
	margin: 0;
}
.sp-about-mission .sp-about-mission__cloud img,
.sp-about-mission .sp-about-mission__mountain-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.sp-about-mission .sp-about-mission__field img,
.sp-about-mission .sp-about-mission__field svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
}
.sp-about-mission .sp-about-mission__field--blue {
	z-index: 10;
	top: 16%;
	opacity: 0.9;
}
.sp-about-mission .sp-about-mission__mountain { z-index: 20; }
.sp-about-mission .sp-about-mission__yellow {
	position: absolute;
	inset: 0;
	z-index: 30;
}
.sp-about-mission .sp-about-mission__copy {
	position: relative;
	z-index: 40;
	padding: 32px 16px;
}
.sp-about-mission .sp-about-mission__label.sp-about-mission__label {
	margin-bottom: 16px;
	font-size: var(--wp--preset--font-size--2-x-small);
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent);
}
.sp-about-mission .sp-about-mission__title {
	font-size: 2.5rem;
	line-height: 0.96;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--black-light);
}
.sp-about-mission .sp-about-mission__note {
	position: absolute;
	z-index: 50;
	max-width: 290px;
	padding: 20px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.sp-about-mission .sp-about-mission__panel--mission .sp-about-mission__note {
	bottom: 16px;
	left: 16px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}
.sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__note {
	top: 136px;
	right: 16px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

/* ---------- Pinned stage (lg, front end) ---------- */
@media (min-width: 1024px) {
	body:not(.editor-styles-wrapper) .sp-about-mission { height: 360vh; }
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__stage {
		position: sticky;
		top: 0;
		display: block;
		height: 100svh;
		min-height: 760px;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel {
		position: static;
		min-height: 0;
		overflow: visible;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__cloud,
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__mountain {
		display: none;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__cloud {
		z-index: 0;
		transform-origin: 50% 50%;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__cloud::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent) 100%);
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__field--blue {
		top: 0;
		opacity: 0;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__mountain { transform-origin: 50% 100%; }
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__mountain-media {
		right: -6%;
		left: -6%;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__copy {
		position: absolute;
		top: 40px;
		left: max(var(--sp-gutter), calc((100% - var(--sp-container)) / 2 + var(--sp-gutter)));
		max-width: 560px;
		padding: 0;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__copy,
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__note {
		opacity: 0;
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__title {
		font-size: clamp(3.25rem, 5vw, 4.6rem);
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel .sp-about-mission__note {
		top: 76px;
		right: 0;
		bottom: auto;
		left: auto;
		max-width: 473px;
		padding: 24px;
		font-size: var(--wp--preset--font-size--x-large);
	}
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--mission .sp-about-mission__note { z-index: 10; }
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel--vision .sp-about-mission__note {
		z-index: 40;
		right: max(0px, calc((100% - var(--sp-container)) / 2));
	}
}
@media (min-width: 1280px) {
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__copy { top: 48px; }
	body:not(.editor-styles-wrapper) .sp-about-mission .sp-about-mission__panel .sp-about-mission__note { padding: 32px; }
}