/* Velocity Carousel — card-based layout */

/*
 * The card track uses a fixed pixel translateX offset (card width 315px + gap 24px).
 * overflow-hidden on the viewport clips overflowing cards.
 * Tailwind handles transitions, spacing, and colours.
 */

/* Prevent layout shift during JS initialisation — cards start off positioned */
[data-carousel-track] {
  transform: translateX(0);
}

/* Smooth scroll-snap fallback for no-JS or reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-carousel-track] {
    transition: none !important;
  }
}

/* Ensure the viewport does not overflow its container */
[data-carousel-viewport] {
  overflow: hidden;
  max-width: 100%;
}

/* Mobile-first: viewport clips at full container width. JS sets card widths. */
@media (max-width: 767px) {
  [data-carousel-viewport] {
    width: 100% !important;
    max-width: 100% !important;
  }
}