/**
 * Steps style: Photo Slider
 *
 * A headline lockup and a pager on a dark fill, then a track of wide photo cards that starts
 * on the container's left edge and runs off the right of the screen. The cards outlive the
 * fill at the bottom, so the fill is a pseudo-element stopped short of the section rather
 * than a background on it. The card itself is the global .card.feature.
 */

.module.steps.style-phases {
	--fill-tail: 80px;
	isolation: isolate;
	overflow-x: clip;
	padding-top: var(--module-spacing-large);
	position: relative;
	--focus-ring: var(--white); /* Dark band: charcoal on charcoal is 1:1 */
	--heading-color: var(--white);
}

/* Not --charcoal: a programme's deep band and its body copy are two different colours, and
   reading the text colour here painted every IBT paragraph the colour of the band. */
.module.steps.style-phases::before {
	background: var(--program-dark, var(--charcoal));
	content: '';
	inset: 0 0 var(--fill-tail);
	position: absolute;
	z-index: -1;
}

.module.steps.style-phases .watermark {
	bottom: var(--fill-tail);
	left: 40%;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.module.steps.style-phases .watermark svg {
	/* Sized and placed so the rays land exactly where the plain mark's did: this cut draws the same
	   sunburst 1.19x larger inside a 783-wide window that crops it, and adds 242 units of tail
	   below. Solved from the two files' own coordinates — the drawn mark spans 3.75-986.25 of 990
	   there and 9.46-1176.55 of 783 here — so matching its width and left edge gives these two. */
	color: var(--white);
	display: block;
	left: 10.22%;
	max-width: none;
	opacity: .05;
	position: absolute;
	top: -3%;
	width: 90.95%;
}

/** Headline **/

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

.module.steps.style-phases .intro {
	align-items: flex-start;
	color: var(--white);
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 8;
	grid-row: 1;
}

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

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

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

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

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

/** Pager **/

/* On the headline's baseline rather than its middle, and out to the same edge every other
   carousel's pager reaches — `--container-breakout-full` is the house reach for that. The 8px is
   optical: the buttons are round, so their box sits low against a line of type. */
.module.steps.style-phases .arrows {
	align-self: end;
	display: flex;
	gap: 12px;
	grid-column: 9 / -1;
	grid-row: 1;
	justify-content: flex-end;
	margin-right: var(--container-breakout-full);
	padding-bottom: var(--text-spacing-xsmall);
}

.module.steps.style-phases .btn.carousel.white {
	border-color: var(--white);
	color: var(--white);
}

.module.steps.style-phases .btn.carousel.white:hover {
	background: var(--white);
	color: var(--charcoal);
}

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

/** Track **/

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

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

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

.module.steps.style-phases .cards > li {
	display: flex;
	flex: 1;
}

/** Cards **/

.module.steps.style-phases .card {
	aspect-ratio: 887 / 500;
	flex: 1;
	padding: var(--text-spacing-large);
}

.module.steps.style-phases .card .media::after {
	top: calc(194 / 500 * 100%);
}

.module.steps.style-phases .card:hover .media::after {
	background-color: transparent;
}

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

.module.steps.style-phases .card .content {
	gap: var(--text-spacing-xsmall);
	max-width: calc(650 / 807 * 100%);
}

/* Tea green on a GRID page; fern is a programme's own colour and belongs to the pages that name
   one. The pill's class says fern because the markup cannot know which page it is on — the palette
   can, so the palette decides. */
.module.steps.style-phases .pill.fern {
	background: var(--tea-green);
	color: var(--charcoal);
}

/* Fern is the main brand's, so a programme that names its own chip colour takes that instead —
   and the figure's ink follows the fill it lands on rather than being stated twice. */
.module.steps.style-phases[data-brand] .pill.fern {
	background: var(--program-step, var(--fern));
	color: var(--program-step-ink, var(--white));
}

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

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

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

	/* A card with no photograph has nothing to sit under, so it keeps the dark box it carries on
	   a wider screen. */
	.module.steps.style-phases .card.feature:has(.media) {
		aspect-ratio: auto;
		background: none;
		display: grid;
		grid-template-rows: auto 1fr;
		overflow: visible;
		padding: 0;
	}

	.module.steps.style-phases .card.feature:has(.media) .media {
		aspect-ratio: 887 / 500;
		grid-area: 1 / 1;
		inset: auto;
		position: relative;
	}

	.module.steps.style-phases .card.feature:has(.media) .media::after {
		content: none;
	}

	.module.steps.style-phases .card.feature:has(.media) .content {
		color: var(--charcoal);
		grid-row: 2;
		margin-top: var(--text-spacing-small);
		max-width: none;
		padding: 0 var(--text-spacing-xsmall);
		--heading-color: var(--charcoal);
	}

	/* Both are hover flourishes that read on the photograph and not on the page. */
	.module.steps.style-phases .card.feature:has(.media) :is(.watermark, .sunray) {
		display: none;
	}

	/* Down the window and larger with it, so the rays reach the foot of the fill rather than
	   stopping above it. */
	.module.steps.style-phases .watermark svg {
		top: 160px;
		width: 115%;
	}

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

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

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

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

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

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

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	/* Deep enough to clear the tallest caption any of these tracks carries, and shallow enough
	   that the photographs still break its edge the way they do on a wider screen. */
	.module.steps.style-phases {
		--fill-tail: 400px;
	}

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

	.module.steps.style-phases .container > :is(.cards, .jazzy-carousel-wrapper) {
		margin-top: calc(var(--text-spacing-xlarge) - var(--text-spacing-small));
	}

}

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

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

	.module.steps.style-phases {
		--fill-tail: 40px;
	}

	/* A caption here can reach further up than the photographs do, so no depth measured from the
	   section's foot both clears the words and lands on a photograph. This one is measured from
	   the head instead and carries 72px past the track's top, which is where the tablet rung's
	   own edge falls as it meets this one. */
	.module.steps.style-phases::before {
		content: none;
	}

	.module.steps.style-phases .container::before {
		background: var(--program-dark, var(--charcoal));
		content: '';
		grid-column: 1 / -1;
		grid-row: 1 / 3;
		margin: calc(-1 * var(--module-spacing-large)) var(--viewport-edge) calc(-1 * var(--text-spacing-medium) - 72px);
		z-index: -1;
	}

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

	.module.steps.style-phases .card {
		padding: var(--text-spacing-small);
	}

	.module.steps.style-phases .card .content {
		max-width: none;
	}

}