/* Click-to-enlarge images in blog articles. Loaded only by post.php and cs/post.php. */
.post__body img[data-zoomable] { cursor: zoom-in; }
.post__body img[data-zoomable]:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }

.img-zoom {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; cursor: zoom-out;
}
.img-zoom[open] { display: grid; place-items: center; }
.img-zoom::backdrop { background: rgba(15, 14, 40, .88); }
.img-zoom__img { width: auto; height: auto; max-width: 94vw; max-height: 92vh; max-height: 92dvh; border-radius: 6px; background: #fff; }
.img-zoom__close {
  position: fixed; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  cursor: pointer;
}
.img-zoom__close:hover { background: rgba(255, 255, 255, .28); }
.img-zoom__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* No page scrolling behind the enlarged image. base.css reserves a scrollbar gutter
   that ::backdrop can't cover, so paint it the dimmed page colour to avoid a white strip. */
html.img-zoom-open { overflow: hidden; background: #2c2b42; }