/**
 * Approach hero — Figma 609:19732.
 *
 * Desktop (≥ 64rem): 100dvh well (max-height locked so Safari cannot
 * grow the group). Copy is an in-flow row. The Impact card is absolute
 * from the top (copy-top + vw, capped at Figma 828px). The canvas keeps
 * its 1440×1520 ratio and paints below the well. No transform/scale, no vmax.
 *
 * Mobile (< 64rem): copy and Impact card overlay a cover well. Media
 * crop (zoom / position) pans that canvas. No in-flow photo under the type.
 */

.wp-site-blocks:has(.airnexis-approach-hero),
.wp-site-blocks > main:has(.airnexis-approach-hero),
.wp-block-post-content:has(.airnexis-approach-hero) {
	margin: 0;
	padding: 0;
	max-width: none;
	overflow: visible;
}

.airnexis-approach-hero,
.airnexis-approach-hero.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-approach-hero {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin-right: 0;
	margin-left: 0;
	width: 100%;
	max-width: 100%;
}

.airnexis-approach-hero__title {
	margin: 0;
	width: 100%;
	max-width: 64rem; /* 1024px — wider than the original 807px copy group */
}

.airnexis-approach-hero__lede {
	max-width: 50.4375rem; /* 807px — Figma lede measure */
	margin: 0;
	width: 100%;
}

.airnexis-approach-hero__cta {
	margin: 0;
}

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

.airnexis-approach-hero__card-title,
.airnexis-approach-hero__card-body {
	margin: 0;
	width: 100%;
}

.airnexis-approach-hero__card-body sup {
	font-size: 0.65em;
	line-height: 0;
}

.airnexis-approach-hero__sources,
.block-editor-block-list__layout .wp-block.airnexis-approach-hero__sources {
	margin: 0;
	width: 100%;
}

.airnexis-approach-hero__sources-label {
	margin: 0;
	color: var(--wp--custom--color--skyblue--50);
}

.airnexis-approach-hero__sources-list {
	margin: 0;
	padding-left: 1.1em;
	color: var(--wp--custom--color--blue--50);
}

.airnexis-approach-hero__sources-list li {
	margin: 0;
}

.airnexis-approach-hero__card,
.block-editor-block-list__layout .wp-block.airnexis-approach-hero__card {
	border-radius: var(--wp--preset--border-radius--lg);
	background-image: linear-gradient(
		248deg,
		var(--wp--preset--color--accent-4) 17.13%,
		var(--wp--preset--color--accent-3) 66.19%
	);
}

.airnexis-approach-hero__card a {
	color: inherit;
	text-decoration: underline;
}

@media (min-width: 64rem) {
	.airnexis-approach-hero,
	.airnexis-approach-hero.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero {
		min-height: 0; /* do not let min-content (the canvas) grow this box */
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		overflow: visible; /* canvas wave + Impact card hang into the next section */
	}

	.airnexis-approach-hero figure.airnexis-approach-hero__media,
	.airnexis-approach-hero > .wp-block.airnexis-approach-hero__media,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__media {
		position: absolute;
		/*
		 * Canvas is width × (1520/1440). When that is taller than the
		 * 100dvh well, shift up (crop white sky) so the couple stays under
		 * the copy. Figure is absolute — this does not grow the group.
		 */
		top: clamp(-40rem, calc((100vh - 100vw * 1520 / 1440) * var(--wp--custom--approach-hero--media-shift)), 0px);
		top: clamp(-40rem, calc((100dvh - 100vw * 1520 / 1440) * var(--wp--custom--approach-hero--media-shift)), 0px);
		right: 0;
		left: 0;
		z-index: 0;
		margin: 0;
		line-height: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}

	.editor-styles-wrapper .airnexis-approach-hero figure.airnexis-approach-hero__media,
	.editor-styles-wrapper .block-editor-block-list__layout .wp-block.airnexis-approach-hero__media {
		pointer-events: auto;
	}

	.airnexis-approach-hero figure.airnexis-approach-hero__media img {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
		max-height: none;
		aspect-ratio: 1440 / 1520; /* Figma canvas; paints below the 100dvh well */
		object-fit: contain;
		object-position: var(--airnexis-media-position, top center);
	}

	.airnexis-approach-hero > .airnexis-approach-hero__copy,
	.airnexis-approach-hero > .wp-block.airnexis-approach-hero__copy,
	.airnexis-approach-hero__copy,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__copy {
		grid-column: 1;
		grid-row: 2;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		gap: var(--wp--preset--spacing--xl);
		box-sizing: border-box;
		width: calc(100% - 2 * (var(--airnexis-layout-inset) + var(--wp--preset--spacing--3-xl)));
		max-width: var(--wp--custom--layout--max);
		margin: 0;
		/* Figma copy y=240 minus the 94px header (desktop hero does not tuck). */
		padding-top: var(--wp--custom--approach-hero--copy-top);
		transform: none;
		text-align: center;
	}

	.airnexis-approach-hero > .airnexis-approach-hero__card,
	.airnexis-approach-hero > .wp-block.airnexis-approach-hero__card,
	.airnexis-approach-hero__card,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__card {
		position: absolute;
		/*
		 * From the top, like the copy. Offset is copy-top + 48.75vw
		 * (Figma 828 at 1440). Floor 40rem so it stays under the CTA;
		 * cap 52rem so it does not run away on wide screens.
		 * Inline clamp — Safari drops calc() when a clamp() token is an addend.
		 */
		top: clamp(
			35rem,
		 40vw,
			47rem
		 );
		right: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--3-xl));
		bottom: auto;
		left: auto;
		z-index: 4;
		box-sizing: border-box;
		width: min(40.3125rem, calc(50% - var(--wp--preset--spacing--xl)));
		height: auto;
		max-height: none;
		margin: 0;
	}
}

@media (max-width: 63.9375rem) {
	.airnexis-approach-hero,
	.airnexis-approach-hero.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero {
		display: flex;
		flex-direction: column;
		height: auto;
		max-height: none;
		min-height: var(--wp--custom--approach-hero--min-height);
		margin-top: -4.5rem; /* 72px mobile header */
		margin-bottom: 0;
		padding-top: 0;
		overflow: hidden;
	}

	.airnexis-approach-hero__copy,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__copy {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: auto;
		max-width: none;
		margin: 0;
		padding-top: 8rem;
		padding-right: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		padding-bottom: var(--wp--preset--spacing--xl);
		padding-left: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		transform: none;
		text-align: center;
	}

	.airnexis-approach-hero figure.airnexis-approach-hero__media,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__media {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		overflow: hidden;
		margin: 0;
		line-height: 0;
		pointer-events: none;
	}

	.editor-styles-wrapper .airnexis-approach-hero figure.airnexis-approach-hero__media,
	.editor-styles-wrapper .block-editor-block-list__layout .wp-block.airnexis-approach-hero__media {
		pointer-events: auto;
	}

	.airnexis-approach-hero figure.airnexis-approach-hero__media img {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: var(--airnexis-media-position-mobile, 50% 45%);
		transform: scale(var(--airnexis-media-zoom-mobile, 1));
		transform-origin: var(--airnexis-media-position-mobile, 50% 45%);
	}

	.airnexis-approach-hero__card,
	.block-editor-block-list__layout .wp-block.airnexis-approach-hero__card {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		z-index: 2;
		box-sizing: border-box;
		width: auto;
		max-width: none;
		height: auto;
		margin-top: 10rem;
		margin-right: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		margin-bottom: var(--wp--preset--spacing--xl);
		margin-left: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
	}
}