/*
 * Enfoque Scroll Video - estilos encapsulados.
 * Todo queda bajo .ei-scroll-video; no se usan selectores globales de
 * etiqueta (video, iframe, section, body, *) fuera de este scope. El
 * widget solo anima sus propios elementos internos, nunca bloques
 * externos.
 */

.ei-scroll-video {
	position: relative;
	max-width: 100%;
	width: 100%;
	overflow: visible;
	/* Altura visual base (--ei-sv-min-height) siempre resuelta por el
	 * control responsive nativo de Elementor (nunca por JS) + recorrido
	 * extra de scroll (--ei-sv-scene-extra) que el JS anade solo cuando
	 * el sticky+zoom estan activos en el dispositivo actual. En reposo
	 * ambas partes existen siempre (con fallback 0px), por lo que nunca
	 * se fuerza una altura no configurada por el usuario. */
	/* --ei-sv-effective-min-height (calculado por JS: max(altura manual,
	 * altura del video final + margen de seguridad) + duracion extra de
	 * escena) tiene prioridad; el calc() de abajo es solo el fallback antes
	 * de que el JS termine de medir (primer pintado / sin JS). */
	min-height: var( --ei-sv-effective-min-height, calc( var( --ei-sv-min-height, 0px ) + var( --ei-sv-scene-extra, 0px ) ) );
}

/* Contenedor sticky: cuando esta activo (is-sticky-active) se fija
 * durante el recorrido de scroll extra; cuando no, es un contenedor de
 * flujo normal alineado segun los controles de alineacion elegidos. */
.ei-scroll-video__sticky {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

.ei-scroll-video.is-sticky-active .ei-scroll-video__sticky {
	position: sticky;
	top: 0;
	/* Mientras esta fijado, ocupa la MISMA altura visual base configurada
	 * (no 100vh fijo), para que el recorte de pantalla sea coherente con
	 * la altura minima elegida por el usuario en cada breakpoint. */
	/* --ei-sv-effective-base-height: igual que --ei-sv-effective-min-height
	 * pero SIN la duracion extra de escena (esa solo se anade al widget
	 * completo, no al contenedor sticky en si). Fallback igual que arriba. */
	min-height: var( --ei-sv-effective-base-height, var( --ei-sv-min-height, 0px ) );
	z-index: 1;
}

/* Escenario: su ancho REAL es SIEMPRE el ancho final configurado (lo fija
 * el JS una sola vez al iniciar, nunca se anima durante el scroll: el
 * video/iframe interno mantiene asi su tamano de pixeles maximo desde el
 * principio, evitando redimensionados repetidos que degradan la calidad,
 * especialmente en YouTube). El aspecto "empieza mas pequeno" del estado
 * inicial lo aporta unicamente el transform:scale de .ei-scroll-video__inner.
 * Nunca puede superar el 100% del contenedor padre. */
.ei-scroll-video__stage {
	position: relative;
	width: 50%;
	max-width: 100%;
}

/* Wrapper de transformacion: el movimiento (translate) y el zoom
 * (scale) del propio video se aplican aqui, nunca sobre el elemento que
 * controla el ancho, para evitar conflictos de layout. */
.ei-scroll-video__inner {
	width: 100%;
	transform: translate3d( 0, 0, 0 ) scale( 1 );
	/* IMPORTANTE: 'top center', no 'center center'. La caja de este
	 * elemento mide siempre el tamano FINAL del video (ver comentario en
	 * .ei-scroll-video__stage): el aspecto reducido inicial es solo un
	 * transform:scale() visual. Con origin en el centro, ese escalado
	 * hacia abajo deja el video pequeno visualmente centrado dentro de
	 * su caja grande (parece "escondido en medio del stage"). Con origin
	 * arriba, el borde superior visual coincide siempre con el borde
	 * superior de la caja, para cualquier escala: el video asoma desde
	 * arriba y crece hacia abajo. */
	transform-origin: top center;
	will-change: transform;
}

.ei-scroll-video__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
	/* Recorte opcional del estado inicial ("Cantidad visible inicial").
	 * 0% = sin recorte (video completo visible), fallback seguro cuando
	 * el JS aun no ha aplicado nada o la funcion no esta configurada. */
	clip-path: inset( 0 0 var( --ei-sv-media-clip-bottom, 0% ) 0 );
}

/* Cuando hay video responsive configurado (dos variantes en el marcado),
 * .media deja de imponer su propia proporcion: la altura la determina
 * siempre la variante realmente visible (cada una con su propio
 * aspect-ratio, ver .ei-scroll-video__variant abajo), porque el video
 * responsive puede tener una resolucion o proporcion distinta a la del
 * video de escritorio (vertical, cuadrado, etc.). */
.ei-scroll-video__media.ei-scroll-video__media--has-variants {
	aspect-ratio: auto;
}

.ei-scroll-video__video,
.ei-scroll-video__iframe-wrap,
.ei-scroll-video__iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ei-scroll-video__video {
	object-fit: contain;
	object-position: center center;
}

/* Evita interaccion accidental (hover/click) en video decorativo. Se
 * desactiva automaticamente si el widget no es decorativo. */
.ei-scroll-video[aria-hidden="true"] .ei-scroll-video__video,
.ei-scroll-video[aria-hidden="true"] .ei-scroll-video__iframe-wrap {
	pointer-events: none;
}

.ei-scroll-video__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 24px;
	text-align: center;
	background: rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, 0.5);
	font-size: 14px;
}

/* Estados generales de la instancia (ganchos para estilos personalizados,
 * todos encapsulados bajo el propio widget). */
.ei-scroll-video.is-animating .ei-scroll-video__stage {
	/* gancho para estilos personalizados durante la animacion */
}

