/**
 * Numbered steps (blocks/steps): white heading and 280px coloured square tiles on the
 * dark purple band (Figma 170:220, Parties "How It Works").
 *
 * The heading uses the site's section heading size (48, Figma draws this one at 40) and
 * the band the same padding as the info cards band (77 top, 100 bottom).
 */

.kc-steps {
	padding-block: clamp( 3.5rem, 5.35vw, 4.8125rem ) clamp( 3.5rem, 6.95vw, 6.25rem );
}

/* Wave edges (theme.css): a top wave on the next section rises into this one, and a
   bottom wave on the previous one hangs into it, so make room for the wave. */
.kc-steps:not( .kc-wave-bottom ):has( + .kc-wave-top ) {
	padding-bottom: calc( clamp( 3.5rem, 6.95vw, 6.25rem ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-steps {
	padding-top: calc( clamp( 3.5rem, 5.35vw, 4.8125rem ) + var( --kc-wave-h ) );
}

.kc-steps .kc-steps__heading {
	margin-block: 0;
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-steps {
	--kc-steps-cols: 4;
	--kc-steps-gap: 2.5rem;
}

/* A wrapping row of tiles up to 280 wide, so a short last row sits centred. The list is
   capped at a full row's width so the tiles wrap at the column count. */
.kc-steps .kc-steps__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --kc-steps-gap );
	max-width: calc( var( --kc-steps-cols ) * 17.5rem + ( var( --kc-steps-cols ) - 1 ) * var( --kc-steps-gap ) );
	margin: clamp( 2.5rem, 5.9vw, 5.3125rem ) auto 0;
	padding: 0;
	list-style: none;
}

.kc-steps__step {
	display: flex;
	flex: 0 1 calc( ( 100% - ( var( --kc-steps-cols ) - 1 ) * var( --kc-steps-gap ) ) / var( --kc-steps-cols ) );
	flex-direction: column;
	min-width: 0;
	max-width: 17.5rem;
	align-items: center;
	aspect-ratio: 1;
	padding: 2.125rem 1.75rem 1.75rem;
	border-radius: var( --kc-radius-card );
	color: var( --kc-dark-purple );
	text-align: center;
	overflow-wrap: break-word;
}

.kc-steps__step--blush {
	background: var( --kc-blush );
}

.kc-steps__step--yellow {
	background: var( --kc-yellow );
}

.kc-steps__step--cyan {
	background: var( --kc-cyan );
}

.kc-steps__step--lavender {
	background: var( --kc-lavender );
}

.kc-steps__number {
	font-family: var( --kc-font-display );
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.136;
}

.kc-steps__text {
	max-width: 14rem;
	margin-top: 3.1875rem;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Tablet: 2 × 2. Phone: one column, tiles no longer square. */
@media ( max-width: 1024px ) {
	.kc-steps {
		--kc-steps-cols: 2;
		--kc-steps-gap: 1.5rem;
	}
}

@media ( max-width: 599px ) {
	.kc-steps {
		--kc-steps-cols: 1;
		--kc-steps-gap: 1rem;
	}

	.kc-steps .kc-steps__list {
		max-width: none;
	}

	.kc-steps__step {
		max-width: none;
		aspect-ratio: auto;
		padding: 1.75rem 1.5rem;
	}

	.kc-steps__text {
		margin-top: 1rem;
	}
}