/**
 * Native, dependency-free carousel for frozen Elementor swipers.
 *
 * Scoped to `.hope-native-carousel.hope-native-on`. The `hope-native-on` class is
 * added by native-carousel.js during page parse and removed again if Elementor
 * turns out to own the swiper, so the two never fight over the same element.
 */

.hope-native-carousel.hope-native-on {
	overflow: hidden;
}

.hope-native-carousel.hope-native-on > .swiper-wrapper {
	display: flex !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	transform: none !important;
	width: 100% !important;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.hope-native-carousel.hope-native-on > .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

.hope-native-carousel.hope-native-on > .swiper-wrapper > .swiper-slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	height: auto !important;
}

/**
 * `--hope-slides` is set by native-carousel.js from the widget's own `slides_to_show`,
 * because Elementor's Swiper normally writes each slide's width inline at runtime.
 * Carousels without that setting keep `flex: 0 0 auto` above.
 */
.hope-native-carousel.hope-native-on[style*="--hope-slides"] > .swiper-wrapper > .swiper-slide {
	flex-basis: calc( ( 100% - var( --hope-offset, 0px ) - ( var( --hope-slides ) - 1 ) * var( --hope-gap, 0px ) ) / var( --hope-slides ) );
	max-width: calc( ( 100% - var( --hope-offset, 0px ) - ( var( --hope-slides ) - 1 ) * var( --hope-gap, 0px ) ) / var( --hope-slides ) );
}

/**
 * The blogs slider (Elementor's loop-carousel) has no CSS width of its own — Swiper's JS
 * writes `style="width:456.333px"` onto each slide at runtime. Without Elementor that never
 * happens, `flex: 0 0 auto` lets one card fill the whole track, and the section loses ~84px.
 *
 * Template 1172 leaves slides_to_show at Elementor's default of 3 and only overrides
 * tablet_extra to 2. Measured with Elementor on: a 1369px track, 456.333px slides, 0px gap.
 * Elementor's breakpoints are tablet_extra 1200 and mobile 767.
 */
.elementor-loop-container.hope-native-carousel.hope-native-on > .swiper-wrapper > .swiper-slide {
	flex-basis: calc( 100% / 3 );
	max-width: calc( 100% / 3 );
}

@media (max-width: 1200px) {
	.elementor-loop-container.hope-native-carousel.hope-native-on > .swiper-wrapper > .swiper-slide {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	.elementor-loop-container.hope-native-carousel.hope-native-on > .swiper-wrapper > .swiper-slide {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Arrows stay clickable above the track (native carousels only). */
.elementor-widget:has( .hope-native-carousel.hope-native-on ) .elementor-swiper-button {
	cursor: pointer;
	z-index: 5;
}