/*
 * RRPS Hero Slider — [rrps_hero_slides].
 *
 * The home hero's backdrop: photographs that cross-fade behind the hero copy,
 * with the light wash on top so the text stays legible. The whole layer is
 * absolutely positioned inside the hero section and sits below the content,
 * which Elementor lifts to z-index 1.
 */

.rrps-hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #ddeaf0; /* holds the band's colour until the first photo paints */
	pointer-events: none;
}

/*
 * Elementor wraps shortcode output in its own relatively-positioned widget
 * div. That div would become the slides' containing block and collapse to
 * zero height, so it is taken out of the positioning chain and the slides
 * measure against the hero section instead.
 */
.elementor-widget:has(> .elementor-shortcode > .rrps-hero-slides),
.s-hero-slides .elementor-widget,
.s-hero-slides .elementor-shortcode {
	position: static;
}

.rrps-hero-slides__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.rrps-hero-slides__slide.is-active {
	opacity: 1;
}

/* Two classes so it outranks Elementor's `.elementor img { height: auto }`. */
.rrps-hero-slides .rrps-hero-slides__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Light wash: transparent over the photograph on the left, building to a pale
 * tint under the copy on the right so the headline reads cleanly.
 */
.rrps-hero-slides__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(232, 241, 245, 0) 34%, rgba(232, 241, 245, 0.62) 56%, rgba(232, 241, 245, 0.72) 100%);
}

/*
 * Tablet: the Figma frame (768x483) is a plain cover crop. At that size the
 * 1.875 landscape source shows ~85% of its width, so the whole composition is
 * essentially in view and the crop sits centred, as Figma has it. The copy
 * moves over the photo here, so the wash goes flat.
 */
@media (max-width: 1024px) {
	.rrps-hero-slides__wash {
		background: rgba(232, 241, 245, 0.35);
	}

	.rrps-hero-slides .rrps-hero-slides__img {
		object-position: 50% 50%;
	}
}

/*
 * Mobile: the Figma frame (430x563) reads as open sky behind the copy with the
 * photograph showing along the bottom. An earlier attempt reproduced that by
 * pinning the photo to the bottom at its natural height and filling the space
 * above with a gradient. That cannot work: the three slides have different
 * skies, so a fixed gradient meets each of them at a slightly wrong colour and
 * the join reads as a flat blue panel rather than sky.
 *
 * Instead the photograph covers the whole band as it does at every other
 * breakpoint - so there is no join to get wrong - and the wash does the work,
 * heavy behind the copy and clearing toward the bottom. That keeps the words
 * off the subject while the photo stays continuous.
 */
@media (max-width: 767px) {
	.rrps-hero-slides .rrps-hero-slides__img {
		object-position: 50% 50%;
	}

	.rrps-hero-slides__wash {
		background: linear-gradient(
			180deg,
			rgba(232, 241, 245, 0.94) 0%,
			rgba(232, 241, 245, 0.9) 40%,
			rgba(232, 241, 245, 0.62) 62%,
			rgba(232, 241, 245, 0.12) 84%,
			rgba(232, 241, 245, 0) 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rrps-hero-slides__slide {
		transition: none;
	}
}