/* ============================================================================
   SECTOR 28 v4 — Lightbox del retrato del autor
   Fondo con scrim + halo de sodio, coherente con la dirección de arte
   ============================================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  background: color-mix(in oklab, var(--s28-ink) 92%, black);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out, ease);
}

/* [hidden] manda display:none por default del navegador — nunca lo
   sobreescribimos en .lightbox directo, o el overlay quedaría intercept-
   ando clicks en toda la pantalla incluso "invisible" (opacity:0). Solo
   pasa a flex cuando el atributo [hidden] ya no está presente. */
.lightbox:not([hidden]) {
  display: flex;
}

/* La presencia real (mostrar/ocultar, foco, lectura por lector de pantalla)
   la controla el atributo [hidden] desde JS — [data-open] solo anima el fade. */
.lightbox[data-open="true"] {
  opacity: 1;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: 640px;
  max-height: min(960px, 86vh);
  width: 100%;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease-out, ease);
}

.lightbox[data-open="true"] .lightbox__figure {
  transform: scale(1);
}

.lightbox__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(960px, 86vh);
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--s28-sodio) 28%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in oklab, var(--s28-sodio) 14%, transparent);
  background: var(--s28-ink-soft, #1c2128);
}

.lightbox__caption {
  margin: 14px 2px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--s28-paper-soft);
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--s28-sodio) 32%, transparent);
  background: rgba(15, 20, 25, 0.55);
  color: var(--s28-paper);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out, ease), background 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--s28-sodio);
  background: rgba(15, 20, 25, 0.8);
  transform: scale(1.06);
}

.lightbox__close:focus-visible {
  outline: 2px solid var(--s28-sodio);
  outline-offset: 3px;
}

.lightbox__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__figure {
    transition: none !important;
  }
}

@media print {
  .lightbox { display: none !important; }
}