/*------------------------------------*\
    Half Text Half Media Block
    Per Specification 6 - roadrunner-specs.md
    Figma: 50-multiple-images-white-image-right
    Tablet: node-id=6143-3475
\*------------------------------------*/

/* Override interactive-map's .interactive-map + section { z-index: -1 } which pushes
   this block behind and blocks link clicks. Restore normal stacking so links are clickable. */
.interactive-map + .half_text_half_media {
	position: relative;
	z-index: 0;
}

/* Ensure text content (including links/buttons) stacks above overlapping image area */
.half_text_half_media .image-text__text {
	position: relative;
	z-index: 1;
}

/* Image column: explicitly below text so links/buttons are clickable and easy to inspect.
   pointer-events: none lets clicks pass through overlapping image area to text links. */
.half_text_half_media .image-text__img {
	position: relative;
	z-index: 0;
	pointer-events: none;
}

/* Restore clickability for video play button when present (single-image layout) */
.half_text_half_media .image-text__img .video-bttn {
	pointer-events: auto;
}

/* Image containers: ensure proper cropping (object-fit from .object-fit class) */
.half_text_half_media .image-text__img-right,
.half_text_half_media .image-text__img-left,
.half_text_half_media .image-text__img-full {
	overflow: hidden;
	position: relative;
}

.half_text_half_media .image-text__img-full {
	border-radius: var(--border-radius);
}

.half_text_half_media .image-text__img-right img,
.half_text_half_media .image-text__img-left img,
.half_text_half_media .image-text__img-full img {
	display: block;
}

/* Responsive picture element fills container */
.half-text-half-media__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.half-text-half-media__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tablet (768px–1199px): stacked layout, images on second row */
@media (min-width: 768px) and (max-width: 1199px) {
	.half_text_half_media .image-text__text {
		width: 100%;
		margin-bottom: var(--spacing-md);
	}

	.half_text_half_media .image-text__img {
		width: 100%;
	}

	/* Slightly reduced overlap for two-images layout */
	.half_text_half_media .image-text__img-left {
		margin-top: -200px;
	}
}

/* Mobile: preserve overlapping image layout (matches desktop) */
@media (max-width: 767px) {
	.half_text_half_media .image-text__img-right {
		border-radius: var(--border-radius);
	}

	.half_text_half_media .image-text__img-left {
		border-radius: var(--border-radius);
	}
}

.image-text {
	position: relative;
	top: -1px;
	margin-bottom: -1px;
}

.image-text__img-arrow {
	position: absolute;
	right: 58px;
	bottom: -21px;
	transform: scaleY(-1) scaleX(-1) rotate(-20deg);
	pointer-events: none;
}
.image-text__img-arrow i {
	font-size: 59px;
	color: var(--color-primary-yellow);
}

@media (min-width: 768px) {
	.image-text__img-arrow {
		right: 8px;
		transform: scaleY(-1) scaleX(-1) rotate(-25deg);
		bottom: -43px;
	}
	.image-text__img-arrow i {
		font-size: 75px;
	}
}

@media (min-width: 1200px) {
	.image-text__img-arrow {
		right: 14px;
		bottom: -75px;	
	}
	.image-text__img-arrow i {
		font-size: 90px;
	}
	.image-text--left .image-text__img-arrow {
		right: unset;
    	left: 14px;
		transform: scaleY(-1) scaleX(1) rotate(-25deg);
	}
}