/**
 * P3 Text + video split on a Horizon band (Figma About "The story behind the name"
 * 140:1822; the article template's video slot 224:6817 reuses the media column).
 *
 * Own markup (lts/split-video): group.lts-split-video > columns.lts-split-video__inner
 * > text col (H2 + body) + media col (16:9 slot). It does NOT reuse the parent's
 * `.kd-split` classes: that skin is a fixed 500px circle with an rtl flip and a dozen
 * `!important` flex / gap / stack rules, none of which a 16:9 slot wants. The parent's
 * split-text-image.css therefore never matches here and no out-specifying is needed;
 * only core's own `.wp-block-columns` flex rules are beaten, with `.wp-block-columns`
 * added to the selector (0,4,0 vs core's 0,3,0).
 *
 * 1440 geometry (Figma): section 475 tall; Horizon band from the left viewport edge to
 * x = 996 (= the slot's horizontal centre); text col x 112, w 375 (built 390, see --lts-sv-t); H2 Tide Medium 48/50,
 * two lines, 14 to the body; body Regular 18 / 28 Body ink (Figma line height is 28, not
 * the 24 of the other bodies); slot x 666, y 52, 662 x 372 (16:9), 8px radius, 2px
 * dashed neutral border; slot 179 from the text column.
 *
 * Geometry is `--lts-sv-*` design px times `--lts-sv-u` (= content column / 1216, 1 from
 * 1440 up). The section is an inline-size container so `cqw` resolves against the
 * full-bleed section and the band starts at the viewport edge, not the column.
 *
 * Slot = a `.lts-split-video__frame` group (placeholder: no third-party request) OR a
 * core/embed (`.wp-block-embed`) dropped in its place: both are forced to 16:9 with a
 * reserved aspect-ratio box, so there is no layout shift when an iframe arrives.
 * Placeholder colours are mixed from the Body ink token (Figma uses off-palette greys).
 *
 * Responsive (derived, no frames; designer review): 782-1199 the columns re-split to
 * 44 / 5 / 51 (text needs room at 18px); the band edge is still the slot centre.
 * At <= 781 the columns stack (text, then slot), the band becomes the whole section.
 */

.lts-split-video {
	--lts-sv-g: 0px; /* side gutter outside the column: only when the section bleeds out of the page padding (below) */
	--lts-sv-w: min(
		var(--wp--style--global--content-size),
		calc(100cqw - 2 * var(--lts-sv-g))
	);
	--lts-sv-u: calc(var(--lts-sv-w) / 1216);
	--lts-sv-left: calc((100cqw - var(--lts-sv-w)) / 2);

	/* Column parts (any unit, only ratios matter): text / gap / slot. */
	--lts-sv-t: 390; /* Figma 375; 390 (386 is the minimum) gives the drawn 4 body lines at 18.4px (375 wraps a 5th), H2 stays 2 lines */
	--lts-sv-gap: 164; /* Figma 179 (text + gap stay 554, so the slot stays put) */
	--lts-sv-v: 662;
	--lts-sv-s: calc(var(--lts-sv-t) + var(--lts-sv-gap) + var(--lts-sv-v));

	position: relative;
	container-type: inline-size;
	overflow-x: clip;
	box-sizing: border-box;
	padding-inline: 0;
	isolation: isolate;
}

/* .kd-section (parent: padding-block 0) is on the same element, so match its depth. */
.kd-section.lts-split-video {
	padding-block: calc(52 * var(--lts-sv-u)) calc(51 * var(--lts-sv-u));
}

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

/* Horizon band: from the left viewport edge to the slot's horizontal centre. */
.lts-split-video::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 auto 0 0;
	width: calc(
		var(--lts-sv-left) + var(--lts-sv-w) *
			(var(--lts-sv-t) + var(--lts-sv-gap) + var(--lts-sv-v) / 2) /
			var(--lts-sv-s)
	);
	background: var(--wp--preset--color--tint);
	pointer-events: none;
}

/* The row. */
.lts-split-video .lts-split-video__inner.wp-block-columns {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	width: var(--lts-sv-w);
	max-width: 100%;
	margin: 0 auto;
}

.lts-split-video
	.lts-split-video__inner.wp-block-columns
	> .lts-split-video__text {
	flex: 0 0 calc(100% * var(--lts-sv-t) / var(--lts-sv-s));
	min-width: 0;
	/* 8u of the 16u pushes the block 8 below centre, as drawn (text 133-359 vs slot 52-424). */
	padding-block: calc(16 * var(--lts-sv-u)) 0;
}

