/**
 * Image Slider Widget Styles
 *
 * Styling for the image slider with overlapping side images.
 */

/* ========================================
	MAIN CONTAINER
	======================================== */

.jce-image-slider {
	position: relative;
	--jce-image-slider-slides-per-view: 1.5;
	--jce-image-slider-center-width: calc(100% / var(--jce-image-slider-slides-per-view));
	width: 100%;
	overflow: visible;
	margin-bottom: 8em;
}

/* Ensure Elementor containers don't clip overflow */
.elementor-widget-image_slider_widget {
	overflow: visible !important;
}

.elementor-widget-image_slider_widget > .elementor-widget-container {
	overflow: visible !important;
}

.jce-image-slider__swiper {
	overflow: visible !important;
}

/* ========================================
	SWIPER CONTAINER
	======================================== */

.jce-image-slider__swiper {
	width: 100%;
	height: auto;
	overflow: visible !important;
}

.jce-image-slider__swiper .swiper-wrapper {
	display: flex;
	align-items: center;
}

/* ========================================
	SLIDES
	======================================== */

.jce-image-slider__slide {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
}

.jce-image-slider__slide-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 1.4 / 1;
	overflow: visible;
	transition: transform 0.5s ease, opacity 0.5s ease;

}

/* Active slide (centered) */
.swiper-slide-active .jce-image-slider__slide-inner {
	width: 100%;
	z-index: 2;
}

/* Side slides (left/right) */
.swiper-slide:not(.swiper-slide-active) .jce-image-slider__slide-inner {
	width: 100%;
	transform: scale(0.85);
	opacity: 1;
	z-index: 1;
}

/* Overlay for side slides */
.swiper-slide:not(.swiper-slide-active) .jce-image-slider__image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(211, 211, 211, 0.5);
	z-index: 1;
	pointer-events: none;
}

/* ========================================
	IMAGES
	======================================== */

.jce-image-slider__image {
	border-radius: 10px !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	position: relative
}

/* ========================================
	CAPTION (Subtitle & Copyright)
	======================================== */

.jce-image-slider__caption {
	position: absolute;
	top: calc(100% + 24px);
	left: 0px;
	font-size: var(--paragraph-xs-font-size);
	line-height: var(--paragraph-xs-line-height);
	font-family: var(--paragraph-xs-font-family);
	font-weight: var(--paragraph-xs-font-weight);
	letter-spacing: var(--paragraph-xs-letter-spacing);
	word-spacing: var(--paragraph-xs-word-spacing);
	color: var(--text);
	margin: 0;
	padding: 0 !important;
	width: 70%;
}
.swiper-slide:not(.swiper-slide-active) .jce-image-slider__caption {
	opacity: 0;
}

.jce-image-slider__caption .jce-image-slider__custom-label,
.jce-image-slider__caption .jce-image-slider__custom-title,
.jce-image-slider__caption .jce-image-slider__custom-description {
	display: block;
}

.jce-image-slider__caption .jce-image-slider__custom-title.h4 {
	margin: 0;
}

.jce-image-slider__caption .jce-image-slider__custom-description.p-sm {
	margin: 0;
	font-size: var(--paragraph-s-font-size);
	line-height: var(--paragraph-s-line-height);
	font-weight: var(--paragraph-s-font-weight);
	font-family: var(--paragraph-s-font-family);
	letter-spacing: var(--paragraph-s-letter-spacing);
	word-spacing: var(--paragraph-s-word-spacing);
}

.jce-image-slider__caption .jce-image-slider__custom-label.other-tag {
	font-size: var(--tag-font-size);
	line-height: var(--tag-line-height);
	font-weight: var(--tag-font-weight);
	font-family: var(--tag-font-family);
	letter-spacing: var(--tag-letter-spacing);
	word-spacing: var(--tag-word-spacing);
	text-transform: uppercase;
}

.jce-image-slider__caption--custom {
	display: flex;
	flex-direction: column;
	gap: 16px;
}


/* ========================================
	NAVIGATION ARROWS
	======================================== */

.jce-image-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	outline: none;
	transition: all 0.3s ease;
	font-size: 24px;
	padding: 14px !important;
	background-color: #ffffff;
	color: var(--text);
	border-radius: 100%;
}

.jce-image-slider__nav:hover {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.jce-image-slider__nav:focus {
	outline: 2px solid var(--site-color, #333);
	outline-offset: 2px;
}

.jce-image-slider__nav--prev {
	left: 25px;
}

.jce-image-slider__nav--next {
	right: 25px;
}

/* Icon styling */
.jce-image-slider__nav svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	display: block;
}

.jce-image-slider__nav i {
	display: block;
	line-height: 1;
	width: 24px;
	height: 24px;
}

/* Disabled state */
.jce-image-slider__nav.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========================================
	DOT INDICATORS
	======================================== */

.jce-image-slider__dots {
	position: absolute;
	top: calc(100% + 24px);
	left: 50%;
	transform: translateX(-50%);
	width: var(--jce-image-slider-center-width);
	z-index: 10;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
	pointer-events: auto;
}

/* Override Swiper default pagination centering */
.jce-image-slider__dots.swiper-pagination-bullets {
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: var(--jce-image-slider-center-width) !important;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center;
}

.jce-image-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #000000 !important;
	cursor: pointer;
	transition: opacity 0.3s ease;
	border: none;
	padding: 0 !important;
	margin: 0;
	flex-shrink: 0;
}

.jce-image-slider__dot:not(.jce-image-slider__dot--active) {
	opacity: 0.2;
}

.jce-image-slider__dot--active {
	opacity: 1;
	width: 8px;
	height: 8px;
}

.jce-image-slider__dot:hover {
	opacity: 0.6;
}

/* ========================================
	PLACEHOLDER (EDITOR)
	======================================== */

.jce-image-slider__placeholder {
	padding: 40px;
	text-align: center;
	background-color: var(--white85);
	border: 2px dashed var(--borders);
	border-radius: 8px;
	color: var(--black85);
	font-size: 14px;
}

@media screen and (max-width: 767px) {
	.jce-image-slider {
		--jce-image-slider-slides-per-view: 1;
		--jce-image-slider-center-width: 100%;
	}

	.jce-image-slider__slide.swiper-slide-active {
		width: 100% !important;
	}

	.jce-image-slider__slide-inner{
		width: 100% !important;
	}

	.jce-image-slider__caption {
		top: auto;
		position: relative;
		margin-top: 12px;
	}

	.jce-image-slider__nav,
	.jce-image-slider__dots
	{
		top: calc(100% + 40px);

	}

	.jce-image-slider__nav--prev{
		left: 0 !important;
	}
	.jce-image-slider__nav--next{
		right: 0 !important;
	}



	.jce-image-slider__dots
	{
		position: absolute;
		top: calc(100% + 40px);
		left: 50%;
		transform: translateX(-50%) !important;
		width: min(100%, var(--jce-image-slider-center-width));
		right: auto !important;
		justify-content: center;
	}

	.jce-image-slider__dots.swiper-pagination-bullets {
		width: min(100%, var(--jce-image-slider-center-width)) !important;
		justify-content: center !important;
	}

}