/* =========================================================
   MIRACLE LIQUORS – CAROUSEL v2.0 DEFINITIVE
   Bestand: css/components/carousel.css

   DOEL
   ---------------------------------------------------------
   Universele horizontale transportlaag voor:
   - cards
   - reviews
   - products
   - recipes / cocktails
   - gallery items
   - compacte contentblokken

   VERANTWOORDELIJK VOOR
   ---------------------------------------------------------
   - horizontale positionering
   - item widths
   - grid-auto-columns
   - scrollen / scroll snapping
   - navigatiecontrols
   - responsive kolommen
   - swipegedrag
   - statische status
   - dragging state
   - dark / inverse controls
   - printgedrag

   NIET VERANTWOORDELIJK VOOR
   ---------------------------------------------------------
   - reviewkaart-opmaak
   - card-opmaak
   - productkaart-opmaak
   - receptkaart-opmaak
   - gallery image styling
   - inhoudelijke typografie van child-components

   DESIGN SYSTEM PRINCIPES
   ---------------------------------------------------------
   - semantic tokens boven primitieve kleurtokens
   - spacing via spacing tokens
   - typography via typography tokens
   - groen is default control theme
   - accent en inverse zijn expliciete modifiers
   - geen autoplay
   - CSS scroll-snap werkt zonder JavaScript
   - JavaScript is progressive enhancement

   Vereist:
   - css/base/variables.css
   - css/base/typography.css
   - css/base/buttons.css
   - css/base/links.css
   - css/layout/containers.css
   - css/layout/spacing.css
   ========================================================= */


/* =========================================================
   1. BASIS
   ========================================================= */

.ml-carousel {
  position: relative;
  width: 100%;
  min-width: 0;

  /* ---------------------------------------------
     Lokale componenttokens
     --------------------------------------------- */

  --ml-carousel-gap: var(--ml-grid-gap-md);
  --ml-carousel-item-width: 340px;
  --ml-carousel-button-size: var(--ml-control-height-md);

  --ml-carousel-button-border:
    var(--ml-color-primary);

  --ml-carousel-button-color:
    var(--ml-color-primary);

  --ml-carousel-button-background:
    transparent;

  --ml-carousel-button-hover-border:
    var(--ml-color-primary);

  --ml-carousel-button-hover-background:
    var(--ml-color-primary);

  --ml-carousel-button-hover-color:
    var(--ml-color-text-inverse);

  --ml-carousel-button-disabled-border:
    var(--ml-color-border);

  --ml-carousel-button-disabled-color:
    var(--ml-color-text-subtle);

  --ml-carousel-focus:
    var(--ml-color-accent);
}


/*
 * Alleen gebruiken wanneer de carousel zelfstandig
 * een volledige sectie vormt.
 *
 * Bij voorkeur regelt .ml-section de buitenruimte.
 */

.ml-carousel--section {
  padding-block: var(--ml-space-section);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.ml-carousel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ml-space-032);

  margin-bottom: var(--ml-space-032);
}

.ml-carousel__header-content {
  width: min(780px, 100%);
  min-width: 0;
}


/* =========================================================
   3. EYEBROW
   ========================================================= */

.ml-carousel__eyebrow {
  margin: 0;
  padding: 0;

  color: var(--ml-color-primary);

  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-eyebrow);
  font-weight: var(--ml-font-weight-semibold);
  line-height: var(--ml-leading-ui);
  letter-spacing: var(--ml-tracking-eyebrow);

  text-transform: uppercase;
}


/* =========================================================
   4. TITEL
   ========================================================= */

.ml-carousel__title {
  margin: var(--ml-space-012) 0 0;
  padding: 0;

  color: var(--ml-color-heading);

  font-family: var(--ml-font-display);
  font-size: var(--ml-text-h2);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-leading-heading);
  letter-spacing: var(--ml-tracking-heading);

  text-wrap: balance;
}


/* =========================================================
   5. INTRODUCTIE
   ========================================================= */

.ml-carousel__intro {
  max-width: 700px;

  margin: var(--ml-space-016) 0 0;
  padding: 0;

  color: var(--ml-color-text-muted);

  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body);
  line-height: var(--ml-leading-body-relaxed);
}


/* =========================================================
   6. NAVIGATIECONTROLS
   ========================================================= */

