/* ═══════════════════════════════════════════════════════════
   Logo Carousel – Frontend Styles
   Beskonačni scroll, greyscale → hover boja, bez JS-a
   ═══════════════════════════════════════════════════════════ */

.lc-wrapper {
    --lc-speed:  40s;
    --lc-height: 60px;
    --lc-gap:    80px;

    overflow: hidden;
    width: 100%;
    padding: 32px 0;
    /* Fade edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
}

/* ── Track: horizontally scrolling row ── */
.lc-track {
    display: flex;
    align-items: center;
    gap: var(--lc-gap);
    width: max-content;

    animation: lc-scroll var(--lc-speed) linear infinite;
    will-change: transform;
}

/* Pause on hover anywhere in the wrapper */
.lc-wrapper:hover .lc-track {
    animation-play-state: paused;
}

/* ── Individual logo item ── */
.lc-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-item img {
    display: block;
    height: auto;
    width: 220px;
    max-width: none;

    /* Greyscale + slightly faded */
    filter: grayscale(1);
    transition: filter 0.35s ease;

    -webkit-user-drag: none;
    user-select: none;
}

/* Hover: full color, full opacity */
.lc-item:hover img {
    filter: grayscale(0%) opacity(1);
}

/* ── Marquee keyframe ── */
@keyframes lc-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive: adjust logo size per breakpoint ──
   The number of visible logos is controlled by the
   logo size + gap. These nudges keep it ~5/3/1 visible. */

/* Tablet (~768px) */
@media (max-width: 1024px) {
    .lc-wrapper {
        --lc-height: calc(var(--lc-height) * 0.85);
        --lc-gap:    50px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .lc-wrapper {
        --lc-height: calc(var(--lc-height) * 0.7);
        --lc-gap:    36px;
        padding: 20px 0;
    }

    /* Tighter edge fade on mobile */
    .lc-wrapper {
/*         -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 85%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 85%,
            transparent 100%
        ); */
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .lc-track {
        animation: none;
    }
    .lc-wrapper {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}