/**
 * Approach content bands — mechanism (609:19795), lungs (696:11381),
 * delivery (609:19854), clinical (609:19878).
 * Shared section padding lives in content.css (.airnexis-content).
 */

/* --- Mechanism --- */

.airnexis-approach-mechanism,
.airnexis-approach-mechanism.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-approach-mechanism {
	scroll-margin-top: 6rem;
}

.airnexis-approach-mechanism__grid,
.block-editor-block-list__layout .wp-block.airnexis-approach-mechanism__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"title"
		"copy"
		"media";
	row-gap: var(--wp--preset--spacing--xl);
	position: relative;
	z-index: 2; /* above the hero wave tail; below the hanging Impact card (z-index 4) */
}

.airnexis-approach-mechanism__title {
	grid-area: title;
	margin: 0;
	width: 100%;
}

.airnexis-approach-mechanism__copy,
.block-editor-block-list__layout .wp-block.airnexis-approach-mechanism__copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	margin: 0;
	width: 100%;
}

.airnexis-approach-mechanism__lede,
.airnexis-approach-mechanism__body {
	margin: 0;
	width: 100%;
}

.airnexis-approach-mechanism figure.airnexis-approach-mechanism__media {
	grid-area: media;
	margin: 0;
	line-height: 0;
	width: 100%;
}

.airnexis-approach-mechanism figure.airnexis-approach-mechanism__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--lg);
}

@media (min-width: 64rem) {
	/*
	 * The Impact card is absolute in the 100dvh hero and hangs into this
	 * band. Its top tracks width (Figma y=828 at 1440). Push this section
	 * down by the overflow (card top + ~card height − 100dvh) so copy stays
	 * clear on wide, short windows. Floor is the shared 5-xl section pad.
	 * Frontend only — 100dvh in the editor iframe would over-pad.
	 */
	.wp-site-blocks .airnexis-approach-mechanism.airnexis-content {
		padding-top: max(
			var(--wp--preset--spacing--5-xl),
			calc(
				clamp(35rem, 40vw, 47rem) + 40rem - 100vh +
					var(--wp--preset--spacing--xl)
			)
		);
		padding-top: max(
			var(--wp--preset--spacing--5-xl),
			calc(
				clamp(35rem, 40vw, 47rem) + 40rem - 100dvh +
					var(--wp--preset--spacing--xl)
			)
		);
	}

	.airnexis-approach-mechanism__grid,
	.block-editor-block-list__layout .wp-block.airnexis-approach-mechanism__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"title copy"
			"media media";
		align-items: start;
		column-gap: var(--wp--preset--spacing--3-xl);
		row-gap: var(--wp--preset--spacing--3-xl);
	}

	/* Right column sits a step below the title, matching Figma Cols y=311. */
	.airnexis-approach-mechanism__copy,
	.block-editor-block-list__layout .wp-block.airnexis-approach-mechanism__copy {
		padding-top: var(--wp--preset--spacing--5-xl);
	}
}

/* --- Lungs (Figma 1054:24277 — Content Block 1440×644, cols 640+32+640) --- */

.airnexis-approach-lungs,
.airnexis-approach-lungs.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-approach-lungs {
	position: relative;
	/*
	 * Clip the 165% lungs crop on the sides (it pokes past the viewport).
	 * Keep overflow-y visible so the soft bottom fade hangs into delivery.
	 * `clip` (not `hidden`) so overflow-y is not computed to `auto`.
	 */
	overflow-x: clip;
	overflow-y: visible;
	/* Figma 1054:24277 is 644 tall with horizontal gutters only. */
	padding-top: 0;
	padding-bottom: 0;
}

.airnexis-approach-lungs__copy,
.block-editor-block-list__layout .wp-block.airnexis-approach-lungs__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	max-width: 40rem;
	margin: 0;
}

.airnexis-approach-lungs__title,
.airnexis-approach-lungs__lede,
.airnexis-approach-lungs__body {
	margin: 0;
	width: 100%;
}

.airnexis-approach-lungs figure.airnexis-approach-lungs__media {
	position: relative;
	z-index: 0;
	margin: 0;
	line-height: 0;
	width: 100%;
	max-width: none;
	overflow: visible;
	pointer-events: none;
}

.airnexis-approach-lungs figure.airnexis-approach-lungs__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 640 / 644;
	object-fit: cover;
	object-position: 40% 18%;
}

@media (max-width: 63.9375rem) {
	.airnexis-approach-lungs figure.airnexis-approach-lungs__media {
		margin-top: var(--wp--preset--spacing--xl);
	}
}

