/* Wrapper */
.js-vc-auto-carousel {
  --vcac-gap: 24px;
  --vcac-per-view: 4; /* default desktop */
  position: relative;
}

/* Base (non-slider): grid columns */
.js-vc-auto-carousel .vcac-viewport {
  display: grid;
  grid-template-columns: repeat(var(--vcac-per-view), minmax(0, 1fr));
  gap: var(--vcac-gap);
}

/* Slider mode */
.js-vc-auto-carousel.is-vcac-slider .vcac-viewport {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--vcac-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 42px;
}

/* Slides */
.js-vc-auto-carousel.is-vcac-slider .vcac-viewport > .wpb_column.vc_column_container {
  flex: 0 0 calc((100% - (var(--vcac-gap) * (var(--vcac-per-view) - 1))) / var(--vcac-per-view));
  scroll-snap-align: center;
  width: auto !important;
}

/* Desktop slider sizing (when slider is enabled window width >= 900px) */
@media (min-width: 900px) {
  .js-vc-auto-carousel.is-vcac-slider .vcac-viewport > .wpb_column.vc_column_container {
    flex: 0 0 24%;
    scroll-snap-align: start;
  }
}

/* Arrows overlay the wrapper */
.js-vc-auto-carousel .vcac-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: none;
  pointer-events: none;
  z-index: 5;
}

.js-vc-auto-carousel.is-vcac-slider .vcac-arrows {
  display: block;
}

.js-vc-auto-carousel .vcac-arrow {
  pointer-events: auto;
  position: absolute;
  top: 0;
  width: 28px;
  height: 58px;
  border-radius: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.js-vc-auto-carousel { --vcac-arrow-offset: -42px; }
.js-vc-auto-carousel .vcac-prev { left: var(--vcac-arrow-offset); }
.js-vc-auto-carousel .vcac-next { right: var(--vcac-arrow-offset); }

.js-vc-auto-carousel .vcac-arrow svg { width: 100%; height: 100%; display: block; }
.js-vc-auto-carousel .vcac-next svg { transform: rotate(180deg); }

.js-vc-auto-carousel .vcac-arrow[disabled] { cursor: default; }
.js-vc-auto-carousel .vcac-arrow[disabled] svg { opacity: 0; }

/* Below 900px, always slider and per-view 1 */
@media (max-width: 899px) {
  .js-vc-auto-carousel { 
    --vcac-per-view: 1;
    --vcac-arrow-offset: 0px;
  }

  .js-vc-auto-carousel.is-vcac-slider .vcac-viewport {
    margin-left: 20px;
    margin-right: 20px;
  }

  .js-vc-auto-carousel.is-vcac-slider .vcac-viewport > .wpb_column.vc_column_container {
    flex-basis: 100%;
  }
}

/* Desktop (>=900): ensure grid is 4 columns when not slider */
@media (min-width: 900px) {
  .js-vc-auto-carousel { --vcac-per-view: 4; }
}

/* Visually hide scrollbar everywhere in slider mode */
.js-vc-auto-carousel.is-vcac-slider .vcac-viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.js-vc-auto-carousel.is-vcac-slider .vcac-viewport::-webkit-scrollbar {
  display: none;
}