/* ============================================================
 * BIOTA · SECTION · Hero  (markup: templates/front-page.html)
 * Builds on primitives: .biota-section (padding), .biota-eyebrow--light,
 * .biota-actions--stacked, .biota-btn--fill-light / --ghost-light.
 * Only the hero-specific cover height, content column and display type
 * live here.
 * ============================================================ */

.biota-hero {
	min-height: 640px;
	/* Override .biota-section's even vertical rhythm: content is anchored to
	 * the bottom, so it wants less up top and a deliberate lift off the base.
	 * Horizontal padding is inherited from .biota-section (bt-70) so the hero
	 * text left-edge lines up with every other section. */
	padding-top: var(--wp--preset--spacing--bt-50);
	/* Tight on phones, roomier on desktop. */
	padding-bottom: clamp(32px, 5vw, 86px);
}

/* Desktop: fill the whole viewport. The navbar is position:fixed and overlays
 * the hero (transparent over the photo), so no header height is subtracted. */
@media (min-width: 601px) {
	.biota-hero {
		min-height: 100svh;
	}
}

/* Hero scrim. Moved off the theme.json `scrim-hero` token so it can be
 * responsive (a gradient can't be fluid, and WP applies gradient presets with
 * !important). Desktop = the exact Figma gradient; mobile goes deeper because
 * the headline wraps to 3 lines, so the text block sits up in what would be the
 * near-transparent middle of the Figma gradient. */
.biota-hero .wp-block-cover__background.has-background-dim {
	/* Clear WP's default black overlay-color so only our gradient shows over
	 * the photo (otherwise the transparent parts of the gradient reveal black). */
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba(15, 15, 18, 0.5) 0%,
		rgba(15, 15, 18, 0.05) 34%,
		rgba(15, 15, 18, 0.35) 66%,
		rgba(15, 15, 18, 0.92) 100%
	);
}
@media (max-width: 600px) {
	.biota-hero .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(
			180deg,
			rgba(15, 15, 18, 0.45) 0%,
			rgba(15, 15, 18, 0.4) 35%,
			rgba(15, 15, 18, 0.65) 65%,
			rgba(15, 15, 18, 0.95) 100%
		);
	}
}

.biota-hero__content {
	display: flex;
	flex-direction: column;
	/* Tight rhythm between eyebrow → title → text (matches the mock ~12px). */
	gap: var(--wp--preset--spacing--bt-20);
	max-width: 640px; /* Figma: hero text column is 640px on desktop */
}

/* A touch more breathing room before the call-to-action stack. */
.biota-hero__content .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--bt-20);
}

.biota-hero .biota-hero__title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.biota-hero .biota-hero__text {
	margin: 0;
	/* #2: wider line only kicks in on wider screens — the phone column is
	 * already narrower than this cap, so mobile is unaffected (~48ch ≈ 469px). */
	max-width: 48ch;
	color: var(--wp--preset--color--base);
	/* #1: 16px on phones (comfortable) fluid up to Figma's 19px on desktop.
	 * Custom range — our `large` token floors at 17px, we want 16px here. */
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.6;
}