/* Lightbox — viewport-safe modal image viewer */



.lightbox[hidden] {

  display: none !important;

}



.lightbox {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))

    max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));

  box-sizing: border-box;

  overscroll-behavior: contain;

}



.lightbox-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(4, 6, 4, 0.92);

}



.lightbox-stage {

  position: relative;

  z-index: 1;

  width: min(96vw, 1100px);

  max-width: 100%;

  height: min(90dvh, 900px);

  max-height: calc(100dvh - 1rem);

  display: flex;

  flex-direction: column;

  border: 1px solid var(--border-strong);

  background: var(--bg-charcoal);

  overflow: hidden;

}



.lightbox-frame {

  flex: 1;

  min-height: 0;

  display: grid;

  place-items: center;

  overflow: hidden;

  background: #050705;

  cursor: zoom-in;

}



.lightbox-frame.is-zoomed {

  cursor: zoom-out;

  overflow: auto;

  -webkit-overflow-scrolling: touch;

}



.lightbox-frame img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  transition: transform 0.2s ease;

  user-select: none;

}



.lightbox-frame.is-zoomed img {

  max-width: none;

  max-height: none;

  width: auto;

  height: auto;

  transform: scale(1.6);

  transform-origin: center center;

}



.lightbox-close,

.lightbox-nav {

  position: absolute;

  z-index: 2;

  border: 1px solid var(--border);

  background: rgba(18, 22, 18, 0.9);

  color: var(--text);

  font-size: 1.4rem;

  line-height: 1;

  width: 42px;

  height: 42px;

  cursor: pointer;

  border-radius: var(--radius);

}



.lightbox-close:hover,

.lightbox-nav:hover {

  border-color: var(--olive);

  color: var(--olive-bright);

}



.lightbox-close {

  top: 0.6rem;

  right: 0.6rem;

}



.lightbox-prev {

  left: 0.6rem;

  top: 50%;

  transform: translateY(-50%);

}



.lightbox-next {

  right: 0.6rem;

  top: 50%;

  transform: translateY(-50%);

}



.lightbox-info {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem 1.25rem;

  align-items: center;

  padding: 0.75rem 1rem;

  border-top: 1px solid var(--border);

  font-family: var(--font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.06em;

  color: var(--text-muted);

  flex-shrink: 0;

  max-width: 100%;

}



.lightbox-info span {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  max-width: 100%;

}



@media (max-width: 640px) {

  .lightbox {

    padding: 0;

    align-items: stretch;

  }



  .lightbox-stage {

    width: 100%;

    height: 100%;

    max-height: 100dvh;

    border: none;

  }



  .lightbox-close,

  .lightbox-nav {

    width: 40px;

    height: 40px;

  }



  .lightbox-prev {

    left: 0.35rem;

  }



  .lightbox-next {

    right: 0.35rem;

  }



  .lightbox-info {

    padding: 0.65rem 0.75rem;

    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));

  }

}