/*
 * Ritocchi a Plyr per il player della app studente (assets/wire-lezioni.js).
 *
 * Stanno qui e non altrove per un motivo preciso: plyr.css accanto e' una copia
 * vendored di Tutor LMS e non si modifica, app.css e' il contratto di design del
 * mockup. Questo file contiene solo cio' che serve a Plyr dentro Mentium.
 */

/*
 * Il riquadro del player. Larghezza e altezza NON stanno qui: le calcola
 * dimensionaPlyrWrap() in wire-lezioni.js, perche' un 16:9 deve stare intero
 * dentro un palco che a volte e' piu' largo di 16:9 e a volte piu' alto, e in
 * CSS quel "sta dentro in entrambe le direzioni" non si esprime senza container
 * query sul palco (che vive in app.css e non si tocca).
 *
 * Le --plyr-* sono variabili di Plyr, non del mockup: l'arancio e l'ambra sono
 * gli stessi della barra del mockup (--orange / --amber in app.css).
 */
.mnt-plyr-wrap {
	position: relative;
	z-index: 2;
	--plyr-color-main: #ed9700;
	--plyr-range-thumb-background: #ffba00;
	--plyr-video-background: #000;
	--plyr-font-family: inherit;
}

/*
 * Ritaglio del chrome di YouTube.
 *
 * Plyr 3.8.4 porta ancora la regola .plyr__video-embed > .plyr__video-embed__container
 * (il ritaglio al 240%) ma non aggiunge piu' quel contenitore: verificato nel DOM
 * reso, l'iframe e' figlio diretto di .plyr__video-embed. Senza ritaglio la barra
 * del titolo di YouTube (titolo, canale, condividi, "Guarda su YouTube") resta
 * visibile sopra il video appena si mette in pausa, cioe' esattamente quello di
 * cui il proprietario si e' lamentato.
 *
 * Come funziona: l'iframe e' alto il 300% del contenitore e alzato del 100%,
 * quindi resta centrato. YouTube al suo interno tiene il video in 16:9 centrato
 * verticalmente, cioe' proprio nella finestra visibile, e il suo chrome (ancorato
 * ai bordi dell'iframe) finisce fuori dal ritaglio, che .plyr__video-wrapper
 * taglia con overflow:hidden. Mai scale(): sposterebbe anche il centro.
 */
.mnt-plyr-wrap .plyr__video-embed iframe {
	top: -100%;
	height: 300%;
}