/* Steppe calligraphy lightbox. Owner: WP3 (lightbox).
   js/lightbox.js builds the .mo-lightbox dialog; src/_includes/steppe/calligraphy-grid.njk
   prints the .mo-lightbox-link on each scan. No animations, so prefers-reduced-motion needs no rule. */

.mo-lightbox{padding:0;border:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;background:transparent;color:var(--paper-0)}
.mo-lightbox::backdrop{background:rgba(20,16,12,.92)}
.mo-lightbox__frame{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;height:100%;box-sizing:border-box;padding:var(--space-6) var(--space-5)}
.mo-lightbox__stage{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);touch-action:pan-y;min-height:0}
.mo-lightbox__img{max-width:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);object-fit:contain;border:var(--border-width-frame) solid var(--paper-0);box-shadow:var(--shadow-3)}
.mo-lightbox__caption{text-align:center;max-width:72ch;font-family:var(--font-ui)}
.mo-lightbox__title{display:block;font-family:var(--font-display);font-size:var(--text-subtitle)}
.mo-lightbox__subtitle{display:block;font-size:var(--text-ui-sm);opacity:.8}
/* The author display:block above beats the UA [hidden] rule, so restore it. */
.mo-lightbox__subtitle[hidden]{display:none}
.mo-lightbox__close,.mo-lightbox__nav{min-width:44px;min-height:44px;background:transparent;border:0;color:inherit;font-size:32px;cursor:pointer}
.mo-lightbox__close{position:absolute;top:var(--space-4);right:var(--space-4)}
.mo-lightbox__close:focus-visible,.mo-lightbox__nav:focus-visible{outline:2px solid var(--paper-0);outline-offset:2px}
html.mo-lightbox-open{overflow:hidden}
.mo-lightbox-link{border:0;cursor:zoom-in}
.mo-lightbox-link:focus-visible img{outline:2px solid var(--flame-1);outline-offset:3px}

@media (max-width:640px){
  .mo-lightbox__frame{grid-template-columns:minmax(0,1fr)}
  .mo-lightbox__stage{grid-column:1}
  .mo-lightbox__nav{position:absolute;bottom:var(--space-4)}
  .mo-lightbox__nav--prev{left:var(--space-4)}
  .mo-lightbox__nav--next{right:var(--space-4)}
  .mo-lightbox__img{max-height:calc(100dvh - 200px)}
}