/* Shared full-screen media viewer: click any screenshot or video to zoom.
   Used by earnm.html, safe-global.html, mcmakler.html — DOM is injected by lightbox.js. */

.lb-media-wrap {
  position: relative;
  cursor: zoom-in;
}
.lb-media-wrap img,
.lb-media-wrap video { display: block; }

.lb-hint {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text); background: rgba(250,250,248,0.92);
  border: 1px solid var(--divider); border-radius: 999px;
  padding: 6px 12px; backdrop-filter: blur(4px);
  transition: background 200ms, opacity 200ms;
  opacity: 0; pointer-events: none;
}
.lb-media-wrap:hover .lb-hint,
.lb-media-wrap:focus-visible .lb-hint { opacity: 1; background: rgb(250,250,248); }
@media (hover: none) { .lb-hint { opacity: 1; } }

/* Modal */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.93);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
}
.lightbox[hidden] { display: none; }
.lb-stage { position: relative; line-height: 0; }
.lb-img, .lb-video {
  max-width: 97vw; max-height: 86vh; display: block;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
}
.lb-img[hidden], .lb-video[hidden] { display: none; }
.lb-cap {
  max-width: 720px; text-align: center; padding: 0 24px;
  font-size: 12px; color: rgb(205,205,200); line-height: 1.6;
}
.lb-close {
  position: fixed; top: 16px; right: 22px; z-index: 1001;
  font-size: 30px; line-height: 1; color: #fff;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.lb-tip {
  position: fixed; bottom: 20px; left: 0; right: 0; text-align: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(170,170,165); pointer-events: none;
}
@media (hover: none) { .lb-tip { display: none; } }