/* Affordance for the tap-to-enlarge screenshots (js/image-zoom.js). */

.is-zoomable {
  cursor: zoom-in;
}

.is-zoomable:focus-visible {
  outline: 3px solid #0b63e5;
  outline-offset: 3px;
}

/* magnific's default is a dim 0.8 black; these are light UI screenshots,
   so go darker to stop them glowing against it */
.mfp-bg {
  background: #0f1b33;
  opacity: 0.92;
}

.mfp-title {
  font-size: 13px;
  line-height: 1.4;
  color: #c9d2e3;
  padding-right: 40px;
}

/* Phones: let the enlarged screenshot exceed the viewport and be panned.

   magnific-popup fits the image inside the viewport, which on a 390px
   phone means a 1117px screenshot opens at about 378px — 1.1x the
   inline size, and still unreadable. That defeats the point.

   Letting it render at natural size inside a scrollable, pinch-zoomable
   box means the user can actually read the UI in the screenshot: swipe
   to pan, pinch to zoom further. touch-action keeps the browser's own
   pinch-zoom available rather than swallowing the gesture.

   Desktop keeps the fitted view, where a 1117px image already fits. */
@media (max-width: 991px) {
  .mfp-wrap .mfp-content {
    width: 100%;
  }

  .mfp-wrap .mfp-figure {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    max-height: 78vh;
  }

  .mfp-wrap .mfp-figure figure {
    margin: 0;
  }

  .mfp-wrap img.mfp-img {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 0;
  }

  /* the caption sits outside the scroller so it stays put while panning */
  .mfp-wrap .mfp-bottom-bar {
    position: static;
    margin-top: 8px;
  }
}