/*** Module: Outcome Marquee ***/

.module.outcome-marquee {
	background: var(--blue-gradient);
	overflow-x: clip;
	position: relative;
}

/* Multi: pin a 100vh stage; the .steps below it supply the scroll distance. */
.module.outcome-marquee.has-multi .sticky {
	height: 100vh;
	position: sticky;
	top: 0;
}

.module.outcome-marquee.has-multi .panels {
	display: grid;
	height: 100%;
}

/* Multi stacks every outcome in one cell and crossfades the active one in. */
.module.outcome-marquee.has-multi .outcome {
	grid-area: 1 / 1;
	height: 100%;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.module.outcome-marquee.has-multi .outcome.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Invisible scroll-distance targets, pulled up to overlap the pinned stage. */
.module.outcome-marquee .steps {
	margin-top: -100vh;
	pointer-events: none;
}

.module.outcome-marquee .step {
	height: 100vh;
}

.module.outcome-marquee .outcome {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 840px;
	overflow: clip;
	padding-block: var(--module-spacing-medium);
	position: relative;
}

/* Overrides the .media 16/9 contract so the bg fills the outcome. */
.module.outcome-marquee .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
	z-index: 0;
}

/* Scrim lives on .media so it tracks the image; .container z-index 2 still wins. */
.module.outcome-marquee .media::after {
	background: linear-gradient(208deg, transparent 31%, color-mix(in srgb, var(--black) 75%, transparent) 83%);
	content: '';
	inset: 0;
	position: absolute;
}

.module.outcome-marquee .container {
	gap: var(--text-spacing-small);
	z-index: 2;
}

.module.outcome-marquee .eyebrow,
.module.outcome-marquee .heading-1 {
	color: var(--off-white);
	grid-column: 1 / span 7;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {

	.module.outcome-marquee.has-multi .outcome {
		transition: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* Un-pin: the outcomes stack and each reads as a full panel (no scroll hijack). */
	.module.outcome-marquee.has-multi .sticky {
		height: auto;
		position: static;
	}

	.module.outcome-marquee.has-multi .panels {
		display: block;
	}

	.module.outcome-marquee.has-multi .outcome {
		height: auto;
		min-height: 640px;
		opacity: 1;
		pointer-events: auto;
	}

	.module.outcome-marquee .steps {
		display: none;
	}

	.module.outcome-marquee .outcome {
		min-height: 640px;
	}

	.module.outcome-marquee .eyebrow,
	.module.outcome-marquee .heading-1 {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.outcome-marquee .container {
		gap: var(--text-spacing-xsmall);
	}

	.module.outcome-marquee.has-multi .outcome,
	.module.outcome-marquee .outcome {
		min-height: 540px;
	}

}