/*
 * SHPS CAROUSEL
 * Shared mechanics only.
 *
 * --grid-gutter is defined globally by Tailwind.
 * --shps-visible is configured per carousel instance.
 */


/*
 * VIEWPORT
 */

.shps-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.shps-viewport::-webkit-scrollbar {
  display: none;
}


/*
 * TRACK
 */

.shps-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: var(--grid-gutter);
}


/*
 * SLIDES
 */

.shps-slide {
  flex: 0 0 calc(
    (100% - (var(--shps-visible, 1) - 1) * var(--grid-gutter))
    / var(--shps-visible, 1)
  );

  min-width: 0;

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


/*
 * CONTROLS
 */

.shps-controls button {
  cursor: pointer;
  transition: opacity 300ms ease-in-out;
}

.shps-controls button:disabled {
  opacity: 0.5;
  cursor: default;
}


/*
 * REDUCED MOTION
 */

@media (prefers-reduced-motion: reduce) {
  .shps-viewport,
  .shps-controls button {
      scroll-behavior: auto;
      transition: none;
    }
}