/**
 * Info cards (blocks/feature-cards): white cards on the section band.
 * Figma 171:832 (About, 3 cards + buttons), 171:536 (Rules, 3 cards),
 * 173:1054 (Parties "What's Included", 4 small centred cards + button under).
 *
 * Where the three Figma uses differ, one value is used everywhere: heading 48/48 at 77
 * below the band's top edge (Rules and Parties), 390 cards 55 apart in a 1280 row (Rules),
 * the card radius token, the About card insides, and the site's standard buttons. The band's bottom padding (100) is shared
 * with the steps band.
 */

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

/* Three cards: 1280 wide on the 80px gutters, like the CTA and party rows (Figma x 80). */
.kc-feature-cards--cols-3.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

/* 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-feature-cards:not( .kc-wave-bottom ):has( + .kc-wave-top ) {
	padding-bottom: calc( clamp( 3.5rem, 6.95vw, 6.25rem ) + var( --kc-wave-h ) );
}

/* A CTA card in the same band colour straight after (Rules, Figma 171:529) sits inside
   this band: the band ends at the cards and the CTA section's top padding is the gap. */
.kc-feature-cards:not( .kc-wave-bottom ):is(
	:not( .has-background ):has( + .kc-cta-card:not( .kc-wave-top, .has-background ) ),
	.has-kc-white-background-color:has( + .kc-cta-card.has-kc-white-background-color:not( .kc-wave-top ) ),
	.has-kc-blush-background-color:has( + .kc-cta-card.has-kc-blush-background-color:not( .kc-wave-top ) ),
	.has-kc-cyan-background-color:has( + .kc-cta-card.has-kc-cyan-background-color:not( .kc-wave-top ) ),
	.has-kc-dark-purple-background-color:has( + .kc-cta-card.has-kc-dark-purple-background-color:not( .kc-wave-top ) ),
	.has-kc-lavender-background-color:has( + .kc-cta-card.has-kc-lavender-background-color:not( .kc-wave-top ) )
) {
	padding-bottom: 0;
}

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

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

.kc-feature-cards .kc-feature-cards__intro {
	max-width: 40rem;
	margin: 0.75rem auto 0;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	line-height: 1.556;
}

.kc-feature-cards {
	--kc-fc-cols: 3;
	--kc-fc-gap: clamp( 1.5rem, 3.82vw, 3.4375rem );
}

.kc-feature-cards--cols-4 {
	--kc-fc-cols: 4;
	--kc-fc-gap: 2.5rem;
}

/* A wrapping row, so a short last row (or one or two cards) sits centred. */
.kc-feature-cards .kc-feature-cards__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --kc-fc-gap );
	margin-top: clamp( 2.5rem, 4.24vw, 3.8125rem );
}

.kc-feature-cards--cols-4 .kc-feature-cards__grid {
	margin-top: clamp( 2.5rem, 7.64vw, 6.875rem );
}

/* A white card: title 25/32 display, text 16/27, button pinned to the bottom. */
.kc-feature-cards .kc-feature-cards__card {
	display: flex;
	flex: 0 1 calc( ( 100% - ( var( --kc-fc-cols ) - 1 ) * var( --kc-fc-gap ) ) / var( --kc-fc-cols ) );
	flex-direction: column;
	min-width: 0;
	min-height: 20rem;
	margin: 0;
	padding: 2rem 1.625rem 1.6875rem;
	border-radius: var( --kc-radius-card );
	background: var( --kc-white );
	color: var( --kc-dark-purple );
	overflow-wrap: break-word;
}

/* On a white band the white cards need an edge (as the party cards do). */
.kc-feature-cards:is( :not( .has-background ), .has-kc-white-background-color ) .kc-feature-cards__card {
	border: 1px solid color-mix( in srgb, var( --kc-black ) 18%, transparent );
}

.kc-feature-cards .kc-feature-cards__card > * {
	margin-block: 0;
}

.kc-feature-cards .kc-feature-cards__title {
	font-size: clamp( 1.375rem, 1.74vw, 1.5625rem );
	line-height: 1.28;
}

.kc-feature-cards .kc-feature-cards__text {
	margin-top: 2.25rem;
	font-size: 1rem;
	line-height: 1.6875;
}

.kc-feature-cards .kc-feature-cards__text + .kc-feature-cards__text {
	margin-top: 0.75rem;
}

.kc-feature-cards .kc-feature-cards__card-buttons {
	margin-top: auto;
	padding-top: 2rem;
	gap: 0.75rem;
}

/* Centred small cards ("What's Included"): 280 × 300, capital titles. */
.kc-feature-cards--centre .kc-feature-cards__card {
	align-items: center;
	min-height: 18.75rem;
	padding: 4.0625rem 1.75rem 2.5rem;
	text-align: center;
}

.kc-feature-cards--centre .kc-feature-cards__title {
	font-size: 1.375rem;
	line-height: 1.273;
	text-transform: uppercase;
}

.kc-feature-cards--centre .kc-feature-cards__text {
	max-width: 14rem;
	margin-top: 2.625rem;
	font-size: 0.875rem;
	line-height: 1.571;
}

.kc-feature-cards--centre .kc-feature-cards__card-buttons {
	justify-content: center;
}

/* Buttons under the cards, centred, 100 below the row (Figma 170:218). */
.kc-feature-cards .kc-feature-cards__buttons {
	justify-content: center;
	margin-top: clamp( 2.5rem, 6.95vw, 6.25rem );
}

@media ( max-width: 1024px ) {
	.kc-feature-cards {
		--kc-fc-gap: 1.5rem;
	}

	.kc-feature-cards--cols-4 {
		--kc-fc-cols: 2;
	}

	.kc-feature-cards .kc-feature-cards__card {
		min-height: 0;
	}

	.kc-feature-cards--centre .kc-feature-cards__card {
		padding-top: 3rem;
	}

	.kc-feature-cards--centre .kc-feature-cards__text {
		margin-top: 1.5rem;
	}
}

@media ( max-width: 781px ) {
	.kc-feature-cards {
		--kc-fc-cols: 2;
	}

	.kc-feature-cards .kc-feature-cards__card,
	.kc-feature-cards--centre .kc-feature-cards__card {
		padding: 1.75rem 1.5rem;
	}

	.kc-feature-cards .kc-feature-cards__text {
		margin-top: 1rem;
	}
}

/* Phones: one card per row (two still fit at tablet width). */
@media ( max-width: 599px ) {
	.kc-feature-cards,
	.kc-feature-cards--cols-4 {
		--kc-fc-cols: 1;
		--kc-fc-gap: 1rem;
	}
}