.ml-carousel__controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  gap: var(--ml-space-008);
}


/* =========================================================
   7. NAVIGATIEKNOP
   ========================================================= */

.ml-carousel__button {
  display: inline-grid;
  width: var(--ml-carousel-button-size);
  height: var(--ml-carousel-button-size);
  place-items: center;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  border:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-carousel-button-border);

  border-radius: var(--ml-radius-pill);

  background: var(--ml-carousel-button-background);
  color: var(--ml-carousel-button-color);

  font: inherit;
  line-height: 1;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    transform var(--ml-transition-interactive),
    background-color var(--ml-transition-interactive),
    border-color var(--ml-transition-interactive),
    color var(--ml-transition-interactive),
    opacity var(--ml-transition-interactive),
    box-shadow var(--ml-transition-interactive);
}

.ml-carousel__button:hover:not(:disabled):not(
  [aria-disabled="true"]
) {
  transform: translateY(-2px);

  border-color: var(--ml-carousel-button-hover-border);
  background: var(--ml-carousel-button-hover-background);
  color: var(--ml-carousel-button-hover-color);

  box-shadow: var(--ml-shadow-xs);
}

.ml-carousel__button:active:not(:disabled):not(
  [aria-disabled="true"]
) {
  transform: translateY(0);
  box-shadow: none;
}

.ml-carousel__button:focus-visible {
  outline:
    var(--ml-border-width-medium)
    solid
    var(--ml-carousel-focus);

  outline-offset: var(--ml-space-004);
}

.ml-carousel__button:disabled,
.ml-carousel__button[aria-disabled="true"] {
  border-color: var(--ml-carousel-button-disabled-border);
  color: var(--ml-carousel-button-disabled-color);

  cursor: not-allowed;

  opacity: var(--ml-opacity-disabled);
  transform: none;
  box-shadow: none;
}


/* =========================================================
   8. KNOPICONEN
   ========================================================= */

.ml-carousel__button span,
.ml-carousel__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

.ml-carousel__button svg {
  display: block;
  width: var(--ml-icon-md);
  height: var(--ml-icon-md);
  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}


/* =========================================================
   9. VIEWPORT
   ========================================================= */

.ml-carousel__viewport {
  position: relative;

  width: 100%;
  min-width: 0;

  overflow: hidden;
}


/* =========================================================
   10. TRACK
   ========================================================= */

.ml-carousel__track {
  display: grid;
  grid-auto-flow: column;

  /*
   * Fallbackbreedte.
   * Hierdoor blijft de carousel bruikbaar zonder
   * kolommodifier.
   */
  grid-auto-columns:
    minmax(
      min(86vw, var(--ml-carousel-item-width)),
      var(--ml-carousel-item-width)
    );

  gap: var(--ml-carousel-gap);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    var(--ml-space-004)
    var(--ml-space-004)
    var(--ml-space-020);

  overflow-x: auto;
  overflow-y: visible;

  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--ml-space-004);

  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  list-style: none;
}

.ml-carousel__track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   11. ITEMS
   ========================================================= */

.ml-carousel__item {
  min-width: 0;
  height: auto;

  scroll-snap-align: start;
  scroll-snap-stop: normal;
}


/*
 * Alleen contenttypen die als kaarten functioneren
 * krijgen automatisch gelijke hoogte.
 */

.ml-carousel--cards .ml-carousel__item > article,
.ml-carousel--cards .ml-carousel__item > div,
.ml-carousel--cards .ml-carousel__item > a,

.ml-carousel--reviews .ml-carousel__item > article,

.ml-carousel--products .ml-carousel__item > article,
.ml-carousel--products .ml-carousel__item > div,
.ml-carousel--products .ml-carousel__item > a,

.ml-carousel--recipes .ml-carousel__item > article,
.ml-carousel--recipes .ml-carousel__item > div,
.ml-carousel--recipes .ml-carousel__item > a {
  height: 100%;
}


/* =========================================================
   12. KOLOMMEN
   ========================================================= */

/* Eén item zichtbaar */

.ml-carousel--columns-1 .ml-carousel__track {
  grid-auto-columns: 100%;
}


/* Twee items zichtbaar */

.ml-carousel--columns-2 .ml-carousel__track {
  grid-auto-columns:
    calc(
      (100% - var(--ml-carousel-gap)) / 2
    );
}


