/**
 * P2 Circle-photo split (Figma Home 103:387, About founder 145:2136-2147,
 * Board 170:3067, Events 210:6484).
 *
 * Skin for the parent's kds/split-text-image markup (group.kd-split >
 * columns.kd-split__inner > media col + text col), opt-in by `.lts-split-circle`
 * so the parent's bare `.kd-split` rules are never restyled. Patterns (one CSS):
 *   lts/split-circle-ring          --ring     Hearth ring + Horizon half-band
 *   lts/split-circle-cta           --cta      Dusk curve + button
 *   lts/split-circle-cta-compact   --cta --compact
 *   lts/split-circle-card          --card     Deep curve + Horizon text card
 * Photo is always on the left (as drawn); no mirror variant is drawn.
 *
 * Geometry: every Figma number is a design px, multiplied by `--lts-sc-u`
 * (= content column / 1216, so 1px at the 1440 design and from 1440 up, scaling
 * down in proportion below). The section is an inline-size container: `cqw` resolves
 * against the full-bleed section, so the curve / band start from the column edge
 * (not the viewport) and bleed to the viewport edge. The per-variant numbers are
 * the `--lts-sc-*` vars on each modifier (relative to the column's left edge,
 * x = Figma x - 112).
 *
 * Specificity: the parent's split-text-image.css (basename sorts AFTER this file,
 * so it wins ties) states flex / gap / margins with `!important`, its tablet and
 * mobile rules at (0,1,0). Rules here that fight it are `.kd-split.lts-split-circle`
 * + two more classes (0,4,0 to 0,5,0) AND `!important` where the parent is, so
 * specificity decides, never order (the one exception: the card text column's margin-top, which wins by source order within this file).
 *
 * Responsive (derived, no frames): two columns scaled by `--lts-sc-u` from 782;
 * below 782 (core's column stack) one column: photo on top (ring offset / curve
 * panel kept behind it), text left-aligned below, button auto width.
 */

.kd-split.lts-split-circle {
	--lts-sc-g: 0px; /* side gutter outside the column: only when the section bleeds out of the page padding (below) */
	--lts-sc-w: min(
		var(--wp--style--global--content-size),
		calc(100cqw - 2 * var(--lts-sc-g))
	);
	/* Capped at 1px: above 1440 every variant stays at its drawn 1440 size instead of growing with the
	   wider page column (72caa54), where it ran ~35% over Figma at 1920 while the type stayed put. */
	--lts-sc-u: min(calc(var(--lts-sc-w) / 1216), 1px);
	--lts-sc-extra: calc(
		var(--lts-sc-w) - 1216 * var(--lts-sc-u)
	); /* 0 at 1440 and below */
	--lts-sc-left: calc((100cqw - var(--lts-sc-w)) / 2);

	/* Defaults = the ring (Home). Unitless design px. */
	--lts-sc-h: 618;
	--lts-sc-media-w: 648; /* media column = text x relative to the column */
	--lts-sc-photo-x: 31;
	--lts-sc-photo-y: 48;
	--lts-sc-photo-w: 555;
	--lts-sc-photo-ar: calc(555 / 552);
	/* Figma 58 top only (Home ring), which pushed the centred text 29 below centre; Alain 10-16: remove it.
	   Equal top + bottom instead: no offset while the text is shorter than the photo (desktop), and
	   breathing room above the heading when it is taller (tablet, ~900). */
	--lts-sc-text-pt: 40;
	--lts-sc-text-pb: 40;
	--lts-sc-gap-h: 20; /* heading -> body */
	--lts-sc-gap-b: 40; /* body -> button */
	--lts-sc-gap-p: 28; /* paragraph -> paragraph (the drawn blank line) */

	position: relative;
	width: auto; /* parent sets 100%; auto lets alignfull's negative gutter margins widen it to the viewport */
	container-type: inline-size;
	overflow-x: clip;
	overflow-y: visible;
	box-sizing: border-box;
	padding-inline: 0;
	isolation: isolate;
}

