/* ─────────────────────────────────────────
   COMPONENT — SLIDER (tablet + phone only)
   A full-width, swipeable, snap-scrolling row of slides with green page
   dots underneath. Used by The Plan (days) and the Dress code (her / him).
   Markup: a container with .slider-track whose direct children are the
   slides, plus an optional .slider-dots row of .slider-dot spans.
   The chips that drive it are the pill tabs (components/tabs.css) and the
   behaviour lives in js/script.js → initSlider().
   On desktop (≥1025px) none of this applies — each section keeps its own
   grid layout.
───────────────────────────────────────── */

.slider-dots {
  display: none;
}

@media (max-width: 1024px) {
  .section {
    --slider-gutter: 32px;   /* = .container side padding at this size */
  }

  /* ".section" prefix = beats the sections' own desktop grid rules */
  .section .slider-track {
    display: flex;
    gap: var(--slider-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so slides glide in from the very edge */
    margin-left: calc(var(--slider-gutter) * -1);
    margin-right: calc(var(--slider-gutter) * -1);
    padding: 0 var(--slider-gutter);
    scroll-padding: 0 var(--slider-gutter);
  }

  .section .slider-track::-webkit-scrollbar {
    display: none;
  }

  .section .slider-track > * {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* one slide per swipe, never skip one */
  }

  /* green page dots — the active slide's dot is solid and stretches
     into a short pill, the others are soft green */
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
  }

  .slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--clay-500);
    opacity: 0.5;
    transition: width 300ms var(--ease), opacity 300ms var(--ease), background 300ms var(--ease);
  }

  .slider-dot.is-active {
    width: 22px;
    background: var(--inverse);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .section {
    --slider-gutter: 20px;
  }
}