/* ==========================================================================
   Split Hero
   Panels are flex children; the hover effect animates flex-grow, not width,
   so the layout survives resizing and the mobile stack without cleanup.

   Three visual states (desktop only):
     neutral    — nothing hovered: gradient overlay, black bar, filled icon button
     .is-focused   — hovered panel: orange bar, white button with label, underlined title
     .is-unfocused — the others: grayscale image, eyebrow only, ghost icon button

   Two clocks, both written by module.js:
     --sh-duration-fast — anything that changes size, so it tracks the panel
     --sh-duration      — colour, filter and the underline, at the settings value
   Sizes must share one clock or the CTA drifts while the bar around it resizes.
   ========================================================================== */

.split-hero {
	/* Shared with the description width formula below — change them here only */
	--sh-bar-pad-x: clamp(20px, 5vw, 81px);
	--sh-cta-focused: 230px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	min-height: var(--sh-mobile-min, 0px);
	background: var(--sh-divider, #000);
	overflow: hidden;
}

/* svh is a *static* value — unlike dvh it does not track the iOS toolbar, so
   the hero keeps its height instead of reflowing mid-scroll. */
@supports (height: 100svh) {

	.split-hero {
		min-height: var(--sh-mobile-min-svh, var(--sh-mobile-min, 0px));
	}
}

.split-hero__panel {
	position: relative;
	display: flex;
	flex: var(--sh-panel-flex, 0 0 auto);
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

/* Portrait fills the screen exactly, so no per-panel floor here — it would push
   the section past 100svh and add a scroll. Landscape is the only short case:
   `overflow: hidden` kills a flex item's automatic min-height, so without an
   explicit floor the bottom bar gets cropped. The container uses min-height
   rather than height, so exceeding it grows the section instead of clipping. */
@media (max-width: 991px) and (orientation: landscape) {

	.split-hero__panel {
		min-height: var(--sh-panel-min, 0px);
	}
}

/* Stage — image, overlay, headline ---------------------------------------- */

.split-hero__stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: var(--sh-stage-min, 0px);
	padding: 40px 24px;
	overflow: hidden;
}

/* The head is positioned by two spacers rather than justify-content, so moving
   it between "bottom" and "centre" is an animatable flex-grow change instead of
   a discrete jump. Top spacer always grows; the bottom one only when unfocused. */
.split-hero__spacer {
	flex: 1 1 0;
	min-height: 0;
	pointer-events: none;
	transition: flex-grow var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
}

.split-hero__spacer--bottom {
	flex-grow: 0;
}

.split-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.split-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0);
	transition: filter var(--sh-duration, 0.5s) var(--sh-easing, ease);
	will-change: transform, filter;
}

/* A gradient and a flat colour are different value types — `background` cannot
   interpolate between them, so transitioning it snaps. Two stacked layers
   cross-fading on opacity is the only way to make this smooth. They are
   siblings (::before / ::after), never nested: opacity on a parent would drag
   the other layer down with it. */
.split-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.split-hero__overlay::before,
.split-hero__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: opacity var(--sh-duration, 0.5s) var(--sh-easing, ease);
}

/* Neutral and focused: the design gradient */
.split-hero__overlay::before {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, var(--sh-overlay, 0.75)));
	opacity: 1;
}

/* Unfocused: flat dim */
.split-hero__overlay::after {
	background: rgba(0, 0, 0, var(--sh-overlay-dim, 0.2));
	opacity: 0;
}

.split-hero__head {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 501px;
	text-align: center;
	transition: gap var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
}

.split-hero__eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.split-hero__title {
	margin: 0;
	line-height: 1.11;
	text-decoration: none;
}

/* Underline drawn as a background gradient rather than text-decoration: its
   width is animatable, and box-decoration-break makes it repeat per line.
   GSAP tweens --sh-underline; the transition below is only for the no-JS path. */
.split-hero__title-ink {
	display: inline;
	padding-bottom: var(--sh-underline-offset, 6px);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: var(--sh-underline, 0%) var(--sh-underline-size, 3px);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Bottom bar — description + CTA ------------------------------------------ */

.split-hero__bar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	padding: 28px var(--sh-bar-pad-x);
	background: var(--sh-bar-bg, #000);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background var(--sh-duration, 0.5s) var(--sh-easing, ease);
}

/* Same spacer trick in the bar: grows to 1 on both sides when the description
   collapses, so the CTA slides to the centre instead of snapping there. */
.split-hero__bar-spacer {
	flex: 1 1 0;
	min-width: 24px;
	pointer-events: none;
	transition: flex-grow var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), min-width var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
}

