/*
 * Hero slideshow: a core Group (.hero-slideshow) holding a core Gallery
 * (.hero-slideshow__slides) as a full-bleed background, plus the headline content.
 * Front end only; in the editor the gallery shows as a normal grid for easy editing.
 */
.hero-slideshow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-inline: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 2rem));
}
/* Readability overlay between photos and text. */
.hero-slideshow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Shade only where the headline sits (bottom-left); the rest of the photo stays clear. */
	background:
		linear-gradient(to top, rgb(20 34 12 / 0.78) 0%, rgb(20 34 12 / 0.4) 32%, rgb(20 34 12 / 0) 62%),
		linear-gradient(to right, rgb(20 34 12 / 0.45) 0%, rgb(20 34 12 / 0.15) 40%, rgb(20 34 12 / 0) 65%);
}
.hero-slideshow > .hero-slideshow__slides.wp-block-gallery {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	overflow: hidden; /* The slow zoom enlarges photos; keep them inside the photo area. */
	max-width: none !important;
	margin: 0 !important;
}
.hero-slideshow .hero-slideshow__slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}
.hero-slideshow .hero-slideshow__slides.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Wide screens must crop 3:2 photos. Default: keep the middle. Per photo,
	   editors pick "Hero crop: keep top/bottom" in the image's Styles panel. */
	object-position: 50% 50%;
	border-radius: 0;
	transform-origin: 50% 50%;
}
/* Same specificity as the base rule above, plus the style class, so these win. */
.hero-slideshow .hero-slideshow__slides.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-crop-top img { object-position: 50% 4%; transform-origin: 50% 0%; }
.hero-slideshow .hero-slideshow__slides.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-crop-bottom img { object-position: 50% 78%; transform-origin: 50% 78%; }

/* Until the page has loaded, only the first photo exists visually, so it
   downloads alone (it is the Largest Contentful Paint). Lazy slides then load. */
.hero-slideshow:not(.is-ready) .hero-slideshow__slides figure.wp-block-image:not(:first-child) { display: none; }
/* Before the script runs (or without JS): show the first photo. */
.hero-slideshow:not(.is-ready) .hero-slideshow__slides figure.wp-block-image:first-child,
.hero-slideshow .hero-slideshow__slides figure.wp-block-image.is-active {
	opacity: 1 !important;
}
/* The outgoing slide ("is-leaving") keeps the same animation, so it holds its
   zoom while fading out instead of snapping back to full size. */
.hero-slideshow .hero-slideshow__slides figure.is-active img,
.hero-slideshow .hero-slideshow__slides figure.is-leaving img {
	animation: hero-slow-zoom 9s ease-out both;
}
@keyframes hero-slow-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.04); }
}

/* Headline block sits left, aligned with the logo. */
.hero-slideshow > .hero-slideshow__content { position: relative; width: 100%; max-width: 1240px; margin-inline: auto !important; }
.hero-slideshow__content > * { max-width: 720px; margin-left: 0 !important; }
.hero-slideshow h1 { text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / 0.5); }
/* Keeps the sentence readable over bright photos now that the overlay is lighter. */
.hero-slideshow__content p { text-shadow: 0 1px 10px rgb(0 0 0 / 0.6), 0 0 2px rgb(0 0 0 / 0.35); }
.hero-slideshow .hero-toggle {
	position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
}

/*
 * Phones: a tall, narrow banner would keep only a thin slice of each photo and
 * cover it with text. Instead show the photo whole-ish at 4:3 on top, with the
 * headline and buttons on the green band below it.
 */
@media (max-width: 781px) {
	.hero-slideshow {
		--hero-photo-h: 75vw;
		min-height: 0 !important;
		padding-top: calc(var(--hero-photo-h) + 1.25rem) !important;
		padding-bottom: 1.5rem !important;
	}
	/* Compact text block under the photo. */
	.hero-slideshow__content > * + * { margin-block-start: 0.75rem !important; }
	.hero-slideshow h1 { font-size: 2rem !important; line-height: 1.12; }
	.hero-slideshow__content p { font-size: 1.0625rem !important; line-height: 1.5; }
	/* The sticky Call / Schedule a Tour bar is always on screen on phones,
	   so the hero's own buttons would only duplicate it. */
	.hero-slideshow .wp-block-buttons { display: none !important; }
	.hero-slideshow > .hero-slideshow__slides.wp-block-gallery {
		inset: 0 0 auto 0;
		height: var(--hero-photo-h);
	}
	/* Text sits on solid green below the photo, so no overlay on the photo at all. */
	.hero-slideshow::before { display: none; }
	.hero-slideshow h1 { text-shadow: none; }
	.hero-slideshow .hero-toggle {
		top: calc(var(--hero-photo-h) - 44px - 0.75rem);
		bottom: auto;
		right: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slideshow .hero-slideshow__slides figure.wp-block-image:not(#individual-image) { transition: none; }
	.hero-slideshow .hero-slideshow__slides figure.is-active img,
	.hero-slideshow .hero-slideshow__slides figure.is-leaving img { animation: none; }
}