/* ─────────────────────────────────────────────────────────────────────────────
   Gallery — photo cards + lightbox viewer, shared by index and series-01.
   Pairs with assets/gallery.js. Grid spans and aspect ratios stay per page.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Photo card ── */
.work {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.32);
  transition: border-color 0.35s ease,
              box-shadow 0.45s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .work:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      0 18px 44px rgba(0,0,0,0.5);
  }
}

.work:focus-visible {
  outline: 2px solid rgba(240,237,232,0.9);
  outline-offset: 4px;
}

/* Touch: content cards aren't glass — a quiet press-in is the whole response */
@media (hover: none) {
  .work:active {
    transform: scale(0.985);
    transition-duration: 0.15s;
  }
}

/* Scroll-reveal: cards fade and rise as they enter the viewport.
   Declared after :hover so the entrance wins while it runs; gallery.js strips
   the classes once it finishes. */
.work.reveal-init {
  opacity: 0;
  transform: translateY(28px);
}
.work.reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-img {
  position: absolute;
  inset: 0;
  background: #161616;
  overflow: hidden;
}

.work-img img {
  opacity: 0.92;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.work:hover .work-img img,
.work:focus-visible .work-img img {
  transform: scale(1.035);
  opacity: 1;
}

/* Label — title rests at the bottom; category slides in on hover or focus.
   Only transform and opacity animate, so text never reflows mid-hover. */
.work-info {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0.9rem, 2vw, 1.6rem);
  background: linear-gradient(180deg, rgba(8,8,8,0) 58%, rgba(8,8,8,0.5) 100%);
  transition: background 0.45s ease;
  pointer-events: none;
}
.work:hover .work-info,
.work:focus-visible .work-info {
  background: linear-gradient(180deg, rgba(8,8,8,0) 40%, rgba(8,8,8,0.72) 100%);
}

.work-cat {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 0.35rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.work-name {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.15;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transform-origin: left bottom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.work:hover .work-cat,
.work:focus-visible .work-cat {
  opacity: 1;
  transform: translateY(0);
}
.work:hover .work-name,
.work:focus-visible .work-name {
  color: #fff;
  transform: translateY(-2px) scale(1.12);
}

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8,8,8,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem clamp(1rem, 6vw, 6rem) 1.5rem;
  opacity: 0;
  visibility: hidden;   /* keeps the hidden controls out of the tab order */
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  cursor: zoom-out;
  touch-action: pinch-zoom;   /* one-finger swipes reach gallery.js */
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.35s ease;
}

/* Grain overlay sits above everything; keep it off the full-size photo. */
body.lightbox-open::after { opacity: 0; }

/* min-width: 0 lets the figure shrink below the photo's natural width;
   without it a 1600px image pushes the viewer wider than a phone screen. */
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.lightbox-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9.5rem);
  max-height: calc(100svh - 9.5rem);
  object-fit: contain;
  border-radius: 4px;
  transform: scale(0.96);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.open img { transform: scale(1); }
.lightbox img.is-swapping { opacity: 0; }

.lightbox-caption {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  color: rgba(240,237,232,0.72);
  cursor: default;
}
.lightbox-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(240,237,232,0.9);
}
.lightbox-count {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Close + prev/next — round glass controls (material from .glass in
   liquid-glass.css). Positioned without transforms so the press swell
   (scale/translate) composes cleanly. */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2002;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}

.lightbox-close {
  top: 1.2rem;
  right: 1.4rem;
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
}

.lightbox-nav {
  top: calc(50% - 26px);
  width: 52px;
  height: 52px;
  padding-bottom: 3px;
  font-size: 1.7rem;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 1.4rem; }
.lightbox-next { right: 1.4rem; }

/* On touch, swiping replaces the arrows — drop them to the bottom corners
   so they never sit on top of the photo. */
@media (hover: none), (max-width: 640px) {
  .lightbox { padding: 4.5rem 0.75rem 5rem; }
  .lightbox-nav {
    top: auto;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
  .lightbox-prev { left: 1rem; }
  .lightbox-next { right: 1rem; }
  .lightbox img {
    max-height: calc(100vh - 12rem);
    max-height: calc(100svh - 12rem);
  }
}

/* In-viewer watermark, centred on the photo by gallery.js */
.lb-wm {
  position: fixed;
  z-index: 2001;
  display: none;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.18);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  transform: rotate(-22deg);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .work.reveal-init { opacity: 1; transform: none; }
  .work,
  .work-img img,
  .work-name,
  .lightbox img { transition-duration: 0.01s; }
  .work:hover { transform: none; }
  .work:hover .work-img img,
  .work:focus-visible .work-img img { transform: none; }
}