.split-hero__bar-spacer--end {
	flex-grow: 0;
	min-width: 0;
}

.split-hero__desc-wrap {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}

.split-hero__desc {
	margin: 0;
	max-width: 400px;
	font-size: var(--sh-desc-size, 18px);
	line-height: 1.35;
	transition: font-size var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
}

.split-hero__cta {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	/* Centres the label inside the focused min-width. Set here, not on focus:
	   justify-content is discrete and would snap while the button shrinks. */
	justify-content: center;
	gap: 0;
	/* Explicit 0, not auto — auto cannot be interpolated to the focused 230px */
	min-width: 0;
	padding: 16px 20px 16px 0px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--sh-accent, #ef7123);
	color: #fff;
	text-decoration: none;
	line-height: 1;
	transition: background var(--sh-duration, 0.5s) var(--sh-easing, ease), border-color var(--sh-duration, 0.5s) var(--sh-easing, ease), color var(--sh-duration, 0.5s) var(--sh-easing, ease), opacity var(--sh-duration, 0.5s) var(--sh-easing, ease), padding var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), min-width var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), transform 0.25s ease;
}

.split-hero__cta-text {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: max-width var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), opacity var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);

	margin-left: 10px;
	margin-right: 10px;
}

/* Monochrome mask so one SVG can be white / black / accent per state */
.split-hero__cta-icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--sh-icon) center / contain no-repeat;
	mask: var(--sh-icon) center / contain no-repeat;
}

/* Whole-panel click target — sits under the bar content, above the image */

.split-hero__cover {
	position: absolute;
	inset: 0;
	/* z-index: 2; */
	z-index: 10;
}

/* Desktop ----------------------------------------------------------------- */

