/* Alder: drag carousels, site-wide.
   Any element marked [data-al-rail] is one row that scrolls sideways:
   native touch and wheel scroll, snap per card, mouse drag from alder.js
   (snap is lifted while dragging; the click a drag ends on is swallowed).
   Linked from the shell head after alder-cards.css, so every Alder page has
   it; page sheets (alder-profile.css, alder-partners.css) size the cards.

   Arrows: give the rail an id and put the snap-row arrows beside it
   (.al-rownav[data-al-row-nav="<id>"] with two .al-round buttons, styled in
   alder.css). data-al-step="frame" makes each press move one frame (the
   rail's clientWidth). .al-rownav--wide keeps them off phones, where swipe
   is the gesture.

   Note: .al-rail alone also names the profile's sticky details sidebar
   (alder-profile.css), so the scroller rules key on the attribute. The
   body.al-theme prefix outranks the grid display of .al-postgrid and
   .al-pages (alder-pages.css, linked later). */

[data-al-rail] { gap: 16px; } /* low specificity: a card grid's own gap (.al-postgrid) still wins */
body.al-theme [data-al-rail] {
  display: flex; flex-wrap: nowrap; align-items: stretch; min-width: 0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
}
body.al-theme [data-al-rail]::-webkit-scrollbar { display: none; }
body.al-theme [data-al-rail] > * { flex: none; scroll-snap-align: start; }
/* Mandatory snap would re-snap every drag step. */
body.al-theme [data-al-rail].is-drag { cursor: grabbing; scroll-snap-type: none; }
body.al-theme [data-al-rail].is-drag > * { pointer-events: none; }

/* Bleed: on a phone the row runs to the screen edges, so the card cut off
   at the right says "more"; from 921px it sits inside the frame. */
body.al-theme .al-rail--bleed {
  margin-inline: calc(var(--al-gutter) * -1); padding-inline: var(--al-gutter); scroll-padding-inline: var(--al-gutter);
}
@media (min-width: 921px) {
  body.al-theme .al-rail--bleed { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

@media (max-width: 639.98px) { .al-rownav--wide.is-on { display: none; } }