/* fx.css · layout/drag-gallery, a wide wall of photographs you drag sideways · owner: Lizzy East · all rights reserved */

/* A real horizontal scroller first: its scrollbar shows, a trackpad or a finger scrolls
   it, and once it has focus the arrow keys do too. fx.js adds dragging for a mouse.
   Every photograph keeps its own shape at one height, so the wall reads as a wall. */
[data-fx~="layout/drag-gallery"] { min-width: 0; max-width: 100%; }
[data-fx~="layout/drag-gallery"] [data-fx-scroller] {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--fx-drag-thumb, currentColor) transparent;
  padding-block: 0.25rem 1rem;
}
[data-fx~="layout/drag-gallery"] [data-fx-scroller]:focus-visible {
  outline: 3px solid var(--fx-drag-focus, currentColor);
  outline-offset: -3px;
}
[data-fx~="layout/drag-gallery"] [data-fx-track] {
  display: flex;
  gap: var(--fx-drag-gap, clamp(0.75rem, 1.6vw, 1.25rem));
  width: max-content;
  margin: 0;
  padding: 0 var(--fx-drag-gutter, clamp(1rem, 4vw, 3rem));
  list-style: none;
}
[data-fx~="layout/drag-gallery"] [data-fx-track] > * { flex: none; }
[data-fx~="layout/drag-gallery"] figure { display: grid; gap: 0.6rem; width: min-content; margin: 0; }
[data-fx~="layout/drag-gallery"] [data-fx-track] img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--fx-drag-height, clamp(15rem, 34vw, 26rem));
  border-radius: 2px;
  -webkit-user-drag: none;
}
[data-fx~="layout/drag-gallery"] figcaption { font-size: 0.85rem; line-height: 1.3; letter-spacing: 0.02em; }

/* The mouse: a grab hand (the system's own, never a picture) once dragging is wired. */
@media (hover: hover) and (pointer: fine) {
  [data-fx~="layout/drag-gallery"] [data-fx-scroller][data-fx-grab] { cursor: grab; }
  [data-fx~="layout/drag-gallery"] [data-fx-scroller][data-fx-dragging] { cursor: grabbing; user-select: none; }
}