/**
 * P1 Split hero (Figma Home 103:385; About 121:1613, Advisors 145:2512, Hub
 * 184:4157, Events 210:6327, Contact 190:4408).
 *
 * A core/cover (the parent hero-home's structure): the cover's own overlay span
 * is restyled into the Deep panel with the 400px top-right curve, the cover image
 * is pinned to the right of it. Opt-in by `.lts-hero-split`, so the parent's
 * `.kd-hero-home` (scrim, meta wiring) is never touched. Patterns:
 * lts/hero-split-home (eyebrow + 2 buttons, 806 tall), lts/hero-split (1 button),
 * lts/hero-split-title (no button).
 *
 * Desktop (>= 782): the Figma composition, in cqw so it scales with the cover.
 * Panel edge never sits closer than 33rem (30rem at <= 1024) to the column left, so the H1
 * stays on Deep from 782 to 1920+ (derived: no tablet frame).
 * Mobile (< 782, derived): text panel on top with a bottom-right curve, photo
 * under it, the curve overlapping the photo; buttons stack full width < 480.
 */

.lts-hero-split.wp-block-cover {
	/* Geometry (Figma 1440 frame). Interior: panel -198 -> 631 (43.82 %); Home:
	   -109 -> 720 (50 %). Photo box starts at x 217 (15.07 %). */
	--lts-hero-gutter: var(--wp--custom--layout--gutter);
	--lts-hero-col-left: max(
		var(--lts-hero-gutter),
		calc((100cqw - var(--wp--style--global--content-size)) / 2)
	);
	--lts-hero-panel-left: -13.75cqw;
	--lts-hero-floor: 33rem; /* panel edge >= column + this: keeps every text line left of the curve. */
	--lts-hero-edge: max(
		43.82cqw,
		calc(var(--lts-hero-col-left) + var(--lts-hero-floor))
	); /* the drawn 631 (F2b: the +2.5rem widening for the old DM Sans stand-in is gone; at 1440 the floor gives 640). */
	--lts-hero-content-w: min(
		34rem,
		calc(var(--lts-hero-edge) - var(--lts-hero-col-left) - 2rem)
	);
	--lts-hero-img-left: 15.07cqw;
	--lts-hero-img-w: 84.93cqw;
	/* Figma lead boxes: About / Events 391 -> 408 (hero with a button), Hub 425, Board 432 and Contact 448 (drawn 425 / 441:
	   the lead is 18.4px here against 18 drawn, so those two need ~7px more to keep Figma's 5 and 3 lines), Home 525. */
	--lts-hero-lead-w: 26.5625rem; /* 425 */
	--lts-hero-top: 7.75rem; /* with the 3rem bottom pad: content sits ~75px below centre (Figma interior). */

	container-type: inline-size;
	box-sizing: border-box;
	min-height: 509px;
	padding: var(--lts-hero-top) 0 3rem;
	margin-block: 0;
	background: var(--wp--preset--color--contrast);
}
.lts-hero-split--home.wp-block-cover {
	--lts-hero-panel-left: -7.57cqw;
	--lts-hero-edge: max(
		50cqw,
		calc(var(--lts-hero-col-left) + var(--lts-hero-floor))
	);
	--lts-hero-img-w: 90.2cqw;
	--lts-hero-floor: 36.5rem; /* F2b: the Home button pair (559 at the global button padding) stays on one row from 1024 up; 1440+ is the drawn 50 %. */
	--lts-hero-lead-w: 32.8125rem; /* 525 */
	--lts-hero-top: 5.25rem; /* Figma Home content sits ~18px below centre. */
	min-height: 806px;
}

/* The Deep panel = the cover's overlay span. */
.lts-hero-split.wp-block-cover > .wp-block-cover__background {
	inset: 0 auto 0 var(--lts-hero-panel-left);
	width: calc(var(--lts-hero-edge) - var(--lts-hero-panel-left));
	/* 400px token from 1400 up; eases down to 200px by 1200 so the top text lines
	   stay inside it on narrower panels (derived). */
	border-top-right-radius: clamp(
		12.5rem,
		calc(100cqw - 1000px),
		var(--wp--custom--radius--hero-curve)
	);
	background-color: var(--wp--preset--color--contrast);
	opacity: 1;
	z-index: 1;
}

/* The photo: right of the panel, cover-fit; focal point comes from the block. */
.lts-hero-split.wp-block-cover > .wp-block-cover__image-background {
	inset: 0 auto 0 var(--lts-hero-img-left);
	width: var(--lts-hero-img-w);
	height: 100%;
	z-index: 0;
}

