/* ==========================================================================
   Overlays — full-screen image viewer, before/after comparison
   ========================================================================== */

.image-viewer {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  background: #050505f5;
  backdrop-filter: blur(10px);
  padding: 0 clamp(8px, 2vw, 26px) env(safe-area-inset-bottom);
  overscroll-behavior: contain;
  touch-action: pan-y;        /* let the browser own vertical, we take horizontal */
}
.image-viewer.is-open { display: grid; }

.viewer-bar {
  grid-column: 1 / -1; grid-row: 1;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) clamp(8px, 1.6vw, 20px) 14px;
  border-bottom: 1px solid var(--line);
}
.viewer-titles { display: grid; gap: 3px; min-width: 0; }
.viewer-title {
  font: 600 clamp(15px, 1.4vw, 21px)/1.2 var(--font-display);
  text-transform: uppercase; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer-meta { color: var(--muted); }
.viewer-count { color: var(--gold); white-space: nowrap; }
.viewer-close {
  /* .tap makes this a grid; flow it in a row so the label and × stay on one line */
  grid-auto-flow: column; gap: 7px;
  font: 500 var(--step-label)/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--cream);
  padding-inline: 10px; cursor: pointer; white-space: nowrap;
}
.viewer-close:hover { color: var(--gold); }

.viewer-figure {
  grid-column: 2; grid-row: 2;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0; overflow: hidden;
  margin: 0; padding: 14px 0;
}
.viewer-figure img {
  /* Fill the available area and letterbox inside it. Sizing the box rather
     than the picture is what guarantees a very tall banner or a wide
     landscape shot is shown complete, never cropped. */
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: none;
}

.viewer-nav {
  grid-row: 2; z-index: 2;
  width: clamp(44px, 5vw, 62px); height: clamp(44px, 5vw, 62px);
  border: 1px solid var(--line-strong);
  color: var(--cream); font-size: 20px; cursor: pointer;
  background: #0d0d0cb3;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.viewer-nav:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.viewer-prev { grid-column: 1; }
.viewer-next { grid-column: 3; }

.viewer-hint {
  grid-column: 1 / -1; grid-row: 3;
  text-align: center; padding: 10px 0 16px; color: var(--muted);
}

/* On a phone the arrows sit in a bottom bar, within thumb reach, with the
   hint between them. The picture gets the full width above. */
@media (max-width: 800px) {
  .viewer-figure { grid-column: 1 / -1; grid-row: 2; padding: 10px 0; }
  .viewer-prev { grid-column: 1; grid-row: 3; }
  .viewer-next { grid-column: 3; grid-row: 3; }
  .viewer-hint {
    grid-column: 2; grid-row: 3; align-self: center;
    padding: 0 10px; font-size: 10px;
  }
  .viewer-nav { margin-bottom: 14px; }
  .viewer-count { display: none; }
}

/* ==========================================================================
   Before / after comparison (photo restoration)
   ========================================================================== */
.compare {
  position: relative; overflow: hidden; width: 100%;
  border: 1px solid var(--line); background: var(--charcoal);
  touch-action: pan-y;
}
.compare img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The aspect-ratio is written per photograph by the build, so nothing is
   cropped to a shape it was never meant to be. */
.compare-after {
  position: absolute; inset: 0; width: 50%; overflow: hidden;
  border-right: 2px solid var(--gold);
}
.compare-after img { width: auto; height: 100%; max-width: none; }
.compare-handle {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  font: 700 15px/1 var(--font-body); cursor: ew-resize;
  border-radius: 50%; pointer-events: none;
}
.compare-range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.compare-label {
  position: absolute; bottom: 10px; z-index: 2;
  font: 500 var(--step-label)/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 9px; background: #07060699; color: var(--cream);
}
.compare-label.is-before { right: 10px; }
.compare-label.is-after { left: 10px; color: var(--gold); }