@media (min-width: 64rem) {
	.airnexis-approach-lungs,
	.airnexis-approach-lungs.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-approach-lungs {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--xl);
		align-items: center;
		/* Room for the upward zoom hang; bottom fade hangs into delivery. */
		padding-top: 2.5rem;
		padding-bottom: 0;
		z-index: 1; /* paint soft fade above the delivery band */
	}

	.airnexis-approach-lungs__copy,
	.block-editor-block-list__layout .wp-block.airnexis-approach-lungs__copy {
		max-width: none;
		justify-content: center;
	}

	/*
	 * Figma 1054:24283 = 640×644 frame; inner art is wider and shifted left
	 * so the subject fills the frame and the soft glow bleeds into copy.
	 * Live JPG is more padded than Figma’s crop — scale past 885/640 so the
	 * torso matches the comps optically.
	 */
	.airnexis-approach-lungs figure.airnexis-approach-lungs__media {
		justify-self: end;
		width: 100%;
		max-width: 40rem; /* 640px */
		aspect-ratio: 640 / 644;
		margin: 0;
	}

	.airnexis-approach-lungs figure.airnexis-approach-lungs__media img {
		position: absolute;
		top: -6%;
		left: calc(50% - 18%);
		width: 165%;
		height: 122%;
		max-width: none;
		aspect-ratio: auto;
		transform: translateX(-50%);
		object-fit: cover;
		object-position: 48% 34%;
		/* Soften the cover edge so the torso fades into white like Figma’s wave. */
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 62%,
			rgb(0 0 0 / 0.55) 82%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 62%,
			rgb(0 0 0 / 0.55) 82%,
			transparent 100%
		);
	}
}

/* --- Delivery --- */

.airnexis-approach-delivery,
.airnexis-approach-delivery.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-approach-delivery {
	/* Figma 609:19854: spacing/5-xl (128). Soft lungs fade hangs into this pad. */
	position: relative;
	z-index: 0;
	padding-top: var(--wp--preset--spacing--5-xl);
	padding-bottom: 0;
}

@media (max-width: 63.9375rem) {
	.airnexis-approach-delivery,
	.airnexis-approach-delivery.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-approach-delivery {
		margin-top: 0;
		padding-top: var(--wp--preset--spacing--5-xl);
	}
}

.airnexis-approach-delivery__grid,
.block-editor-block-list__layout .wp-block.airnexis-approach-delivery__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"copy";
	row-gap: var(--wp--preset--spacing--xl);
	position: relative;
	z-index: 2;
}

.airnexis-approach-delivery__copy,
.block-editor-block-list__layout .wp-block.airnexis-approach-delivery__copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	margin: 0;
}

.airnexis-approach-delivery__title,
.airnexis-approach-delivery__lede,
.airnexis-approach-delivery__body {
	margin: 0;
	width: 100%;
}

.airnexis-approach-delivery figure.airnexis-approach-delivery__media {
	grid-area: media;
	margin: 0;
	line-height: 0;
	width: 100%;
}

.airnexis-approach-delivery figure.airnexis-approach-delivery__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--lg);
	object-fit: contain;
}

@media (min-width: 64rem) {
	.airnexis-approach-delivery__grid,
	.block-editor-block-list__layout .wp-block.airnexis-approach-delivery__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "media copy";
		align-items: end;
		column-gap: var(--wp--preset--spacing--3-xl);
		row-gap: 0;
		padding-top: var(--wp--preset--spacing--3-xl); /* Figma cols pt 64 */
	}
}

/* --- Clinical --- */

.airnexis-approach-clinical__grid,
.block-editor-block-list__layout .wp-block.airnexis-approach-clinical__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"copy"
		"media";
	row-gap: var(--wp--preset--spacing--xl);
}

.airnexis-approach-clinical__copy,
.block-editor-block-list__layout .wp-block.airnexis-approach-clinical__copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	margin: 0;
	width: 100%;
	max-width: 40rem;
}

.airnexis-approach-clinical__title,
.airnexis-approach-clinical__lede,
.airnexis-approach-clinical__body {
	margin: 0;
	width: 100%;
}

.airnexis-approach-clinical figure.airnexis-approach-clinical__media {
	grid-area: media;
	margin: 0;
	line-height: 0;
	width: 100%;
}

.airnexis-approach-clinical figure.airnexis-approach-clinical__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--lg);
}

@media (min-width: 64rem) {
	.airnexis-approach-clinical__grid,
	.block-editor-block-list__layout .wp-block.airnexis-approach-clinical__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "copy media";
		align-items: start;
		column-gap: var(--wp--preset--spacing--3-xl);
		row-gap: 0;
	}

	.airnexis-approach-clinical__copy,
	.block-editor-block-list__layout .wp-block.airnexis-approach-clinical__copy {
		width: 100%;
		max-width: 40rem;
	}
}