/* Section "gallery": a label, the heading with counter and arrows beside it, and a row of large
   photos to swipe through (carousel.js). The row starts at the container's left edge and
   runs out of the screen on the right, so the cut-off photo shows there is more. */

.gallery {
  /* the row's width units (cqw) refer to the section */
  container-type: inline-size;
  /* left edge of the container's content, on any screen width (the row lines up with it) */
  --gallery-inset: max(var(--gutter), (100cqw - var(--container)) / 2 + var(--gutter));
  padding-block: var(--section-gap-s) 0;
}
.gallery__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.gallery__titles { min-width: 0; }
/* the optional small label above the heading: plain ochre text, like the site's other labels */
.gallery__label { margin: 0 0 var(--space-sm); color: var(--color-ochre); }
/* a little wider than other section heads, so the longer title still fits two lines */
.gallery__head { margin-bottom: 0; max-width: 22ch; }

/* counter and round arrow buttons, at the right of the heading */
.gallery__controls { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.gallery__controls[hidden] { display: none; }
.gallery__count { margin: 0 var(--space-xs) 0 0; color: var(--color-muted); font-size: var(--type-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gallery__btn {
  display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); padding: 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-paper-3); color: var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.gallery__btn svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__btn:hover:not([aria-disabled="true"]) { background: var(--color-accent); color: var(--color-accent-ink); }
.gallery__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* at the first or last photo the arrow that leads nowhere fades back */
.gallery__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* The row. With JavaScript, carousel.js runs the Swiper library on it (swiper.css, dragging and
   snapping in JS, spacing and the left/right inset passed in from --gallery-gap and --gallery-inset).
   Without JavaScript it is a plain list that scrolls sideways with snapping. */
.gallery__viewport { --gallery-gap: var(--space-md); }
.gallery__viewport:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.gallery__viewport:not(.swiper-initialized) { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gallery-inset); scrollbar-width: thin; }
.gallery__viewport:not(.swiper-initialized) .gallery__track { gap: var(--gallery-gap); width: max-content; padding-inline: var(--gallery-inset); }
.gallery__viewport.swiper-initialized { cursor: grab; }
.gallery__viewport.swiper-initialized:active { cursor: grabbing; }
.gallery__track { list-style: none; margin: 0; padding: 0; }
/* slide width from the section's width (cqw), so both modes size them alike */
.gallery__slide { width: calc((100cqw - 2 * var(--gallery-inset)) * 0.44); flex-shrink: 0; scroll-snap-align: start; }
.gallery__slide img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-card); background: var(--color-paper-2);
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@media (max-width: 64rem) { .gallery__slide { width: calc((100cqw - 2 * var(--gallery-inset)) * 0.7); } }
@media (max-width: 36rem) {
  .gallery__slide { width: calc((100cqw - 2 * var(--gallery-inset)) * 0.88); }
  .gallery__viewport { --gallery-gap: var(--space-xs); }
  /* phones: heading centred like the other stacked sections; swiping replaces the arrows,
     only the counter stays */
  .gallery__top { flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); margin-bottom: var(--space-xl); }
  .gallery__btn { display: none; }
}