/* ============================================================
   Divi Logo Slider – logo-slider.css
   ============================================================ */

/* Container */
.dls-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;

    /* Fade edges */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

/* Scrolling track */
.dls-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: dls-scroll linear infinite;
    animation-duration: var(--dls-speed, 20s);
    gap: 60px;
}

.dls-wrapper:hover .dls-track {
    animation-play-state: paused;
}

/* Individual logo item */
.dls-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--dls-item-width, 160px);
}

.dls-item img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Grayscale effect */
.dls-grayscale .dls-item img {
    filter: grayscale(100%) opacity(0.55);
}

.dls-grayscale .dls-item:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Non-grayscale hover */
.dls-wrapper:not(.dls-grayscale) .dls-item:hover img {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Logo link */
.dls-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Scroll keyframes */
@keyframes dls-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Responsive ── */

/* Tablet: ~3-4 logos zichtbaar */
@media (max-width: 1024px) {
    .dls-item {
        width: 130px;
    }
    .dls-track {
        gap: 40px;
    }
}

/* Mobile: ~2-3 logos zichtbaar */
@media (max-width: 640px) {
    .dls-item {
        width: 100px;
    }
    .dls-track {
        gap: 30px;
    }
    .dls-item img {
        max-height: 50px;
    }
    .dls-wrapper {
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
    }
}

/* ── Divi-specific fixes ── */
.et_pb_section .dls-wrapper,
.et_pb_row .dls-wrapper {
    max-width: 100%;
}