/**
 * Keep Loop Carousel cards sized correctly when Swiper hasn't initialized
 * or when fewer posts exist than slides_to_show (common after audience filter).
 */

.elementor-widget-loop-carousel {
	--jat-loop-slides-desktop: 3;
	--jat-loop-slides-tablet: 2;
	--jat-loop-slides-mobile: 1;
	--jat-loop-active-slides: var(--jat-loop-slides-desktop);
	--jat-loop-gap: 30px;
}

.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) {
	display: block !important;
}

.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--jat-loop-gap);
}

.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--jat-loop-active-slides) - 1) * var(--jat-loop-gap)) / var(--jat-loop-active-slides)
	) !important;
	max-width: calc(
		(100% - (var(--jat-loop-active-slides) - 1) * var(--jat-loop-gap)) / var(--jat-loop-active-slides)
	);
}

.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide img {
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.elementor-widget-loop-carousel {
		--jat-loop-active-slides: var(--jat-loop-slides-tablet, 2);
	}
}

@media (max-width: 767px) {
	.elementor-widget-loop-carousel {
		--jat-loop-active-slides: var(--jat-loop-slides-mobile, 1);
	}
}