/* Minimal, slider-only CSS — rest is Tailwind-driven. */

.rookie-slider {
  position: relative;
  overflow: hidden; /* edges masked by gradient divs in index.html */
  height: auto;
  min-height: 220px; /* just to keep some height if few slides */
}

/* The moving strip */
.rookie-slider .slider-track {
  display: flex;
  gap: 20px;           /* MUST match slideGap in JS */
  will-change: transform;
  height: 100%;
}

/* Each slide holds the Tailwind-based card tile */
.rookie-slider .slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  padding: 0; /* tile already has Tailwind padding */
}

/* Optional: pause on hover */
.rookie-slider:hover .slider-track {
  transition: transform .08s linear; /* keeps it smooth on hover */
}

/* Reduced motion users: no animation (JS still runs but you can disable here if desired) */
@media (prefers-reduced-motion: reduce){
  .rookie-slider .slider-track {
    transition: none !important;
  }
}