/**
 * SDH Automarken Slider
 *
 * Horizontaler, endlos scrollender Logo-Slider mit Drag/Touch-Support.
 * Container-Aufbau: .sdh-logo-slider > .sdh-logo-slider__viewport > .sdh-logo-slider__track > .sdh-logo-slider__item
 *
 * Selektoren bewusst flach gehalten, damit Elementor-Selectors (Filter, Opacity, Gap)
 * sauber greifen.
 */

.sdh-logo-slider {
    --sdh-logo-fade: 60px;
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Touch-Scrolling vertikal zulassen, horizontal vom Slider uebernehmen */
    touch-action: pan-y;
}

/* Edge-Fade-Maske (sanftes Ein-/Ausblenden am Rand) */
.sdh-logo-slider::before,
.sdh-logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sdh-logo-fade);
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sdh-logo-slider::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.sdh-logo-slider::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Wenn Fade 0px → Masken ausblenden */
.sdh-logo-slider[style*="--sdh-logo-fade: 0px"]::before,
.sdh-logo-slider[style*="--sdh-logo-fade: 0px"]::after {
    display: none;
}

/* Viewport: Clipping + Flex-Host fuer den Track */
.sdh-logo-slider__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Track: die eigentliche Flex-Reihe, wird via transform bewegt */
.sdh-logo-slider__track {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 134px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Item: fester Slot mit einheitlicher Hoehe, variabler Breite */
.sdh-logo-slider__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 100%;
    min-width: 60px;
    max-width: 180px;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.sdh-logo-slider__item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none; /* Klicks gehen an das <a> */
    -webkit-user-drag: none;
    user-drag: none;
}

/* Drag-States */
.sdh-logo-slider.is-draggable {
    cursor: grab;
}

.sdh-logo-slider.is-dragging {
    cursor: grabbing;
}

/* Waehrend des Draggens verhindern, dass ein versehentlicher Klick den Link oeffnet */
.sdh-logo-slider.is-dragging .sdh-logo-slider__item {
    pointer-events: none;
}

/* Empty State */
.sdh-logo-slider-empty {
    padding: 24px;
    text-align: center;
    color: var(--sdh-gray-500, #6b7280);
    font-style: italic;
}

/* Reduced Motion: Autoscroll deaktivieren das uebernimmt das JS,
   aber wir deuten es zumindest visuell an. */
@media (prefers-reduced-motion: reduce) {
    .sdh-logo-slider__track {
        transition: none !important;
    }
}