/* ================================================================
   STUDIO G — Adaptive Lightbox  v8  (no zoom)
   The viewer box (.lb-area) is sized in JS (pixels). These styles
   only handle appearance + fitting the media, so a cached copy can
   never leave the viewer with no size.
   ================================================================ */

/* ── Full-page backdrop ──────────────────────────── */
.lb-wrap {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.0);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.28s ease, background 0.28s ease;
}
.lb-wrap.lb-show {
    opacity: 1;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.88);
}

/* ── Content area (size set by JS) ───────────────── */
.lb-area {
    position: fixed;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    animation: lbAreaIn 0.28s ease both;
}
@keyframes lbAreaIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Image wrapper ───────────────────────────────── */
.lb-img-wrap {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Photo — fits the area, any resolution/ratio ─── */
.lb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Video — fills the area, letterboxed by contain ─ */
.lb-vid {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    background: #080808;
}

/* ── Close button ────────────────────────────────── */
.lb-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 4;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lb-close:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.08);
}
.lb-close svg { width: 18px; height: 18px; pointer-events: none; }

/* ── Navigation buttons ──────────────────────────── */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:  44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.lb-nav:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.75);
    transform: translateY(-50%) scale(1.08);
}
.lb-nav svg { width: 18px; height: 18px; pointer-events: none; }
.lb-prev    { left:  16px; }
.lb-next    { right: 16px; }

/* ── Counter  1 / 12 ─────────────────────────────── */
.lb-count {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: clamp(9px, 0.573vw, 11px);
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    white-space: nowrap;
    margin: 0;
    z-index: 3;
}

/* ── Keyboard hint (desktop) ─────────────────────── */
.lb-hint {
    position: fixed;
    bottom: 2.4%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: clamp(8px, 0.469vw, 9px);
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.22);
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Active cell indicator ───────────────────────── */
.photo-cell.lb-open,
.reel-cell.lb-open {
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: -1px;
}

/* ── Lock page scroll behind the overlay ─────────── */
html.lb-locked,
body.lb-locked { overflow: hidden !important; }

/* ================================================================
   MOBILE / TABLET (≤1024px) — appearance only (sizing is in JS).
   object-fit:contain on the media fits any photo/video to the screen
   in portrait OR landscape; rotating re-fits automatically.
   ================================================================ */
@media (max-width: 1024px) {
    .lb-close {
        top:   max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
    }
    .lb-prev { left:  max(8px, env(safe-area-inset-left)); }
    .lb-next { right: max(8px, env(safe-area-inset-right)); }
    .lb-count { bottom: max(12px, env(safe-area-inset-bottom)); }
    .lb-hint { display: none; }
}

/* Very short landscape phones: shrink buttons, hide counter */
@media (max-width: 1024px) and (max-height: 480px) and (orientation: landscape) {
    .lb-close,
    .lb-nav { width: 38px; height: 38px; }
    .lb-count { display: none; }
}