/* =========================================================
   XPROMEDIA — Selected Work video lightbox
   Loaded only on index.html. Purely additive: relies only on the
   tokens already defined in css/style.css (:root variables) and
   does not redefine or override any existing selector.
   ========================================================= */

.xpm-lightbox{
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, 0.94);
  padding: 64px 80px;
  opacity: 0;
  /* Author CSS's `display: flex` above wins over the UA default
     `[hidden]{display:none}` at equal specificity, so the closed
     lightbox would otherwise still sit here — invisible but fully
     interactive — and silently swallow every click on the page.
     pointer-events keeps it truly click-through until opened. */
  pointer-events: none;
  transition: opacity .25s ease;
}
.xpm-lightbox.xpm-visible{ opacity: 1; pointer-events: auto; }

.xpm-lightbox-video{
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, 95vw);
  max-height: 90vh;
  object-fit: contain;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(0.97);
  transition: transform .25s ease;
}
.xpm-lightbox.xpm-visible .xpm-lightbox-video{ transform: scale(1); }

.xpm-lightbox-close{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: var(--white, #fff);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.xpm-lightbox-close svg{ width: 18px; height: 18px; display: block; }
.xpm-lightbox-close:hover{
  border-color: var(--red, #e5202c);
  background: rgba(229,32,44,0.18);
  transform: scale(1.06);
}

.xpm-lightbox-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(10,10,10,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: var(--white, #fff);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.xpm-lightbox-nav svg{ width: 20px; height: 20px; display: block; }
.xpm-lightbox-nav:hover{
  border-color: var(--red, #e5202c);
  background: rgba(229,32,44,0.18);
}
.xpm-lightbox-prev{ left: 20px; }
.xpm-lightbox-next{ right: 20px; }

@media (max-width: 760px){
  .xpm-lightbox{ padding: 84px 12px 24px; }
  .xpm-lightbox-video{ max-width: 96vw; }
  .xpm-lightbox-close{ top: 14px; right: 14px; }
  .xpm-lightbox-nav{ width: 40px; height: 40px; }
  .xpm-lightbox-prev{ left: 6px; }
  .xpm-lightbox-next{ right: 6px; }
}