/**
 * BB Logos — marquee infinito di loghi (self-contained).
 *
 * Il track contiene due set identici di loghi ed è largo esattamente 2 set.
 * Il keyframe trasla di -50%, cioè di un set.
 * Quando il secondo set arriva dove stava il primo il fotogramma è identico
 * a quello di partenza, quindi il loop riparte senza salti. Lo spazio tra i loghi
 * è un margine su entrambi i lati di ogni logo.
 *
 * Avvio allo scroll-in-view: di default il track non ha animazione.
 * Il JS (logos.js) aggiunge .is-animating
 * quando la striscia entra nel viewport viene aggiunta la classe 
 * e il carosello scorre di continuo, all'infinito.
 *
 * Variante .bb-logos--bigger li sovrascrive (sfondo scuro + loghi invertiti).
 */

.bb-logos {
    --bb-logos-w: 80px;
    --bb-logos-h: 60px;
    --bb-logos-gap: 2rem;
    --bb-logos-duration: 240s;
    --bb-logos-row-h: auto;

    overflow: hidden;
    width: 100%;
}

.bb-logos-track {
    display: flex;
    width: max-content;
    align-items: center;
}

/* L'animazione viene applicata solo quando la striscia entra in vista. */
.bb-logos.is-animating .bb-logos-track {
    animation: bb-logos-scroll var(--bb-logos-duration) linear infinite;
}

/* Direzione opposta */
.bb-logos.is-animating .bb-logos-track--reverse {
    animation-direction: reverse;
}

.bb-logos-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.bb-logos-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bb-logos-row-h);
    margin-left: var(--bb-logos-gap);
    margin-right: var(--bb-logos-gap);
}

.bb-logos-img {
    width: var(--bb-logos-w);
    max-height: var(--bb-logos-h);
    max-width: none;
    height: auto;
    display: block;
}

/* ── Variante "grande scura": loghi piu' grandi, sfondo scuro, loghi in bianco ── */
.bb-logos--bigger {
    --bb-logos-w: 120px;
    --bb-logos-h: 80px;

    background-color: #59595b;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.bb-logos--bigger .bb-logos-img {
    filter: brightness(0) invert(0.97);
}

/* ── Breakpoint >= 768px ── */
@media (min-width: 768px) {
    .bb-logos {
        --bb-logos-w: 100px;
        --bb-logos-h: 60px;
    }

    .bb-logos--bigger {
        --bb-logos-w: 180px;
        --bb-logos-h: 110px;

        margin-top: 50px;
        margin-bottom: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* Messaggio in editor quando non ci sono loghi validi. */
.bb-logos-empty {
    padding: 1rem;
    text-align: center;
    color: #888;
    border: 1px dashed #ccc;
}

@keyframes bb-logos-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}