/* =========================================
   WDF Logopalkki -lohko
========================================= */
/* Pysäytetään liuku hoverilla — antaa käyttäjälle ajan klikata logoa */
.wdf-logopalkki:hover .wdf-logopalkki__karuselli {
    animation-play-state: paused;
}
/* Koko näytön leveys kun alignfull on päällä */
.wdf-logopalkki.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}
/* Ulompi wrapper */
.wdf-logopalkki {
    background: rgba(255, 255, 255, 0.85);
    padding: 24px 0;
    overflow: hidden;
	box-sizing: border-box;
}
/* Karusellin container */
.wdf-logopalkki__karuselli {
    display: flex;
    width: max-content;
    animation: wdf-liuku 30s linear infinite;
}
/* Yksi logorivin wrapper */
.wdf-logopalkki__rivi {
    display: flex;
    align-items: center;
    gap: 64px;
    padding-right: 64px;
}
/* Yksittäinen logo */
.wdf-logopalkki__logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
    /*filter: brightness(0) invert(1);*/
    opacity: 0.85;
}
/* Liukuva animaatio */
@keyframes wdf-liuku {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ===== Tabletti + mobiili (≤1024px): marquee → 4-sarakkeinen ruudukko ===== */
@media (max-width: 1024px) {
    /* Vaakapadding, jottei logot mene kiinni reunoihin */
    .wdf-logopalkki {
        padding-inline: var(--wdf-padding-x);
    }
    /* Marquee pois — container normaaliksi lohkoksi */
    .wdf-logopalkki__karuselli {
        display: block;
        width: auto;
        animation: none;
    }
    /* Kloonirivi piiloon — logot näytetään vain kerran */
.wdf-logopalkki__karuselli > .wdf-logopalkki__rivi:nth-child(2) {
    display: none;
}
    /* Näkyvä rivi 4-sarakkeiseksi ruudukoksi, rivejä tarpeen mukaan */
    .wdf-logopalkki__rivi {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px; /* rivi- / sarakeväli */
        padding-right: 0;
        align-items: center;
        justify-items: center;
    }
    /* Logo mahtuu soluun kuvasuhde säilyttäen */
    .wdf-logopalkki__logo img {
        height: auto;
        max-height: 40px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
	    .wdf-logopalkki__rivi {
	        gap: 16px; /* rivi- / sarakeväli */

	}
}