/**
 * Steps style: Pinned Photo
 *
 * A centered intro, then a photo on five columns that breaks 42px past the container and pins
 * while a chain of figures scrolls past it. Only one frame of the stack is painted at a time —
 * JazzyHighlight lights the one belonging to the step in view, and the rule that hides the
 * others is gated on something being lit, so with no JS the first frame stands.
 */

/* The comp sets this one in the body font at the display size — the figures below it are
   Poppins too, and the band reads as one voice. Everywhere else a heading-2 is the display
   cut, so this is the exception rather than a change to the token — 84/84 Poppins
   SemiBold. */
.module.steps.style-pinned .intro > :is(h1, h2, h3) {
	font-family: var(--body-font);
	font-weight: 600;
	letter-spacing: -0.0179em;
}

.module.steps.style-pinned .container {
	align-items: start;
	row-gap: var(--module-spacing-medium);
}

/** Intro **/

.module.steps.style-pinned .intro {
	grid-column: 1 / -1;
	row-gap: var(--text-spacing-small);
	text-align: center;
}

.module.steps.style-pinned .intro > .eyebrow {
	grid-column: 1 / -1;
	justify-content: center;
	margin-block: 0;
}

.module.steps.style-pinned .intro > .heading-2 {
	grid-column: 2 / span 10;
	margin-block: 0;
}

.module.steps.style-pinned .intro > .content {
	grid-column: 3 / span 8;
}

.module.steps.style-pinned .intro > .content > * {
	margin-block: 0;
}

/** Photos **/

.module.steps.style-pinned .photos {
	align-self: start;
	grid-column: 1 / span 5;
	grid-row: 2;
	margin-left: var(--container-breakout);
	position: sticky;
	top: calc(var(--sticky-nav-height) + var(--text-spacing-large));
}

.module.steps.style-pinned .stack {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.steps.style-pinned .stack > li {
	aspect-ratio: 517 / 389.378;
	border-radius: 10px;
	grid-column: 1;
	grid-row: 1;
}

.module.steps.style-pinned .stack > li + li {
	opacity: 0;
}

.module.steps.style-pinned .stack:has(a.active) > li {
	opacity: 0;
}

.module.steps.style-pinned .stack > li:has(a.active) {
	opacity: 1;
}

.module.steps.style-pinned .sunray {
	color: var(--pollen);
	left: -45px;
	pointer-events: none;
	position: absolute;
	top: -45px;
	width: 90px;
	z-index: 1;
}

.module.steps.style-pinned .sunray svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

/** Chain **/

.module.steps.style-pinned .chain {
	--connector-gap: 100px;
	display: flex;
	flex-direction: column;
	gap: var(--connector-gap);
	grid-column: 6 / -1;
	grid-row: 2;
	list-style: none;
	margin: 0;
	padding: var(--module-spacing-large) 0 var(--module-spacing-medium) var(--gap);
}

.module.steps.style-pinned .chain > li {
	display: flex;
	flex-direction: column;
	gap: var(--connector-gap);
	text-align: center;
}

.module.steps.style-pinned .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.steps.style-pinned .text > *,
.module.steps.style-pinned .text p {
	margin-block: 0;
}

.module.steps.style-pinned .connector {
	align-self: center;
	background: var(--aqua);
	flex: none;
	height: 120px;
	position: relative;
	width: 3px;
}

.module.steps.style-pinned .connector::after {
	border-bottom: 3px solid var(--aqua);
	border-right: 3px solid var(--aqua);
	bottom: 3px;
	content: '';
	height: 12px;
	left: 50%;
	position: absolute;
	rotate: 45deg;
	translate: -50% 0;
	width: 12px;
}

@media (prefers-reduced-motion: no-preference) {

	.module.steps.style-pinned .stack > li {
		transition: opacity 0.6s ease-in-out;
	}

}

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

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

	/* The lockup runs from the left here rather than centring: on the narrower measure a centred
	   headline sits off the column the photograph and chain below it start on. */
	.module.steps.style-pinned .intro {
		text-align: left;
	}

	.module.steps.style-pinned .intro > .eyebrow {
		justify-content: flex-start;
	}

	.module.steps.style-pinned .intro > .heading-2,
	.module.steps.style-pinned .intro > .content {
		grid-column: 1 / -1;
	}

	/* Still two columns here: the photograph holds five and the chain the seven opposite, which
	   is the 40/60 the comp keeps. What goes is the breakout — there is no screen to spare —
	   and the run of padding the taller desktop column needs. It stacks at 650. */
	.module.steps.style-pinned .photos {
		margin-inline: 0;
	}

	/* A page carrying the bar parks the photograph right under it at this width — the bar's own
	   height is already in the offset, but not the air the comp leaves beneath it. The sunray
	   rides inside .photos, so it comes down with the crop. */
	:root:has(.module.sticky-navigation.style-bar) .module.steps.style-pinned .photos {
		top: calc(var(--sticky-nav-height) + var(--text-spacing-large) + 80px);
	}

	.module.steps.style-pinned .chain {
		--connector-gap: 64px;
		padding: 0 0 0 var(--gap);
	}

}

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

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

	/* One column at last: the photograph unpins and the chain runs under it. */
	.module.steps.style-pinned .photos {
		grid-column: 1 / -1;
		grid-row: auto;
		position: static;
	}

	.module.steps.style-pinned .chain {
		--connector-gap: 32px;
		grid-column: 1 / -1;
		grid-row: auto;
		padding: 0;
	}

	/* The lockup centres again: stacked, there is no column of photograph beside it for a
	   left-aligned headline to start on. */
	.module.steps.style-pinned .intro {
		text-align: center;
	}

	.module.steps.style-pinned .intro > .eyebrow {
		justify-content: center;
	}

	/* The mark hangs off the photograph's corner, where the screen's own edge is at this width. */
	.module.steps.style-pinned .sunray {
		display: none;
	}

	.module.steps.style-pinned .connector {
		height: 72px;
	}

}