/* =========================================================
   Logo Carousel — pure CSS infinite scroll
   ========================================================= */

.splc-carousel {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.splc-carousel *,
.splc-carousel *::before,
.splc-carousel *::after {
    box-sizing: border-box;
}

/* ---------- Wrap (overflow + edge fade) ---------- */
.splc-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    /* Povolíme len vertikálny scroll stránky — horizontálny gesto patrí karuselu */
    touch-action: pan-y;
}
.splc-wrap.splc-dragging {
    cursor: grabbing;
}

/* Drag overlay — neviditeľná vrstva ktorá chytá všetky pointer eventy.
   Musí byť nad logami, ale nesmie zakryť fade-mask vizuálne.
   !important kvôli témam, ktoré môžu prepisovať pointer-events. */
.splc-drag-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    cursor: inherit;
    background: transparent;
    pointer-events: auto !important;
    /* Touch chování: horizontálny pan patrí karuselu */
    touch-action: pan-y;
}

/* Ochrana proti náhodnému drag-u obrázkov a aby kliky chodili cez overlay */
.splc-wrap img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none !important;
}
.splc-wrap a {
    pointer-events: none !important;
}

/* Fade okraje (mask) — aktívne keď je .splc-fade-yes na wrapper-i */
.splc-fade-yes .splc-wrap {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
}

/* ---------- Track (animovaný pás) ---------- */
.splc-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;       /* dôležité — šírka sa prispôsobí obsahu */
    animation: splc-scroll-left 40s linear infinite;
    will-change: transform;
}

/* Keď JS prevezme kontrolu, vypneme CSS animation úplne — žiadny konflikt */
.splc-wrap.splc-js-active .splc-track {
    animation: none !important;
}

/* Smer doľava (default) */
@keyframes splc-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Smer doprava — keď je class .splc-dir-right na wrapperi */
.splc-dir-right .splc-track {
    animation-name: splc-scroll-right;
}
@keyframes splc-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Pause on hover — nepauznuje sa keď používateľ drag-uje */
.splc-pause-yes .splc-wrap:hover:not(.splc-dragging) .splc-track {
    animation-play-state: paused;
}

/* Respekt voči prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .splc-track {
        animation: none;
        transform: none !important;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* ---------- Logo item ---------- */
.splc-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.splc-logo img {
    height: 48px;
    max-height: 48px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.splc-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ---------- Filtre log ---------- */
.splc-filter-grayscale .splc-logo img {
    filter: grayscale(100%);
}
.splc-filter-opacity .splc-logo img {
    opacity: 0.6;
}

/* Hover: vráti originál (keď je zapnuté) */
.splc-filter-grayscale.splc-hover-color-yes .splc-logo:hover img {
    filter: grayscale(0%);
}
.splc-filter-opacity.splc-hover-color-yes .splc-logo:hover img {
    opacity: 1;
    transform: scale(1.04);
}