/* ===================================================================
   Shared "click to enlarge" overlay.

   Extracted from css/pages/ProductListing.css (2026-08-17) so the generic
   content pages can reuse it for the Accuracy Contour Plot on
   /leader-in-eis/ instead of the old "(click to enlarge)" link that opened
   the plot in a new tab. The selectors and values are unchanged, so the
   product pages render exactly as before.

   Paired with js/components/image-zoom.js. Required explicitly by
   ProductListingController and GamryContentPageController — it is a
   component, not a page sheet, so the ClassName auto-require does not
   find it.
   =================================================================== */

/* The trigger is a button so it is keyboard reachable; reset its chrome but keep a
   visible focus ring — the site-wide `a:focus{outline:none}` does not apply to
   buttons, and removing it here would strip the only keyboard affordance. */
.rd-pd-acp-zoom,
.rd-cp-acp-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 10px; }
.rd-pd-acp-zoom:focus-visible,
.rd-cp-acp-zoom:focus-visible { outline: 3px solid var(--gm-navy, #003e69); outline-offset: 3px; }
.rd-pd-acp-zoomhint { position: absolute; right: 8px; bottom: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(23,36,43,0.78); padding: 5px 9px; border-radius: 5px; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.rd-pd-acp-zoom:hover .rd-pd-acp-zoomhint,
.rd-pd-acp-zoom:focus-visible .rd-pd-acp-zoomhint,
.rd-cp-acp-zoom:hover .rd-pd-acp-zoomhint,
.rd-cp-acp-zoom:focus-visible .rd-pd-acp-zoomhint { opacity: 1; }

/* Overlay. Hidden with [hidden] so it is out of the a11y tree when closed. */
.rd-acp-lightbox[hidden] { display: none; }
.rd-acp-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); background: rgba(12,22,28,0.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: zoom-out; }
.rd-acp-lightbox-inner { position: relative; cursor: default; max-width: 96vw; max-height: 92vh; }
.rd-acp-lightbox img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; background: #fff; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.rd-acp-lightbox-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: var(--gm-navy, #003e69); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rd-acp-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rd-acp-lightbox-cap { margin-top: 10px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
body.rd-acp-open { overflow: hidden; }

@media (max-width: 700px) {
  .rd-acp-lightbox-close { top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-pd-acp-zoomhint { transition: none; }
}