/* ==========================================================================
   Widget — Editorial Intro (Image + Copy)
   Figma node 65:233. Mobile-first: image over copy, then side by side from
   900px up, as two 560px columns centred in the container.
   ========================================================================== */

/*
 * The comp sets its copy in navy rather than the white scheme's near-black
 * ink. Remapped on the token, so the dark and ice schemes are left alone.
 */
.o-section--editorial-intro.o-scheme-light {
	--o-text: var(--o-navy);
}

.o-editorial-intro {
	--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 comp spaces heading, paragraphs and buttons 28px apart - the same rhythm
   the Split Hero uses.
   -------------------------------------------------------------------------- */
.o-editorial-intro__text {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	min-width: 0;
}

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

.o-section--editorial-intro .o-section-heading__title {
	font-size: var(--o-fs-h2); /* 28 -> 44. The comp is 42. */
	font-weight: var(--o-fw-semibold);
	line-height: var(--o-lh-heading);
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

/* With no eyebrow the title starts at the top of the column. */
.o-section--editorial-intro .o-section-heading__title:first-child {
	margin-top: 0;
}

/* Full-strength rather than the scheme's muted tone, as the comp draws it. */
.o-section--editorial-intro .o-section-heading__intro {
	max-width: none;
	margin-top: 1.75rem;
	color: var(--o-text);
	font-size: var(--o-fs-body-lg); /* The comp is 17. */
	line-height: var(--o-lh-body);   /* 27 on 18 */
}

.o-editorial-intro__body > p {
	margin: 0;
}

.o-editorial-intro__body > p + p {
	margin-top: 1.75rem;
}

.o-editorial-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--o-space-md) var(--o-space-lg);
	padding-top: var(--o-space-xs);
}

/* --------------------------------------------------------------------------
   Image column
   The copy comes first in the markup - it is the content - so the image is
   pulled ahead of it here, and put back on the right by the modifier below.
   -------------------------------------------------------------------------- */
.o-editorial-intro__media {
	position: relative;
	order: -1;
	min-width: 0;
}

/*
 * Stacked, a 3:4 image at full width would be taller than the screen on a
 * tablet, so it is capped and cropped. On a phone the cap never kicks in.
 */
.o-editorial-intro__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70svh;
	aspect-ratio: var(--o-media-ratio);
	object-fit: cover;
}

/* Editor-only affordance so the two-column structure is visible while building. */
.o-editorial-intro__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;
}

/* --------------------------------------------------------------------------
   Side by side
   Two columns of at most 560px with a 128px gap - 1248 in all, which is the
   comp's pair of columns to the pixel - centred in the 1440 container.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-editorial-intro {
		grid-template-columns: repeat(2, minmax(0, 35rem));
		justify-content: center;
		column-gap: clamp(3rem, 8vw, 8rem);
	}

	.o-editorial-intro--media-right .o-editorial-intro__media {
		order: 1;
	}

	.o-editorial-intro__img {
		max-height: none;
	}
}