/* What If UX — sticky title + scroll-snap results
   Overlay on Silverstripe CLM markup. Theme/layout styles come from staging.
*/

html {
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

.whatif {
	/* Shorter snap distance = less scroll to lock onto the next result */
	--whatif-snap-height: 55vh;
	--whatif-snap-height: 55dvh;
}

/* Theme uses flex-vertical-center; sticky needs a tall containing block */
.clm-container.whatif.flex-vertical-center,
.clm-container.whatif {
	align-items: flex-start;
}

/* Sticky “WHAT IF...” — stays in view while results snap past */
.whatif__title {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	align-self: flex-start;
}

/* One result per snap */
.whatif__result {
	min-height: var(--whatif-snap-height);
	display: flex;
	align-items: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.whatif__cta {
	scroll-snap-align: end;
}

@media (max-width: 767px) {
	.whatif__title {
		height: auto;
		min-height: 30vh;
		padding-block: 2rem 0;
	}

	.whatif {
		--whatif-snap-height: 45vh;
		--whatif-snap-height: 45dvh;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-snap-type: none;
		scroll-behavior: auto;
	}

	.whatif__title {
		position: static;
		height: auto;
		padding-block: 2rem 1rem;
	}

	.whatif__result {
		min-height: auto;
		padding-block: 1.25rem;
		scroll-snap-align: none;
	}
}