/* =====================================================================
   B4B Logo-carrousel — homepage en pagina's met [b4b_logo_carrousel]
   ===================================================================== */

.b4b-logo-balk {
    background: #f5f5f3;
    border-top: 1px solid #e2e2de;
    border-bottom: 1px solid #e2e2de;
    padding: 28px 0;
    overflow: hidden;
}

.b4b-logo-carrousel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.b4b-logo-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: b4b-logo-scroll 35s linear infinite;
}

.b4b-logo-track:hover {
    animation-play-state: paused;
}

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

.b4b-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .5;
    transition: opacity .2s;
    text-decoration: none;
}

.b4b-logo-link:hover {
    opacity: 1;
}

.b4b-leden-logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .b4b-logo-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 0 24px;
        gap: 32px;
    }
}