/* ==========================================================================
   Widget — Feature Split (Text + Image)
   Figma node 25:129. Mobile-first: one column, then two from 900px up.
   ========================================================================== */

.o-feature-split {
	--o-split-gap: clamp(2rem, 4vw, 4rem);
	--o-media-ratio: auto; /* Overridden inline by the "Image shape" control. */

	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-space-xl);
	align-items: center;
}

/* --------------------------------------------------------------------------
   Copy column
   The shared heading block is centred and width-limited by default; here it
   fills its column and the spacing below it is owned by the flex gap.
   -------------------------------------------------------------------------- */
.o-feature-split__text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.o-section--feature-split .o-section-heading {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
}

.o-section--feature-split .o-section-heading__title {
	margin-top: 0;
	font-size: clamp(1.75rem, 1rem + 2.6vw, 3.375rem); /* 28 -> 54, per the comp */
	font-weight: var(--o-fw-semibold);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Space under the eyebrow - only when there is one, so a bare heading stays flush. */
.o-section--feature-split .o-eyebrow + .o-section-heading__title {
	margin-top: var(--o-space-md); /* 20 */
}

.o-section--feature-split .o-section-heading__intro {
	margin-top: 1.5rem;
	font-size: var(--o-fs-body-lg);
	line-height: 1.75;
}

.o-feature-split__cta {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Image column
   Cropping is done here rather than in the media library, so one upload serves
   every shape the control offers.
   -------------------------------------------------------------------------- */
.o-feature-split__media {
	position: relative;
	min-width: 0;
}

.o-feature-split__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--o-media-ratio);
	object-fit: cover;
}

/* Editor-only affordance so the two-column structure is visible while building. */
.o-feature-split__media--empty {
	display: grid;
	place-items: center;
	/* min-height keeps the box visible when the shape is set to "natural". */
	min-height: 18rem;
	aspect-ratio: var(--o-media-ratio);
	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): aqua waves on the image side,
   strongest in the lower corner (o-pattern--corner-right / --corner-left in
   the markup). Pattern strength overrides the opacity.
   -------------------------------------------------------------------------- */
.o-feature-split__pattern {
	opacity: 0.4;
}

.o-feature-split__pattern--right {
	left: 35%;
}

.o-feature-split__pattern--left {
	right: 35%;
}

/* --------------------------------------------------------------------------
   Two columns
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-feature-split {
		gap: 0;
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * The comp has no grid gap: the breathing room is padding inside the copy
	 * column, so the image still lands on exactly half the container.
	 */
	.o-feature-split__text {
		padding-inline-end: var(--o-split-gap);
	}

	.o-feature-split--media-left .o-feature-split__text {
		order: 2;
		padding-inline-end: 0;
		padding-inline-start: var(--o-split-gap);
	}

	.o-feature-split--media-left .o-feature-split__media {
		order: 1;
	}

	.o-feature-split--split-text-wide {
		grid-template-columns: 1.5fr 1fr;
	}

	.o-feature-split--split-text-slim {
		grid-template-columns: 1fr 1.5fr;
	}

	/* With the image first, the wider track is the second one. */
	.o-feature-split--media-left.o-feature-split--split-text-wide {
		grid-template-columns: 1fr 1.5fr;
	}

	.o-feature-split--media-left.o-feature-split--split-text-slim {
		grid-template-columns: 1.5fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   Stacked
   The pattern spans the full width behind the stacked columns.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.o-feature-split__pattern--right,
	.o-feature-split__pattern--left {
		left: 0;
		right: 0;
	}

	/*
	 * Stacked, the copy sits directly 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, so the editor still has the final say.
	 */
	.o-feature-split__pattern::before {
		opacity: 0.55;
	}
}