/* ============================================================
Gallery Image Carousel for Elementor - Stylesheet
============================================================ */

/* --- Wrapper --- */
.gce-carousel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}

/* --- Viewport: clips the scrolling track --- */
.gce-carousel-viewport {
overflow: hidden;
width: 100%;
position: relative;
}

/* --- Track: the moving strip --- */
.gce-carousel-track {
display: flex;
align-items: stretch;
width: max-content;
will-change: transform;
/* animation is applied via JS once cloned slides are ready */
}

/* Paused state (applied via JS) */
.gce-carousel-track.gce-paused {
animation-play-state: paused !important;
}

/* --- Individual Slide --- */
.gce-slide-item {
flex: 0 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px !important;
}

/* --- Image Container --- */
.gce-slide-image {
width: 100%;
overflow: hidden;
position: relative;
line-height: 0;
/* Default height – overridden by Elementor controls */
height: 220px;
}

.gce-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

/* Hover Zoom Effect */
.gce-slide-image.gce-hover-zoom:hover img {
transform: scale(1.08);
}

/* Linked image */
.gce-slide-image a {
display: block;
width: 100%;
height: 100%;
}

/* --- Caption --- */
.gce-slide-caption {
font-size: 14px;
color: #333;
text-align: center;
margin-top: 8px;
line-height: 1.4;
padding: 0 4px;
}

/* ============================================================
Fade / Shadow Overlays
============================================================ */
.gce-fade-left,
.gce-fade-right {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
pointer-events: none;
width: 120px; /* Default; overridden by Elementor control */
}

.gce-fade-left {
left: 0;
}

.gce-fade-right {
right: 0;
}

/* ============================================================
Keyframe: infinite left scroll
============================================================ */
@keyframes gce-scroll-left {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

@keyframes gce-scroll-right {
0%   { transform: translateX(-50%); }
100% { transform: translateX(0); }
}

/* ============================================================
Responsive helpers (applied by JS via CSS vars)
============================================================ */
@media (max-width: 1024px) {
.gce-carousel-wrapper {
--gce-slides: var(--gce-slides-tablet, 3);
}
}

@media (max-width: 767px) {
.gce-carousel-wrapper {
--gce-slides: var(--gce-slides-mobile, 2);
}

.gce-slide-image {
height: 100% !important;
}
}