/* ---------------------------------------------
   VIDEO POPUP MODULE STYLES – subgrafica (final con efectos)
--------------------------------------------- */

/* =========================================
   Imagen y fondo base
========================================= */

.video-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0.90;
}

.video-background {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease-in-out; /* suaviza entrada y salida */
}

/* =========================================
   Ícono de play centrado
========================================= */

.video-play-icon {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  pointer-events: none; /* deja pasar el clic al contenedor */
}

/* NUEVO: contenedor clickeable del ícono */
.video-play-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
}

/* Mostrar ícono al hacer hover sobre la imagen */
.et_pb_video_popup_wrapper.has-video:hover .video-play-icon {
  opacity: .85;
}

/* Ocultar ícono si no hay video */
.et_pb_video_popup_wrapper.no-video .video-play-icon {
  display: none !important;
}

/* =========================================
   Overlay de meta info
========================================= */

.et_pb_video_popup_wrapper {
  position: relative;
}

.video-meta {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0;
  background: none;
  opacity: 1;
  pointer-events: auto;
  color: var(--bl);
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.video-meta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-title,
.video-subtitle,
.video-category {
  font-family: var(--ffa);
  font-weight: var(--fwl-reg);
  line-height: var(--flh1);
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  text-decoration: none;
  cursor: default;
  color: var(--bl);
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.video-title {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fwl-med);
}

.video-subtitle,
.video-category {
  font-size: var(--fs-h2) !important;
}

/* Hover en meta: color cambia a --bl */
.et_pb_video_popup_wrapper.has-video .video-meta:hover {
  color: var(--bl);
  text-decoration: underline;
  opacity: 1;
}

/* Aplicar color a íconos o pseudo-elementos dentro del meta */
.et_pb_video_popup_wrapper.has-video .video-meta:hover svg,
.et_pb_video_popup_wrapper.has-video .video-meta:hover::before,
.et_pb_video_popup_wrapper.has-video .video-meta:hover::after {
  fill: var(--bl2);
  color: var(--bl2);
}

/* =========================================
   Interactividad y estados
========================================= */

/* Hover en imagen: opacidad ligera */
.et_pb_video_popup_wrapper.has-video:hover .video-background {
  opacity: 0.85;
}

/* Desactivar interactividad si no hay video */
.et_pb_video_popup_wrapper.no-video .video-meta {
  pointer-events: none;
  color: var(--bl) !important;
  cursor: default !important;
}

.et_pb_video_popup_wrapper.no-video .video-background {
  opacity: 1 !important;
  transition: none !important;
}

/* Evitar clics en imagen */
.video-image-wrapper img {
  pointer-events: none;
}

/* Cursor de mano solo en meta */
.et_pb_video_popup_wrapper.has-video .video-meta {
  cursor: pointer;
}

/* Cursor tipo mano solo en textos dentro del meta */
.et_pb_video_popup_wrapper.has-video .video-meta .video-title,
.et_pb_video_popup_wrapper.has-video .video-meta .video-subtitle,
.et_pb_video_popup_wrapper.has-video .video-meta .video-category {
  cursor: pointer;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.0) !important;
  background: #000;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 767px) {
  .video-meta {
    left: 14px;
    right: 14px;
    bottom: 12px;
  }
  .video-title    { font-size: 16px; }
  .video-subtitle { font-size: 13px; }
  .video-category { font-size: 13px; }
}

/* =========================================
   Estilos Magnific Popup (fade)
========================================= */

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
  background-color: #0C0C0C;
}

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade .mfp-content {
  opacity: 0;
  transition: opacity 0.3s ease 0.3s;
}

.mfp-fade.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-removing .mfp-content {
  opacity: 0;
  transition-delay: 0s;
}

/* Botón cerrar del popup */
.mfp-close {
  position: fixed !important;
  top: 20px !important;
  right: 2% !important;
  padding-right: 0px !important;
  z-index: 9999999 !important;
  width: 20px;
  height: 20px;
  background: url('https://sbgrfc.com/martin/wp-content/themes/subgrafica-theme/data/img/close_bl_2@2x.png') no-repeat right center !important;
  background-size: contain !important;
  color: transparent;
  font-size: 0 !important;
  border: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.mfp-close:hover {
  opacity: 1 !important;
}
.mfp-bg,
.mfp-wrap {
  z-index: 999999 !important;
}

/* =========================================
   Animaciones auxiliares
========================================= */

@keyframes fadeInText {
  to { opacity: 1; }
}

@keyframes fadeInOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}