/* AURÉA Image Slider (Swiper) — widget: inc/elementor-widgets.php Aurea_Image_Slider_Widget
   Class names are deliberately long/BEM-style so they never collide with
   Astra, WooCommerce, or Swiper's own bare `.swiper-*` classes. */

/* Fixed height, set directly here (no Elementor height control, no
   dependency on a parent container's height). This page builds each
   section as a single flat flex item rather than nesting widgets inside
   per-section Containers with their own Min Height — see .aurea-hero in
   custom.css, which uses this exact same self-contained pattern
   (min-height: min(80vh, 660px)) instead of relying on a parent. A plain
   height:100% never renders here because the parent Container has no
   height of its own to pass down. */
.aurea-image-slider {
	position: relative;
	width: 100%;
}

.aurea-image-slider__swiper {
	width: 100%;
	overflow: hidden;
}

.aurea-image-slider__wrapper {
	display: flex;
}

.aurea-image-slider__slide {
	position: relative;
	width: 100%;
	height: min(80vh, 660px);
	overflow: hidden;
	background: #eae6df;
}

.aurea-image-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Desktop/mobile art-direction swap — the widget always renders both <img>
   tags per slide (so there's no reflow/reflow-triggered layout shift on
   resize); CSS alone decides which one is visible. */
.aurea-image-slider__img--mobile {
	display: none;
}

@media (max-width: 767px) {
	.aurea-image-slider__img--desktop {
		display: none;
	}
	.aurea-image-slider__img--mobile {
		display: block;
	}
}

.aurea-image-slider__nav {
	color: #ffffff;
	background: rgba(0, 0, 0, 0.28);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background 0.3s ease;
}

.aurea-image-slider__nav:hover {
	background: rgba(0, 0, 0, 0.5);
}

.aurea-image-slider__nav::after {
	font-size: 16px;
}

.aurea-image-slider__pagination.swiper-pagination {
	bottom: 16px;
}

.aurea-image-slider__pagination .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 0.6;
	width: 9px;
	height: 9px;
}

.aurea-image-slider__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	background: #ffffff;
}