/* ==========================================================================
   Tekst-/logoslider (shortcode [werk_logo_slider])
   ========================================================================== */

/* sliders */

.text-slider {
    width: 100vw;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.text-track {
    display: flex;
    white-space: nowrap;
    animation: scroll-left 60s linear infinite;
}

.text-slider-reverse .text-track {
    animation: scroll-right 60s linear infinite;
}

.text-track li, .text-track svg {
    display: inline-block;
    margin-right: 40px; /* optionele spacing */
}

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

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

@media (max-width: 1024px) {
    .text-track, .text-slider-reverse .text-track { animation-duration: 15s; }
}

@media (max-width: 600px) {
    .text-track, .text-slider-reverse .text-track { animation-duration: 5s; }
}


.text-track svg {
    max-width: none !important;   /* overschrijf max-width: 100% */
    height: 100px;                 /* gewenste hoogte */
    width: auto;                  /* breedte schaalt mee met hoogte */
    vertical-align: middle;       /* netjes in lijn met tekst */
}

.text-track li.logo-wrapper {
  display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100px;   /* maximale hoogte van het logo */
    max-width: 150px;   /* optionele maximale breedte */
    overflow: hidden;   /* voorkom dat grote logo's uitsteken */
}


.text-track li svg {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}