/* =========================================================
   Punch Continuous Slider
   ========================================================= */


.punch-continuous-slider-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.punch-continuous-slider {
  --punch-current-slides: var(--punch-slides-desktop, 3);
  --punch-slider-width: 100vw;
  --punch-loop-distance: 0px;
  --punch-slider-speed: 45000ms;

  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Viewport
   --------------------------------------------------------- */

.punch-continuous-slider__viewport {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
}

/* ---------------------------------------------------------
   Track
   --------------------------------------------------------- */

.punch-continuous-slider__track {
  display: flex;
  align-items: stretch;

  gap: var(--punch-slider-gap, 24px);

  width: max-content;
  min-width: 100%;

  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------------------------------------------------------
   Continuous movement
   --------------------------------------------------------- */

.punch-continuous-slider.is-running
.punch-continuous-slider__track {
  animation:
    punch-continuous-scroll
    var(--punch-slider-speed, 45000ms)
    linear
    infinite;
}

.punch-continuous-slider.is-paused
.punch-continuous-slider__track {
  animation-play-state: paused;
}

@keyframes punch-continuous-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      var(--punch-loop-translate, -1000px),
      0,
      0
    );
  }
}

/* ---------------------------------------------------------
   Slides
   --------------------------------------------------------- */

.punch-continuous-slider__slide {
  box-sizing: border-box;

  flex: 0 0 calc(
    (
      var(--punch-slider-width) -
      (
        var(--punch-slider-gap, 24px) *
        (var(--punch-current-slides) - 1)
      )
    ) /
    var(--punch-current-slides)
  );

  width: calc(
    (
      var(--punch-slider-width) -
      (
        var(--punch-slider-gap, 24px) *
        (var(--punch-current-slides) - 1)
      )
    ) /
    var(--punch-current-slides)
  );

  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Neutralize Punch/Bulma grid sizing in slider mode */

.punch-continuous-slider .punch-grid-item,
.punch-continuous-slider .column {
  width: auto;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Equal-height slide content */

.punch-continuous-slider__slide >
.punch-grid-item-inner,
.punch-continuous-slider__slide
.punch-grid-item-inner {
  box-sizing: border-box;
  height: 100%;
}

/* Safe image sizing */
/* Existing "Media Size" admin field */
.punch-continuous-slider
.punch-grid-item-media-wrapper {
    flex: 0 0 var(--customItemSize, auto);
    width: var(--customItemSize, auto);
    max-width: var(--customItemSize, none);
}

/* Existing "Media Space" admin field */
.punch-continuous-slider
.punch-grid-content-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--customItemSpace, 1.5rem);
}

.punch-continuous-slider__slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Prevent cloned content from receiving pointer events */

.punch-continuous-slider__slide[data-slider-clone="true"] {
  pointer-events: none;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1023px) {
  .punch-continuous-slider {
    --punch-current-slides:
      var(--punch-slides-tablet, 2);
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 950px) {
  .punch-continuous-slider {
    --punch-current-slides:
      var(--punch-slides-mobile, 1);
  }
  .punch-continuous-slider .punch-grid-item-media-wrapper { 
    --customItemSize: 100px;
    --punch-slider-gap: 0px;
    --punch-slides-desktop: 6;
    --punch-slides-tablet: 6;
    --punch-slides-mobile: 4;

}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .punch-continuous-slider.is-running
  .punch-continuous-slider__track {
    animation: none;
  }
}