@media (min-width: 992px) {

	/* Query container for the description width: cqw follows the hero, which
	   keeps its width while the panels animate inside it */
	.split-hero {
		flex-direction: row;
		height: var(--sh-height, 780px);
		min-height: var(--sh-min-height, 0px);
		container-type: inline-size;
	}

	@supports (height: 100svh) {

		.split-hero {
			height: var(--sh-height-svh, var(--sh-height, 780px));
		}
	}

	/* Horizontal main axis — now a 0 basis is a width, which is what we want,
	   and the mobile per-panel minimum no longer applies */
	.split-hero__panel {
		flex: 1 1 0;
		min-height: 0;
	}

	.split-hero__stage {
		flex: 1 1 auto;
		min-height: 0;
		padding: 20px 20px 60px 20px;
	}

	/* Fixed bar height keeps the stage from resizing between states */
	.split-hero__bar {
		flex: 0 0 auto;
		min-height: 176px;
	}

	/* Fallback when JS is off or the animation lib fails: same proportions, pure CSS */
	.split-hero--css .split-hero__panel {
		transition: flex-grow var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
	}

	.split-hero--css:hover .split-hero__panel {
		flex-grow: var(--sh-grow-rest, 0.8);
	}

	.split-hero--css .split-hero__panel:hover {
		flex-grow: var(--sh-grow-active, 1.2);
	}

	/* --- Focused panel ---------------------------------------------------- */

	/* No-JS path only — GSAP owns --sh-underline when it is available. The delay
	   holds the underline back until the panel has finished expanding. */
	.split-hero--css .split-hero__title-ink {
		transition: background-size var(--sh-duration, 0.5s) var(--sh-easing, ease) var(--sh-duration-fast, 0.3s);
	}

	.split-hero--css .split-hero__panel:hover .split-hero__title-ink {
		--sh-underline: 100%;
	}

	:is(.split-hero__panel.is-focused, .split-hero--css .split-hero__panel:hover) .split-hero__bar {
		background: var(--sh-accent, #ef7123);
	}

	:is(.split-hero__panel.is-focused, .split-hero--css .split-hero__panel:hover) .split-hero__desc {
		font-size: calc(var(--sh-desc-size, 18px) + 3px);
		max-width: 450px;
	}

	:is(.split-hero__panel.is-focused, .split-hero--css .split-hero__panel:hover) .split-hero__cta {
		background: #fff;
		border-color: #fff;
		color: #000;
		padding-left: 20px;
		min-width: var(--sh-cta-focused);
	}

	:is(.split-hero__panel.is-focused, .split-hero--css .split-hero__panel:hover) .split-hero__cta-text {
		max-width: 14em;
		opacity: 1;
	}

	/* --- Unfocused panels ------------------------------------------------- */

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__media img {
		filter: grayscale(1);
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__overlay::before {
		opacity: 0;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__overlay::after {
		opacity: 1;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__spacer--bottom {
		flex-grow: 1;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__head {
		gap: 0;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__title {
		max-height: 0;
		margin: 0;
		overflow: hidden;
		opacity: 0;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__bar-spacer--end {
		flex-grow: 1;
		min-width: 24px;
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__bar-spacer:not(.split-hero__bar-spacer--end) {
		min-width: 0;
	}

	/* Desktop is where the collapse happens, so the paragraph gets a definite
	   width — that is what stops it re-wrapping while the wrapper shrinks.
	   Up to 400px, but never wider than the room left in the bar: panel width
	   minus side padding, the button and the 24px spacer. Checked for the
	   neutral panel (a 1/count share, 66px icon button) and the focused one
	   (hover share, --sh-cta-focused button); the tighter of the two wins.
	   Both are derived from the hero width, not the panel's, so the text does
	   not re-wrap while a panel animates. 2px is the gap between panels. */
	.split-hero__desc {
		--sh-desc-row: calc(100cqw - (var(--sh-count, 2) - 1) * 2px);
		width: 400px;
		width: min(400px, var(--sh-desc-row) / var(--sh-count, 2) - 2 * var(--sh-bar-pad-x) - 66px - 24px, var(--sh-desc-row) * var(--sh-hover-share, 0.6) - 2 * var(--sh-bar-pad-x) - var(--sh-cta-focused) - 24px);
		max-width: none;
	}

	/* JS drives the wrapper with GSAP; this rule is only for the no-JS fallback */
	.split-hero--css:hover .split-hero__panel:not(:hover) .split-hero__desc-wrap {
		max-width: 0;
		opacity: 0;
		transition: max-width var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), opacity var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
	}

	:is(.split-hero__panel.is-unfocused, .split-hero--css:hover .split-hero__panel:not(:hover)) .split-hero__cta {
		background: transparent;
		border-color: var(--sh-accent, #ef7123);
		color: var(--sh-accent, #ef7123);
		opacity: 0.75;
	}

	/* Title collapses smoothly rather than snapping */
	.split-hero__title {
		max-height: 40vh;
		transition: max-height var(--sh-duration-fast, 0.3s) var(--sh-easing, ease), opacity var(--sh-duration-fast, 0.3s) var(--sh-easing, ease);
	}
}

/* Button on the left */
/* Mirrored bar: row-reverse keeps the DOM order, so the spacers above work
   unchanged — the end spacer now sits left of the button and still centres it
   when the panel is unfocused. */
@media (min-width: 992px) {
	.split-hero__panel--cta-left .split-hero__bar {
		flex-direction: row-reverse;
	}
	/* The paragraph is pinned to the right edge, so the collapse clips it from
	   the left — the mirror image of the default panel */
	.split-hero__panel--cta-left .split-hero__desc-wrap {
		display: flex;
		justify-content: flex-end;
	}
	.split-hero__panel--cta-left .split-hero__desc {
		flex-shrink: 0;
		text-align: right;
	}
	.split-hero__panel--cta-left .split-hero__cta {
		flex-direction: row-reverse;
		padding: 16px 0 16px 20px;
	}
	.split-hero__panel--cta-left .split-hero__cta-icon {
		transform: rotate(180deg);
	}
	:is(.split-hero__panel--cta-left.is-focused, .split-hero--css .split-hero__panel--cta-left:hover) .split-hero__cta {
		padding-right: 10px;
	}
}
/* end Button on the left */


/* Motion preferences ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.split-hero__panel,
	.split-hero__cta,
	.split-hero__cta-text,
	.split-hero__title,
	.split-hero__desc,
	.split-hero__bar,
	.split-hero__overlay,
	.split-hero__stage,
	.split-hero__head,
	.split-hero__media img {
		transition: none !important;
	}

	/* .split-hero__cta:hover,
	.split-hero__cta:focus-visible {
		transform: none;
	} */
}