/* ==========================================================================
   Widget — Split Hero (Copy + Photo)
   Figma node 58:25. Mobile-first: photograph over copy, then side by side from
   900px up.

   The Video Hero loads this sheet too, for the copy column's type and link;
   its own layout is in video-hero.css.
   ========================================================================== */

.o-split-hero {
	--o-split-media: 45.83%; /* Overridden inline by the "Photograph width" control. */

	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Copy column
   The shared heading block is centred and width-limited by default; here it
   fills its column, and the 28px rhythm the comp uses between kicker, heading,
   copy and link is set on the block's own parts.
   -------------------------------------------------------------------------- */
.o-split-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-inline: var(--o-gutter);
	padding-block: var(--o-section-y);
}

:is(.o-section--split-hero, .o-section--video-hero) .o-section-heading {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
}

/*
 * The kicker is not the site's small uppercase eyebrow: the comp sets it as a
 * light 33px title-case line, closer to a second heading than to a label. 32
 * is the round number a hair below it.
 */
:is(.o-section--split-hero, .o-section--video-hero) .o-eyebrow {
	font-size: clamp(1.25rem, 0.9rem + 1.1vw, 2rem); /* 20 -> 32 */
	font-weight: var(--o-fw-regular);
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
}

:is(.o-section--split-hero, .o-section--video-hero) .o-section-heading__title {
	margin-top: 28px;
	font-size: clamp(1.75rem, 1rem + 2.6vw, 3.375rem); /* 28 -> 54, per the comp */
	font-weight: var(--o-fw-bold);
	line-height: 1.04; /* 56 on 54 */
	text-transform: uppercase;
	text-wrap: balance;
}

:is(.o-section--split-hero, .o-section--video-hero) .o-section-heading__intro {
	margin-top: 28px;
	font-size: var(--o-fs-body-lg);
	line-height: 1.75; /* Per the comp, and matching the feature split. */
}

.o-split-hero__cta {
	margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Photograph column
   Stretched to the full height of the band, which is why the section carries no
   padding of its own - see the note on the widget's $ovation_default_padding.
   -------------------------------------------------------------------------- */
.o-split-hero__media {
	position: relative;
	min-width: 0;
	min-height: 260px;
	overflow: hidden;
}

.o-split-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--o-split-focal, center center);
}

/* Editor-only affordance so the split is visible while a page is being built. */
.o-split-hero__media--empty {
	display: grid;
	place-items: center;
	border: 2px dashed var(--o-rule);
	color: var(--o-text-soft);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The wave pattern
   The shared .o-pattern (components.css) on the copy side, strongest at the
   photograph's edge so it seems to run out from behind it (o-pattern--from-*
   in the markup). Pattern strength overrides the opacity.
   -------------------------------------------------------------------------- */
.o-split-hero__pattern {
	--o-split-media: 45.83%; /* Overridden inline, in step with .o-split-hero. */

	opacity: 0.3;
}

/* --------------------------------------------------------------------------
   Stacked
   Photograph first: it is the thing that says which page you have landed on.
   Both rows are placed explicitly, because the photograph comes second in the
   markup - the copy is the content, and it should be what a reader without CSS
   meets first.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.o-split-hero__media {
		grid-row: 1;
	}

	.o-split-hero__text {
		grid-row: 2;
	}

	/*
	 * Stacked, the copy sits on top of the pattern rather than beside it.
	 * Knocking the lines back keeps the paragraph comfortable to read. This
	 * multiplies with the pattern-strength control rather than replacing it.
	 */
	.o-split-hero__pattern::before {
		opacity: 0.55;
	}
}

/* --------------------------------------------------------------------------
   Side by side

   Three tracks, because the copy has to land on the same grid as every other
   section while the photograph reaches the viewport edge. The first track is
   the site gutter: below 1632 it is the plain 5% gutter, and above that it
   grows to whatever centres a 1440 container - which is exactly what
   .o-container does, expressed as a track so the photograph can escape it.
   Percentages here resolve against the section width rather than the viewport,
   so this stays right whether or not there is a scrollbar.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-split-hero {
		--o-split-inset: minmax(var(--o-gutter), calc((100% - var(--o-container)) / 2));

		align-items: stretch;
	}

	.o-split-hero--media-right {
		grid-template-columns: var(--o-split-inset) minmax(0, 1fr) var(--o-split-media);
	}

	.o-split-hero--media-left {
		grid-template-columns: var(--o-split-media) minmax(0, 1fr) var(--o-split-inset);
	}

	/* The copy always takes the middle track; the outer one is the gutter. */
	.o-split-hero__text {
		grid-column: 2;
		grid-row: 1;
		padding-inline: 0;
	}

	.o-split-hero--media-right .o-split-hero__text {
		padding-inline-end: var(--o-gutter);
	}

	.o-split-hero--media-left .o-split-hero__text {
		padding-inline-start: var(--o-gutter);
	}

	.o-split-hero--media-right .o-split-hero__media {
		grid-column: 3;
		grid-row: 1;
	}

	.o-split-hero--media-left .o-split-hero__media {
		grid-column: 1;
		grid-row: 1;
	}

	.o-split-hero__media {
		min-height: 420px;
	}

	/*
	 * The pattern stops where the photograph starts. It would be hidden behind
	 * it anyway - the container layer paints above the backdrop - but clipping
	 * it keeps the fade's geometry honest at every width.
	 */
	.o-split-hero__pattern--left {
		right: var(--o-split-media);
	}

	.o-split-hero__pattern--right {
		left: var(--o-split-media);
	}
}