/* ============================================================================
   photo-gallery.css — reusable photo grid + click-to-enlarge lightbox
   ----------------------------------------------------------------------------
   Include on any page via {% include 'partials/photo-gallery.html' with
   kicker=... heading=... images=... %} - see that file for the params. Also
   load photo-gallery.js on the page. Uses tokens from base.css and .kicker
   from index.css (load index.css first if it isn't already on the page).
   ========================================================================== */

.photo-gallery {
  padding: 40px 20px;
  border-bottom: 1px solid var(--color-line);
}

.photo-gallery h2 {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--color-ink);
}

.photo-gallery-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-line-soft);
  border: 1px solid var(--color-line-soft);
}

.photo-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-ink);
  padding: 0;
  border: 0;
  cursor: pointer;
  position: relative;
}

.photo-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  opacity: 0;
  transition: opacity .15s;
}

.photo-gallery-item:hover::after,
.photo-gallery-item:focus-visible::after {
  opacity: .15;
}

.photo-gallery-item:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.photo-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 1024px) {
  .photo-gallery {
    padding-left: 60px;
    padding-right: 60px;
  }

  .photo-gallery h2 {
    font-size: 44px;
  }

  .photo-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Lightbox ------------------------------------------------------- */

.lightbox {
  /* no position set here - a modally-shown <dialog> already gets
     position:fixed from the browser's own UA stylesheet, which is what
     keeps it centered over the viewport regardless of scroll position,
     and already gives .lightbox-close's position:absolute (below) a valid
     box to anchor to. Setting position:relative here (an earlier attempt
     at fixing the close-button anchoring, which never actually needed it)
     overrode that fixed positioning, so the dialog rendered at its normal
     in-flow position on the page instead of centered on screen - and the
     browser then scrolled the whole page to bring it into view whenever
     it was opened. That was the scroll-jump bug. */
  padding: 0;
  border: 0;
  background: transparent;
  /* no width/height set - the dialog sizes itself to fit .lightbox-img,
     which is what actually caps the size (max-width/max-height below).
     Giving the <dialog> its own width:100%/height:100% was a different
     bug: with nothing constraining the dialog box itself, the browser
     fell back to the image's full natural pixel size and then
     scrollbar'd the overflow instead of shrinking it. */
  max-width: 92vw;
  max-height: 88vh;
}

.lightbox::backdrop {
  background: color-mix(in srgb, var(--color-ink) 88%, transparent);
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
}

.lightbox-close {
  /* inside the image's own box, not hanging off the dialog's edge - a
     button positioned outside the dialog can end up partially above the
     viewport's top edge and get clipped there, since the dialog itself is
     already vertically centered as close to the top as its height allows. */
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 17, 14, .65);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: var(--color-red);
}