.lts-split-video
	.lts-split-video__inner.wp-block-columns
	> .lts-split-video__media {
	flex: 0 0 calc(100% * var(--lts-sv-v) / var(--lts-sv-s));
	margin-inline-start: calc(100% * var(--lts-sv-gap) / var(--lts-sv-s));
	min-width: 0;
}

/* Text. H2 Tide Medium 48/50 (section-title preset), 14 to the body. */
.lts-split-video .lts-split-video__heading {
	margin: 0 0 calc(14 * var(--lts-sv-u));
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
}

.lts-split-video .lts-split-video__body {
	margin: 0;
	font-weight: 400 /* Regular (no token exists for it) */;
	line-height: 1.5217; /* 28 / 18.4 */
}

/* Slot: one 16:9 box, whatever fills it. The placeholder frame is the box itself; for a
   core/embed the box is the wrapper, so a figcaption sits below it (not clipped, not inside
   the ratio). The placeholder frame is not overflow:hidden (it may grow past 16:9 on a
   very narrow, padded slot rather than clip its play link). */
.lts-split-video .lts-split-video__frame,
.lts-split-video
	.lts-split-video__media
	.wp-block-embed
	.wp-block-embed__wrapper {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
}

.lts-split-video .lts-split-video__frame {
	margin: 0;
}

.lts-split-video .lts-split-video__media .wp-block-embed {
	width: 100%;
	margin: 0;
}

.lts-split-video
	.lts-split-video__media
	.wp-block-embed
	.wp-block-embed__wrapper {
	position: relative;
	overflow: hidden;
}

.lts-split-video .lts-split-video__media .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Placeholder frame: neutral dashed box with faint diagonal stripes (Figma img-ph). */
.lts-split-video .lts-split-video__frame {
	--lts-sv-ph: color-mix(
		in srgb,
		var(--wp--preset--color--body-ink) 6%,
		transparent
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: calc(24 * var(--lts-sv-u)) calc(40 * var(--lts-sv-u));
	border: 2px dashed
		color-mix(in srgb, var(--wp--preset--color--body-ink) 28%, transparent);
	background-color: var(--wp--preset--color--base);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--lts-sv-ph) 0 20px,
		transparent 20px 40px
	);
	text-align: center;
}

.lts-split-video .lts-split-video__caption,
.lts-split-video .lts-split-video__note {
	max-width: 24rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.lts-split-video .lts-split-video__caption {
	color: var(--wp--preset--color--secondary);
}

.lts-split-video .lts-split-video__note {
	margin-top: 0.75rem;
	color: color-mix(
		in srgb,
		var(--wp--preset--color--body-ink) 75%,
		var(--wp--preset--color--base)
	);
}

.lts-split-video .lts-split-video__play {
	margin-top: 1.5rem;
}

/* Play control: the shared fill button plus a play triangle (no extra element). */
.lts-split-video .lts-split-video__play .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.65em;
	border-color: transparent transparent transparent currentcolor;
}

/* Tablet: text needs more room than the 1440 ratio gives it. */
@media (max-width: 1199.98px) {
	.lts-split-video {
		--lts-sv-t: 44;
		--lts-sv-gap: 5;
		--lts-sv-v: 51;
	}
}

/* Stacked (core stacks columns at 781): text, then slot; the band is the whole section. */
@media (max-width: 781.98px) {
	.kd-section.lts-split-video {
		padding-block: 2.5rem;
	}

	.lts-split-video::before {
		width: 100%;
	}

	.lts-split-video .lts-split-video__inner.wp-block-columns {
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
		width: 100%;
		padding-inline: var(--wp--custom--layout--gutter);
		box-sizing: border-box;
	}

	.lts-split-video
		.lts-split-video__inner.wp-block-columns
		> .lts-split-video__text,
	.lts-split-video
		.lts-split-video__inner.wp-block-columns
		> .lts-split-video__media {
		flex: 0 0 auto;
		width: 100%;
		margin-inline-start: 0;
		padding-block: 0;
	}

	.lts-split-video .lts-split-video__frame {
		padding: 1rem;
	}
}

/* Small phones: the 16:9 box is ~150 tall at 320, so the placeholder keeps the title and
   the play link only (the note would overflow the clipped frame). */
@media (max-width: 519.98px) {
	.lts-split-video .lts-split-video__frame {
		padding: 0.75rem;
	}

	.lts-split-video .lts-split-video__note {
		display: none;
	}

	.lts-split-video .lts-split-video__play {
		margin-top: 1rem;
	}
}