/*
  Gallery — a responsive thumbnail grid (.gallery__grid) whose tiles open a
  lightbox <dialog> (.gallery__dialog) with prev/next controls and a counter.
  Open/close, image swapping and keyboard nav live in assets/js/gallery.js; every
  handler is scoped to the [data-gallery] root so galleries don't cross-talk.
*/

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  margin: 0;
}

.gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  overflow: clip;
  cursor: pointer;
}

.gallery__thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery__thumb:hover .gallery__thumb-img,
.gallery__thumb:focus-visible .gallery__thumb-img {
  transform: scale(1.05);
}

/* ---- Lightbox dialog ----
   The dialog shell, backdrop and close button are the shared .modal /
   .modal__close (components/modal.css). Only the image + prev/next controls
   below are gallery-specific. The prev/next buttons anchor to the dialog (a
   modal dialog is itself positioned). */
.gallery__stage {
  display: flex;
  flex-direction: column;              /* image, then caption beneath it */
  align-items: center;
  justify-content: center;
  margin: 0;
  /* Image + caption together stay clear of the controls row below (~4rem); the
     image shrinks (below) so a caption never pushes the controls off-screen. */
  max-height: calc(100vh - 2 * var(--distance-to-edge) - 4rem);
}

/* The image's caption (Bijschrift), in normal flow below the image. The dialog
   is transparent over a dark backdrop, so the text stays white. JS
   (assets/js/gallery.js) fills it and hides the block when the caption is empty. */
.gallery__caption {
  flex: none;
  margin-block-start: var(--space-s);
  color: var(--color-white);
  text-align: center;
  font-size: var(--text-small);
}

.gallery__image {
  display: block;
  /* Span the full modal width (capped at --container-max by .modal); taller
     images shrink within the stage and letterbox via object-fit. */
  width: 100%;
  min-block-size: 0;                   /* allow shrinking inside the flex column */
  border-radius: var(--radius);
  object-fit: contain;
}

/* ---- Controls: prev · counter · next ----
   Default (and narrow screens, where the gutters are too tight for the buttons):
   a single row below the image with the counter centred between the buttons. */
.gallery__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-start: var(--space-2xs);
}

/* Prev/next: white circles with dark-green glyphs. */
.gallery__nav {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-green-dark);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.gallery__nav svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.gallery__counter {
  margin: 0;
  color: var(--color-white);
  font-size: var(--text-small);
}

/* Wide screens: the centred modal (capped at --container-max) leaves room in the
   side gutters, so lift the buttons out beside the image — vertically centred on
   the modal, just outside its left/right edges — and centre the counter alone
   under the image. The breakpoint keeps a 3rem button + gap clear of the viewport
   edge (gutter ≈ (100vw − 75rem)/2). */
@media (min-width: 84rem) {
  .gallery__controls {
    justify-content: center;
  }

  .gallery__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .gallery__nav--prev {
    inset-inline-end: 100%;             /* sit just left of the image */
    margin-inline-end: var(--space-s);
  }

  .gallery__nav--next {
    inset-inline-start: 100%;           /* sit just right of the image */
    margin-inline-start: var(--space-s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__thumb-img {
    transition: none;
  }
}