/* ==========================================================================
   TOUCH SLIDER (mobile) — reusable component
   --------------------------------------------------------------------------
   Markup:
     <div data-slider data-slider-max="47.99rem">
       <div class="slider__viewport">
         <ul class="slider__track" data-slider-track> <li>…</li> … </ul>
       </div>
       <div class="slider__dots" data-slider-dots></div>
     </div>
   slider.js adds .is-slider while the media query matches: the track
   becomes a single transformed row with clones at both ends (infinite
   loop), autoplay, pagination dots and pointer drag. Outside the query
   the component's own layout (e.g. a grid) is untouched.
   ========================================================================== */

/* The slider root is often a grid/flex item. Its automatic minimum size
   would otherwise equal the min-content width of the whole track (all
   slides + clones), forcing the parent column wider than the viewport. */
[data-slider] {
  min-inline-size: 0;
}

.slider__dots {
  display: none;
}

[data-slider].is-slider .slider__viewport {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);   /* bleed to the screen edges… */
  padding-inline: var(--gutter);             /* …while keeping the gutter */
  touch-action: pan-y;                       /* vertical page scroll stays native */
}

[data-slider].is-slider .slider__track {
  display: flex;
  gap: var(--slider-gap, 1rem);
  inline-size: auto;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

[data-slider].is-slider .slider__track.is-dragging {
  cursor: grabbing;
}

[data-slider].is-slider .slider__track.is-animating {
  transition: transform 0.55s var(--ease-out);
}

[data-slider].is-slider .slider__track > * {
  flex: 0 0 var(--slide-size, 82%);
  min-inline-size: 0;
}

/* Prevent native image dragging from hijacking the pointer */
[data-slider].is-slider img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Pagination dots */
[data-slider].is-slider .slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-block-start: var(--space-lg);
}

.slider__dot {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;            /* comfortable touch target… */
  block-size: 1.75rem;
  border-radius: 50%;
}

.slider__dot::before {
  content: "";
  inline-size: 0.5rem;             /* …around a small visual dot */
  block-size: 0.5rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
  transition: inline-size var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.slider__dot[aria-current="true"]::before {
  inline-size: 1.375rem;
  background-color: var(--c-teal);
}

.on-dark .slider__dot::before {
  background-color: rgba(255, 255, 255, 0.3);
}