/* ============================================================
   GALLERY — a row of slides that scrolls sideways (site/src/components/Gallery.astro).
   Out of its range (upTo) it steps aside: the gallery and its track are display: contents, the slides are the
   parent's children. In range: one row, snapping per slide, no scrollbar; perView slides in view (the next one
   shows by --g-peek, the peek prop); bleed runs the row to the window's edges (the first slide stays on the content's edge; the window cuts the row, not
   the container); rows lines up the same parts of every slide (subgrid); --g-max (the max prop) caps a slide's
   width, so on a wider phone more of the next slide shows instead of the slide growing;
   under the row a bar per slide, the open one filled (--p, 0–1, set by the script while `auto` counts).
   frame: a box that stays put around the row (its classes from the frame prop); the slides move inside it.
   --g-inset: the row's own side padding (a slide's neighbours peek in by it); 0 by default.
   The in-range body is the same for the three ranges, written once per range (no custom media in CSS yet).
   Requires: tokens.css
   ============================================================ */

.gallery, .gallery__frame, .gallery__track { display: contents; }
.gallery__dots { display: none; }

/* the bars under the row: each a button 44 tall (a finger's tap target, 48 − 4), the bar drawn in its middle — the track in the text
   colour at 15 %, so one rule reads on light and dark, the fill in the text colour */
.gallery__dot {
  flex: 1;
  height: calc(var(--space-lg) - var(--space-xxs));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.gallery__dot::before,
.gallery__dot::after {
  content: '';
  position: absolute;
  inset: calc(50% - var(--space-xxs) / 2) 0;
  border-radius: var(--radius-pill);
}
.gallery__dot::before { background: color-mix(in srgb, currentColor 15%, transparent); }
.gallery__dot::after { background: currentColor; transform: scaleX(0); transform-origin: left; }
.gallery__dot.is-active::after { transform: scaleX(var(--p, 1)); }
.gallery__dot:focus-visible { outline: var(--border-thin) solid currentColor; outline-offset: var(--border-thin); border-radius: var(--radius-xs); }
.gallery__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

/* always */
.gallery.gallery--all { --g-inset: 0rem; display: block; min-width: 0; grid-column: 1 / -1; } /* in a grid parent: the row takes its whole width */
.gallery.gallery--all.gallery--bleed .gallery__track { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* its snap padding is set by the script */
.gallery.gallery--all .gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(calc((100% - (var(--g-view) - 1) * var(--grid-gap) - var(--g-peek, 0rem)) / var(--g-view)), var(--g-max, 100%));
  column-gap: var(--grid-gap);
  padding-inline: var(--g-inset);
  scroll-padding-inline: var(--g-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery.gallery--all .gallery__track::-webkit-scrollbar { display: none; }
.gallery.gallery--all .gallery__track > * { grid-column: auto; min-width: 0; scroll-snap-align: start; } /* a slide's own col-* is for the grid out of range */
.gallery.gallery--all.gallery--center .gallery__track > * { scroll-snap-align: center; }
.gallery.gallery--all.gallery--rows .gallery__track { grid-template-rows: repeat(var(--g-rows), auto); }
.gallery.gallery--all.gallery--rows .gallery__track > * { grid-row: span var(--g-rows); display: grid; grid-template-rows: subgrid; }
.gallery.gallery--all > .gallery__frame { display: block; }
.gallery.gallery--all > .gallery__dots { display: flex; gap: var(--space-xxs); padding: 0 var(--g-inset); }

/* up to 991 */
@media (max-width: 61.9375rem) {
  .gallery.gallery--tablet { --g-inset: 0rem; display: block; min-width: 0; grid-column: 1 / -1; } /* in a grid parent: the row takes its whole width */
  .gallery.gallery--tablet.gallery--bleed .gallery__track { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* its snap padding is set by the script */
  .gallery.gallery--tablet .gallery__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(calc((100% - (var(--g-view) - 1) * var(--grid-gap) - var(--g-peek, 0rem)) / var(--g-view)), var(--g-max, 100%));
    column-gap: var(--grid-gap);
    padding-inline: var(--g-inset);
    scroll-padding-inline: var(--g-inset);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gallery.gallery--tablet .gallery__track::-webkit-scrollbar { display: none; }
  .gallery.gallery--tablet .gallery__track > * { grid-column: auto; min-width: 0; scroll-snap-align: start; } /* a slide's own col-* is for the grid out of range */
  .gallery.gallery--tablet.gallery--center .gallery__track > * { scroll-snap-align: center; }
  .gallery.gallery--tablet.gallery--rows .gallery__track { grid-template-rows: repeat(var(--g-rows), auto); }
  .gallery.gallery--tablet.gallery--rows .gallery__track > * { grid-row: span var(--g-rows); display: grid; grid-template-rows: subgrid; }
  .gallery.gallery--tablet > .gallery__frame { display: block; }
  .gallery.gallery--tablet > .gallery__dots { display: flex; gap: var(--space-xxs); padding: 0 var(--g-inset); }
}

/* up to 767 */
@media (max-width: 47.9375rem) {
  .gallery.gallery--phone { --g-inset: 0rem; display: block; min-width: 0; grid-column: 1 / -1; } /* in a grid parent: the row takes its whole width */
  .gallery.gallery--phone.gallery--bleed .gallery__track { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* its snap padding is set by the script */
  .gallery.gallery--phone .gallery__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(calc((100% - (var(--g-view) - 1) * var(--grid-gap) - var(--g-peek, 0rem)) / var(--g-view)), var(--g-max, 100%));
    column-gap: var(--grid-gap);
    padding-inline: var(--g-inset);
    scroll-padding-inline: var(--g-inset);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gallery.gallery--phone .gallery__track::-webkit-scrollbar { display: none; }
  .gallery.gallery--phone .gallery__track > * { grid-column: auto; min-width: 0; scroll-snap-align: start; } /* a slide's own col-* is for the grid out of range */
  .gallery.gallery--phone.gallery--center .gallery__track > * { scroll-snap-align: center; }
  .gallery.gallery--phone.gallery--rows .gallery__track { grid-template-rows: repeat(var(--g-rows), auto); }
  .gallery.gallery--phone.gallery--rows .gallery__track > * { grid-row: span var(--g-rows); display: grid; grid-template-rows: subgrid; }
  .gallery.gallery--phone > .gallery__frame { display: block; }
  .gallery.gallery--phone > .gallery__dots { display: flex; gap: var(--space-xxs); padding: 0 var(--g-inset); }
}

/* the row fits: nothing to move between, no bars (after the ranges, so it wins over their display: flex) */
.gallery.is-static > .gallery__dots.gallery__dots { display: none; }