/* =========================================================================
   Swipe lists (card carousels) — mobile only.
   Spec: the mobile navigation board 618:6562, "SPEC · SWIPE LISTS".

   A row carrying `.jm-swipe` keeps its desktop layout untouched (every rule
   here lives inside the sub-48rem media query) and becomes a horizontal
   scroll-snap track below it: full-bleed (the negative gutter margin pulls it
   out of the container, its own padding restores the 24px grid), 290 cards
   with a 16 gap so the next card peeks ~60 at 390, equal heights from flex
   stretch, momentum scrolling, no visible scrollbar.

   Scoped under #brx-content because Bricks writes each row's _display as an
   unlayered `#brxe-…` ID rule — the same specificity war the readmore clamp
   hit. The ID scope out-specifies it without !important.

   Dots are injected by swipe.js (indicators, not controls — aria-hidden, and
   without JavaScript the track still swipes, it just has no dots). Colour
   follows the ground: Purple 500 on light sections (default), Stone 100 on
   dark (`.jm-swipe--dark` on the track, copied onto the dots by the script).
   ========================================================================= */

.jm-swipe__dots { display: none; }

@media (max-width: 47.99rem) {
  #brx-content .jm-swipe {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    /* Never centre a scroller: centred overflow spills both ways and the left
       half becomes unreachable (the stat row carries justify-content: center
       for its desktop column). */
    justify-content: flex-start;
    gap: 1rem;                              /* 16 */
    /* Explicit width, never auto: Bricks blocks lay children out at
       align-items: flex-start (trap 2), and a nowrap flex row with auto width
       under flex-start sizes to MAX-CONTENT — the capability track rendered
       1479px wide and dragged the whole page sideways with it. Parent width
       plus the two bled gutters is the full-bleed box, always. */
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #brx-content .jm-swipe::-webkit-scrollbar { display: none; }

  #brx-content .jm-swipe > * {
    flex: 0 0 18.125rem;                    /* 290 */
    width: 18.125rem;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }

  .jm-swipe__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;                            /* 8 */
    width: 100%;
  }
}

/* The dot atoms live OUTSIDE the mobile query: the desktop overset slider
   shows the same dots, and scoping these to sub-48rem left its dots as
   unstyled empty spans (found 2026-08-31). Where no rule displays the dots
   row, these are inert.

   Buttons since 2026-08-31 (Phil: dots are clickable): the button is a
   24px target, the drawn 8px dot is its ::before, so the tap area grows
   without changing the drawn size. */
.jm-swipe__dot {
  display: grid;
  place-items: center;
  width: 1.5rem;                            /* 24 — the target */
  height: 1.5rem;
  /* Pull the targets back over the row gap so the DRAWN dots sit at the
     original 16px centres (Phil: the wide spacing read wrong). The 24px
     targets overlap a little; the drawn 8px dots do not. */
  margin-inline: -0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.jm-swipe__dot::before {
  content: '';
  width: 0.5rem;                            /* 8 — the drawn dot */
  height: 0.5rem;
  border-radius: 50%;
  background: var(--purple-500);
  opacity: 0.3;
  transition: opacity var(--motion-fast) var(--motion-ease-out);
}
.jm-swipe__dot:hover::before { opacity: 0.6; }
.jm-swipe__dot.is-active::before { opacity: 1; }
.jm-swipe__dot:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
  border-radius: 50%;
}

.jm-swipe__dots--dark .jm-swipe__dot::before { background: var(--stone-100); }
.jm-swipe__dots--dark .jm-swipe__dot:focus-visible { outline-color: var(--gold-500); }

/* The spec keeps the snap under prefers-reduced-motion and drops only smooth
   scrolling. Nothing here sets scroll-behavior, so this is a guard against a
   future rule, not a fix. */
@media (prefers-reduced-motion: reduce) {
  .jm-swipe { scroll-behavior: auto; }
}

/* Desktop overset slider (cards.css): its dots show at every width, centred
   under the track (Phil, 2026-08-31). Pages, not cards — swipe.js counts. */
@media (min-width: 48rem) {
  .jm-post-grid--overset + .jm-swipe__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.75rem;
  }
}

/* A single-page track hides its dots; last so it beats the display rules
   above at equal specificity. */
.jm-swipe__dots[hidden] { display: none; }