/*
 * sd-scroller — horizontal card row (Session 2.3; Home Knowledge section, Blueprint 5.27)
 * Native horizontal scroll with snap points; never hijacks vertical scrolling (Blueprint 5.24, 8.21).
 * The list is a real <ul>; every card is reachable with Tab; optional previous/next buttons scroll by one card
 * (shared/components.js) and are hidden without JS. The row has a label (aria-label on the region).
 */

.sd-scroller { display: grid; gap: var(--sd-space-4); }

.sd-scroller__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 80%);
  gap: var(--sd-grid-gutter);
  margin: 0;
  padding: var(--sd-space-1) var(--sd-space-1) var(--sd-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sd-space-1);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--sd-color-blue-700) var(--sd-color-blue-050);
}

@media (min-width: 640px) { .sd-scroller__track { grid-auto-columns: minmax(18rem, 45%); } }
@media (min-width: 1024px) { .sd-scroller__track { grid-auto-columns: calc((100% - 2 * var(--sd-grid-gutter)) / 3.25); } }

.sd-scroller__track > li { scroll-snap-align: start; }

.sd-scroller__controls {
  display: none;
  gap: var(--sd-space-2);
  justify-content: flex-end;
}

.sd-scroller[data-ready="true"] .sd-scroller__controls { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .sd-scroller__track { scroll-behavior: smooth; }
}

/* Mouse drag (F-10, Session 5.2): grab cursor; while dragging, no snapping or smooth scrolling and no text selection */
@media (hover: hover) and (pointer: fine) {
  .sd-scroller[data-ready="true"] .sd-scroller__track { cursor: grab; }
}

.sd-scroller__track[data-dragging="true"] {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}