/* =========================================================================
 * The image lightbox — a window over the page (inc/lightbox.php).
 *
 * The .lmx-modal shell and the .lmx-modal__close button come from
 * assets/css/cta-forms.css; only the panel for the image lives here: one column
 * instead of two, sized to the original but never larger than the screen. On
 * narrow screens the panel hands the image over to zoom gestures (touch-action:
 * pinch-zoom) — the small text of a screenshot can be magnified with fingers.
 * ====================================================================== */

.lmx-modal--zoom{padding:76px 16px 28px}
.lmx-modal--zoom .lmx-modal__panel--zoom{display:block;grid-template-columns:none;width:auto;max-width:min(100%,1600px);background:#0b0f10;border-color:rgba(255,255,255,.16)}
/* The close button sits above the frame rather than over it: interface
   screenshots have a close button of their own in the corner, and two in a row
   would read as one element. */
.lmx-modal--zoom .lmx-modal__close--zoom{top:-56px;right:0;background:rgba(11,15,16,.72)}

.lmx-zoom-frame{position:relative;display:flex;align-items:center;justify-content:center;background:#05080a;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom}
/* The image fits whole: the width is bounded by the window and the height by
   the window together with the close button and the caption. It is never
   stretched beyond its natural size. */
.lmx-zoom-img{display:block;max-width:100%;max-height:calc(100vh - 210px);width:auto;height:auto;margin:auto;object-fit:contain}
.lmx-modal--zoom[data-zoom="off"] .lmx-zoom-img{visibility:hidden}

.lmx-zoom-caption{margin:0 !important;padding:14px 18px;font:500 12px/1.45 var(--lmx-font,'Hanken Grotesk',Helvetica,Arial,sans-serif) !important;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72) !important;background:#0b0f10;border-top:1px solid rgba(255,255,255,.1)}

@media (max-width:768px){
.lmx-modal--zoom{padding:68px 10px 18px}
.lmx-zoom-img{max-height:calc(100svh - 170px)}
.lmx-zoom-caption{font-size:11px !important;padding:12px 14px;letter-spacing:.12em}
}