/* ═══════════════════════════════════════════════
   AURORA VIDAL — Lightbox (lightbox.css)
   Background: site color #F7F7F7.
   Top-left: expand/fullscreen.
   Top-right: × close only (no text).
   Side: thin chevron arrows.
═══════════════════════════════════════════════ */

#av-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         900;
  background:      var(--bg);
  display:         none;
  align-items:     center;
  justify-content: center;
}
#av-lightbox.open {
  display:   flex;
  animation: lbFadeIn .22s ease;
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Expand / Fullscreen (top-left) ─────────── */
#lb-expand {
  position:        absolute;
  top:             22px;
  left:            28px;
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px;
  transition:      color var(--transition-fast);
  z-index:         10;
}
#lb-expand:hover { color: var(--text); }

/* ── Close × (top-right) ────────────────────── */
#lb-close {
  position:        absolute;
  top:             22px;
  right:           28px;
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px;
  transition:      color var(--transition-fast);
  z-index:         10;
}
#lb-close:hover { color: var(--text); }

/* ── Side chevron arrows ─────────────────────── */
.lb-side-btn {
  position:     absolute;
  top:          50%;
  transform:    translateY(-50%);
  background:   none;
  border:       none;
  cursor:       pointer;
  color:        var(--border);
  padding:      28px 22px;
  transition:   color var(--transition-fast);
  user-select:  none;
  z-index:      10;
}
.lb-side-btn:hover   { color: var(--text); }
.lb-side-btn:disabled {
  opacity:        0;
  cursor:         default;
  pointer-events: none;
}
#lb-prev { left:  0; }
#lb-next { right: 0; }

/* ── Image area ──────────────────────────────── */
#lb-img-area {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  padding:         40px 75px 44px;
  box-sizing:      border-box;
}

/* Real image - expands to fill the viewport almost completely */
#lb-image {
  max-width:   calc(100vw - 150px);
  max-height:  calc(100vh - 90px);
  width:       auto;
  height:      auto;
  display:     none;   /* shown by JS when src set */
  object-fit:  contain;
  user-select: none;
}



/* ── Fullscreen specific enhancements ───────── */
:fullscreen #lb-img-area,
:-webkit-full-screen #lb-img-area {
  padding: 24px 60px 32px;
}
:fullscreen #lb-image,
:-webkit-full-screen #lb-image {
  max-width:  calc(100vw - 120px);
  max-height: calc(100vh - 64px);
}

/* ── Counter (bottom center) ─────────────────── */
#lb-counter {
  position:       absolute;
  bottom:         18px;
  left:           50%;
  transform:      translateX(-50%);
  font-size:      10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--muted);
  opacity:        .5;
  pointer-events: none;
  white-space:    nowrap;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  #lb-img-area { padding: 50px 20px 36px; }
  #lb-image    { max-width: calc(100vw - 40px); max-height: calc(100vh - 90px); }
  .lb-side-btn { padding: 14px 8px; }
  #lb-expand   { top: 14px; left: 16px; }
  #lb-close    { top: 14px; right: 16px; }
}