/**
 * Steps
 *
 * Three styles over one field set, and they share no geometry: the Cards style's is here,
 * the Photo Carousel's is in steps/carousel.css and the Photo Slider's in steps/phases.css.
 *
 * Cards is an eyebrow, a 7/5 heading-and-intro row, then a row of numbered cards.
 * Everything is global — .eyebrow, .card, the type scale — so this file places the grid
 * children, sets the card's own padding and paints the logomark band across each card's
 * top edge. The aqua gradient behind this module belongs to the page-level .wash wrapper.
 */

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

.module.steps.style-default .container > .eyebrow {
	color: var(--storm);
	grid-column: 1 / -1;
	margin-block: 0;
}

.module.steps.style-default .container > .heading-2 {
	grid-column: 1 / span 7;
}

.module.steps.style-default .container > .content {
	grid-column: 8 / span 5;
	padding-top: var(--text-spacing-xsmall);
}

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

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

/** Cards **/

.module.steps.style-default .cards {
	grid-column: 1 / -1;
	margin-top: var(--text-spacing-xxlarge);
}

.module.steps.style-default .cards > li {
	display: flex;
	grid-column: span 4;
}

.module.steps.style-default .cards:has(> li:nth-child(2):last-child) > li {
	grid-column: span 6;
}

.module.steps.style-default .cards:has(> li:nth-child(4)) > li {
	grid-column: span 3;
}

.module.steps.style-default .card {
	border-radius: 0 0 10px 10px;
	flex: 1;
}

.module.steps.style-default .card::before {
	background: currentColor;
	color: var(--storm);
	content: '';
	height: 21px;
	left: 0;
	-webkit-mask: url('../../svgs/pattern-bar.svg') repeat-x left top / auto 21px;
	mask: url('../../svgs/pattern-bar.svg') repeat-x left top / auto 21px;
	position: absolute;
	right: 0;
	top: 0;
}

.module.steps.style-default .card .content {
	padding: var(--text-spacing-xlarge) var(--text-spacing-medium) var(--text-spacing-large);
}

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

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

/* The mark carries its own spacing rather than the eyebrow's gap, so the two can open together and
   the label travels the whole distance instead of starting eight pixels along. */
.module.steps.style-default .cards .eyebrow {
	gap: 0;
}

.module.steps.style-default .cards .mark {
	margin-right: var(--text-spacing-xxsmall);
	overflow: hidden;
	width: 22px;
}

.module.steps.style-default .cards .mark svg {
	flex: none;
	height: 22px;
	width: 22px;
}

/*** Arrival — the row is half-lit, then each step takes its turn ***/

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

	.module.steps.style-default .cards > li[data-jazzy-scroll] {
		opacity: .5;
	}

	.module.steps.style-default .cards > li[data-jazzy-scroll].animated-in {
		opacity: 1;
	}

	.module.steps.style-default .cards .mark {
		margin-right: 0;
		opacity: 0;
		transition: margin-right var(--step-speed, 700ms) var(--ease-out) var(--step-beat, 0ms), opacity var(--step-speed, 700ms) var(--ease-out) var(--step-beat, 0ms), width var(--step-speed, 700ms) var(--ease-out) var(--step-beat, 0ms);
		width: 0;
	}

	.module.steps.style-default .cards > li.animated-in .mark {
		margin-right: var(--text-spacing-xxsmall);
		opacity: 1;
		width: 22px;
	}

}

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

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

	.module.steps.style-default .container > .heading-2 {
		grid-column: 1 / -1;
	}

	/* Stacked under the heading rather than beside it, the intro is a second paragraph of the same
	   lockup and wants the gap that says so. The container's row-gap is what separates every row
	   here, including the eyebrow's and the cards', so only this one is pulled back — the margin
	   is written as the difference between the two tokens rather than a bare figure, so it holds
	   if either moves. */
	.module.steps.style-default .container > .content {
		grid-column: 1 / -1;
		margin-top: calc(var(--text-spacing-xxsmall) - var(--text-spacing-small));
		padding-top: 0;
	}

	.module.steps.style-default .cards {
		margin-top: var(--text-spacing-large);
	}

	.module.steps.style-default .cards > li,
	.module.steps.style-default .cards:has(> li:nth-child(2):last-child) > li,
	.module.steps.style-default .cards:has(> li:nth-child(4)) > li {
		grid-column: 1 / -1;
	}

}

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

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

	/* One card a row here, so the grid's gutter is the step between the cards themselves rather
	   than the space either side of them, and a gutter's worth reads as a gap in the run. */
	.module.steps.style-default .cards {
		margin-top: var(--text-spacing-xsmall);
		row-gap: 20px;
	}

}