/**
 * Layout: Vision & Mission — two statement cards.
 *
 * Header: assets/css/layout.css (.gm-section-header). Two equal cards:
 * vision on a purple gradient, mission on black (optionally over a darkened
 * photo). Large statements in the heading font; highlighted words in light
 * purple. Stacked on phones.
 *
 * @package GagaMuller
 */

.gm-vm__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-24);
}

@media (min-width: 900px) {
	.gm-vm__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gm-vm__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gm-space-40);
	min-height: clamp(18rem, 14rem + 12vw, 25rem);
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-radius-feature);
	color: var(--gm-color-white);
}

.gm-vm__card--vision {
	background:
		radial-gradient(circle at 85% 15%, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0) 45%),
		linear-gradient(145deg, var(--gm-color-purple) 0%, rgb(80 15 171) 100%);
}

.gm-vm__card--mission {
	background: var(--gm-color-black);
}

.gm-vm__media {
	position: absolute;
	z-index: -1;
	inset: 0;
}

.gm-vm__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(16 16 16 / 0.55) 0%, rgb(16 16 16 / 0.85) 70%, var(--gm-color-black) 100%);
	content: "";
}

.gm-vm__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Small pill label, top left. */
.gm-vm__label {
	align-self: flex-start;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: var(--gm-radius-pill);
	color: var(--gm-color-white);
	font-family: var(--gm-font-body);
	font-size: 0.75rem;
	font-weight: var(--gm-weight-bold);
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.gm-vm__text {
	margin: 0;
	max-width: 32rem;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-weight: var(--gm-weight-bold);
	line-height: 1.12;
}

.gm-vm__card--vision .gm-vm__text {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

.gm-vm__card--mission .gm-vm__text {
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
	line-height: 1.25;
}

.gm-vm__text .gm-highlight {
	color: var(--gm-color-light-purple);
}

.gm-vm__card--vision .gm-vm__text .gm-highlight {
	color: rgb(255 255 255 / 0.7);
}