/* Rodelle Hero Carousel — chrome (slides + pagination). Panel styles
   live in assets/css/rodelle-hero-panels.css. */

.rodelle-hero-carousel {
	position: relative;
}

.rodelle-hero-carousel .splide__slide {
	box-sizing: border-box;
}

/* Pre-mount state. Splide's stylesheet lays the list out as a flex row, but
   slide widths are only assigned by JS at mount time, so until
   hero-carousel.js runs the slides sit side by side at their intrinsic width
   and two (or more) images are visible for a beat before the carousel snaps
   to one. Splide adds "is-initialized" to the root on mount, so until then
   pin every slide to the full track width and hide all but the first — the
   pre-mount frame then looks identical to the mounted one. */
.rodelle-hero-carousel:not(.is-initialized) .splide__track {
	overflow: hidden;
}

/* Fade the carousel in once Splide has mounted (which hero-carousel.js
   does on window load, after Page Builder's full-width-stretch JS has
   settled the row width). The block still reserves its full height via
   the min-height variable, so nothing below it shifts. If JS never mounts
   (error, blocked script), the keyframe reveals it after 4s regardless. */
@keyframes rodelle-hero-carousel-reveal {
	to {
		opacity: 1;
	}
}

.rodelle-hero-carousel:not(.is-initialized) {
	opacity: 0;
	animation: rodelle-hero-carousel-reveal 0.4s ease 4s forwards;
}

.rodelle-hero-carousel.is-initialized {
	opacity: 1;
	transition: opacity 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
	.rodelle-hero-carousel:not(.is-initialized) {
		animation-duration: 0s;
	}

	.rodelle-hero-carousel.is-initialized {
		transition: none;
	}
}

.rodelle-hero-carousel:not(.is-initialized) .splide__slide {
	flex: 0 0 100%;
	width: 100%;
}

.rodelle-hero-carousel:not(.is-initialized) .splide__slide:not(:first-child) {
	display: none;
}

/* Pagination dots, bottom-right per the client references. */

.rodelle-hero-carousel .splide__pagination {
	bottom: 1rem;
	right: 1.5rem;
	left: auto;
	justify-content: flex-end;
	padding: 0;
}

.rodelle-hero-carousel .splide__pagination__page {
	background: transparent;
	border: 2px solid #fff;
	opacity: 1;
	width: 12px;
	height: 12px;
	margin: 0 4px;
}

.rodelle-hero-carousel .splide__pagination__page.is-active {
	background: #fff;
	transform: none;
}

/* Mobile: the stacked banner (image above, teal box below) leaves each slide
   at its natural, varying height, so the teal band's boundary jumps between
   slides and shorter slides leave the pagination dots floating below the
   image band (dots are absolutely positioned near the track bottom, which
   Splide's flex track sizes to the tallest slide).

   Fix in two parts:
   1. Stretch the wrapper chain from the slide down to the overlay so every
      slide actually reaches the track height instead of content-sizing.
      Splide's flex track (.splide__list, row direction, auto cross size)
      already stretches .splide__slide to the tallest slide by default —
      leave that alone. .rodelle-hero (the direct child of .splide__slide)
      is the broken link: it has no height rule, so the existing
      height: 100% on .rodelle-hero-overlay resolves against an auto-height
      ancestor and is ignored. Giving .rodelle-hero itself height: 100% (of
      the now-stretched, definite-height slide) closes the chain. Do NOT
      also set an explicit height on .splide__slide — a percentage height
      there is indefinite before stretch runs, which the browser resolves
      as "auto" for hypothetical sizing but then also honors literally as a
      non-auto value that suppresses stretch, leaving slides content-sized
      again.
   2. Pin the image band to a fixed height and let the teal box flex to
      absorb the text-length difference, so the image/teal boundary — and
      the dots, which sit inside the box — land in the same place on every
      slide. */

@media (max-width: 767.98px) {
	.rodelle-hero-carousel .rodelle-hero {
		height: 100%;
	}

	.rodelle-hero-carousel .rodelle-hero-overlay {
		display: flex;
		flex-direction: column;
		/* Override the base row-layout align-items: flex-end, which in a
		   column turns into horizontal alignment and collapses the image
		   area (no intrinsic width) to zero. */
		align-items: stretch;
		height: 100%;
	}

	.rodelle-hero-carousel .rodelle-hero-overlay__bg {
		position: relative;
		flex: 0 0 auto;
		height: 60vw;
	}

	.rodelle-hero-carousel .rodelle-hero-overlay__bg img {
		position: absolute;
		inset: 0;
	}

	.rodelle-hero-carousel .rodelle-hero-overlay__box {
		flex: 1 1 auto;
	}
}