/* =========================================================
   Bricks Auto Slider – Stylesheet
   ========================================================= */

/* ── Root / container ──────────────────────────────────── */
.brxe-auto-slider.bas-root {
    --bas-gap: 32px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* ── Viewport: verbergt alles buiten de container ──────── */
.bas-viewport {
    overflow: hidden;
    width: 100%;
}

/* ── Track: de horizontale rijtape met alle slides ─────── */
.bas-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;      /* past zich aan de totale breedte van alle slides aan */
    will-change: transform;  /* GPU-versnelling */
}

/* ── Slides-wrapper (original + clone) ─────────────────── */
.bas-slides {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: var(--bas-gap);
    /* rechts een extra gap zodat de loop naadloos aansluit */
    padding-right: var(--bas-gap);
}

/* ── Individuele slide ──────────────────────────────────── */
.brxe-auto-slider-item.bas-item {
    --bas-item-height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Breedte wordt bepaald door de afbeelding zelf */
    width: auto;
}

/* ── Afbeelding binnen de slide ─────────────────────────── */
.bas-item__img {
    display: block;
    height: var(--bas-item-height);
    width: auto;              /* breedte past zich aan de hoogte/aspect-ratio aan */
    max-width: none;          /* voorkom dat de breedte wordt ingeklapt */
    object-fit: contain;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Link-wrapper binnen een slide ─────────────────────── */
.bas-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ── CSS-animatie (keyframes worden via JS geïnjecteerd) ── */
/* Pauzeer animatie op hover (wordt via JS of CSS geregeld) */
.bas-root[data-bas-pause-on-hover="true"]:hover .bas-track {
    animation-play-state: paused !important;
}

/* ── Bricks Builder preview: laat slide-items correct zien  */
.brxe-auto-slider .brxe-auto-slider-item {
    flex-shrink: 0;
}