/* =============================================================================
   Lightbox — Aspaldiko
   <dialog> reutilizable para previsualizar PDF (iframe nativo) o vídeo
   (<video> MP4 local). Usado en Certificaciones ISO / Políticas (PDF) y
   el vídeo "25 años". El src se inyecta al abrir y se vacía al cerrar (lazy).

   Markup esperado (lo marca la Tanda C):
     <button data-lightbox-open
             data-lightbox-type="pdf"
             data-lightbox-src="/wp-content/uploads/iso-9001.pdf"
             data-lightbox-title="Certificado ISO 9001">Ver certificado</button>
     <a href="/wp-content/uploads/iso-9001.pdf" download>Descargar PDF</a>  ← fallback

   El <dialog class="lightbox" data-lightbox> lo inyecta el JS una sola vez.
   ========================================================================== */

.lightbox {
  width: min(64rem, calc(100vw - 2 * var(--space-5)));
  max-width: 64rem;
  max-height: calc(100vh - 2 * var(--space-6));
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.lightbox[open] {
  margin: auto;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox__box {
  position: relative;
  display: flex;
  flex-direction: column;
}

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--t-fast);
}

.lightbox__close:hover {
  background: #fff;
  color: var(--color-burgundy);
}

.lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Contenedor del medio. Mantiene ratio para vídeo; alto fijo cómodo para PDF. */
.lightbox__media {
  width: 100%;
  background: #000;
}

.lightbox__media iframe {
  display: block;
  width: 100%;
  height: min(80vh, 48rem);
  border: none;
  background: #fff;
}

.lightbox__media video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 2 * var(--space-6));
  background: #000;
}

@media (max-width: 767px) {
  .lightbox__media iframe {
    height: 70vh;
  }
}