.imageblock {
  position: relative;
  margin: 1rem 0;
}

.imageblock > .image {
  display: block;
}

img[title="small"] {
  max-width: 450px;
  height: auto;
}

img[title="medium"] {
  max-width: 600px;
  height: auto;
}

img[title="small:center"] {
  max-width: 450px;
  height: auto;
  margin: auto;
}

img[title="medium:center"] {
  max-width: 600px;
  height: auto;
  margin: auto;
}

/* Click-to-zoom lightbox for content images (DOC-1249) */
.content img.is-zoomable {
  cursor: zoom-in;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5vmin;
  background: rgba(20, 22, 26, 0.85);
  overflow: hidden;
}

.img-lightbox.is-open {
  display: flex;
}

/* Full-width mode: image fills the width; scroll vertically to see it all —
   for tall/square diagrams that stay small when height-bound on a laptop. */
.img-lightbox.is-zoomed {
  align-items: flex-start;
  overflow: auto;
}

/* class selector beats the base `IMG { max-width: min(var(--image-width), 100%) }`
   cap, so the zoomed image can exceed the column width */
.img-lightbox__img {
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
}

.img-lightbox.is-zoomed .img-lightbox__img {
  max-width: none;
  max-height: none;
  width: 96vw;
  height: auto;
  margin: 0 auto;
  cursor: zoom-out;
}

.img-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #23303a;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-lightbox__close:hover {
  background: #fff;
}

body.img-lightbox-open {
  overflow: hidden;
}