/* Gallery shortcode: square thumbnails, two per row on wide screens, and the lightbox. */

.gallery {
  container-type: inline-size;
  margin-block: var(--spacing-l);
}

.gallery__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (width >= 40rem) {
  .gallery__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gallery__item,
.gallery__figure {
  margin: 0;
}

.gallery__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-m);
  cursor: zoom-in;

  img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  &:focus-visible {
    outline: 3px solid var(--color-link);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery__link img {
    transition: scale 0.2s;
  }

  .gallery__link:hover img {
    scale: 1.03;
  }
}

.gallery__credit {
  margin-block-start: 0.25rem;
  font-family: var(--ff-alt);
  font-size: var(--fs-xs);
  color: var(--color-text-meta);
}

/* Lightbox */

/* No scrolling of the page behind it. */
html:has(.lightbox[open]) {
  overflow: hidden;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: rgb(0 0 0 / 0.92);
  color: #fff;

  &[open] {
    display: grid;
    place-items: center;
  }

  &::backdrop {
    background: rgb(0 0 0 / 0.6);
  }
}

/* On wider screens, the arrows sit beside the image instead of on it. */
@media (min-width: 40rem) {
  .lightbox {
    padding-inline: 5rem;
  }
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox__image {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: 50rem;
  font-family: var(--ff-alt);
  font-size: var(--fs-s);
  text-align: center;
}

.lightbox__credit,
.lightbox__counter {
  color: rgb(255 255 255 / 0.75);
}

.lightbox__counter {
  font-variant-numeric: tabular-nums;
}

.lightbox__button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;

  &:hover {
    background: rgb(255 255 255 / 0.3);
  }

  &:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }
}

.lightbox__close {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.lightbox__previous,
.lightbox__next {
  inset-block-start: calc(50% - 1.5rem);
}

.lightbox__previous {
  inset-inline-start: 1rem;
}

.lightbox__next {
  inset-inline-end: 1rem;
}