/* mini-carousel.css – v6  (CLS definitief opgelost) */

/* ===== Variabelen ===== */
:root {
  --mc-gap:           8px;      /* ruimte tussen slides */
  --mc-height:        120px;    /* vaste slide‑hoogte */
  --mc-slide-max-w:   140px;    /* maximale slide‑breedte */
}

/* ===== Sectie: reserveer hoogte zodat er niets verspringt ===== */
.mini-carousel-section {
  /* gallery‑hoogte + section‑gap (2×3rem) */
  min-height: calc(var(--mc-height) + 6rem);
  overflow: hidden; /* voorkomt ‘leaken’ tijdens swipe */
}

/* ===== Wrapper ===== */
.mini-gallery-wrapper {
  position: relative;
  overflow: visible; /* pijlen buiten de slider blijven zichtbaar */
}

/* ===== Terwijl Slick nog niet geïnitialiseerd is ===== */
#mini-gallery:not(.slick-initialized) {
  display: flex;
  gap: var(--mc-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  min-height: var(--mc-height); /* zelfde hoogte als straks in Slick */
}
#mini-gallery:not(.slick-initialized) > div {
  flex: 0 0 var(--mc-slide-max-w);
}

/* ===== Zodra Slick draait ===== */
#mini-gallery .slick-slide {
  padding: 0 var(--mc-gap);
  max-width: var(--mc-slide-max-w);
}
#mini-gallery .slick-slide img {
  display: block;
  width: 100%;
  height: var(--mc-height); /* vaste hoogte voorkomt CLS */
  object-fit: cover;
  border-radius: 4px;
}

/* ===== Pijlen ===== */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  background: none;
  border: none;
  padding: .25rem .5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.prev-btn { left: -42px; }
.next-btn { right: -42px; }

@media (max-width: 520px) {
  .carousel-btn {
    font-size: 1.5rem;
    padding: .2rem .4rem;
    width: 32px;
    height: 32px;
  }
  .prev-btn { left: 8px; }
  .next-btn { right: 8px; }
}

/* ===== Titel ===== */
.carousel-title {
  text-align: center;
  width: 100%;
  margin: 0 auto 1rem;
}