/**
 * Lightbox del widget pevideo cuando el video esta subido a la biblioteca.
 *
 * Que estaba roto
 * ---------------
 * pe-video-player.js recorta el video para que CUBRA LA TARJETA: al saltar el
 * evento "playing" mide el contenedor del widget (280x393 en el home) y con
 * gsap.set deja en linea width, height y x sobre .plyr__video-wrapper (709px,
 * 403px y -209px en el home). Esos estilos en linea sobreviven al abrir el
 * lightbox, asi que el reproductor se quedaba con el recorte de la tarjeta en
 * mitad de una capa oscura a pantalla completa.
 *
 * El plugin ya lo resuelve para reproductores incrustados con
 *   .lightbox-open .plyr__video-wrapper.plyr__video-embed { width/height: 100% !important }
 * pero un video de la biblioteca no lleva la clase .plyr__video-embed, asi que
 * ninguna regla lo pisaba. Esto anade el equivalente para html5.
 *
 * Y por debajo de 570px pe-core si acertaba al selector generico .plyr y le
 * daba 100vw x 100vh; como .plyr__video-wrapper trae fondo negro de Plyr y el
 * <video> lleva object-fit:contain, en telefono salia una pantalla negra con
 * una franja de video en medio.
 *
 * Como se dimensiona
 * ------------------
 * La caja se lleva a un porcentaje de la ventana y el <video> se contiene
 * dentro con object-fit, en vez de fijar una proporcion. Hace falta: el
 * showreel del home es 16:9 y las 38 fichas de portafolio son 1:1, y una caja
 * de proporcion fija dejaria mal a unas o a otras.
 *
 * Los fondos van transparentes a proposito: la caja es mayor que el video
 * siempre que las proporciones no coincidan, y el negro de Plyr se pintaria
 * como un rectangulo opaco sobre la capa. Eso era el efecto de "bandas
 * negras". Transparente deja ver la capa oscura y el video queda centrado.
 *
 * Todo cuelga de .lightbox-open, asi que la tarjeta en linea y su recorte de
 * cover siguen intactos al cerrar.
 */

.pe-video.lightbox-open .plyr.plyr--html5 {
	width: 92vw;
	height: 86vh;
	max-width: 92vw;
	max-height: 86vh;
	background: transparent;
}

/*
 * !important es obligatorio: compite contra estilos en linea de GSAP, no
 * contra otra hoja. Es la misma tactica que usa pe-core en su regla gemela
 * para .plyr__video-embed.
 */
.pe-video.lightbox-open .plyr.plyr--html5 .plyr__video-wrapper {
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	/*
	 * El fondo tambien necesita !important, y por otro motivo: pe-core pinta
	 * .pe-video.vid--interracted.vid--paused .plyr__video-wrapper de #000
	 * !important, y la clase vid--paused se queda pegada al contenedor aunque
	 * el video este reproduciendo (su JS solo la quita en una rama que no
	 * siempre se cumple). Sin esto, el sobrante alrededor de un video 1:1 se
	 * pinta como un rectangulo negro: las "bandas negras" reportadas.
	 * Va acotado a .lightbox-open, asi que la tarjeta conserva su negro al
	 * pausar, que ahi si es lo que el plugin busca.
	 */
	background: transparent !important;
}

.pe-video.lightbox-open .plyr.plyr--html5 video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

.pe-video.lightbox-open .plyr.plyr--html5 .plyr__poster {
	background-size: contain;
	background-color: transparent;
}

@media only screen and ( max-width: 570px ) {
	/*
	 * Anula el 100vw x 100vh de pe-core. La especificidad ya gana, pero en
	 * telefono se aprovecha algo mas de pantalla que en escritorio porque no
	 * hay nada alrededor que merezca verse. 88vh y no 100vh por la barra de
	 * direcciones.
	 */
	.pe-video.lightbox-open .plyr.plyr--html5 {
		width: 94vw;
		height: 88vh;
		max-width: 94vw;
		max-height: 88vh;
	}
}