/* Hero Video Slider - estilos del front */

.hvs-hero {
	position: relative;
	width: 100%;
	height: var(--hvs-height, 70vh);
	overflow: hidden;
	background: #000;
}

/* Alto especifico para moviles. Usa la variable --hvs-height-mobile que
   define el shortcode; por defecto 60vh si no se seteo. El !important es
   para ganarle a themes (como Tamashi) que imponen alto propio en movil. */
@media (max-width: 767px) {
	.hvs-hero {
		height: var(--hvs-height-mobile, 60vh) !important;
		min-height: var(--hvs-height-mobile, 60vh) !important;
	}
}

/* Ancho completo: rompe el contenedor centrado del theme y ocupa todo el viewport.
   Usamos posicionamiento relativo al viewport, mas confiable que los margenes
   negativos cuando el contenedor del theme no esta perfectamente centrado. */
.hvs-hero.hvs-full-width {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.hvs-stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hvs-player-target,
.hvs-player-target iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

/* El reproductor (video) queda en la capa base. */
.hvs-player-target {
	position: relative;
	z-index: 1;
}

/* El iframe de Vimeo viene envuelto; asegurar que llene el area. */
.hvs-player-target > div,
.hvs-player-target .vp-center {
	width: 100% !important;
	height: 100% !important;
}

/* Modo "cover": el video llena todo el hero sin barras negras, escalando
   el iframe 16:9 hasta cubrir el area y recortando lo que sobra.
   Se activa con la opcion "Llenar todo el area (sin barras)".

   Tecnica: el iframe se dimensiona al MAYOR entre (ancho completo, alto*16/9)
   y (alto completo, ancho*9/16), centrado y recortado por overflow:hidden.
   Usamos unidades relativas al contenedor (%) que son mas fiables que vw/vh. */
.hvs-hero.hvs-cover .hvs-stage {
	overflow: hidden !important;
}

.hvs-hero.hvs-cover .hvs-player-target {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	transform: none !important;
	z-index: 1 !important;
}

/* El JS aplica el tamano final en px sobre el iframe; estas reglas son el
   respaldo y, sobre todo, neutralizan los max-width que el theme Tamashi/Qode
   impone sobre embeds (que es lo que dejaba el video como cajita centrada). */
.hvs-hero.hvs-cover .hvs-player-target iframe,
.hvs-hero.hvs-cover .hvs-player-target > div {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	transform: translate( -50%, -50% ) !important;
	border: 0 !important;
}

/* Capa que tapa el play/pause central y el branding de YouTube e impide
   clicks sobre el reproductor. Por encima del video (z-index 1), por debajo
   de los controles del slider (que llevan z-index 10+). */
.hvs-click-blocker {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: transparent;
	cursor: default;
	pointer-events: auto;
}

/* Botones de navegacion */
.hvs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: 0;
	width: 48px;
	height: 48px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s ease;
}

.hvs-nav:hover {
	background: rgba(0, 0, 0, 0.7);
}

.hvs-prev { left: 16px; }
.hvs-next { right: 16px; }

/* Boton de activar sonido */
.hvs-unmute {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 11;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.2s ease;
}

.hvs-unmute:hover {
	background: rgba(0, 0, 0, 0.8);
}

.hvs-unmute.is-muted .hvs-unmute-text::after {
	content: '';
}

/* Dots */
.hvs-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	display: flex;
	gap: 8px;
}

.hvs-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hvs-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* Aviso de admin cuando no hay videos */
.hvs-empty {
	padding: 24px;
	background: #fff3cd;
	border: 1px solid #ffeeba;
	color: #856404;
	border-radius: 6px;
	font-size: 14px;
}

/* Responsive */
@media (max-width: 600px) {
	.hvs-nav {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}
	.hvs-unmute-text {
		display: none;
	}
}