/* Drie items zichtbaar */

.ml-carousel--columns-3 .ml-carousel__track {
  grid-auto-columns:
    calc(
      (100% - (var(--ml-carousel-gap) * 2)) / 3
    );
}


/* Vier items zichtbaar */

.ml-carousel--columns-4 .ml-carousel__track {
  grid-auto-columns:
    calc(
      (100% - (var(--ml-carousel-gap) * 3)) / 4
    );
}


/* Vijf items zichtbaar */

.ml-carousel--columns-5 .ml-carousel__track {
  grid-auto-columns:
    calc(
      (100% - (var(--ml-carousel-gap) * 4)) / 5
    );
}


/* =========================================================
   13. ITEMBREEDTES
   ========================================================= */

.ml-carousel--narrow {
  --ml-carousel-item-width: 260px;
}

.ml-carousel--compact {
  --ml-carousel-item-width: 290px;
  --ml-carousel-gap: var(--ml-space-016);
}

.ml-carousel--default {
  --ml-carousel-item-width: 340px;
}

.ml-carousel--wide {
  --ml-carousel-item-width: 440px;
}

.ml-carousel--extra-wide {
  --ml-carousel-item-width: 560px;
}


/* =========================================================
   14. TUSSENRUIMTES
   ========================================================= */

.ml-carousel--gap-small {
  --ml-carousel-gap: var(--ml-space-012);
}

.ml-carousel--gap-medium {
  --ml-carousel-gap: var(--ml-space-024);
}

.ml-carousel--gap-large {
  --ml-carousel-gap: var(--ml-space-032);
}


/* =========================================================
   15. CARD CAROUSEL
   ========================================================= */

.ml-carousel--cards {
  --ml-carousel-item-width: 340px;
  --ml-carousel-gap: var(--ml-grid-gap-md);
}


/* =========================================================
   16. REVIEW CAROUSEL
   ========================================================= */

.ml-carousel--reviews {
  --ml-carousel-item-width: 390px;
  --ml-carousel-gap: var(--ml-space-024);
}

.ml-carousel--reviews .ml-carousel__track {
  align-items: stretch;
}


/* =========================================================
   17. PRODUCT CAROUSEL
   ========================================================= */

.ml-carousel--products {
  --ml-carousel-item-width: 280px;
  --ml-carousel-gap: var(--ml-space-020);
}

.ml-carousel--products .ml-carousel__track {
  align-items: stretch;
}


/* =========================================================
   18. RECEPTEN / COCKTAILS
   ========================================================= */

/* Algemene recepten-/cocktailcarousel. De carousel regelt uitsluitend: - itembreedte - ruimte tussen items - gelijke hoogte. De visuele kaartopmaak staat in cards.css. */

.ml-carousel--recipes {
  --ml-carousel-item-width: 330px;
  --ml-carousel-gap: var(--ml-space-024);
}

.ml-carousel--recipes .ml-carousel__track {
  align-items: stretch;
}

.ml-carousel--recipes .ml-carousel__item {
  display: flex;
}

.ml-carousel--recipes .ml-carousel__item > article,
.ml-carousel--recipes .ml-carousel__item > div,
.ml-carousel--recipes .ml-carousel__item > a {
  width: 100%;
  height: 100%;
}


/* ---------------------------------------------------------
   COMPACTE RECEPTEN / COCKTAILS
   --------------------------------------------------------- */

/* Voor visueel compacte cocktailkaarten. Voorbeeld: .ml-carousel .ml-carousel--recipes .ml-carousel--compact-recipes .ml-carousel--columns-3 */

.ml-carousel--compact-recipes {
  --ml-carousel-item-width: 310px;
  --ml-carousel-gap: var(--ml-space-020);
}

/* =========================================================
   19. GALLERY CAROUSEL
   ========================================================= */

.ml-carousel--gallery {
  --ml-carousel-item-width: 460px;
  --ml-carousel-gap: var(--ml-space-020);
}


/* =========================================================
   20. FEATURED CAROUSEL
   ========================================================= */

.ml-carousel--featured {
  --ml-carousel-item-width: 560px;
  --ml-carousel-gap: var(--ml-space-024);
}


/* =========================================================
   21. CONTROL THEMES
   ========================================================= */

/*
 * Default = primary green.
 * Geen modifier nodig.
 */


