/* ==========================================================================
   Static portfolio gallery grid (Editorial/Portrait/Commercial/Beauty, plus
   Movies stills and the private Client Gallery portal, which all share this
   exact file), plus the shared lightbox (see js/lightbox.js) every gallery
   page opens photos in.

   Round-robin columns, built by js/gallery.js: photo at manifest index i
   is assigned to column (i mod columnCount) -- a fixed rule based purely
   on position, decided once at build time, never revisited based on
   rendered height. Each .gallery-column is an independent flex column
   that just stacks its assigned cells back-to-back with no shared row
   height across columns -- no dead space within a column, at the cost of
   columns ending at different final heights at the very bottom of the
   grid (round-robin doesn't try to balance total column height the way
   the old shortest-column-first masonry did).

   This is the third placement approach this file has used, each fixing a
   real problem the previous one had:
     1. CSS multi-column (column-count) -- column-fill: balance breaks
        columns by cumulative height, not item count, which could put a
        later photo visibly ahead of an earlier one once photos had mixed
        aspect ratios.
     2. CSS Grid (grid-template-columns) -- fixed #1's ordering bug (row-
        major placement always matches manifest order), but every row is
        exactly as tall as its tallest photo, leaving visible gaps under
        shorter photos sharing a row with a taller one.
     3. Round-robin flex columns (this version) -- keeps #2's exact,
        predictable order (column assignment is a pure function of index,
        not runtime height) while removing #2's mid-grid gaps, by letting
        each column size independently instead of sharing row height.
   Nothing here is ever cropped either: each <img> is width: 100%;
   height: auto.
   ========================================================================== */

.gallery-section {
  padding: 48px 0 96px; /* .page-header already separates this from the nav, so skip the generic .section 120px */
}

.gallery-grid {
  display: flex;
  gap: 16px; /* horizontal gap between columns -- ~15.75-15.8px measured
                live on lindsayadlerphotography.com's editorial/beauty
                grids, a clean 16px/1rem value */
  align-items: flex-start; /* columns end at different heights independently -- nothing stretches to match a taller neighbor */
  width: 100%;
}

.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 16px; /* vertical gap between cells within a column */
  flex: 1 1 0;
  min-width: 0; /* flex children default to min-width:auto, which can
                    prevent a column from shrinking below its widest image
                    -- 0 lets the column (and the image inside, both
                    width: 100%) actually respect the column's share of
                    the row */
}

.gallery-cell {
  display: block;
  cursor: pointer;
}

.gallery-cell img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.gallery-cell:hover img {
  opacity: 0.85;
}

@media (max-width: 640px) {
  /* Column COUNT doesn't change again here (still 2, set by js/gallery.js
     at the same <=1024px breakpoint used everywhere else in this file) --
     intentionally NOT dropping to 1 column, same "narrower cells, not
     fewer columns" approach as the Screenings grid (css/movie.css). Only
     the gap scales down slightly for narrower mobile columns. */
  .gallery-grid,
  .gallery-column {
    gap: 12px; /* still scaled down from the 16px desktop gap, proportionally
                  now instead of the old near-invisible 3px */
  }
}

/* ---- Lightbox (shared across all gallery pages -- built by js/lightbox.js) ---- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90vw;
  height: 90vh;
  pointer-events: none; /* clicks pass through to .lightbox-overlay's click-outside-closes handler */
}

.lightbox-image,
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* never cropped, regardless of the item's own aspect ratio -- a vertical 9:16 clip letterboxes with empty space on the sides rather than cropping */
  display: block;
  pointer-events: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-video {
  background: #000;
}

.lightbox-close,
.lightbox-nav {
  position: fixed;
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35); /* video content varies in brightness far more than photos -- a flat dark circle keeps these legible against any frame, not just text-shadow on the glyph */
  border-radius: 50%;
  border: none;
  color: #fff;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}

.lightbox-close {
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  font-size: 2.75rem;
  line-height: 1;
}

.lightbox-prev {
  left: 8px;
}

.lightbox-next {
  right: 8px;
}

@media (max-width: 640px) {
  /* 44x44px is the minimum comfortable touch target -- previously the
     close button was 40x40 here, just under that. */
  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }

  .lightbox-close {
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
  }
}