/* ------------------------------------------------------------------
   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.
       Il solo margine sopra e' qui perche' in home il nastro sta in un
       contenitore flex, dove il margine della riga "si fidano di noi" non
       collassa e il carosello finiva appiccicato al testo. Dove il margine
       collassa (le pagine del plugin) non si somma: resta quello piu' grande. */
    margin-top: 22px;
    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;
}