/**
 * Front-page hero — the Böcker/Filmer split hero, sized up for the front page.
 *
 * Pairs with patterns/hero-front-ahrens.php. Loaded on the front page and in the
 * editor via add_editor_style. The .split-hero base rules live in custom.css,
 * which is not an editor stylesheet, so the layout the pattern depends on is
 * restated here under the --front modifier — that way the block looks the same
 * in the editor as it does on the page.
 */

.split-hero--front .wp-block-columns {
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

/* Photo column: the image is absolutely positioned so it fills the stretched
   column (percentage heights do not resolve inside a stretched flex item). */
.split-hero--front .split-hero__media {
	position: relative;
	align-self: stretch;
	min-height: min(76vh, 720px);
	overflow: hidden;
}

.split-hero--front .split-hero__media .wp-block-image,
.split-hero--front .split-hero__media figure {
	margin: 0;
	height: 100%;
}

/* 58% horizontally: the subject stands right of centre, so a centred crop
   would cut him at the panel edge. */
.split-hero--front .split-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 28%;
}

.split-hero--front .split-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(76vh, 720px);
}

/* Eyebrow — a short rule plus the company name, so the H1 has something to sit under. */
.split-hero--front .split-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	color: #8a63a8;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.split-hero--front .split-hero__eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: currentColor;
	flex: none;
}

.split-hero--front .split-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 3.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.split-hero--front .split-hero__lead {
	margin: 0;
	max-width: 42ch;
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
	line-height: 1.6;
}

/* Signature as a sign-off under the claim it signs — small, so the panel keeps
   three voices and a name rather than four competing elements. */
.split-hero--front .split-hero__signature {
	margin: 1.75rem 0 0;
}

.split-hero--front .split-hero__signature img {
	display: block;
	width: 190px;
	max-width: 55%;
	height: auto;
}

/* ==========================================================================
   Intro block below the hero

   The old hero pulled the signature + intro up over the photo (margin-top:-70vh
   on desktop, -150px on mobile). This photo puts the subject centre-right, which
   is exactly where that overlap lands, so with this hero the intro flows normally.
   Scoped to the sibling so the old hero keeps its own behaviour.
   ========================================================================== */

.split-hero--front ~ .ahrens-intro {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 860px;
	padding-right: var(--wp--preset--spacing--40);
}

/* The signature now lives in the hero panel, so the copy still in the intro
   block is a duplicate. Hidden rather than deleted: the block is page content,
   which does not travel with a push, and this way live is right the moment the
   pattern goes in. Delete the block in the editor when convenient. */
.split-hero--front ~ .ahrens-intro .ahrens-intro__signature {
	display: none;
}

/* The intro paragraphs were written for a narrow floating column and run
   together at this width. */
.split-hero--front ~ .ahrens-intro p + p {
	margin-top: 1em;
}

/* ==========================================================================
   Stacked — WordPress breaks columns at 781px
   ========================================================================== */

@media (max-width: 781px) {
	.split-hero--front .split-hero__media,
	.split-hero--front .split-hero__panel {
		min-height: 0;
	}

	/* 4/5 rather than the subpages' 4/3: this is a standing portrait, and the
	   taller band keeps his face at a readable size on a phone. */
	.split-hero--front .split-hero__media img {
		position: static;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	/* The block sets spacing-80 padding for desktop vertical-centring; far too
	   much once stacked. Overrides the block's inline padding. */
	.split-hero--front .split-hero__panel {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
	}

	.split-hero--front .split-hero__eyebrow {
		margin-bottom: 0.875rem;
		font-size: 0.75rem;
		letter-spacing: 0.16em;
	}

	.split-hero--front .split-hero__eyebrow::before {
		width: 1.75rem;
	}

	.split-hero--front .split-hero__title {
		font-size: clamp(1.875rem, 7.5vw, 2.5rem);
		margin-bottom: 0.75rem;
	}

	.split-hero--front .split-hero__lead {
		font-size: 1rem;
		max-width: none;
	}

	.split-hero--front .split-hero__signature {
		margin-top: 1.5rem;
	}

	.split-hero--front .split-hero__signature img {
		width: 165px;
	}

	.split-hero--front ~ .ahrens-intro {
		padding-top: var(--wp--preset--spacing--50) !important;
	}
}