/* Image viewer: native <dialog> opened by js/zoom.js for any <a data-zoom="group"> link.
   Used by the homepage and the content pages. Needs the --st-* tokens from header.css. */

.zoom-lb { width: min(92vw, 1100px); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: 16px; background: transparent; overflow: visible; }
.zoom-lb::backdrop { background: rgba(4, 12, 24, .88); }
.zoom-lb img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; border-radius: 12px; background: #fff; }
.zoom-lb button {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--st-navy);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.zoom-lb button:hover { background: var(--st-blue); color: #fff; }
.zoom-lb-close { top: -16px; right: -8px; }
.zoom-lb-prev { top: 50%; left: -12px; transform: translateY(-50%); }
.zoom-lb-next { top: 50%; right: -12px; transform: translateY(-50%); }
.zoom-lb[data-single] .zoom-lb-prev, .zoom-lb[data-single] .zoom-lb-next { display: none; }

@media (max-width: 767px) {
  .zoom-lb-close { top: -14px; right: -4px; }
  .zoom-lb-prev { left: -6px; }
  .zoom-lb-next { right: -6px; }
}