/* ==============================================================================
   GALLERY BLOCK

   A grid of square thumbnails, each a link to its own file, and the
   lightbox static/js/lightbox.js opens over them. The thumbnails are
   cropped to squares because most of a project's images are square
   renders and drawing panels; the lightbox always shows the whole image.
   ============================================================================== */

.block-gallery > h2 {
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-xl);
}

/* Two columns on a phone, four in the 72rem content column: the minimum
   grows with the viewport between 9rem and 16rem, so the count changes
   with the room available rather than at fixed breakpoints. */
.gallery__grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 22vw, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  min-width: 0;
}

.gallery__link {
  display: block;
  overflow: hidden;
  background: var(--paper-secondary-bg);
  cursor: zoom-in;
}

.gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 180ms ease-out;
}

.gallery__link:hover .gallery__image {
  opacity: 0.86;
}

.gallery__link:focus-visible {
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Lightbox. A <dialog> opened with showModal(): it covers the screen, the
   rest of the page is inert under it and Escape closes it, all from the
   browser. The ground is always dark, in the light theme too, because a
   photograph reads best on a dark ground; so the colours are local
   values here instead of the theme's tokens, which would turn it paper
   in the light theme. They are the estudio skin's own dark page, text
   and muted grey (doc/07), measured at 14.9:1 and 7.3:1 against it.
   -------------------------------------------------------------------------- */
.lightbox {
  --lightbox-bg: #171716;
  --lightbox-text: #eceae4;
  --lightbox-muted: #aba59b;
  --lightbox-button-hover: rgba(236, 234, 228, 0.12);
  /* The theme's focus ring is the light theme's dark añil, which a dark
     ground would hide (2.2:1); the dark theme's añil clears 9:1 here. */
  --focus-ring: #a9b6f0;

  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  /* Never a scroll container: Chrome makes one that overflows by a pixel
     a tab stop of its own, an empty stop between the buttons. */
  overflow: hidden;
  background: var(--lightbox-bg);
  color: var(--lightbox-text);
}

.lightbox::backdrop {
  background: var(--lightbox-bg);
}

/* The page under an open lightbox does not scroll with the wheel or the
   finger; it is inert anyway, and its scroll position is kept. */
html:has(.lightbox[open]) {
  overflow: hidden;
}

/* The image takes all the height the caption leaves, and the side
   padding is the room the previous and next buttons stand in. */
.lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  height: 100%;
  margin: 0;
  padding: calc(44px + var(--spacing-md)) calc(44px + var(--spacing-lg)) var(--spacing-lg);
}

/* The image fills the stage, whatever its own size, and object-fit fits
   the whole photo inside that box. Sizing the <img> by max-height: 100%
   instead left a square photo running off the bottom of a wide screen,
   because the percentage had no definite height to resolve against. */
.lightbox__stage {
  position: relative;
  min-height: 0;
}

.lightbox__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs) var(--spacing-md);
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--font-size-sm);
  text-align: center;
}

.lightbox__count {
  color: var(--lightbox-muted);
  font-variant-numeric: tabular-nums;
}

/* Square, unrounded 44px buttons, like the showcase's controls. */
.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--lightbox-text);
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__button:hover {
  background: var(--lightbox-button-hover);
}

.lightbox__button[hidden] {
  display: none;
}

.lightbox__close {
  inset-block-start: var(--spacing-sm);
  inset-inline-end: var(--spacing-sm);
}

.lightbox__prev,
.lightbox__next {
  inset-block-start: calc(50% - 22px);
}

.lightbox__prev {
  inset-inline-start: var(--spacing-sm);
}

.lightbox__next {
  inset-inline-end: var(--spacing-sm);
}

/* On a phone the image takes the whole width, and the two step buttons
   go down to the corners beside the caption, under the thumb. */
@media (max-width: 47.99em) {
  .lightbox__figure {
    padding: calc(44px + var(--spacing-sm)) var(--spacing-sm) calc(44px + var(--spacing-md));
  }

  .lightbox__prev,
  .lightbox__next {
    inset-block-start: auto;
    inset-block-end: var(--spacing-sm);
  }
}