.ei-scroll-video.is-complete .ei-scroll-video__stage {
	/* gancho para estilos de estado final */
}

/* Reduced motion: video en su estado inicial estable, sin zoom
 * progresivo ni sticky. */
@media (prefers-reduced-motion: reduce) {
	.ei-scroll-video__stage,
	.ei-scroll-video__inner {
		transition: none !important;
	}

	.ei-scroll-video.is-sticky-active .ei-scroll-video__sticky {
		position: static;
		min-height: 0;
	}
}

/* Responsive basico: evitar desbordes horizontales en pantallas pequenas */
@media (max-width: 767px) {
	.ei-scroll-video,
	.ei-scroll-video__sticky,
	.ei-scroll-video__stage {
		max-width: 100%;
	}
}

/* =====================================================================
 * RESPONSIVE ESTATICO (tablet y movil, <=1024px)
 * Por debajo de desktop el widget deja de animarse: nada de scroll
 * animation, sticky, zoom ni movimiento (lo desactiva el propio JS de
 * forma real, ver resetResponsiveStaticMode() en scroll-video.js). Estas
 * reglas son un respaldo puramente CSS, siempre encapsulado bajo
 * .ei-scroll-video, para garantizar que el video jamas queda sticky,
 * fixed o transformado aunque el JS no haya cargado todavia o este en
 * transicion entre breakpoints.
 * ===================================================================== */
@media (max-width: 1024px) {
	.ei-scroll-video {
		max-width: 100%;
		overflow: visible;
		box-sizing: border-box;
	}

	.ei-scroll-video__sticky {
		position: relative !important;
		top: auto !important;
		z-index: auto;
	}

	.ei-scroll-video__sticky,
	.ei-scroll-video__inner {
		transform: none !important;
	}

	.ei-scroll-video__stage {
		height: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	.ei-scroll-video__media {
		max-width: 100%;
	}
}

/* =====================================================================
 * VIDEO RESPONSIVE (fuente alternativa opcional en tablet/movil)
 * Cuando el widget tiene configurado un video distinto para tablet y/o
 * movil, el marcado incluye dos variantes (.ei-scroll-video__variant),
 * alternadas UNICAMENTE por CSS segun el ancho real del viewport: nunca
 * se decide en PHP (no es fiable) ni depende de que el JS haya
 * terminado de cargar. Si no hay video responsive configurado, este
 * marcado extra ni siquiera se genera (ver render() en el PHP), por lo
 * que estas reglas no tienen ningun efecto en ese caso. */
/* Cada variante es su propia caja posicionada, con su propia proporcion
 * (fijada por PHP via style="aspect-ratio: ...;" segun lo configurado en
 * "Video responsive"; 16:9 aqui es solo el fallback si por lo que sea no
 * llega el inline style). Esto es lo que permite que el video responsive
 * tenga una resolucion/encuadre distinto al de escritorio: la que este
 * visible en cada momento es la que manda la altura real del bloque. */
.ei-scroll-video__variant {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.ei-scroll-video__variant--desktop {
	display: block;
}

.ei-scroll-video__variant--responsive {
	display: none;
}

/* ---------------------------------------------------------------------
 * Respaldo por @media pura (primer pintado, antes de que el JS actue, o
 * si por lo que sea no llega a ejecutarse). Usa el ancho real del
 * viewport con los mismos breakpoints por defecto del sitio (768-1024
 * tablet, <=767 movil). Queda anulada en cuanto el JS fija
 * [data-ei-sv-device] en el elemento (ver bloque de mayor especificidad
 * mas abajo), que es la fuente de verdad real (incluye el editor de
 * Elementor, donde el ancho del iframe de preview no siempre coincide
 * con el breakpoint seleccionado en la barra superior).
 * --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.ei-scroll-video[data-ei-sv-rv-tablet] .ei-scroll-video__variant--desktop {
		display: none;
	}
	.ei-scroll-video[data-ei-sv-rv-tablet] .ei-scroll-video__variant--responsive {
		display: block;
	}
}

@media (max-width: 767px) {
	.ei-scroll-video[data-ei-sv-rv-mobile] .ei-scroll-video__variant--desktop {
		display: none;
	}
	.ei-scroll-video[data-ei-sv-rv-mobile] .ei-scroll-video__variant--responsive {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * Anulacion autoritativa via JS (scroll-video.js, syncDeviceAttribute()):
 * mayor especificidad que las reglas @media de arriba y SIN necesidad de
 * @media (no depende del ancho del viewport en el momento en que se
 * evalua el CSS, solo del dispositivo que el JS ha determinado con la
 * API de Elementor). Soluciona el caso en que el preview "Tablet" del
 * editor no coincide exactamente con el rango de ancho 768-1024px.
 * --------------------------------------------------------------------- */
.ei-scroll-video[data-ei-sv-device="desktop"] .ei-scroll-video__variant--desktop {
	display: block;
}
.ei-scroll-video[data-ei-sv-device="desktop"] .ei-scroll-video__variant--responsive {
	display: none;
}
.ei-scroll-video[data-ei-sv-device="tablet"][data-ei-sv-rv-tablet] .ei-scroll-video__variant--desktop {
	display: none;
}
.ei-scroll-video[data-ei-sv-device="tablet"][data-ei-sv-rv-tablet] .ei-scroll-video__variant--responsive {
	display: block;
}
.ei-scroll-video[data-ei-sv-device="mobile"][data-ei-sv-rv-mobile] .ei-scroll-video__variant--desktop {
	display: none;
}
.ei-scroll-video[data-ei-sv-device="mobile"][data-ei-sv-rv-mobile] .ei-scroll-video__variant--responsive {
	display: block;
}