/* ─── RICH LIGHTBOX (shared across galleries) ─── */
#lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.97);
  display: none; opacity: 0;
  transition: opacity 0.2s;
}
#lightbox.open { display: flex; opacity: 1; }

.lb-inner { display: flex; width: 100%; height: 100%; }

.lb-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  border-right: 1px solid var(--border);
  position: relative;
  min-width: 0;
}

.lb-art-placeholder {
  width: 100%;
  max-width: 900px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-art-placeholder img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.lb-info {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #000;
}

.lb-info-top { padding: 20px 24px; border-bottom: 1px solid var(--border); }

/* ─── CLOSE BUTTON ───
   Default state is intentionally subdued — thin border, low-opacity
   dark backdrop just for readability over light video frames, dim
   text. Hover lights it up red so the affordance is unmistakable
   once a user moves toward it.

   Mobile drops the label and keeps a 44×44 X-only square (touch
   target minimum). Desktop shows "× CLOSE" so the action is
   explicit at first read. */
.lb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text, #d4d0c8);
  font-family: var(--mono, 'Space Mono', monospace);
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lb-close .lbc-x {
  font-size: 16px;
  line-height: 1;
  /* Optical centering: the × glyph sits a hair high in its em box */
  margin-top: -1px;
  opacity: 0.85;
}
.lb-close .lbc-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.lb-close:hover {
  background: rgba(192, 57, 43, 0.7);
  border-color: var(--red, #c0392b);
  color: #fff;
}
.lb-close:hover .lbc-x { opacity: 1; }
.lb-close:focus-visible {
  outline: 2px solid var(--red, #c0392b);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .lb-close {
    /* Mobile: drop the label, keep a 44×44 X-only square (touch
       target minimum). Default state stays subdued; tap red on
       active for a clear tactile press. */
    padding: 0;
    width: 44px;
    height: 44px;
    min-height: 0;
    justify-content: center;
    gap: 0;
  }
  .lb-close .lbc-label { display: none; }
  .lb-close .lbc-x { font-size: 18px; }
}

.lb-title {
  font-size: 14px; font-weight: 700;
  color: var(--bright);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.lb-artist { font-size: 11px; color: var(--red); letter-spacing: 2px; }

.lb-description {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--light, #aaa);
  line-height: 1.8;
}

.lb-meta-table { flex: 1; }
.lb-meta-row {
  display: flex; justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.lb-meta-key { color: var(--dim); }
.lb-meta-val { color: var(--text); text-align: right; }

.lb-actions {
  padding: 16px 24px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
}
.lb-btn {
  padding: 10px;
  border: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  cursor: pointer;
  background: transparent;
  text-align: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lb-btn:hover { color: var(--bright); border-color: var(--mid); }
.lb-btn.primary { border-color: var(--red); color: var(--red); }
.lb-btn.primary:hover { background: var(--red); color: #000; }
.lb-btn[disabled] {
  border-color: var(--border);
  color: var(--dim);
  cursor: default;
  opacity: 0.55;
  letter-spacing: 3px;
}
.lb-btn[disabled]:hover { background: transparent; color: var(--dim); border-color: var(--border); }

/* ─── MEDIA-ONLY MODE ─── */
/* Hides the info panel + nav so the artwork "comes to the front" alone. */
#lightbox.media-only .lb-info,
#lightbox.media-only .lb-nav { display: none; }
#lightbox.media-only .lb-art {
  border-right: none;
  padding: 40px;
}
#lightbox.media-only .lb-art-placeholder {
  background: transparent;
  max-width: none;
  width: auto;
}
#lightbox.media-only .lb-art-placeholder img,
#lightbox.media-only .lb-art-placeholder video {
  max-width: 92vw;
  max-height: 90vh;
}
@media (max-width: 900px) {
  #lightbox.media-only .lb-art {
    border-bottom: none;
    padding: 20px;
    min-height: 100vh;
  }
}

.lb-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0;
}
.lb-nav-btn {
  padding: 6px 16px;
  border: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  cursor: pointer;
  background: #000;
  transition: color 0.15s;
}
.lb-nav-btn:hover { color: var(--bright); }
.lb-nav-sep {
  padding: 6px 14px;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  background: #000;
}

@media (max-width: 900px) {
  .lb-inner { flex-direction: column; }
  .lb-art { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 20px 70px; min-height: 50vh; }
  .lb-info { width: 100%; max-height: 50vh; }
}