/* Accent */

.ml-carousel--controls-accent {
  --ml-carousel-button-border:
    var(--ml-color-accent);

  --ml-carousel-button-color:
    var(--ml-color-primary-active);

  --ml-carousel-button-background:
    var(--ml-color-accent-soft);

  --ml-carousel-button-hover-border:
    var(--ml-color-accent);

  --ml-carousel-button-hover-background:
    var(--ml-color-accent);

  --ml-carousel-button-hover-color:
    var(--ml-color-primary-active);
}


/* Inverse */

.ml-carousel--controls-inverse {
  --ml-carousel-button-border:
    rgba(255, 255, 255, 0.70);

  --ml-carousel-button-color:
    var(--ml-color-text-inverse);

  --ml-carousel-button-background:
    rgba(255, 255, 255, 0.06);

  --ml-carousel-button-hover-border:
    var(--ml-white);

  --ml-carousel-button-hover-background:
    var(--ml-white);

  --ml-carousel-button-hover-color:
    var(--ml-color-primary-active);

  --ml-carousel-button-disabled-border:
    rgba(255, 255, 255, 0.28);

  --ml-carousel-button-disabled-color:
    rgba(255, 255, 255, 0.55);

  --ml-carousel-focus:
    var(--ml-color-accent-soft);
}


/* =========================================================
   22. LEGACY CONTROL ALIASES — DEPRECATED
   ========================================================= */

/*
 * Tijdelijke compatibiliteit.
 * Nieuwe HTML gebruikt:
 * - default
 * - --controls-accent
 * - --controls-inverse
 */

.ml-carousel--controls-green {
  --ml-carousel-button-border:
    var(--ml-color-primary);

  --ml-carousel-button-color:
    var(--ml-color-primary);

  --ml-carousel-button-background:
    transparent;

  --ml-carousel-button-hover-border:
    var(--ml-color-primary);

  --ml-carousel-button-hover-background:
    var(--ml-color-primary);

  --ml-carousel-button-hover-color:
    var(--ml-color-text-inverse);
}

.ml-carousel--controls-gold {
  --ml-carousel-button-border:
    var(--ml-color-accent);

  --ml-carousel-button-color:
    var(--ml-color-primary-active);

  --ml-carousel-button-background:
    var(--ml-color-accent-soft);

  --ml-carousel-button-hover-border:
    var(--ml-color-accent);

  --ml-carousel-button-hover-background:
    var(--ml-color-accent);

  --ml-carousel-button-hover-color:
    var(--ml-color-primary-active);
}

.ml-carousel--controls-light {
  --ml-carousel-button-border:
    rgba(255, 255, 255, 0.70);

  --ml-carousel-button-color:
    var(--ml-color-text-inverse);

  --ml-carousel-button-background:
    rgba(255, 255, 255, 0.06);

  --ml-carousel-button-hover-border:
    var(--ml-white);

  --ml-carousel-button-hover-background:
    var(--ml-white);

  --ml-carousel-button-hover-color:
    var(--ml-color-primary-active);

  --ml-carousel-button-disabled-border:
    rgba(255, 255, 255, 0.28);

  --ml-carousel-button-disabled-color:
    rgba(255, 255, 255, 0.55);
}


/* =========================================================
   23. DONKERE ACHTERGROND
   ========================================================= */

.ml-carousel--dark {
  padding: var(--ml-space-040);

  border-radius: var(--ml-radius-panel);

  background:
    linear-gradient(
      135deg,
      var(--ml-color-surface-brand) 0%,
      var(--ml-color-surface-brand-strong) 100%
    );
}

.ml-carousel--dark .ml-carousel__eyebrow {
  color: var(--ml-color-accent);
}

.ml-carousel--dark .ml-carousel__title {
  color: var(--ml-color-text-inverse);
}

.ml-carousel--dark .ml-carousel__intro,
.ml-carousel--dark .ml-carousel__footer-text,
.ml-carousel--dark .ml-carousel__swipe-hint {
  color: var(--ml-color-text-inverse-muted);
}


/* =========================================================
   24. CENTERED HEADER
   ========================================================= */

