/**
 * Widget: slider|brand
 * Marquee a scorrimento continuo e ciclico dei marchi/loghi.
 * Loop senza salti: set duplicato + traslazione di -50% (vedi view).
 * Le card usano margin-right (non gap) così metà track = un set esatto.
 */

.slider-brand {
    display: block;
    background: var(--website-color-light, #FFFAF0);
    padding: clamp(28px, 4vw, 48px) 0;
    overflow: hidden;
}

.slider-brand .slider-brand-viewport {
    width: 100%;
    overflow: hidden;
}

.slider-brand .slider-brand-track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
    animation: slider-brand-scroll var(--slider-brand-duration, 40s) linear infinite;
}
/* default: da sinistra a destra (-50% -> 0). Direzione opposta = reverse */
.slider-brand .slider-brand-track.is-reverse { animation-direction: reverse; }

/* Pausa al passaggio del mouse */
.slider-brand:hover .slider-brand-track { animation-play-state: paused; }

.slider-brand .slider-brand-card {
    flex: 0 0 auto;
    width: 224px;
    height: 192px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 1px solid var(--website-color-secondary, #A3A3A3);
    border-radius: 8px;
    background: transparent;
}
.slider-brand .slider-brand-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.slider-brand .slider-brand-fallback {
    color: var(--website-color-txt-body, #4D5359);
    font-size: 1rem;
    text-align: center;
}

@keyframes slider-brand-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (max-width: 575.98px) {
    .slider-brand .slider-brand-card{ width: 168px; height: 144px; padding: 18px; margin-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .slider-brand .slider-brand-track{ animation: none; }
}