/**
 * Hero carousel — FRONT-END ONLY runtime styles.
 *
 * Enqueued only on the front end (never via add_editor_style), so the Site
 * Editor keeps the plain, editable image stack from style.css while the live
 * site shows the carousel. The collapse below is PURE CSS — the slot reserves
 * its 4:3 height immediately — so there is NO layout shift even before, or
 * entirely without, assets/js/hero-carousel.js. The script only adds the
 * cross-fade cycling and the indicator dots (which are absolutely positioned,
 * so they add no layout height either).
 */

.hero-carousel {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.hero-carousel .wp-block-image,
.hero-carousel figure {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .8s ease;
}
/* Default (no JS yet): show the first slide. */
.hero-carousel .wp-block-image:first-child,
.hero-carousel figure:first-child { opacity: 1; }
/* Enhanced (script added .is-running): show only the active slide. */
.hero-carousel.is-running .wp-block-image,
.hero-carousel.is-running figure { opacity: 0; }
.hero-carousel.is-running .wp-block-image.is-active,
.hero-carousel.is-running figure.is-active { opacity: 1; }
.hero-carousel img { height: 100%; aspect-ratio: auto; }

/* Overlaid classic pill indicators (built by the script → no layout shift). */
.hero-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
}
.hero-carousel-dots button {
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(21, 24, 27, .45);
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}
.hero-carousel-dots button:hover { background: rgba(255, 255, 255, .85); }
.hero-carousel-dots button[aria-current="true"] {
	width: 22px;
	background: #ffffff;
}
.hero-carousel-dots button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-carousel .wp-block-image,
	.hero-carousel figure { transition: none; }
}