.ml-carousel--center .ml-carousel__header {
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.ml-carousel--center .ml-carousel__header-content {
  margin-inline: auto;
}

.ml-carousel--center .ml-carousel__intro {
  margin-inline: auto;
}

.ml-carousel--center .ml-carousel__controls {
  justify-content: center;
}


/* =========================================================
   25. FOOTER
   ========================================================= */

.ml-carousel__footer {
  margin-top: var(--ml-space-020);

  text-align: center;
}

.ml-carousel__footer-text {
  margin: 0;
  padding: 0;

  color: var(--ml-color-text-muted);

  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body);
}


/* =========================================================
   26. SWIPE HINT
   ========================================================= */

.ml-carousel__swipe-hint {
  display: none;

  margin: var(--ml-space-012) 0 0;
  padding: 0;

  color: var(--ml-color-text-subtle);

  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);

  text-align: center;
}

.ml-carousel--no-hint .ml-carousel__swipe-hint {
  display: none !important;
}


/* =========================================================
   27. GEEN OVERFLOW / STATIC STATE
   ========================================================= */

/*
 * JS voegt .is-static toe wanneer alle items passen.
 */

.ml-carousel.is-static .ml-carousel__track {
  overflow-x: hidden;

  scroll-snap-type: none;
}

.ml-carousel.is-static .ml-carousel__controls {
  display: none;
}

.ml-carousel.is-static .ml-carousel__swipe-hint {
  display: none;
}


/* =========================================================
   28. SLEEPSTATUS
   ========================================================= */

.ml-carousel__track.is-dragging {
  cursor: grabbing;

  scroll-behavior: auto;
  scroll-snap-type: none;

  user-select: none;
}

.ml-carousel__track.is-dragging * {
  pointer-events: none;
}


/* =========================================================
   29. TABLET – MAX 1100PX
   ========================================================= */

@media (max-width: 1100px) {

  .ml-carousel--columns-4 .ml-carousel__track,
  .ml-carousel--columns-5 .ml-carousel__track {
    grid-auto-columns:
      calc(
        (100% - (var(--ml-carousel-gap) * 2)) / 3
      );
  }

  .ml-carousel--extra-wide,
  .ml-carousel--featured {
    --ml-carousel-item-width: 500px;
  }

}


/* =========================================================
   30. TABLET – MAX 980PX
   ========================================================= */

@media (max-width: 980px) {

  .ml-carousel {
    --ml-carousel-item-width: 320px;
  }


  /* Header */

  .ml-carousel__header {
    align-items: flex-start;

    gap: var(--ml-space-024);
    margin-bottom: var(--ml-space-032);
  }

  .ml-carousel__header-content {
    width: min(650px, 100%);
  }


  /* Kolommen */

  .ml-carousel--columns-3 .ml-carousel__track,
  .ml-carousel--columns-4 .ml-carousel__track,
  .ml-carousel--columns-5 .ml-carousel__track {
    grid-auto-columns:
      calc(
        (100% - var(--ml-carousel-gap)) / 2
      );
  }


  /* Presets */

  .ml-carousel--reviews {
    --ml-carousel-item-width: 360px;
  }

  .ml-carousel--gallery {
    --ml-carousel-item-width: 420px;
  }

  .ml-carousel--wide {
    --ml-carousel-item-width: 400px;
  }

  .ml-carousel--extra-wide,
  .ml-carousel--featured {
    --ml-carousel-item-width: 460px;
  }


  /* Dark */

  .ml-carousel--dark {
    padding: var(--ml-space-032);
  }

}


/* =========================================================
   31. MOBIEL – MAX 680PX
   ========================================================= */

