/* =========================================================
   Logo Carousel for Elementor – logo-carousel.css
   ========================================================= */

/* --- Wrapper --- */
.lce-logo-carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* --- Fade edges --- */
.lce-logo-carousel-wrapper.lce-fade::before,
.lce-logo-carousel-wrapper.lce-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.lce-logo-carousel-wrapper.lce-fade::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.lce-logo-carousel-wrapper.lce-fade::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* --- Track (the scrolling rail) --- */
.lce-logo-track {
    display: flex;
    align-items: center;
    width: max-content;        /* shrink-wraps all logos */
    will-change: transform;
}

/* Animation: JS injects --lce-duration & direction via inline style */
.lce-logo-track.lce-running {
    animation: lce-scroll var(--lce-duration, 30s) linear infinite;
}

.lce-logo-track.lce-running.lce-rtl {
    animation-direction: reverse;
}

.lce-logo-carousel-wrapper.lce-paused .lce-logo-track {
    animation-play-state: paused;
}

@keyframes lce-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* -50% because track = 2× logos */
}

/* --- Individual logo item --- */
.lce-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 60px; /* overridden by Elementor control */
}

.lce-logo-item-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Image --- */
.lce-logo-item img {
    display: block;
    height: 60px;       /* overridden by Elementor control */
    width: auto;        /* auto width keeps ratio */
    max-width: none;    /* prevent Elementor/theme constraints */
    object-fit: contain;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Grayscale */
.lce-logo-item img.lce-grayscale {
    filter: grayscale(100%);
}

/* Restore color on hover */
.lce-logo-item:hover img.lce-grayscale.lce-color-hover {
    filter: grayscale(0%);
}

/* --- Responsive tweaks --- */
@media (max-width: 767px) {
    .lce-logo-carousel-wrapper.lce-fade::before,
    .lce-logo-carousel-wrapper.lce-fade::after {
        width: 60px;
    }
}