/* Archive lightbox — minimal HUD (close + fullscreen + prev/next), no
   caption, no slideshow. Ported and trimmed from timtrautmann.com. */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  overflow: hidden;
  background-color: #000;
}

#lightbox[hidden] { display: none; }

#lightbox button {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

#lightbox-close,
#lightbox-fullscreen {
  position: fixed;
  top: 14px;
  z-index: 100;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.35);
  transition: opacity 200ms, background-color 150ms;
}

#lightbox-close     { right: 14px; }
#lightbox-fullscreen { left: 14px; }

#lightbox-close:hover,
#lightbox-fullscreen:hover { background-color: rgba(0, 0, 0, 0.6); }

#lightbox-close svg,
#lightbox-fullscreen svg { display: block; }

#lightbox-media {
  position: fixed;
  inset: 20px;
}

#lightbox:fullscreen       { outline: none; }
#lightbox:fullscreen #lightbox-media { inset: 0; }

.lightbox-img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  z-index: 3;
  position: absolute;
  inset: 0;
  transition: opacity 500ms ease;
}

.lightbox-img.lb-hidden { opacity: 0; }

#lightbox-back,
#lightbox-next {
  position: fixed;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 200ms, background-color 150ms;
}

#lightbox-back { left: 14px; }
#lightbox-next { right: 14px; }

#lightbox-back:hover,
#lightbox-next:hover { background-color: rgba(0, 0, 0, 0.6); }

#lightbox-back:disabled,
#lightbox-next:disabled { visibility: hidden; }

#lightbox-back svg,
#lightbox-next svg { display: block; }

/* Swipe hint — shown once per session on the first touch open. */
#lightbox-swipe-hint {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

#lightbox-swipe-hint.visible {
  animation: lb-swipe-hint-fade 2.5s ease forwards;
}

@keyframes lb-swipe-hint-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Pointer devices: chrome hidden by default, revealed on hover; fades after idle. */
@media (hover: hover) {
  #lightbox-close,
  #lightbox-fullscreen { opacity: 0; }

  #lightbox:hover:not(.lightbox-idle) #lightbox-close,
  #lightbox:hover:not(.lightbox-idle) #lightbox-fullscreen,
  #lightbox:hover:not(.lightbox-idle) #lightbox-back,
  #lightbox:hover:not(.lightbox-idle) #lightbox-next { opacity: 1; }

  #lightbox.lightbox-idle { cursor: none; }

  #lightbox-swipe-hint { display: none; }
}

/* Touch devices: chrome visible until idle, arrows hidden (swipe instead). */
@media (hover: none) {
  #lightbox-back,
  #lightbox-next { display: none; }

  #lightbox.lightbox-idle #lightbox-close,
  #lightbox.lightbox-idle #lightbox-fullscreen {
    opacity: 0;
    pointer-events: none;
  }
}

/* Hide the fullscreen toggle on small phones — Fullscreen API is flaky
   on iOS Safari and there's no screen space to justify the control. */
@media (hover: none) and (max-width: 48rem) {
  #lightbox-fullscreen { display: none; }
}

/* Scoped to the lightbox so it doesn't clash with Tailwind's global
   `.hidden` utility (used by the archive header for responsive visibility). */
#lightbox .hidden { display: none; }