/* ------------------------------------------------------------------
   Marquee loghi clienti ("Si fidano di noi")
   Mockup: "2a Clienti" (desktop) + "M Clienti" (mobile).

   Qui c'è solo il nastro: occhiello, titolo e spaziature della sezione
   stanno nel template. Tutto scoped su .pscl per non collidere con
   Bootstrap / Oxygen.
------------------------------------------------------------------- */

.pscl {
    --pscl-speed: 32s;
    --pscl-speed-m: 26s;
    --pscl-h: 46px;      /* altezza dei loghi, desktop */
    --pscl-h-m: 32px;    /* altezza dei loghi, mobile */
    --pscl-maxw: 190px;  /* larghezza massima: tiene a bada i loghotipi lunghi */
    --pscl-gap: 56px;
    --pscl-op: .55;
    --pscl-line: #E8E8EE;

    /* nessun padding: la spaziatura della sezione la mette il template */
    position: relative;
    overflow: hidden;
}

/* bordi opzionali, per replicare la riga sopra/sotto del mockup */
.pscl--bordi {
    border-top: 1px solid var(--pscl-line);
    border-bottom: 1px solid var(--pscl-line);
    padding: 20px 0;
}

.pscl *,
.pscl *::before,
.pscl *::after {
    box-sizing: border-box;
}

/* ---------- nastro ---------- */
.pscl-mq {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pscl-track {
    display: flex;
    align-items: center;
    gap: var(--pscl-gap);
    width: max-content;
    animation: pscl-mq var(--pscl-speed) linear infinite;
    will-change: transform;
}

.pscl-set {
    display: flex;
    align-items: center;
    gap: var(--pscl-gap);
}

@keyframes pscl-mq {
    to { transform: translateX(-50%); }
}

/* Pausa in hover: senza, colorare un logo al passaggio del mouse è impossibile.
   Il focus da tastiera mette in pausa allo stesso modo. */
.pscl--pausa .pscl-mq:hover .pscl-track,
.pscl--pausa .pscl-mq:focus-within .pscl-track {
    animation-play-state: paused;
}

/* ---------- logo ---------- */
.pscl-item {
    /* box ad altezza fissa: i loghi si allineano otticamente anche con
       proporzioni molto diverse tra loro */
    height: calc(var(--pscl-h) * var(--pscl-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    text-decoration: none;
    line-height: 0;
}

.pscl-logo {
    height: 100%;
    width: auto;
    max-width: var(--pscl-maxw);
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: var(--pscl-op);
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}

.pscl-item:hover .pscl-logo,
.pscl-item:focus-visible .pscl-logo {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

a.pscl-item:focus-visible {
    outline: 2px solid #1E1EF0;
    outline-offset: 6px;
    border-radius: 4px;
}

.pscl-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D8D8E0;
    flex: none;
}

/* ---------- mobile ---------- */
@media (max-width: 782px) {
    .pscl {
        --pscl-gap: 34px;
        --pscl-maxw: 130px;
    }

    .pscl--bordi {
        padding: 14px 0;
    }

    /* --pscl-h arriva dallo style inline del wrapper, quindi non è
       sovrascrivibile da qui: l'altezza mobile si applica sull'item. */
    .pscl-item {
        height: calc(var(--pscl-h-m) * var(--pscl-scale, 1));
    }

    .pscl-mq {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

    .pscl-track {
        animation-duration: var(--pscl-speed-m);
    }

    .pscl-dot {
        width: 4px;
        height: 4px;
    }

    /* su touch l'hover non esiste: i loghi restano leggibili ma non sbiaditi */
    .pscl-logo {
        opacity: calc(var(--pscl-op) + .2);
    }
}

/* ---------- accessibilità ---------- */
@media (prefers-reduced-motion: reduce) {
    .pscl-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 28px;
    }

    .pscl-set {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 28px;
    }

    /* senza scorrimento il secondo set è solo un doppione */
    .pscl-set[aria-hidden="true"] {
        display: none;
    }

    .pscl-mq {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .pscl-logo {
        opacity: 1;
        filter: grayscale(1);
    }
}

/* ------------------------------------------------------------------
   Oxygen incapsula lo shortcode in un .oxy-shortcode. Dentro un container
   flex con align-items:center quel wrapper si dimensiona sul contenuto:
   con una pista orizzontale diventa largo migliaia di px e tutta la pagina
   scrolla in orizzontale. Il selettore usa il discendente e non il figlio
   diretto perche' a volte a gonfiarsi e' un container piu' in alto.
------------------------------------------------------------------- */
.oxy-shortcode:has(.pscl),
.oxy-container:has(.pscl) {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
}

.pscl {
    max-width: 100%;
    min-width: 0;
}