.kd-split.lts-split-circle--cta {
	--lts-sc-photo-y: 33;
	--lts-sc-media-w: 699;
	--lts-sc-text-pt: 30;
	--lts-sc-text-pb: 0; /* the ring default is 40 (10-16); the CTA keeps its drawn 0 */
	--lts-sc-gap-h: 25;
	--lts-sc-panel-r: 408; /* curve right edge, x from the column */
	--lts-sc-panel-t: 0;
	--lts-sc-panel-h: 618;
}

.kd-split.lts-split-circle--compact {
	--lts-sc-photo-x: 9;
	--lts-sc-photo-y: 34;
	--lts-sc-photo-w: 516;
	--lts-sc-photo-ar: calc(516 / 514);
	--lts-sc-media-w: 633;
	--lts-sc-text-pt: 0;
	--lts-sc-text-pb: 37;
	--lts-sc-gap-h: 23;
	--lts-sc-gap-b: 37;
	--lts-sc-panel-r: 359;
	--lts-sc-panel-t: 3;
	--lts-sc-panel-h: 576;
}

.kd-split.lts-split-circle--card {
	--lts-sc-h: 622;
	--lts-sc-media-w: 620; /* the card starts here */
	--lts-sc-photo-x: 0;
	--lts-sc-photo-y: 28; /* gap under the "The founder" label (label is 46 down, 50 tall) */
	--lts-sc-gap-h: 9;
	--lts-sc-panel-r: 496;
	--lts-sc-panel-t: 0;
	--lts-sc-panel-h: 622;
}

/* Wide screens (all variants): the photo and its ring / curve stay on the column's left edge and half of
   the extra width goes into the gap before the text (Alain 10-16, About founder first, then Home + the
   CTA variants). The card keeps its drawn 596 width, so it no longer reaches the column's right edge;
   the other variants' text column takes the rest (their body keeps its 1440 measure, below).
   At 1440 and below the extra is 0: nothing changes. The column rules are (0,6,0) (the :is() adds a
   class) to beat the generic (0,5,0) ones below, which come later in the file. */
@media (min-width: 782px) {
	.kd-split.lts-split-circle:is(.lts-split-circle)
		.kd-split__inner.wp-block-columns
		> .kd-split__media-col {
		flex: 0 0
			calc(
				var(--lts-sc-media-w) * var(--lts-sc-u) + var(--lts-sc-extra) /
					2
			) !important;
	}

	.kd-split.lts-split-circle.lts-split-circle--card
		.kd-split__inner.wp-block-columns
		> .kd-split__text-col {
		flex: 0 0 calc(596 * var(--lts-sc-u)) !important;
	}
}

/* Full-bleed on a page (WP widens an alignfull child of the padded `.entry-content` by the gutter on each side; a nested group, even one that carries has-global-padding, adds none): the
   column is the viewport minus both gutters. Nested in a plain core/group the section is only that group wide, so
   the column is the group (no gutter to subtract). */
.entry-content > .kd-split.lts-split-circle.alignfull {
	--lts-sc-g: var(--wp--custom--layout--gutter);
}

/* Background shapes: ::before on the section. */
.kd-split.lts-split-circle::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Ring variant: Horizon band from col+309 to the right viewport edge. */
.kd-split.lts-split-circle--ring::before {
	inset: 0 0 0 calc(var(--lts-sc-left) + 309 * var(--lts-sc-u));
	background: var(--wp--preset--color--tint);
}

/* Curve variants: from the left viewport edge to col+panel-r, pill-ended on the right. */
.kd-split.lts-split-circle--cta::before,
.kd-split.lts-split-circle--card::before {
	inset: calc(var(--lts-sc-panel-t) * var(--lts-sc-u)) auto auto 0;
	/* Drawn height, not the section's: the curve ends the same distance below the photo
	   (33u / 31u) at every two-column width, however long the text runs. */
	height: calc(var(--lts-sc-panel-h) * var(--lts-sc-u));
	width: calc(var(--lts-sc-left) + var(--lts-sc-panel-r) * var(--lts-sc-u));
	/* 500px = the drawn radius; it exceeds half the height, so the browser clamps it to a semicircle end. */
	border-radius: 0 500px 500px 0;
	background: var(--wp--preset--color--secondary);
}

.kd-split.lts-split-circle--card::before {
	background: var(--wp--preset--color--contrast);
}

