/* Native modal provides keyboard focus containment and Escape dismissal. */
.egg-zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.egg-zoom:focus-visible { outline-offset: -4px; }
.egg-lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bsp-ink) 96%, transparent);
  color: var(--egg-surface);
}
.egg-lb[open] { display: flex; align-items: center; justify-content: center; gap: var(--egg-space-lg); }
.egg-lb::backdrop { background: var(--bsp-ink); }
.egg-lb__stage { display: flex; flex-direction: column; align-items: center; gap: var(--egg-space-sm); min-width: 0; }
.egg-lb__img { max-width: 100%; max-height: 82dvh; width: auto; height: auto; object-fit: contain; }
.egg-lb__cap { color: var(--egg-surface); font-size: .875rem; font-variant-numeric: tabular-nums; }
.egg-lb__close, .egg-lb__nav {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: var(--egg-control-hit); height: var(--egg-control-hit);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.egg-lb__close { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); }
.egg-lb :focus-visible { outline-color: var(--egg-surface); }
body.egg-lb-open { overflow: hidden; }
@media (max-width: 720px) {
  .egg-lb[open] { padding-block: 5rem max(5rem, env(safe-area-inset-bottom)); }
  .egg-lb__img { max-height: calc(100dvh - 13rem); }
  .egg-lb__nav { position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); }
  .egg-lb__nav--prev { left: var(--egg-space-md); }
  .egg-lb__nav--next { right: var(--egg-space-md); }
}