/* ============================================================
   LIGHTBOX (sibling of .v8hub, self-contained, dark glass)
   A deep ink backdrop with a blur, the photo on a soft gold-edged
   stage, and frosted controls that warm to gold on hover. Tokens
   are pulled from the .v8hub scope where available, with literal
   fallbacks baked in since the overlay renders outside .v8hub.
   ============================================================ */
.glightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(11, 16, 13, .94);
  backdrop-filter: blur(10px);
  animation: glightbox-fade .25s ease;
}
@keyframes glightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.glightbox .glb-stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.glightbox .glb-stage img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 250, 241, .16);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .7);
}
.glightbox .glb-count {
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-meta);
  letter-spacing: .06em;
  color: rgba(255, 250, 241, .82);
  margin-top: 16px;
}

.glightbox .glb-close,
.glightbox .glb-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 250, 241, .4);
  background: rgba(255, 250, 241, .1);
  color: #FFFAF1;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.glightbox .glb-close:hover,
.glightbox .glb-nav:hover { background: #D0A54A; border-color: #D0A54A; color: #0F1512; }
.glightbox .glb-close:focus-visible,
.glightbox .glb-nav:focus-visible { outline: 2px solid #E0C079; outline-offset: 3px; }

.glightbox .glb-close {
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
}
.glightbox .glb-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.glightbox .glb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
}
.glightbox .glb-nav:hover { transform: translateY(-50%) scale(1.06); }
.glightbox .glb-prev { left: 22px; }
.glightbox .glb-next { right: 22px; }
.glightbox .glb-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .glightbox { padding: 16px; }
  .glightbox .glb-nav { width: 44px; height: 44px; }
  .glightbox .glb-prev { left: 10px; }
  .glightbox .glb-next { right: 10px; }
  .glightbox .glb-close { top: 14px; right: 14px; }
}