/* The row. */
.kd-split.lts-split-circle .kd-split__inner.wp-block-columns {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 0 !important;
	box-sizing: border-box;
	width: var(--lts-sc-w);
	max-width: none;
	min-height: calc(var(--lts-sc-h) * var(--lts-sc-u));
	margin-block: 0 !important;
	margin-inline: auto !important;
	padding: 0;
	direction: ltr;
}

.kd-split.lts-split-circle
	.kd-split__inner.wp-block-columns
	> .wp-block-column {
	min-width: 0;
	margin: 0 !important;
}

/* Media column. */
.kd-split.lts-split-circle
	.kd-split__inner.wp-block-columns
	> .kd-split__media-col {
	flex: 0 0 calc(var(--lts-sc-media-w) * var(--lts-sc-u)) !important;
	display: block;
	align-self: flex-start;
	height: calc(
		var(--lts-sc-h) * var(--lts-sc-u)
	); /* the photo may overhang (card variant) without growing the row */
	max-width: none !important;
}

/* The photo: an ellipse as drawn (555 x 552, radius 276), no shadow. */
.kd-split.lts-split-circle .kd-split__image {
	position: relative;
	isolation: isolate;
	width: calc(var(--lts-sc-photo-w) * var(--lts-sc-u));
	max-width: none;
	margin: calc(var(--lts-sc-photo-y) * var(--lts-sc-u)) 0 0
		calc(var(--lts-sc-photo-x) * var(--lts-sc-u)) !important;
}

.kd-split.lts-split-circle .kd-split__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--lts-sc-photo-ar);
	object-fit: cover;
	border-radius: 50%;
	box-shadow: none;
}

/* Hearth ring: a 553 circle, 31 left / 15 down of the photo, behind it. */
.kd-split.lts-split-circle--ring .kd-split__image::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 2.7174%; /* 15 / 552 */
	left: -5.5856%; /* -31 / 555 */
	width: 99.6396%; /* 553 / 555 */
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Text column. */
.kd-split.lts-split-circle
	.kd-split__inner.wp-block-columns
	> .kd-split__text-col {
	flex: 1 1 0 !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	justify-content: center;
	box-sizing: border-box;
	max-width: none !important;
	padding-top: calc(var(--lts-sc-text-pt) * var(--lts-sc-u));
	padding-bottom: calc(var(--lts-sc-text-pb) * var(--lts-sc-u));
	text-align: left;
}

.kd-split.lts-split-circle .kd-split__text-col > * {
	max-width: 100%;
	margin-block: 0 !important;
}

.kd-split.lts-split-circle .kd-split__heading {
	margin-bottom: calc(var(--lts-sc-gap-h) * var(--lts-sc-u)) !important;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
	text-align: left !important;
	text-wrap: balance;
}

.kd-split.lts-split-circle .kd-split__body {
	margin-bottom: 0 !important;
	color: var(--wp--preset--color--body-ink);
	line-height: 1.5217; /* 28 / 18.4 */
	text-align: left !important;
}

/* Measure: above 1440 the geometry scales with the wider page column but the type does not, so
   the body keeps its drawn 1440 line length (the text column at u = 1) instead of running to
   85+ characters; below 1440 the column is already narrower, so this never binds. The card
   variant is left out (its body fills a tinted card; a cap would leave an empty strip in it),
   and so is the stacked mobile layout (its own full-width rules). */
@media (min-width: 782px) {
	.kd-split.lts-split-circle:not(.lts-split-circle--card) .kd-split__body {
		max-width: min(100%, calc((1216 - var(--lts-sc-media-w)) * 1px));
	}
}

.kd-split.lts-split-circle .kd-split__body + .kd-split__body {
	margin-top: calc(var(--lts-sc-gap-p) * var(--lts-sc-u)) !important;
}

.kd-split.lts-split-circle .kd-split__buttons {
	margin-top: calc(var(--lts-sc-gap-b) * var(--lts-sc-u)) !important;
	width: auto;
}

/* Card variant: the Horizon text card (596 x 584, 38 down), label + photo on the curve. */
.kd-split.lts-split-circle--card .kd-split__label {
	margin: calc(46 * var(--lts-sc-u)) 0 0 !important;
	/* Scales with the curve (48 at 1440) so Horizon type never leaves the Deep panel; 30px floor. */
	font-size: max(1.875rem, calc(48 * var(--lts-sc-u)));
	color: var(--wp--preset--color--tint);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417;
}

