/**
 * Homepage content — “Two problems. One inhaled therapy.” (Figma 609:14384).
 * Desktop: 100dvh cover canvas like the hero; copy overlays left.
 * Mobile: taller than the viewport (Figma 852px) so copy sits in the sky and
 * the couple stays below it. Bottom section radius matches other homepage blocks.
 */

.airnexis-content-therapy,
.airnexis-content-therapy.alignfull,
.block-editor-block-list__layout .wp-block.airnexis-content-therapy {
	position: relative;
	box-sizing: border-box;
	isolation: isolate;
	margin: 0;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	overflow: hidden;
	border-radius: 0 0 var(--wp--custom--section--radius) var(--wp--custom--section--radius);
}

.airnexis-content-therapy figure.airnexis-content-therapy__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	line-height: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.airnexis-content-therapy figure.airnexis-content-therapy__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--airnexis-media-position, 90% 100%);
	transform: scale(var(--airnexis-media-zoom, 1));
	transform-origin: var(--airnexis-media-position, 90% 100%);
}

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

.airnexis-content-therapy__copy h2,
.airnexis-content-therapy__copy h3,
.airnexis-content-therapy__copy p {
	margin: 0;
	width: 100%;
}

@media (max-width: 48rem) {
	.airnexis-content-therapy,
	.airnexis-content-therapy.alignfull,
	.block-editor-block-list__layout .wp-block.airnexis-content-therapy {
		height: auto;
		max-height: none;
		min-height: var(--wp--custom--therapy--min-height); /* 852px — Figma 375 */
	}

	.airnexis-content-therapy__copy,
	.block-editor-block-list__layout .wp-block.airnexis-content-therapy__copy {
		top: 6rem;
		right: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		left: calc(var(--airnexis-layout-inset) + var(--wp--preset--spacing--xl));
		width: auto;
		max-width: none;
	}

	/*
	 * Full-bleed, top-aligned like the hero. Sky under the copy;
	 * custom.therapy.media-position pans x and locks y to the top.
	 */
	.airnexis-content-therapy figure.airnexis-content-therapy__media {
		position: absolute;
		inset: 0;
		height: 100%;
		overflow: hidden;
	}

	.airnexis-content-therapy figure.airnexis-content-therapy__media img {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		object-position: var(--airnexis-media-position-mobile, var(--wp--custom--therapy--media-position));
		transform: scale(var(--airnexis-media-zoom-mobile, 1));
		transform-origin: var(--airnexis-media-position-mobile, var(--wp--custom--therapy--media-position));
	}
}