/**
 * Custom Image Slider — structural styles.
 *
 * Only layout/structure/transitions that cannot be set dynamically
 * via Elementor controls live here. Colors, typography, spacing and
 * sizing are handled by the widget's Style tab controls.
 */

.ces-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ces-slider__wrapper {
	display: flex;
	align-items: stretch;
}

.ces-slide {
	height: auto;
}

.ces-slide__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ces-slide__image-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ces-slide__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.25, 0.1, 0.25, 1 );
}

.ces-slide__inner:hover .ces-slide__image {
	transform: scale( 1.05 );
}

.ces-slide__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ces-slide__caption {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.4;
	word-wrap: break-word;
}

/* Controls row: pagination dots + navigation arrows, rendered below the image */
.ces-slider__controls {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ces-slider__pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ces-slider__pagination .swiper-pagination-bullet {
	display: inline-block;
	border-radius: 50%;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.3s ease;
}

.ces-slider__arrows {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ces-slider__arrow {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	user-select: none;
}

.ces-slider__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/*
 * Per-device visibility for arrows/pagination. Breakpoints mirror the
 * Swiper breakpoints used in slider-init.js (mobile < 768, tablet
 * 768–1024, desktop >= 1025) so "show on mobile only" etc. lines up with
 * the same viewport ranges the slider itself uses.
 */
@media ( max-width: 767px ) {
	.ces-slider__arrows--hidden-mobile,
	.ces-slider__pagination--hidden-mobile {
		display: none;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.ces-slider__arrows--hidden-tablet,
	.ces-slider__pagination--hidden-tablet {
		display: none;
	}
}

@media ( min-width: 1025px ) {
	.ces-slider__arrows--hidden-desktop,
	.ces-slider__pagination--hidden-desktop {
		display: none;
	}
}

/* Mobile fallback: force a single slide per view */
@media ( max-width: 767px ) {
	.ces-slider__wrapper {
		flex-direction: row;
	}

	.ces-slide {
		width: 100% !important;
	}

	.ces-slider__arrow {
		width: 36px;
		height: 36px;
	}
}

/*
 * Hover Gallery layout mode: the slide currently centered in the viewport
 * is continuously scaled up, smoothly shrinking back down as it is pushed
 * off-center by dragging, arrows or autoplay. The scale factor itself
 * (--ces-slide-scale) is computed per-frame in JS from each slide's Swiper
 * `progress` (see slider-init.js), so this is purely a paint step.
 *
 * The scale is applied to .ces-slide__inner rather than .swiper-slide
 * itself: Swiper sets an inline transform (translate3d) on .swiper-slide
 * for positioning, and an inline style always wins over a CSS rule on the
 * same element, so scaling that element directly would never be visible.
 * transition-duration is kept in sync with Swiper's own transition speed
 * via the "setTransition" event, so growing/shrinking never outpaces the
 * slide's horizontal movement.
 */
@media ( min-width: 1025px ) {
	/* Stretch is what keeps every slide the same height; centered gallery
	   needs slides free to grow/shrink around a shared vertical center. */
	.ces-slider--hover-gallery .ces-slider__wrapper {
		align-items: center;
	}

	.ces-slider--hover-gallery .ces-slide__inner {
		transform: scale( var( --ces-slide-scale, 1 ) );
		transition-property: transform;
		/* Smooth, gentle ease-in-out so slides grow/shrink without a hard stop */
		transition-timing-function: cubic-bezier( 0.25, 0.1, 0.25, 1 );
		will-change: transform;
	}

	.ces-slider--hover-gallery .ces-slide {
		position: relative;
		overflow: visible;
	}

	.ces-slider--hover-gallery .ces-slide--centered {
		z-index: 2;
	}

	/*
	 * Every slide (centered or not) must show its complete image, never a
	 * crop. The images are self-contained graphics (photo, decoration and
	 * caption baked into one transparent PNG), so each image-wrap sizes
	 * itself to the image and uses object-fit: contain — showing the whole
	 * graphic at its natural aspect ratio. The centered slide is only
	 * scaled up (see .ces-slide__inner transform above); the extra vertical
	 * room needed for that enlargement is reserved on the container by
	 * slider-init.js so overflow: hidden never clips the grown slide.
	 *
	 * Elementor emits per-instance rules for the image fit/height controls
	 * with widget-scoped specificity (e.g.
	 * .elementor-element-XXX .ces-slide__image { object-fit: cover }),
	 * which outranks a plain plugin selector, so we override with
	 * !important here.
	 */
	.ces-slider--hover-gallery .ces-slide__image-wrap {
		height: auto !important;
	}

	.ces-slider--hover-gallery .ces-slide__image {
		height: auto !important;
		object-fit: contain !important;
	}

	/* Epigraph only shows on the centered (enlarged) slide in this layout mode */
	.ces-slider--hover-gallery .ces-slide__caption {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
	}

	.ces-slider--hover-gallery .ces-slide--centered .ces-slide__caption {
		opacity: 1;
		visibility: visible;
	}
}

/*
 * Below desktop (mobile + tablet, e.g. iPad) the Hover Gallery shows a single
 * centered slide with no scaling. The self-contained PNGs must still render
 * complete — the default rule uses object-fit: cover + height:100%, which
 * crops the bottom. Mirror the desktop "show the whole graphic" treatment for
 * this range so the image is never cropped on iPad/phones.
 */
@media ( max-width: 1024px ) {
	.ces-slider--hover-gallery .ces-slide__image-wrap {
		height: auto !important;
	}

	.ces-slider--hover-gallery .ces-slide__image {
		height: auto !important;
		object-fit: contain !important;
	}
}

/*
 * Zoom / Scale transition (Standard layout mode).
 *
 * The active slide eases up to --ces-slide-scale (default 1.05) while the
 * inactive slides ease down (default 0.85). For a normal slide move
 * (arrows/pagination/autoplay) slider-init.js sets each slide's *target*
 * scale once and this CSS transition owns the whole animation — one clean,
 * uninterrupted glide. Only while dragging does the JS write the scale per
 * frame (with the transition disabled) so it tracks the finger 1:1. This
 * split is what keeps the effect smooth: the CSS transition is never made to
 * restart toward a moving target mid-move.
 *
 * The transform lives on .ces-slide__inner rather than .swiper-slide, because
 * Swiper writes an inline translate3d transform onto .swiper-slide for
 * positioning and an inline style always beats a stylesheet rule on the same
 * element.
 *
 * The active slide grows past its box; .ces-slide__image-wrap keeps
 * overflow: hidden so the *image* never spills past the (rounded) frame, and
 * the wrapper reserves a little vertical room so the enlarged slide isn't
 * clipped top/bottom by the slider's own overflow: hidden.
 */
.ces-slider--zoom-effect .ces-slide__inner {
	transform: scale( var( --ces-slide-scale, 1 ) );
	transform-origin: center center;
	transition-property: transform;
	/* Elegant, organic ease-out so slides settle gently without a hard stop. */
	transition-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-duration: 0.8s;
	backface-visibility: hidden;
	will-change: transform;
}

.ces-slider--zoom-effect .ces-slider__wrapper {
	/* Room for the active slide's upward/downward growth so overflow: hidden
	   on .ces-slider doesn't clip the enlarged slide vertically. */
	padding-top: 3%;
	padding-bottom: 3%;
	align-items: center;
}

.ces-slider--zoom-effect .ces-slide {
	/* Let the enlarged inner grow past the slide box without being clipped
	   by the slide itself; the image frame below still clips the image. */
	overflow: visible;
}

/* Respect Swiper's own transition/GPU-accelerated transform handling for smooth touch swiping */
.ces-slider.swiper {
	touch-action: pan-y;
}

/*
 * Pre-init fallback: before Swiper mounts (adds "swiper-initialized"),
 * force only the first slide visible so the widget never renders as a
 * stacked column while scripts are still loading.
 */
.ces-slider:not(.swiper-initialized) > .ces-slider__wrapper {
	display: block;
}

.ces-slider:not(.swiper-initialized) > .ces-slider__wrapper > .ces-slide {
	display: none;
}

.ces-slider:not(.swiper-initialized) > .ces-slider__wrapper > .ces-slide:first-child {
	display: block;
}