/* Lightbox: shared by the site and the admin. */
.lb-locked, .lb-locked body { overflow: hidden; }
.lb {
  --lb-dim: 1;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(8, 11, 13, calc(.86 * var(--lb-dim)));
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
.lb.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 72px 88px; }
/* The whole photo always fits the window: limits are set against the
   viewport itself, since a percentage of an auto-sized grid cell is no limit. */
.lb-media {
  --lb-room-x: 144px; --lb-room-y: 152px;
  max-width: calc(100vw - var(--lb-room-x)); max-height: calc(100vh - var(--lb-room-y));
  max-height: calc(100dvh - var(--lb-room-y));
  width: auto; height: auto; object-fit: contain; border-radius: 14px; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transition: transform .5s cubic-bezier(.2, 1.1, .3, 1), opacity .3s ease;
  user-select: none; -webkit-user-drag: none;
}
video.lb-media { width: min(calc(100vw - var(--lb-room-x)), 1280px); }
.lb-from-right { transform: translateX(60px); opacity: 0; transition: none; }
.lb-from-left { transform: translateX(-60px); opacity: 0; transition: none; }

.lb-glass {
  background: rgba(40, 44, 48, .55); color: #fff;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 24px rgba(0, 0, 0, .3);
}
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; padding: 0; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), background-color .15s ease;
}
.lb-btn:hover { background: rgba(70, 74, 78, .65); }
.lb-btn:active { transform: scale(.92); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.lb-pano-btn { top: max(16px, env(safe-area-inset-top)); right: 72px; }
.lb-pano-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .9); color: #111; }
/* Panorama: the photo at the full height of the screen, moved sideways. */
.lb-pano { position: fixed; inset: 0; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; touch-action: none; }
.lb-pano-img { height: 100vh; height: 100dvh; width: auto; max-width: none; flex: none; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lb-panorama .lb-stage > .lb-media, .lb-panorama .lb-prev, .lb-panorama .lb-next, .lb-panorama .lb-counter { visibility: hidden; }
.lb-panorama .lb-close, .lb-panorama .lb-pano-btn, .lb-panorama .lb-caption { z-index: 2; }
.lb-prev { left: 16px; top: 50%; margin-top: -22px; }
.lb-next { right: 16px; top: 50%; margin-top: -22px; }
.lb-counter {
  position: absolute; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; font: 600 13px/1.2 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums;
}
.lb-caption {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  max-width: min(680px, calc(100vw - 32px)); padding: 10px 18px; border-radius: 18px;
  font: 15px/1.4 system-ui, -apple-system, sans-serif; text-align: center;
}
.lb [hidden] { display: none; }
@media (max-width: 640px) {
  .lb-stage { padding: 64px 8px 96px; }
  .lb-media { --lb-room-x: 16px; --lb-room-y: 176px; }
  .lb-prev, .lb-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; }
  .lb-caption { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-media { transition: none; }
}