/**
 * lightbox.css — Estilos del visor de imagen modal.
 *
 * Carga después de tailwind.css. Sin Tailwind utilities — todas reglas custom
 * para no requerir rebuild al ajustar.
 *
 * Estructura DOM (creada por lightbox.js):
 *   .expy-lightbox                  ← overlay full-screen, role=dialog
 *   ├── .expy-lightbox__close       ← top-right
 *   ├── .expy-lightbox__prev        ← left center
 *   ├── .expy-lightbox__next        ← right center
 *   ├── .expy-lightbox__figure
 *   │   └── .expy-lightbox__img
 *   └── .expy-lightbox__counter     ← bottom center "3 / 5"
 *
 * @package EXPY
 */

.expy-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--expy-color-ink) 95%, transparent);
    opacity: 0;
    transition: opacity 220ms ease-out;
}

/* CRÍTICO — el estado oculto necesita specificidad estrictamente mayor que
   `.expy-lightbox { display:flex }`. La regla UA `[hidden]{display:none}`
   tiene specificidad (0,0,1,0) — IGUAL a la clase — y como `.expy-lightbox`
   carga después en cascada, GANA, dejando el overlay con display:flex aunque
   tenga el atributo hidden. Resultado del bug previo: position:fixed + inset:0
   + z-index:9999 + opacity:0 → overlay invisible que captura todo click/hover
   en cualquier página con triggers [data-lightbox-group] (home, expylab,
   ediciones). Self-reference sube specificidad a (0,0,2,0) y resuelve.
   Mismo patrón aplicado abajo para .expy-lightbox__close/prev/next/counter. */
.expy-lightbox[hidden] {
    display: none;
}

.expy-lightbox.is-visible {
    opacity: 1;
}

/* Body lock — evita scroll detrás del modal sin layout shift por scrollbar. */
body.expy-lightbox-open {
    overflow: hidden;
}

/* Figure + img: centro absoluto, escalado a viewport. */
.expy-lightbox__figure {
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expy-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--expy-radius-sm);
    /* Evita drag de la imagen en desktop (ruido visual durante interacción). */
    user-select: none;
    -webkit-user-drag: none;
}

/* Buttons base — tipografía display, fondo translúcido, focus ring brand. */
.expy-lightbox__close,
.expy-lightbox__prev,
.expy-lightbox__next {
    position: absolute;
    border: 0;
    background-color: color-mix(in srgb, var(--expy-color-ink) 60%, transparent);
    color: var(--expy-color-cream);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: background-color 180ms ease-out, transform 180ms ease-out;
}

.expy-lightbox__close:hover,
.expy-lightbox__prev:hover,
.expy-lightbox__next:hover,
.expy-lightbox__close:focus-visible,
.expy-lightbox__prev:focus-visible,
.expy-lightbox__next:focus-visible {
    background-color: var(--expy-color-primary);
    color: var(--expy-color-cream);
}

.expy-lightbox__close:focus-visible,
.expy-lightbox__prev:focus-visible,
.expy-lightbox__next:focus-visible {
    outline: 2px solid var(--expy-color-cream);
    outline-offset: 3px;
}

.expy-lightbox__close[hidden],
.expy-lightbox__prev[hidden],
.expy-lightbox__next[hidden],
.expy-lightbox__counter[hidden] {
    display: none;
}

/* Close — top-right, con margen seguro. */
.expy-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
}
.expy-lightbox__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Prev/Next — sides, vertically centered. */
.expy-lightbox__prev,
.expy-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
}
.expy-lightbox__prev svg,
.expy-lightbox__next svg {
    width: 1.5rem;
    height: 1.5rem;
}
.expy-lightbox__prev { left: 1rem; }
.expy-lightbox__next { right: 1rem; }

/* Hover preserva el translateY del centro vertical. */
.expy-lightbox__prev:hover,
.expy-lightbox__next:hover,
.expy-lightbox__prev:focus-visible,
.expy-lightbox__next:focus-visible {
    transform: translateY(-50%) scale(1.05);
}

/* Counter — bottom center, tipografía display caps tracked. */
.expy-lightbox__counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--expy-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--expy-color-cream);
    background-color: color-mix(in srgb, var(--expy-color-ink) 50%, transparent);
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
}

/* Trigger UX — cursor:zoom-in en cualquier elemento con data-lightbox-group
   activado. Aplica a <button> wrappers y a <a> si alguien los usa. */
[data-lightbox-group] {
    cursor: zoom-in;
}
[data-lightbox-group]:focus-visible {
    outline: 2px solid var(--expy-color-focus-ring);
    outline-offset: 3px;
}

/* Reset visual de <button data-lightbox-group> — sin background ni padding,
   queda como wrapper transparente alrededor de la <img>. */
button[data-lightbox-group] {
    border: 0;
    padding: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile tweaks — buttons un poco más chicos, márgenes ajustados. */
@media (max-width: 640px) {
    .expy-lightbox__close {
        width: 2.5rem;
        height: 2.5rem;
        top: 0.75rem;
        right: 0.75rem;
    }
    .expy-lightbox__prev,
    .expy-lightbox__next {
        width: 2.5rem;
        height: 2.5rem;
    }
    .expy-lightbox__prev { left: 0.5rem; }
    .expy-lightbox__next { right: 0.5rem; }
    .expy-lightbox__figure {
        max-width: 96vw;
        max-height: 82vh;
    }
    .expy-lightbox__img {
        max-height: 82vh;
    }
}

/* Reduced motion — sin transiciones de fade ni hover scale. */
@media (prefers-reduced-motion: reduce) {
    .expy-lightbox,
    .expy-lightbox__close,
    .expy-lightbox__prev,
    .expy-lightbox__next {
        transition: none;
    }
    .expy-lightbox__prev:hover,
    .expy-lightbox__next:hover,
    .expy-lightbox__prev:focus-visible,
    .expy-lightbox__next:focus-visible {
        transform: translateY(-50%);
    }
}