/* ==============================================
   Sitea Logo Slider — slider.css
   ============================================== */

/* ---------- Wrapper ---------- */
.sls-wrap {
    width: 100%;
    background: var(--sls-bg, #fff);
    padding: 28px 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* ---------- Heading ---------- */
.sls-heading {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 22px;
}

/* ---------- Stage (masking container) ---------- */
.sls-stage {
    position: relative;
    overflow: hidden;
}

/* ---------- Row ---------- */
.sls-row {
    overflow: hidden;
    width: 100%;
}
.sls-row + .sls-row {
    margin-top: 20px;
}

/* ---------- Track (the scrolling belt) ---------- */
.sls-track {
    display: flex;
    align-items: center;
    gap: var(--sls-gap, 48px);
    width: max-content;        /* as wide as all items */
    will-change: transform;
}

/* Forward (→) */
.sls-track-fwd {
    animation: sls-scroll-fwd var(--sls-speed, 40s) linear infinite;
}

/* Reverse (←) */
.sls-track-rev {
    animation: sls-scroll-rev var(--sls-speed, 40s) linear infinite;
}

/* Pause on hover (applied to .sls-pause-hover) */
.sls-pause-hover:hover .sls-track {
    animation-play-state: paused;
}

/* ---------- Logo item — fast box ---------- */
.sls-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    /* Fast storlek — alla logos tar exakt samma utrymme */
    width:  var(--sls-w, 140px);
    height: var(--sls-h, 44px);
    /* opacity + transition */
    opacity: var(--sls-opacity, 0.6);
    transition: opacity .25s ease, filter .25s ease;
    cursor: default;
}

a.sls-logo-item {
    cursor: pointer;
}

.sls-logo-item:hover {
    opacity: 1;
}

/* ---------- Logo image ---------- */
.sls-logo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;   /* skalas proportionellt, beskärs aldrig */
    object-position: center center;
    transition: filter .25s ease;
}

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

/* ---------- Fade edges ---------- */
.sls-fade-left,
.sls-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sls-fade, 120px);
    z-index: 2;
    pointer-events: none;
}

.sls-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--sls-bg, #fff) 0%, transparent 100%);
}

.sls-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--sls-bg, #fff) 0%, transparent 100%);
}

/* ---------- Placeholder ---------- */
.sls-placeholder {
    font-size: 13px;
    color: #bbb;
    padding: 20px 0;
    display: block;
}

/* ---------- Keyframes ---------- */
@keyframes sls-scroll-fwd {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .sls-logo-item {
        width:  var(--sls-w-mob, 100px);
        height: var(--sls-h-mob, 30px);
    }
    .sls-wrap {
        padding: 20px 0;
    }
    .sls-fade-left,
    .sls-fade-right {
        width: min(var(--sls-fade, 120px), 60px);
    }
}