/* Optional slider mode (enabled via plugin settings + layout="slider") */

.scl--layout-slider .scl-slider {
  position: relative;
}

/* wrapper must not add any side padding/margins */
.scl--layout-slider {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  /* the TRACK is the scroll container; hide any outer scrollbars */
  overflow: hidden;
  box-sizing: border-box;
}

/* Track: same cards, just horizontal */
.scl--layout-slider .scl__grid {
  display: flex;
  gap: 16px;              /* MUST match scl.css */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
  padding: 0;             /* no extra left/right space */
  margin: 0;              /* no extra left/right space */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  cursor: grab;
}

.scl--layout-slider .scl__grid::-webkit-scrollbar {
  display: none; /* WebKit */
}

.scl--layout-slider .scl__grid.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* single source of truth for columns */
.scl--layout-slider {
  --scl-cols: var(--scl-cols-mobile, 1);
}

@media (min-width: 768px) {
  .scl--layout-slider {
    --scl-cols: var(--scl-cols-tablet, 2);
  }
}

@media (min-width: 1024px) {
  .scl--layout-slider {
    --scl-cols: var(--scl-cols-desktop, 3);
  }
}

/* IMPORTANT: subtract gaps so right edge aligns pixel-perfect */
.scl--layout-slider .scl__grid > * {
  box-sizing: border-box;
  flex: 0 0 calc(
    (100% - (var(--scl-cols) - 1) * 16px)
    / var(--scl-cols)
  );
  scroll-snap-align: start;
}

.scl--layout-slider .scl-slider[data-scl-slider-align="center"] .scl__grid > * {
  scroll-snap-align: center;
}

/* Arrows (overlay; no layout shift) */
.scl-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.9);
  padding: 6px 10px;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  font-size: 0; /* icon provided via :before */
}

.scl-slider__btn--prev { left: 0; }
.scl-slider__btn--next { right: 0; }

/* Icon: simple caret built with borders */
.scl-slider__btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid rgba(0,0,0,.75);
  border-width: 0 2px 2px 0;
}

.scl-slider__btn--prev::before {
  transform: rotate(135deg);
}

.scl-slider__btn--next::before {
  transform: rotate(-45deg);
}

/* Dots */
.scl-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.scl-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.35);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.scl-slider__dot.is-active {
  background: rgba(0,0,0,.35);
}