/* Mission — editorial 5/6 split with two-tile collage. */

.section--mission { background: var(--c-bg); }

.mission__grid {
	display: grid;
	gap: var(--sp-md);
}
@media (min-width: 900px) {
	.mission__grid { grid-template-columns: 5fr 6fr; align-items: center; gap: var(--sp-lg); }
}

.mission__intro p { color: var(--c-on-surface-var); font-size: var(--fs-body-lg); }

.mission__collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-xs);
}

.mission__tile { margin: 0; }
.mission__tile--0 { padding-top: var(--sp-md); }

.mission__image-wrap { aspect-ratio: 3 / 4; overflow: hidden; }
.mission__image {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--dur-slow) var(--ease);
}
.mission__image:hover { filter: grayscale(0); }

.mission__image-wrap--empty {
	background:
		linear-gradient(135deg, var(--c-surface-cont) 0%, var(--c-surface-variant) 100%);
	position: relative;
}
.mission__image-wrap--empty::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2rem; height: 2rem;
	transform: translate(-50%, -50%);
	border: 1px solid var(--c-outline-variant);
	background:
		linear-gradient(135deg, transparent 45%, var(--c-outline-variant) 45%, var(--c-outline-variant) 55%, transparent 55%),
		linear-gradient(45deg, transparent 45%, var(--c-outline-variant) 45%, var(--c-outline-variant) 55%, transparent 55%);
	opacity: 0.5;
}

.mission__tile-caption {
	background: var(--c-surface-cont);
	padding: var(--sp-sm);
	display: flex;
	flex-direction: column;
	gap: var(--sp-unit);
}
.mission__tile-number {
	font-family: var(--ff-display);
	font-size: var(--fs-h-md);
	color: var(--c-on-surface);
}
.mission__tile-label {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-primary);
}