/*
 * logo-marquee.css — Loop loghi (236:643/650). Spec: 01-home.md §3. Fascia 116px; loghi h 35-70,
 * gap 37; righe in versi alternati; nessuna interazione (e' un fregio). Monocromi come nel Figma
 * (inchiostro #2f253a): lo fa la classe condivisa .logo-mono (base.css §4), qui c'e' solo la
 * geometria — prima questa sezione e il muro dello studio avevano due filtri diversi. Animazione CSS
 * (translateX -50% su una pista duplicata da marquee.js); con prefers-reduced-motion si ferma.
 * Mobile-first: sotto i 900px la fascia scorre piu' in fretta e i loghi stanno piu' vicini
 * (il passo doppio del desktop, gap + padding, su schermo stretto lasciava buchi di vuoto).
 */
.site-main > .logo-marquee {
    position: relative;
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-md);
    background: var(--color-paper);
    margin-top: -8%;
}
.logo-marquee__row {
    overflow: hidden;
}
.logo-marquee__track {
    display: flex;
    align-items: center;
    gap: 37px;
    width: max-content;
    animation: sb-marquee var(--marquee-duration) linear infinite;
    /* La durata resta quella del backoffice (--marquee-duration inline da logo-marquee.php): qui
       si accorcia in proporzione, cosi' cambiare l'impostazione vale anche su mobile. */
    animation-duration: calc(var(--marquee-duration) * 0.6);
}
.logo-marquee__row--right .logo-marquee__track {
    animation-direction: reverse;
}
.logo-marquee__item {
    flex: none;
}
.logo-marquee__img {
    height: clamp(32px, 4.8vw, 70px);
    width: auto;
    max-width: 151px;
    object-fit: contain;
    min-height: 60px;
}
@keyframes sb-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (min-width: 900px) {
    .logo-marquee__track {
        animation-duration: var(--marquee-duration);
    }
    .logo-marquee__item {
        padding-right: 37px; /* = gap: raddoppia il passo come nel Figma */
    }
}
@media (prefers-reduced-motion: reduce) {
    .logo-marquee__track {
        animation: none;
    }
}