@media (max-width: 680px) {

  .ml-carousel {
    --ml-carousel-gap: var(--ml-space-016);
    --ml-carousel-item-width: min(86vw, 340px);
    --ml-carousel-button-size: var(--ml-control-height-sm);
  }

  .ml-carousel--section {
    padding-block: var(--ml-space-section-compact);
  }


  /* Header */

  .ml-carousel__header {
    flex-direction: column;
    align-items: flex-start;

    gap: var(--ml-space-020);
    margin-bottom: var(--ml-space-024);
  }

  .ml-carousel__header-content {
    width: 100%;
  }

  .ml-carousel__title {
    font-size: var(--ml-text-h3);
  }

  .ml-carousel__intro {
    margin-top: var(--ml-space-012);

    font-size: var(--ml-text-body-sm);
    line-height: var(--ml-leading-body);
  }

  .ml-carousel__controls {
    align-self: flex-end;
  }


  /* Tracks */

  .ml-carousel__track,
  .ml-carousel--columns-2 .ml-carousel__track,
  .ml-carousel--columns-3 .ml-carousel__track,
  .ml-carousel--columns-4 .ml-carousel__track,
  .ml-carousel--columns-5 .ml-carousel__track {
    grid-auto-columns: var(--ml-carousel-item-width);

    gap: var(--ml-carousel-gap);

    padding-bottom: var(--ml-space-020);
  }

  .ml-carousel--columns-1 .ml-carousel__track {
    grid-auto-columns: 100%;
  }


  /* Breedtevarianten */

  .ml-carousel--narrow {
    --ml-carousel-item-width: min(76vw, 270px);
  }

  .ml-carousel--compact {
    --ml-carousel-item-width: min(80vw, 290px);
  }

  .ml-carousel--wide {
    --ml-carousel-item-width: min(90vw, 390px);
  }

  .ml-carousel--extra-wide,
  .ml-carousel--featured {
    --ml-carousel-item-width: min(92vw, 440px);
  }

  .ml-carousel--reviews {
    --ml-carousel-item-width: min(88vw, 350px);
  }

  .ml-carousel--products {
    --ml-carousel-item-width: min(74vw, 275px);
  }

.ml-carousel--recipes {
  --ml-carousel-item-width: min(82vw, 320px);
}

.ml-carousel--compact-recipes {
  --ml-carousel-item-width: min(78vw, 290px);
  --ml-carousel-gap: var(--ml-space-016);
}

  .ml-carousel--gallery {
    --ml-carousel-item-width: min(88vw, 390px);
  }


  /* Dark */

  .ml-carousel--dark {
    padding: var(--ml-space-024);

    border-radius: var(--ml-radius-card);
  }


  /* Footer / swipe hint */

  .ml-carousel__footer {
    margin-top: var(--ml-space-016);
  }

  .ml-carousel__swipe-hint {
    display: block;
  }

}


/* =========================================================
   32. ZEER KLEINE SCHERMEN – MAX 420PX
   ========================================================= */

@media (max-width: 420px) {

  .ml-carousel {
    --ml-carousel-gap: var(--ml-space-012);
    --ml-carousel-button-size: 40px;
  }

  .ml-carousel__controls {
    align-self: flex-start;
  }

  .ml-carousel__button svg {
    width: var(--ml-icon-sm);
    height: var(--ml-icon-sm);
  }

  .ml-carousel__track {
    padding-right: var(--ml-space-008);
  }

}


/* =========================================================
   33. ALLEEN SWIPEN OP MOBIEL
   ========================================================= */

@media (max-width: 680px) {

  .ml-carousel--mobile-swipe-only .ml-carousel__controls {
    display: none;
  }

}


/* =========================================================
   34. TOUCHAPPARATEN
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .ml-carousel__button:hover:not(:disabled):not(
    [aria-disabled="true"]
  ) {
    transform: none;

    border-color: var(--ml-carousel-button-border);
    background: var(--ml-carousel-button-background);
    color: var(--ml-carousel-button-color);

    box-shadow: none;
  }

}


/* =========================================================
   35. VERMINDERDE BEWEGING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ml-carousel__track {
    scroll-behavior: auto;
  }

  .ml-carousel__button {
    transition: none;
  }

  .ml-carousel__button:hover:not(:disabled):not(
    [aria-disabled="true"]
  ) {
    transform: none;
  }

}


/* =========================================================
   36. PRINT
   ========================================================= */

@media print {

  .ml-carousel__controls,
  .ml-carousel__swipe-hint {
    display: none !important;
  }

  .ml-carousel__track,
  .ml-carousel--columns-1 .ml-carousel__track,
  .ml-carousel--columns-2 .ml-carousel__track,
  .ml-carousel--columns-3 .ml-carousel__track,
  .ml-carousel--columns-4 .ml-carousel__track,
  .ml-carousel--columns-5 .ml-carousel__track {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-flow: row;
    grid-auto-columns: auto;

    gap: var(--ml-space-020);

    overflow: visible;

    padding: 0;

    scroll-snap-type: none;
  }

  .ml-carousel__item {
    break-inside: avoid;
  }

}