/**
 * Layout: Why GagaMuller (Figma 596:1145, 1440 × 720, #101010).
 *
 * Left: eyebrow, heading 61/64, text 21/32 #c7c7cc (max 560), wide CTA.
 * Right: image 647 × 644, rounded on the left, bleeding to the page edge,
 * with a purple fade at the bottom.
 *
 * @package GagaMuller
 */

.gm-why {
	overflow-x: clip;
	padding-block: clamp(3rem, 2rem + 4.3vw, 4.5rem);
}

.gm-why__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-40);
	align-items: center;
}

.gm-why__content {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-24);
	align-items: flex-start;
}

.gm-why__title {
	margin: var(--gm-space-24) 0 0;
	color: var(--gm-text);
}

.gm-why__body {
	display: grid;
	gap: var(--gm-space-14);
	max-width: 35rem; /* 560 */
	color: var(--gm-color-on-dark-strong);
	line-height: 1.52; /* 21/32 */
}

.gm-why__body p {
	margin: 0;
}

.gm-why__cta {
	max-width: 100%;
	margin: var(--gm-space-16) 0 0;
}

.gm-why__cta .gm-btn {
	gap: var(--gm-space-24);
}

.gm-why__media {
	position: relative;
	aspect-ratio: 4 / 3.4;       /* v0.7.3: calmer on tablet and mobile */
	overflow: hidden;
	border-radius: var(--gm-radius-feature);
	background: var(--gm-color-nav-pill);
}

.gm-why__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(114 21 244 / 0) 45%, rgb(114 21 244 / 0.85) 100%);
	content: "";
	pointer-events: none;
}

.gm-why__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--gm-ease), filter 900ms var(--gm-ease);
	will-change: transform;
}

@media (min-width: 1024px) {
	.gm-why__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); /* 448 + bleed ≈ 610 visible (Figma 647 + bleed ≈ 807) */
		gap: var(--gm-space-48, 48px);
	}

	/* Bleed to the viewport's right edge, square on the outer side. */
	.gm-why__media {
		aspect-ratio: auto;
		height: clamp(380px, 35vw, 500px);
		margin-inline-end: calc(-1 * max(var(--gm-gutter), (100vw - var(--gm-container)) / 2));
		border-radius: var(--gm-radius-feature) 0 0 var(--gm-radius-feature);
	}
}

/* Hover: slow, gentle zoom and a touch more colour (v0.7.5). */
.gm-why__media::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgb(114 21 244 / 0.5) 0%, rgb(114 21 244 / 0.18) 45%, rgb(114 21 244 / 0) 80%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms var(--gm-ease);
}

@media (hover: hover) {
	.gm-why__media:hover::before {
		opacity: 1;
	}

	.gm-why__media:hover .gm-why__image {
		filter: saturate(1.1) brightness(1.05);
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-why__image {
		transition: none;
	}

	.gm-why__media:hover .gm-why__image {
		transform: none;
	}
}