/* Club BPS — parte del set custom-club-* (CSS global del sitio).
   Cargado como archivo fisico via index.php del template (registerAndUseStyle + ?v=filemtime).
   Partido desde el antiguo custom-club.css monolitico; un archivo por BLOQUE. */

/* ============================================================
   BLOQUE 10 — Portada + ícono de video en listados
   Cuando un artículo usa el post-format "video" de Helix Ultimate,
   los LISTADOS (categoría, relacionados, destacados, home) no deben
   reproducir el video — sólo mostrar una portada clickeable con un
   ícono de "play" superpuesto. El video interactivo (<video controls>)
   sigue existiendo tal cual únicamente en la vista de artículo
   completo. Estas clases las comparten dos generadores de HTML
   distintos: el JLayout joomla.content.blog.video_preview (categoría/
   relacionados/destacados) y el addon Articles de SPPB (home) — por
   eso el mismo look funciona en los dos sin duplicar CSS.
   ============================================================ */
.video-poster-link {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.video-poster-media {
  display: block;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}
.video-poster-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 26, 51, .55);
  color: var(--blanco);
  font-size: 18px;
  transition: background-color .2s ease, transform .2s ease;
}
/* Óptico: el triángulo de "play" del ícono queda visualmente
   descentrado (más peso a la izquierda) sin este offset */
.video-poster-play-icon i {
  margin-left: 3px;
}
.video-poster-link:hover .video-poster-play-icon,
.video-player-facade:hover .video-poster-play-icon {
  background: var(--azul-600);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Listado de categoría / relacionados / destacados: caja propia con
   relación de aspecto 16:9 — a diferencia del home, acá no hay una
   altura fija por sección ya definida en otro lado. */
.video-poster-ratio {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--azul-900);
}
.video-poster-ratio .video-poster-media {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Vista de artículo (layouts/joomla/content/blog/video.php): fachada
   con el mismo look que la portada de los listados de arriba, más el
   botón real de "play" (en vez de un link) — al hacer click, el JS del
   layout reemplaza el contenido de .video-player-facade por el player
   real (mismo <span class="video-poster-ratio"> como caja 16:9, así
   que no hace falta ninguna regla extra de tamaño para lo que se
   inyecta después). */
.video-player-facade {
  cursor: pointer;
}
.video-player-play-btn {
  border: 0;
  padding: 0;
  cursor: pointer;
}
.video-poster-ratio .video-player-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Home (addon SPPB): la altura de la portada ya la fija cada sección
   sobre el propio img/video (BLOQUE 4 y 7 más arriba, ya extendidos
   para incluir el selector "video") — acá sólo hace falta que el wrap
   sea positioning context para el ícono superpuesto. */
.sppb-article-image-wrap {
  position: relative;
}
/* Fallback cuando el video no tiene ninguna portada resoluble (p.ej.
   Vimeo sin miniatura estática): sin img/video no hay altura que
   heredar, así que se fija un mínimo razonable con el mismo fondo
   navy que el resto de los placeholders del sitio. */
.video-poster-link.video-poster-icon-only {
  min-height: 260px;
  background: var(--azul-900);
}