/* Gallery page — real justified-row mosaic, computed in JS (see the
   inline script): photos are packed into rows so each row's items sum to
   exactly the container width, with the row's HEIGHT solved for per row
   (not fixed) so it fits. That's what gives visual variety even when a
   whole batch of photos shares one aspect ratio (which Jason's initial
   22 photos do — same camera, same 3:2 landscape crop) — a fixed-height
   flex-grow-only approach has nothing to vary in that case, since every
   tile ends up the same width too. Varying row height solves both: more
   items fit in a row at a shorter height, fewer/wider ones need a taller
   row, and it still can't leave a gap because each row is solved to
   exactly fill the width by construction. */

html {
  scroll-behavior: smooth;
}

/* If the last category section is short (few photos, e.g. Aerial with
   just 2), there isn't enough page height below it for the browser to
   scroll that far -- it hits the bottom of the document before the
   section's top can clear the fixed nav, landing short and exposing a
   sliver of the previous section, same symptom as the scroll-margin fix
   above but caused by running out of page rather than overshooting. A
   flat padding-bottom large enough to always prevent that would leave a
   very visible empty gap before the footer on ordinary short viewports,
   so this is measured and set in JS instead (see ensureScrollHeadroom in
   the inline script) -- exactly as much as the current viewport needs,
   nothing on viewports that don't. This is just a floor for that.
   */
#gallerySections {
  padding-bottom: 2rem;
}

.gallery-intro {
  padding: 6rem 6vw 1.5rem;
  text-align: center;
}

.gallery-intro .eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.6rem;
}

.gallery-note {
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: 0;
}

.category-jumpnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0 6vw 2rem;
}

.category-jumpnav a {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid rgba(245, 243, 238, 0.2);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.category-jumpnav a:hover,
.category-jumpnav a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* .site-nav is position: fixed (100px tall on desktop), so it sits on top
   of the page rather than pushing content down -- a plain anchor jump
   scrolls the section right underneath it with no clearance. This offset
   must not exceed the nav's real height (checked via
   getBoundingClientRect): overshooting it opens a gap between the nav's
   bottom edge and the section's top edge that shows whatever was scrolled
   into it -- in practice, a sliver of the *previous* section's last photo
   row, since sections sit flush against each other. Landing the section's
   top at or just behind the nav instead keeps that gap solid black; the
   actual breathing room below the nav comes from category-head's own
   padding, which is guaranteed to be blank. */
.category-section {
  scroll-margin-top: 6rem;
}

.category-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.85rem;
  padding: 3rem 6vw 0.4rem;
  text-align: center;
}

.category-section:first-of-type .category-head {
  padding-top: 1.25rem;
}

.category-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.9rem;
  margin: 0;
}

.category-count {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mosaic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 1.5rem 8px 8px;
  max-width: 2200px;
  margin: 0 auto;
}

.mosaic-row {
  display: flex;
  gap: 8px;
}

.tile {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: #10151a;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: saturate(0.94);
}

.tile:hover img,
.tile:focus-visible img {
  transform: scale(1.045);
  filter: saturate(1.05);
}

.tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

@media (max-width: 700px) {
  .mosaic {
    gap: 4px;
    padding: 1rem 4px 4px;
  }
  .mosaic-row {
    gap: 4px;
  }
  /* .site-nav is shorter on mobile (~69px vs ~100px) -- match that here,
     same must-not-overshoot reasoning as the desktop rule above. */
  .category-section {
    scroll-margin-top: 4rem;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 10, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lb-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lb-close,
.lb-nav {
  position: fixed;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.lb-close:hover,
.lb-nav:hover {
  opacity: 1;
}

.lb-close {
  top: 1.5rem;
  right: 1.8rem;
  font-size: 2.2rem;
  line-height: 1;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  line-height: 1;
  padding: 0 0.8rem;
}

.lb-prev {
  left: 0.5rem;
}

.lb-next {
  right: 0.5rem;
}

@media (max-width: 700px) {
  .lb-close {
    top: 1rem;
    right: 1rem;
    font-size: 1.8rem;
  }
  .lb-nav {
    font-size: 2.2rem;
  }
}