/* =============================================================================
   image-viewer.css — mobile fullscreen artwork image viewer (lightbox)
   Mobile only — js/artwork-image-viewer.js gates every trigger (click +
   keyboard) behind the same max-width: 1023px matchMedia guard used
   throughout this codebase, so on desktop this markup exists in the DOM
   but is never opened, and the existing hover-zoom magnifier
   (artwork-zoom.css/js) continues to run completely unchanged.

   Reuses js/modal.js for all open/close mechanics — scroll lock, focus
   move + focus trap, Escape-to-close, overlay-click-to-close — the exact
   same infrastructure already powering the Scale Reference sheet
   (scale-sheet.css/js). Same two-element split too: an overlay (backdrop)
   wrapping a dialog (panel), both toggled by the same .is-open class.

   Component ownership:
     .image-viewer-overlay   — combined with the shared .modal-overlay
                                (modal.css) for open/close mechanics; only
                                overrides the backdrop color here (solid
                                carbon instead of the shared translucent
                                black), per spec.
     .image-viewer           — the dialog: fullscreen, centers the enlarged
                                photo on both axes, fades in/out with the
                                overlay (no slide/scale — "soft and
                                minimal", per spec).
     .image-viewer__image    — the enlarged photo; object-fit: contain so
                                it's never cropped and always keeps its own
                                aspect ratio, unlike every other image
                                treatment on this site (which fills a fixed
                                card/box with object-fit: cover).
     .image-viewer__close    — copies .scale-sheet__close's exact values
                                (scale-sheet.css) verbatim: 24×24, no
                                border/background, white icon, 0.7 hover
                                opacity — the existing close-icon treatment
                                already used elsewhere on this page.

   Pinch-to-zoom / pan / double-tap (js/artwork-image-viewer.js) apply a
   `transform: translate() scale()` directly to .image-viewer__image on
   every gesture frame — nothing here needs to change for that, except
   `touch-action: none` below, which hands the raw gesture stream to that
   script instead of letting the browser try to scroll/zoom the page with
   it. z-index: 2 on the close button is a defensive measure so it always
   stays tappable above the image even once transform gives the image its
   own stacking context at any zoom level.

   prefers-reduced-motion: reduce — the modal's own fade transition is
   removed entirely; open/close become instant. Continuous pinch/pan
   tracking is never animated regardless of this setting (1:1 finger
   tracking, not a decorative effect); only the discrete double-tap-zoom
   and snap-back-to-1x transitions are skipped under reduced motion — see
   js/artwork-image-viewer.js.
   ============================================================================= */


/* ── Overlay — backdrop color override only ─────────────────────────────── */
/*
 * .modal-overlay (modal.css) already provides the fixed full-viewport box,
 * the opacity fade, and the .is-open toggle. This is the one visual
 * property this component needs to change: solid carbon instead of the
 * shared translucent black, per spec ("existing carbon / dark background
 * token") — the same color already used for the reveal-animation image
 * veil (reveal.css), so a fullscreen carbon field reads as an established
 * part of this site's visual language, not a one-off.
 */
.image-viewer-overlay.modal-overlay {
  background: var(--color-carbon);
}


/* ── Dialog — fullscreen, centers the image ─────────────────────────────── */
/*
 * Fixed + inset: 0, the same positioning pattern as .scale-sheet (a second
 * fixed full-viewport layer nested inside the overlay) — just centered
 * with flex instead of anchored to the bottom edge. z-index: 201 stays
 * consistent with .scale-sheet's own value, both sitting above the shared
 * .modal-overlay's z-index: 200.
 */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);              /* 24px safe margin from every edge */

  /* Hidden by default; .is-open toggled by js/modal.js */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;       /* same duration/easing as .modal-overlay — one unified fade */
}

.image-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}


/* ── Image ───────────────────────────────────────────────────────────────── */
/*
 * object-fit: contain (not cover) — the one place on this site a photo is
 * allowed to letterbox rather than fill its box, because the box here is
 * the viewport itself, not a fixed card shape. Preserves aspect ratio,
 * never crops, per spec.
 */
.image-viewer__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  /* Hands the whole gesture stream (pinch, drag) to
     js/artwork-image-viewer.js's Pointer Events handlers instead of the
     browser's own native scroll/double-tap-zoom, which would otherwise
     compete with it for the same touch input. */
  touch-action: none;
  -webkit-touch-callout: none;   /* suppress iOS's press-and-hold "save image" menu during a slow pinch/pan */
  user-select: none;             /* prevent accidental image/text selection while dragging */
}


/* ── Close button ────────────────────────────────────────────────────────── */
/*
 * Copies .scale-sheet__close (scale-sheet.css) verbatim — same 24×24 plain
 * icon button, no border/box, white icon, 0.7 hover opacity — the existing
 * close-icon style already used on this page, reused rather than
 * reinvented. Positioned top-right, 24px from each edge — the same "24px
 * from the content edge" convention used elsewhere (Previous/Next
 * chevrons in artwork-nav.css, the mobile header).
 */
.image-viewer__close {
  position: absolute;
  top: var(--space-6);                  /* 24px */
  right: var(--space-6);                /* 24px */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-white);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;                            /* stays above .image-viewer__image at any zoom level — see file header */
}

.image-viewer__close:hover {
  opacity: 0.7;
}

.image-viewer__close:focus-visible {
  outline: 2px solid var(--color-white);   /* sitewide white-outline convention — see artwork-nav.css, artwork-card.css */
  outline-offset: 3px;
}

.image-viewer__close img {
  display: block;
  width: 24px;
  height: 24px;
}


/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .image-viewer-overlay.modal-overlay,
  .image-viewer {
    transition: none;                   /* instant show/hide instead of a fade */
  }

}