/* ============================================================
   MIG — blog-image lightbox (Phase 12). A lightweight viewer for images
   inside blog posts (.mig-prose .mig-photo), replacing the old "click → raw
   .jpg" dead-end. Shares the Modern-Heritage tokens; watermark via the existing
   .mig-photo::after (mig-watermark.css). No new pages — pure UX, no SEO impact.
   ============================================================ */

.mig-prose .mig-photo img { cursor: zoom-in; }

dialog.mig-blb { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: rgba(14,27,50,0.96); color: var(--mh-cream); }
dialog.mig-blb::backdrop { background: rgba(14,27,50,0.7); }
.mig-blb__stage { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto auto; }
.mig-blb__imgwrap { display: flex; align-items: center; justify-content: center; padding: 5vh 6vw 0; overflow: auto; }
.mig-blb__fig { position: relative; display: inline-block; margin: 0; line-height: 0; container-type: normal; }
.mig-blb__fig img { display: block; max-width: 88vw; max-height: 80vh; width: auto; height: auto; border-radius: 2px; }
/* panorama mode — fit to height, horizontal scroll to take in the whole view */
.mig-blb__imgwrap.is-pano { overflow-x: auto; justify-content: flex-start; align-items: center; }
.mig-blb__imgwrap.is-pano .mig-blb__fig img { max-height: 78vh; max-width: none; height: 78vh; width: auto; }
.mig-blb__hint { display: none; text-align: center; font-family: var(--font-body); font-size: 12px; font-style: italic; color: rgba(253,251,247,0.66); padding: 8px 6vw 0; }
/* watermark (from mig-watermark.css .mig-photo::after) — size in vw, not cqi */
.mig-blb__fig.mig-photo::after { right: 14px; bottom: 11px; font-size: clamp(11px, 1.3vw, 17px); }
.mig-blb__cap { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--mh-cream); padding: 14px 6vw 30px; }
.mig-blb__btn { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid rgba(253,251,247,0.3); color: var(--mh-cream); width: 52px; height: 52px; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 5; transition: background .18s; }
.mig-blb__btn:hover { background: rgba(253,251,247,0.12); }
.mig-blb__prev { left: 18px; } .mig-blb__next { right: 18px; }
.mig-blb__close { position: absolute; top: 18px; right: 20px; background: none; border: 0; color: var(--mh-cream); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; z-index: 5; }
@media (max-width: 760px) { .mig-blb__btn { width: 44px; height: 44px; } .mig-blb__fig img { max-height: 70vh; } }