/* gallery.css: masonry editorial photo gallery + lightbox.
   Shared across eljaycreative gallery pages. Chrome stays cobalt-on-white
   (deck system); the photographs carry all the colour. Every frame keeps its
   native aspect ratio (masonry columns + height:auto, no cropping). Progressive
   enhancement: without JS the grid is a plain, ordered set of images and
   every frame is still a focusable link to the full-size file. */

.gal {
  columns: clamp(240px, 30vw, 380px);   /* column-width; browser sets the count */
  column-gap: clamp(6px, 0.7vw, 12px);
  padding-top: clamp(28px, 5vh, 60px);
  padding-bottom: clamp(40px, 8vh, 96px);
}

.gal-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(6px, 0.7vw, 12px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: hidden;
  background: #eef2fb;
  border-radius: 3px;
  cursor: zoom-in;
  text-decoration: none;
}
/* legacy justified-layout spacer, unused in the masonry layout */
.gal-fill { display: none; }

/* even grid (opt-in with .gal-even): uniform tiles aligned into clean rows and
   columns instead of the ragged masonry. Every frame fills an equal cell at one
   aspect ratio; mixed-orientation frames are centre-cropped to match. */
.gal-even {
  columns: initial;
  column-gap: initial;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.7vw, 12px);
}
.gal-even .gal-item {
  margin: 0;
  aspect-ratio: 4 / 5;
}
.gal-even .gal-item img { height: 100%; object-fit: cover; }
/* horizontal frames: kept at their natural 16:9 (no crop), each spanning two
   vertical tiles so they sit as a clean full row at the bottom of the grid. */
.gal-even .gal-h { grid-column: span 2; aspect-ratio: 16 / 9; }

.gal-item img {
  width: 100%;
  height: auto;            /* native aspect ratio, no crop */
  display: block;
  transition: transform .9s cubic-bezier(.16,.68,.3,1), filter .5s ease;
  will-change: transform;
}
@media (hover: hover) {
  .gal-item:hover img { transform: scale(1.045); }
}
/* subtle index tag, bottom-left, revealed on hover: editorial contact-sheet feel */
.gal-item::after {
  content: attr(data-idx);
  position: absolute;
  left: 10px; bottom: 8px;
  font-family: "Articulat CF", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
@media (hover: hover) { .gal-item:hover::after { opacity: .92; } }

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

/* reveal-in animation (only when JS marks the page) */
.js-reveal .gal-item { opacity: 0; transform: translateY(14px); }
.js-reveal .gal-item.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,.68,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .gal-item { opacity: 1; transform: none; transition: none; }
  .gal-item img { transition: none; }
}

/* ---- lightbox ---------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 24, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease, visibility 0s linear .34s;
  touch-action: none;
}
.lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease;
}
.lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  box-sizing: border-box;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,.68,.3,1);
}
.lb-img.is-ready { opacity: 1; transform: none; }

.lb-btn {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-btn:hover { background: rgba(255,255,255,0.16); }
.lb-btn:active { transform: scale(.92); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lb-prev { left: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(.92); }

.lb-count {
  position: absolute;
  left: 50%; bottom: clamp(14px, 3vw, 26px);
  transform: translateX(-50%);
  color: rgba(255,255,255,0.72);
  font-family: "Articulat CF", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
body.lb-lock { overflow: hidden; }

@media (max-width: 640px) {
  .gal { columns: clamp(150px, 44vw, 240px); }
  .gal-even { grid-template-columns: repeat(2, 1fr); }
  .lb-btn { width: 44px; height: 44px; font-size: 17px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img, .lb-btn { transition: none !important; }
}

/* symmetric gallery (opt-in with .gal-sym, 2026-10-27): clean rows of equal
   height. flex-grow = aspect ratio, so every frame in a row shares one height
   and each row spans the full width. Landscapes 3:2, portraits (.p) 2:3,
   cover-cropped. A .gal-break span ends a row (its height = the gap). Rows are
   built symmetric in the markup (L P L, P L P, L L L, L L). Phones: one column. */
.gal.gal-sym { columns: initial; column-gap: clamp(6px, 0.7vw, 12px); row-gap: 0; display: flex; flex-wrap: wrap; }
.gal-sym .gal-item { margin: 0; flex: 1.5 1 0; aspect-ratio: 3 / 2; min-width: 0; }
.gal-sym .gal-item.p { flex-grow: 0.6667; aspect-ratio: 2 / 3; }
.gal-sym .gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-sym .gal-break { display: block; flex-basis: 100%; height: clamp(6px, 0.7vw, 12px); }
@media (max-width: 640px) {
  .gal.gal-sym { row-gap: clamp(6px, 0.7vw, 12px); }
  .gal-sym .gal-break { display: none; }
  .gal-sym .gal-item, .gal-sym .gal-item.p { flex: 0 0 100%; aspect-ratio: auto; }
  .gal-sym .gal-item img { height: auto; }
}