/* =========================================================================
   lightbox.css — the full-screen viewer for project gallery images and clips.
   Built by js/components/project/lightbox.js.
   ========================================================================= */

.lightbox{position:fixed;inset:0;z-index:45;display:grid;place-items:center;
  background:rgba(20,36,70,.38);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;transition:opacity .35s ease}
.lightbox.on{opacity:1}

/* the media: whole and uncropped, as large as fits between the Back button and the bottom edge */
.lb-stage{--lb-top:clamp(64px,9vh,96px);--lb-bottom:clamp(24px,4vh,48px);
  width:100%;height:100%;box-sizing:border-box;display:grid;place-items:center;padding:var(--lb-top) var(--gutter) var(--lb-bottom)}
.lb-stage img,.lb-stage video{display:block;width:auto;height:auto;object-fit:contain;
  max-width:calc(100vw - 2 * var(--gutter));max-height:calc(100vh - var(--lb-top) - var(--lb-bottom));
  max-height:calc(100dvh - var(--lb-top) - var(--lb-bottom));
  box-shadow:0 40px 90px -40px rgba(10,20,50,.6);transform:scale(.96);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lightbox.on .lb-stage img,.lightbox.on .lb-stage video{transform:none}

/* Back — top left, in the menu's serif */
.lb-back{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:var(--gutter);z-index:1;display:inline-flex;align-items:center;gap:10px;padding:6px 0;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:#fff}
.lb-back svg{width:18px;height:18px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lb-back:hover svg{transform:translateX(-5px)}

/* gallery items are clickable (the dot cursor grows over them — components/cursor.js) */
.p-gallery img:focus-visible,.p-gallery video:focus-visible{outline:2px solid #fff;outline-offset:3px}