/* Content: left column = the 1216 column, text left-aligned in it. */
.lts-hero-split .wp-block-cover__inner-container {
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(
		var(--wp--style--global--content-size) + 2 * var(--lts-hero-gutter)
	);
	margin-inline: auto;
	padding-inline: var(--lts-hero-gutter);
}
.lts-hero-split__content {
	max-width: var(--lts-hero-content-w);
	margin-inline: 0;
	text-align: left;
}
.lts-hero-split__content > * {
	margin-block: 0;
}
.lts-hero-split__eyebrow {
	max-width: 30.375rem; /* 486 */
	margin-bottom: 1.125rem;
	font-weight: 400;
}
.lts-hero-split__title {
	margin-bottom: 1.5rem; /* 24-26 under the H1 (Figma). */
}
.lts-hero-split--home .lts-hero-split__title {
	margin-bottom: 3rem; /* Figma Home: 49. */
}
.lts-hero-split.wp-block-cover:not(.lts-hero-split--home):has(
		.lts-hero-split__buttons
	) {
	--lts-hero-lead-w: 25.75rem; /* 412 (408 is the minimum): Figma 391, but 18.4px type needs 408 to break line 2 after "build lives" as drawn */
}
.lts-board-page .lts-hero-split.wp-block-cover {
	--lts-hero-lead-w: 27.25rem; /* 436 (432 is the minimum) */
}
.lts-contact-page .lts-hero-split.wp-block-cover {
	--lts-hero-lead-w: 28.25rem; /* 452 (448 is the minimum) */
}
.lts-hero-split__lead {
	max-width: min(100%, var(--lts-hero-lead-w));
	line-height: 1.3333;
}
.lts-hero-split__buttons {
	/* Wider than the text column: stays 1rem inside the panel edge, wraps to rows when the pair cannot fit. (F2b: the pair
	   is 559 wide at 1440, Figma 504: the global button padding is 34 against the drawn ~20; flagged, not touched here.) */
	width: calc(var(--lts-hero-edge) - var(--lts-hero-col-left) - 1rem);
	max-width: none;
	gap: 1rem 1.25rem; /* Figma 20 between the pair. */
	margin-top: 2.5rem;
	justify-content: flex-start;
}
.lts-hero-split--home .lts-hero-split__buttons {
	margin-top: 3.4375rem; /* Figma Home: 55. */
}

/* The parent pads a main with no .kd-hero-* (badge clearance, global.css
   :not(:has(.kd-hero-interior)):not(:has(.kd-hero-home))); the LTS hero starts
   flush under the header (only when the hero is the page's first block). Still
   needed after S1: the child Home template has no parent hero either. */
.wp-site-blocks
	> main#kd-main:has(> .entry-content > .lts-hero-split:first-child) {
	padding-top: 0;
}

/* Below 1280 the Home content column is taller than the panel is wide: sit it a
   little lower so its first lines clear the curve (derived, no tablet frame). */
@media (max-width: 1279.98px) {
	.lts-hero-split--home.wp-block-cover {
		--lts-hero-top: 8.5rem;
	}
}

/* The parent forces every .wp-block-cover to 50vh (<= 1024) and 40vh (<= 768)
   with !important (global.css); only !important at higher specificity restores
   the drawn heights. Home is derived shorter on tablet (no frame). */
@media (max-width: 1024px) {
	.lts-hero-split.wp-block-cover {
		--lts-hero-floor: 30rem;
		min-height: 509px !important;
	}
	.lts-hero-split--home.wp-block-cover {
		--lts-hero-floor: 36.5rem;
		min-height: 640px !important;
	}
}

/* -- Mobile (derived): text panel on top, photo below, small curve on the
   panel's bottom-right overlapping the photo. */
@media (max-width: 781.98px) {
	.lts-hero-split.wp-block-cover,
	.lts-hero-split--home.wp-block-cover {
		/* Small curve on phones (was up to 8rem): it tucks over the photo's top
		   edge without hiding the faces (Alain 10-13). */
		--lts-hero-curve: 2.5rem;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: 0 !important; /* beats the parent's 40vh !important. */
		padding: 0;
		background: transparent;
	}
	.lts-hero-split.wp-block-cover > .wp-block-cover__background {
		display: none;
	}
	.lts-hero-split .wp-block-cover__inner-container {
		position: relative;
		order: 1;
		max-width: none;
		padding: 3rem var(--lts-hero-gutter) 3.5rem;
		background: var(--wp--preset--color--contrast);
		border-bottom-right-radius: var(--lts-hero-curve);
	}
	.lts-hero-split.wp-block-cover > .wp-block-cover__image-background {
		position: relative;
		order: 2;
		inset: auto;
		width: 100%;
		/* Photo tucked under the curve by its own height only (no cream notch in
		   the corner, faces clear of the panel). */
		height: calc(var(--lts-hero-curve) + 19rem);
		margin-top: calc(-1 * var(--lts-hero-curve));
	}
	.lts-hero-split__content {
		max-width: none;
	}
	.lts-hero-split__lead {
		max-width: none;
	}
	.lts-hero-split__title,
	.lts-hero-split--home .lts-hero-split__title {
		margin-bottom: 1.25rem;
	}
	.lts-hero-split__buttons,
	.lts-hero-split--home .lts-hero-split__buttons {
		width: auto;
		margin-top: 2rem;
	}
}
@media (max-width: 479.98px) {
	.lts-hero-split__buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.lts-hero-split__buttons .wp-block-button,
	.lts-hero-split__buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Hover on the Deep panel: the shared fill-tide hover is Deep, which is the panel
   colour, so the fill would vanish. Horizon fill + Deep label (12.9:1).
   Pointer devices only: on touch, :hover sticks after a tap (and the anchor jump
   keeps it), so phones showed a half-faded Horizon button that read as disabled. */
@media (hover: hover) {
	body
		.lts-hero-split
		.wp-block-button:not(.lts-x).is-style-fill-tide
		.wp-block-button__link:hover {
		background-color: var(--wp--preset--color--tint);
		border-color: var(--wp--preset--color--tint);
		color: var(--wp--preset--color--contrast);
	}
}

/* Touch: a stuck :hover keeps the resting Tide Dark fill (the parent's generic
   hover would turn it Deep, invisible on the panel). */
@media (hover: none) {
	body
		.lts-hero-split
		.wp-block-button:not(.lts-x).is-style-fill-tide
		.wp-block-button__link:hover {
		background-color: var(--kd-btn-bg);
		border-color: var(--kd-btn-bg);
		color: var(--kd-btn-fg);
	}
}