/**
 * Module: Our Mission Section.
 * Loaded only when an `our_mission_section` layout is present.
 * Section + vision-block background colours come from ACF (inline styles).
 */
.mission-section .mission-media {
	position: relative;
}

.mission-section .mission-image {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* Teal "Vision Statement" card overlapping the image (design). */
.mission-section .mission-vision {
	color: #fff;
	border-radius: 10px;
	padding: 1.75rem;
	background-color: var(--fuchs-teal, #118F91);
}

.mission-section .mission-vision-title {
	color: #fff;
	font-size: 1.35rem;
	font-weight: var(--fuchs-fw-semibold, 600);
	margin-bottom: 0.75rem;
}
.mission-section .mission-vision-desc {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
}

.mission-section .mission-desc {
	font-size: 1.05rem;
}

/* Overlap the vision card onto the image on larger screens. */
@media (min-width: 768px) {
	.mission-section .mission-media {
		padding-bottom: 3rem;
		padding-right: 3rem;
	}
	.mission-section .mission-vision {
		position: absolute;
		right: 0;
		bottom: 0;
		max-width: 320px;
		box-shadow: 0 18px 40px rgba(15, 31, 65, 0.18);
	}
}