/* baguetteBox mobile fix (V32, 2026-07-19)
 *
 * V31 introduced two regressions while fixing mobile scroll-leak:
 *   1. touch-action: none on body + overlay locked browser pinch-zoom
 *      ("現在 mobile 無法放大")
 *   2. position: fixed on body rebased scroll to top of document
 *      ("打開圖後頁面會回到最頂")
 *
 * V32 strategy:
 *   - Keep body scroll-locked via `overflow: hidden` only (no position:fixed
 *     on body, so the document scroll position is preserved automatically
 *     on iOS Safari which maintains scrollTop while overflow is hidden).
 *   - Leave touch-action alone on the overlay — the browser handles the
 *     lightbox's own gestures and we want native pinch-zoom on the image
 *     itself.
 *   - Give the lightbox image explicit `touch-action: pinch-zoom` so
 *     pinch-to-zoom on the image is always permitted regardless of what
 *     other theme rules say.
 *   - Save + restore scrollY via sessionStorage from the init script
 *     (afterHide callback) as a belt-and-braces fallback for any browser
 *     that DOES snap to top with overflow:hidden.
 *
 * Loaded AFTER baguettebox.min.css so these rules win on specificity tie.
 */

/* Lock page scroll while lightbox is open, but DO NOT reposition body.
 * `overflow: hidden` on body+html stops scroll + rubber-band; scrollTop
 * is preserved by iOS Safari automatically.  No touch-action override here
 * — we want pinch-zoom to keep working on the lightbox image. */
body.baguetteBox-open,
html.baguetteBox-open {
  overflow: hidden !important;
  /* iOS Safari: keep scroll locked even when keyboard opens */
  overscroll-behavior: contain !important;
}

/* Belt-and-braces: keep overlay fully covering even if upstream CSS is
 * overridden by Hugo Book theme rules.  Do NOT touch touch-action here —
 * the lib's own click/swipe handlers manage the overlay gestures. */
#baguetteBox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.92) !important;
  overflow: hidden !important;
}

/* Image inside the lightbox: explicit pinch-zoom permission + centered
 * containment.  This is the image the user wants to zoom, so we make
 * sure the browser never disallows pinch on it. */
#baguetteBox-overlay .full-image img,
#baguetteBox-overlay > img {
  max-width: 95vw !important;
  max-height: 95vh !important;
  object-fit: contain !important;
  touch-action: pinch-zoom !important;
}

/* Defensive: protect against any Hugo Book theme rule that forces a fixed
 * pixel size on the lightbox image and breaks scaling. */
#baguetteBox-overlay .full-image {
  max-width: 95vw !important;
  max-height: 95vh !important;
}