/**
 * Homepage hero — Figma Hero (609:14067) on Homepage [1440px].
 * Desktop: at least 100dvh, then grows with width (photo 1919×1504) so
 * wide screens show more of the man instead of covering him off. Photo
 * hangs 5rem down so copy sits on sky. Figure fill matches the sky if a
 * gap shows. Mobile: taller than the viewport (Figma 841px) so copy sits
 * in the sky and the man stays below it. White wave is a separate overlay
 * at the section bottom.
 */

.wp-site-blocks > main:has(.airnexis-hero) {
	margin: 0;
	padding: 0;
	max-width: none;
}

.airnexis-hero,
.airnexis-hero.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-hero {
	position: relative;
	box-sizing: border-box;
	isolation: isolate;
	margin-top: -5.875rem; /* slide under the 94px fixed header */
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	min-height: 100vh;
	min-height: 100dvh;
	min-height: max(100vh, calc(100vw * 1504 / 1919));
	min-height: var(--wp--custom--hero--well-min-height);
	overflow: hidden;
}

.airnexis-hero::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -2px;
	z-index: 1;
	width: auto;
	height: var(--wp--custom--hero--wave-height);
	pointer-events: none;
	background: url("../images/hero-wave.svg?v=0.4.28") no-repeat left bottom / 100% 100%;
}

.airnexis-hero figure.airnexis-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	line-height: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--custom--color--skyblue--50);
}

.airnexis-hero figure.airnexis-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--airnexis-media-position, 50% 5rem);
	transform: scale(var(--airnexis-media-zoom, 1));
	transform-origin: var(--airnexis-media-position, 50% 5rem);
}

/*
 * Overlay copy. The extra editor selector beats Gutenberg’s
 * `.block-editor-block-list__block { position: relative }` (same
 * specificity as `.airnexis-hero__copy` alone, and it loads later),
 * which otherwise leaves the copy in flow and `top` just shoves it down.
 */
.airnexis-hero__copy,
.block-editor-block-list__layout .wp-block.airnexis-hero__copy {
	position: absolute;
	top: var(--wp--custom--hero--copy-top);
	left: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--3-xl));
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	box-sizing: border-box;
	width: var(--wp--custom--hero--copy-width);
	max-width: calc(min(100%, var(--wp--custom--layout--max)) - 2 * var(--wp--preset--spacing--3-xl));
	margin: 0;
}

.airnexis-hero__title {
	margin: 0;
	width: 100%;
}

.airnexis-hero__lede {
	max-width: 80.5%; /* 650/807 — Figma lede vs copy group */
	margin: 0;
}

.airnexis-hero__cta {
	margin: 0;
}

.airnexis-hero__cta .wp-block-button {
	margin: 0;
}

@media (max-width: 48rem) {
	.airnexis-hero,
	.airnexis-hero.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-hero {
		display: block;
		margin-top: -4.5rem; /* 72px mobile header */
		height: auto;
		max-height: none;
		min-height: var(--wp--custom--hero--min-height); /* 841px — Figma 375 Hero */
		overflow: hidden;
	}

	/*
	 * Copy overlays the sky (Figma 375 copy at y=128). Keep it absolute —
	 * stacking it above the photo put the words on white instead of sky.
	 */
	.airnexis-hero__copy,
	.block-editor-block-list__layout .wp-block.airnexis-hero__copy {
		position: absolute;
		top: 8rem;
		right: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		left: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		z-index: 2;
		box-sizing: border-box;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.airnexis-hero__lede {
		max-width: 100%;
	}

	/*
	 * Full-bleed canvas. Cover fills the portrait well with the whole
	 * landscape height; object-position pans, media-zoom scales from
	 * that origin so sky and subject land under the copy.
	 */
	.airnexis-hero figure.airnexis-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		overflow: hidden;
	}

	.airnexis-hero figure.airnexis-hero__media img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		min-height: 0;
		object-fit: cover;
		object-position: var(--airnexis-media-position-mobile, var(--wp--custom--hero--media-position));
		transform: scale(var(--airnexis-media-zoom-mobile, var(--wp--custom--hero--media-zoom)));
		transform-origin: var(--airnexis-media-position-mobile, var(--wp--custom--hero--media-position));
	}

	/*
	 * Keep the 1440×244 scoop’s aspect so it is not stretched into a
	 * steep wedge over the man.
	 */
	.airnexis-hero::after {
		left: -2px;
		right: -2px;
		width: auto;
		height: auto;
		aspect-ratio: 1440 / 244;
		background-size: 100% 100%;
	}
}