/**
 * Image and text section (blocks/split). Figma: About 163:394 (white), Pricing 171:821
 * (dark purple band — text colour comes from the band class in theme.css).
 */

.kc-split {
	--kc-split-top: clamp( 3.5rem, 9.584vw, 8.625rem );
	--kc-split-bottom: clamp( 3rem, 5.07vw, 4.5625rem );

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

/* Room for the 1261-wide grid (610 text + 71 + 580 photo, About 171:828). */
.kc-split.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

.kc-split .kc-split__inner {
	display: grid;
	grid-template-columns: minmax( 0, 610fr ) minmax( 0, 580fr );
	align-items: start;
	gap: clamp( 2rem, 4.931vw, 4.4375rem );
	max-width: 78.8125rem;
}

.kc-split--image-left .kc-split__inner {
	grid-template-columns: minmax( 0, 580fr ) minmax( 0, 610fr );
}

.kc-split--image-left .kc-split__media {
	order: -1;
}

.kc-split--no-image .kc-split__inner {
	grid-template-columns: minmax( 0, 47.5rem );
}

.kc-split .kc-split__text > * {
	margin-block: 0;
}

.kc-split .kc-split__heading {
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-split .kc-split__body {
	margin-top: clamp( 1.5rem, 3.75vw, 3.375rem );
	font-size: clamp( 1.0625rem, 1.528vw, 1.375rem );
	line-height: 1.5455;
}

.kc-split .kc-split__heading + .kc-split__body {
	margin-top: clamp( 1.25rem, 2.222vw, 2rem );
}

.kc-split .kc-split__buttons {
	margin-top: 2.1875rem;
}

/* The photo starts 25 below the heading's top (About 162:132). */
.kc-split .kc-split__media {
	margin-top: clamp( 0rem, 1.736vw, 1.5625rem );
}

.kc-split .kc-split__photo {
	margin: 0;
}

.kc-split .kc-split__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 580 / 420;
	object-fit: cover;
	border-radius: var( --kc-radius-card );
}

.kc-split.has-kc-dark-purple-background-color .kc-split__text {
	color: var( --kc-white );
}

/* The pink pill's hover colour is dark purple, which would vanish into this band. */
.kc-split.has-kc-dark-purple-background-color .is-style-pink .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-white );
	color: var( --kc-dark-purple );
}

@media ( max-width: 781px ) {
	.kc-split .kc-split__inner,
	.kc-split--image-left .kc-split__inner {
		grid-template-columns: minmax( 0, 1fr );
	}

	.kc-split--image-left .kc-split__media {
		order: 0;
	}
}

/* Spacing (Figma 1440, About's values on every page): 138 above the content, 73
   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-split:not( .kc-wave-bottom ):is( :has( + .kc-wave-top ), :last-child ) {
	padding-bottom: calc( var( --kc-split-bottom ) + var( --kc-wave-h ) );
}

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