/* ── basicLightbox ──────────────────────────────────────────── */

.basicLightbox {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0.01;
  transition: opacity 400ms ease;
  z-index: 1000;
  will-change: opacity;
  cursor: zoom-out;
}

.basicLightbox--visible {
  opacity: 1;
}

.basicLightbox__placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.93);
  transition: transform 400ms ease;
  will-change: transform;
}

.basicLightbox--visible .basicLightbox__placeholder {
  transform: scale(1);
}

.basicLightbox__placeholder > img:first-child:last-child,
.basicLightbox__placeholder > video:first-child:last-child {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.5);
}

/* Clickable cursor on gallery media */
.p-media-item img:not(.iphone-bezel),
.p-media-item video {
  cursor: zoom-in;
}

/* iPhone frame inside the lightbox */
.lightbox-iphone {
  position: relative;
  /* Size by WIDTH, not height. This gives the containing block the same
     "auto height" behaviour as .iphone-wrap in the gallery, so top/bottom %
     on the absolutely-positioned .iphone-screen resolves against width in
     both contexts — making the same variables work identically in both.
     min() keeps the phone inside the viewport on narrow screens:
       85vw           — cap at 85% of viewport width
       85vh × 393/852 — the width that corresponds to an 85vh-tall phone */
  width: min(85vw, calc(85vh * 393 / 852));
  aspect-ratio: var(--iphone-frame-aspect, 393 / 852);
  flex-shrink: 0;
  container-type: inline-size;
  cursor: zoom-out;
}

/* Only override border-radius — position offsets inherit from .iphone-screen
   in project.css and now resolve the same way as the gallery. */
.lightbox-iphone .iphone-screen {
  border-radius: var(--iphone-screen-radius, 6.5cqi);
}

/* Loading spinner — appended to .basicLightbox (position:fixed) by JS */
.lightbox-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
}

.lightbox-spinner > div {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  animation: lb-spin 0.65s linear infinite;
}

@keyframes lb-spin {
  to { transform: rotate(360deg); }
}