/**
 * Call-to-action card section (blocks/cta-card). Figma: Home 178:504. The band colour
 * around the card is the Section settings background.
 */

.kc-cta-card {
	--kc-cta-card-top: clamp( 3rem, 6.875vw, 6.1875rem );
	--kc-cta-card-bottom: clamp( 3rem, 7.778vw, 7rem );

	padding-block: var( --kc-cta-card-top ) var( --kc-cta-card-bottom );
}

/* The card is 1280 wide at 1440 (80px gutters, Figma 178:494). */
.kc-cta-card.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

.kc-cta-card .kc-cta-card__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 80rem;
	min-height: clamp( 17.5rem, 31.25vw, 28.125rem );
	padding: clamp( 2rem, 5.625vw, 5.0625rem ) clamp( 1.5rem, 4.514vw, 4.0625rem );
	border-radius: var( --kc-radius-card );
	background: var( --kc-pink );
	color: var( --kc-white );
}

/* Without buttons there is nothing to fill the card's height. */
.kc-cta-card .kc-cta-card__card:not( :has( .kc-cta-card__buttons ) ) {
	min-height: 0;
}

.kc-cta-card .kc-cta-card__card > * {
	margin-block: 0;
}

/* The site's standard section heading and heading-to-text gap (Figma's 54/60 and 35 are
   normalised to them). */
.kc-cta-card .kc-cta-card__heading {
	max-width: 56.25rem;
	color: var( --kc-white );
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-cta-card .kc-cta-card__body {
	max-width: 47.5rem;
	margin-top: 0.75rem;
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	line-height: 1.5;
}

.kc-cta-card .kc-cta-card__body + .kc-cta-card__body {
	margin-top: 1em;
}

.kc-cta-card .kc-cta-card__buttons {
	gap: 0.9375rem;
	margin-top: clamp( 1.75rem, 3.5vw, 3.125rem );
}

.kc-cta-card__buttons .wp-block-button__link {
	padding-inline: 2.5rem;
}

@media ( max-width: 781px ) {
	.kc-cta-card__buttons .wp-block-button__link {
		padding-inline: 1.5rem;
	}
}

/* Spacing (Figma 1440, Home's values on every page): 99 above the content, 112
   below it to the next wave's crest. A wave rising into the bottom of this band (the
   next section's top wave, or the footer's after the last section) or hanging into its
   top (the previous section's bottom wave) adds its own height. */
.kc-cta-card:not( .kc-wave-bottom ):is( :has( + .kc-wave-top ), :last-child ) {
	padding-bottom: calc( var( --kc-cta-card-bottom ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-cta-card {
	padding-top: calc( var( --kc-cta-card-top ) + var( --kc-wave-h ) );
}

/* Sharing a band with the cards above it (Rules & FAQs 170:100): 57 below them. */
.kc-feature-cards:not( .kc-wave-bottom ) + .kc-cta-card:not( .kc-wave-top ) {
	padding-top: 3.5625rem;
}