/**
 * Steps style: Photo Carousel
 *
 * A headline lockup running the container's width with its pager standing off the bottom
 * right, then a card track that starts on the container's left edge and runs off the right of
 * the screen. The photo behind it drops below the cards' top edge and
 * outlives them at the bottom, so it is a grid item sharing the track's row rather than a
 * background on the section.
 */

.module.steps.style-carousel {
	--backdrop-tail: 200px;
	overflow-x: clip;
	padding-bottom: var(--backdrop-tail);
}

.module.steps.style-carousel .container {
	row-gap: var(--text-spacing-xxlarge);
}

/* Ten columns, which is the 990 the lockup measures in the file at 1440 — the container is
   1196 there and here, and the gap is the one the design was drawn on. */
.module.steps.style-carousel .intro {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 10;
	grid-row: 1;
}

.module.steps.style-carousel .intro > * {
	margin: 0;
}

.module.steps.style-carousel .intro > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.steps.style-carousel .intro > * + .disclaimer {
	margin-top: var(--text-spacing-small);
}

.module.steps.style-carousel .intro .content > :first-child {
	margin-top: 0;
}

.module.steps.style-carousel .intro .content > :last-child {
	margin-bottom: 0;
}

/* End, not center: the pager sits on the last line of the intro, so it holds that baseline
   however many lines the heading and the copy above it take. */
.module.steps.style-carousel .arrows {
	align-self: end;
	display: flex;
	gap: 12px;
	grid-column: 11 / -1;
	grid-row: 1;
	justify-content: flex-end;
	margin-right: var(--container-breakout);
}

.module.steps.style-carousel:has(.jazzy-static) .arrows {
	display: none;
}

/** Track **/

.module.steps.style-carousel .container > :is(.cards, .jazzy-carousel-wrapper) {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-right: var(--viewport-edge);
}

.module.steps.style-carousel .container > .cards.jazzy-static {
	margin-right: 0;
}

.module.steps.style-carousel .cards {
	display: flex;
	gap: var(--text-spacing-xlarge);
	list-style: none;
	margin-block: 0;
	padding: 0;
	position: relative;
}

.module.steps.style-carousel .cards > li {
	display: flex;
	flex: 1;
	flex-shrink: 0;
}

.module.steps.style-carousel .card {
	flex: 1;
}

/** Backdrop **/

.module.steps.style-carousel .backdrop {
	aspect-ratio: auto;
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 40px var(--viewport-edge) calc(var(--backdrop-tail) * -1);
	width: 100vw;
}

/* The backdrop runs to the module's bottom edge, so a run ending here has no open ground for
   the wash to trail into. Nested :has() is invalid — the photo is matched as a descendant. */
.page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(> .module.steps.style-carousel:last-child .backdrop) {
	padding-bottom: 0;
}

/** Cards **/

/* The pill's 1.8px tracking lands after the digit; the same amount ahead of it puts a single
   numeral back on the circle's optical centre. */
.module.steps.style-carousel .card .pill {
	padding-inline: 1.8px 0;
	width: 32px;
}

/* Under a programme the chip is the palette's mark colour rather than the warm fill the global
   pill takes, and the figure's ink follows it: reversed out of a dark mark, charcoal on the warm
   fill a programme that names no mark falls back to. */
[data-brand] .module.steps.style-carousel .card .pill,
.module.steps.style-carousel[data-brand] .card .pill {
	background: var(--program-mid, var(--tangerine));
	color: var(--program-mid-ink, var(--charcoal));
}

.module.steps.style-carousel .card .content {
	padding-bottom: var(--text-spacing-medium);
}

.module.steps.style-carousel .card .text {
	gap: 4px;
}

.module.steps.style-carousel .card:hover .content {
	color: inherit;
}

.module.steps.style-carousel .card:hover .media img {
	transform: none;
}

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

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

	.module.steps.style-carousel {
		--backdrop-tail: 120px;
	}

	/* Two columns are under 100px here and the pager is 140, so it takes a third. */
	.module.steps.style-carousel .intro {
		grid-column: 1 / span 8;
	}

	/* Centred on the lockup rather than sat on its last line: the pager has a third of the row
	   here, so it reads as the head's own control rather than as a line under the copy. */
	.module.steps.style-carousel .arrows {
		align-self: center;
		grid-column: 9 / -1;
	}

	/* A lockup carrying copy as well as its heading has nothing to spare for a column beside it,
	   so it takes the container and the pager drops under the last line of that copy — the
	   disclaimer where there is one — on the same left edge as everything above it. */
	.module.steps.style-carousel:has(.intro :is(.content, .disclaimer)) .intro {
		grid-column: 1 / -1;
	}

	.module.steps.style-carousel .intro > * + .disclaimer {
		margin-top: var(--text-spacing-xsmall);
	}

	/* The container's row gap carries the pager away from the disclaimer above it; this is the
	   difference back to the step the pair wants. */
	.module.steps.style-carousel:has(.intro :is(.content, .disclaimer)) .arrows {
		align-self: start;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		margin-right: 0;
		margin-top: calc(var(--text-spacing-medium) - var(--text-spacing-xxlarge));
	}

	.module.steps.style-carousel:has(.intro :is(.content, .disclaimer)) .container > :is(.cards, .jazzy-carousel-wrapper),
	.module.steps.style-carousel:has(.intro :is(.content, .disclaimer)) .backdrop {
		grid-row: 3;
	}

}

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

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

	.module.steps.style-carousel {
		--backdrop-tail: 80px;
	}

	.module.steps.style-carousel .container {
		row-gap: var(--text-spacing-medium);
	}

	.module.steps.style-carousel .intro {
		grid-column: 1 / -1;
	}

	.module.steps.style-carousel .intro > * + .disclaimer {
		margin-top: var(--text-spacing-xxsmall);
	}

	.module.steps.style-carousel .arrows {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		margin-right: 0;
	}

	/* The rung above pulls the pager back against a larger row gap than this one carries, and it
	   names the disclaimer — so this has to name it too to answer. */
	.module.steps.style-carousel:has(.intro :is(.content, .disclaimer)) .arrows {
		margin-top: 0;
	}

	.module.steps.style-carousel .container > :is(.cards, .jazzy-carousel-wrapper),
	.module.steps.style-carousel .backdrop {
		grid-row: 3;
	}

}