.kd-split.lts-split-circle--card
	.kd-split__inner.wp-block-columns
	> .kd-split__text-col {
	align-self: flex-start;
	justify-content: flex-start;
	min-height: calc(584 * var(--lts-sc-u));
	margin-top: calc(38 * var(--lts-sc-u)) !important;
	padding: calc(111 * var(--lts-sc-u)) calc(48 * var(--lts-sc-u))
		calc(48 * var(--lts-sc-u)) calc(42 * var(--lts-sc-u));
	background: var(--wp--preset--color--tint);
}

/* Kicker: `is-style-eyebrow` (global) carries type and colour; this only sets the gap. */
.kd-split.lts-split-circle .lts-split-circle__kicker {
	margin-bottom: calc(27 * var(--lts-sc-u)) !important;
}

/* The photo overhangs the drawn section by 54u: reserve that space on the row so the section never relies on its neighbour's gap. */
.kd-split.lts-split-circle--card .kd-split__inner.wp-block-columns {
	margin-bottom: calc(54 * var(--lts-sc-u)) !important;
}

/* Mobile (derived, no frame): one column, photo first. `--lts-sc-pw` = photo width. The ring offset
   and the curve / band hang off the photo (percent offsets, so they scale with it). */
@media (max-width: 781.98px) {
	.kd-split.lts-split-circle {
		--lts-sc-pw: min(var(--lts-sc-w), 22.5rem);
		--lts-sc-pad: 2rem;
		padding-top: var(--lts-sc-pad);
	}

	.kd-split.lts-split-circle .kd-split__inner.wp-block-columns {
		flex-direction: column !important;
		align-items: stretch;
		min-height: 0;
	}

	.kd-split.lts-split-circle
		.kd-split__inner.wp-block-columns
		> .kd-split__media-col,
	.kd-split.lts-split-circle
		.kd-split__inner.wp-block-columns
		> .kd-split__text-col {
		flex: 0 0 auto !important;
		width: 100%;
		height: auto;
	}

	.kd-split.lts-split-circle .kd-split__image {
		width: var(--lts-sc-pw);
		margin: 0 auto !important;
	}

	.kd-split.lts-split-circle
		.kd-split__inner.wp-block-columns
		> .kd-split__text-col {
		align-self: stretch;
		justify-content: flex-start;
		margin-top: 2rem !important;
		padding: 0 0 3rem;
	}

	.kd-split.lts-split-circle .kd-split__heading {
		margin-bottom: 1rem !important;
	}

	.kd-split.lts-split-circle .kd-split__body + .kd-split__body {
		margin-top: 1rem !important;
	}

	.kd-split.lts-split-circle .kd-split__buttons {
		margin-top: 1.75rem !important;
	}

	/* Ring: Horizon band behind the text half. */
	.kd-split.lts-split-circle--ring::before {
		inset: calc(var(--lts-sc-pad) + 0.55 * var(--lts-sc-pw)) 0 0 0;
	}

	/* Curves: a pill behind the photo's left half. */
	.kd-split.lts-split-circle--cta::before {
		inset: 0 auto auto 0;
		width: calc(50% + 0.1 * var(--lts-sc-pw));
		height: calc(var(--lts-sc-pad) + 0.995 * var(--lts-sc-pw) + 1.5rem);
	}

	/* Card: label + photo on the Deep curve, the card below. */
	.kd-split.lts-split-circle--card::before {
		inset: 0 auto auto 0;
		width: 88%;
		height: calc(7rem + 0.7 * var(--lts-sc-pw));
	}

	.kd-split.lts-split-circle--card {
		padding-top: 0;
	}

	.kd-split.lts-split-circle--card .kd-split__inner.wp-block-columns {
		margin-bottom: 0 !important; /* stacked: no overhang */
	}

	.kd-split.lts-split-circle--card .kd-split__label {
		margin: 2rem 0 1.25rem !important;
	}

	.kd-split.lts-split-circle--card
		.kd-split__inner.wp-block-columns
		> .kd-split__text-col {
		margin-top: 2rem !important;
		margin-bottom: 0 !important;
		padding: 2rem 1.5rem;
	}
}