/**
 * Il riquadro "TV".
 *
 * Le misure e l'angolo arrivano dalle impostazioni, come custom property
 * scritte sull'elemento: il foglio resta uguale per tutti e cachabile, e
 * cambiare ancoraggio non lo tocca.
 *
 * Il riquadro è una colonna: la card e, dalla parte dell'angolo a cui è
 * ancorato, il tondo da 50px che la chiude e la riapre — la stessa misura del
 * "torna su" del tema e del badge dei cookie, alla stessa distanza dal bordo.
 * Il pulsante è allineato al lato dell'ancoraggio, quindi quando la card si
 * ripiega resta esattamente dov'era: non è un elemento che sparisce e uno che
 * appare, è lo stesso comando che cambia mestiere.
 *
 * Fra i due c'è la striscia, che è il tondo tirato per il largo quanto la card:
 * la locandina dietro, il titolo sopra. È la faccia con cui il riquadro si
 * presenta quando a volerlo ripiegato è il sito e non chi legge — dire quale
 * video c'è dietro è il minimo che si possa fare per farselo aprire.
 *
 * La scala dei piani, dal basso:
 *
 *   50         intestazione del sito
 *   300        il "torna su" del tema
 *   9999998    questo riquadro
 *   9999999    la barra dei cookie di CookieYes
 *   10000000   il pannello del menu mobile e il suo velo
 *   999999999  la finestra dei cookie di CookieYes
 *
 * Sopra al "torna su", perche' un riquadro con dentro un video che finisce
 * sotto a un pulsante e' peggio di un pulsante coperto — e comunque l'angolo
 * si sceglie dalle impostazioni, quindi sovrapporli e' una scelta.
 *
 * Sotto al menu e sotto ai cookie, e questo non e' negoziabile: un banner di
 * consenso che qualcosa copre e' un problema legale prima che estetico.
 *
 * Un piano sotto alla barra, non lo stesso: 9999999 era il valore della barra,
 * e a parita' di piano vince chi arriva dopo nel documento — il riquadro, che
 * il browser attacca in fondo al body a pagina gia' pronta. Il pareggio si
 * vedeva come un riquadro che copriva il consenso.
 *
 * Il valore e' una custom property: se il badge di CookieYes — che il suo
 * plugin colloca dove vuole — dovesse comunque vincere, si alza da un foglio
 * di stile senza toccare questo file.
 */

.igd-tv {
	display: flex;
	position: fixed;
	z-index: var(--igd-tv-layer, 9999998);
	flex-direction: column;
	gap: 10px;
	width: var(--igd-tv-w, 320px);
	max-width: calc(100vw - 2 * var(--igd-tv-x, 25px));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}

.igd-tv.is-open {
	opacity: 1;
	transform: none;
}

/* Chiuso è largo quanto il suo pulsante, che essendo allineato all'ancoraggio
   non si sposta di un pixel. La striscia invece tiene la larghezza della card:
   è la card ripiegata su una riga, non un pulsante. */

.igd-tv.is-closed {
	width: 50px;
}

@media (prefers-reduced-motion: reduce) {
	.igd-tv {
		transform: none;
		transition: none;
	}
}

/* Ancorato in alto il pulsante va sopra la card, ancorato in basso sotto:
   da quella parte c'è il bordo, ed è lì che deve restare. */

.igd-tv--top-left,
.igd-tv--top-center,
.igd-tv--top-right {
	flex-direction: column-reverse;
}

.igd-tv--top-left,
.igd-tv--bottom-left {
	align-items: flex-start;
	left: var(--igd-tv-x, 25px);
}

.igd-tv--top-right,
.igd-tv--bottom-right {
	align-items: flex-end;
	right: var(--igd-tv-x, 25px);
}

/* Centrati con i margini automatici, non con una translate: la transizione di
   entrata usa transform, e le due cose si toglierebbero di mezzo a vicenda. */

.igd-tv--top-center,
.igd-tv--bottom-center {
	right: 0;
	left: 0;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
}

.igd-tv--top-left,
.igd-tv--top-center,
.igd-tv--top-right {
	top: var(--igd-tv-y, 25px);
}

.igd-tv--bottom-left,
.igd-tv--bottom-center,
.igd-tv--bottom-right {
	bottom: var(--igd-tv-y, 25px);
}

.igd-tv__card {
	width: 100%;
	border-radius: 10px;
	background: #111;
	color: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

/* Il riquadro tiene le proporzioni del video, così la locandina e il player
   che la sostituisce occupano lo stesso spazio e niente si muove al play. */

.igd-tv__frame {
	position: relative;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	flex: none;
	aspect-ratio: 16 / 9;
	background: #000;
}

.igd-tv__play {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.igd-tv__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igd-tv__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-40%, -50%);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	transition: transform .15s ease;
}

.igd-tv__play:hover::after {
	transform: translate(-40%, -50%) scale(1.15);
}

.igd-tv__badge {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	/* Sopra al video ma trasparente al dito: i comandi di YouTube in
	   quell'angolo devono restare raggiungibili. */
	pointer-events: none;
	padding: 2px 7px;
	border-radius: 4px;
	background: #e03e2d;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.6;
	text-transform: uppercase;
}

.igd-tv__player {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Titolo e chiusura sulla stessa riga: la crocetta e' un comando della card,
   non un francobollo appiccicato sopra la locandina. */

.igd-tv__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 8px 8px 12px;
}

/* min-width: 0 non e' un dettaglio: senza, un figlio flex si rifiuta di
   stringersi sotto la larghezza del suo contenuto e l'ellissi non arriva mai,
   perche' e' la card ad allargarsi. */

.igd-tv__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.igd-tv__title:hover,
.igd-tv__title:focus {
	color: #fff;
	text-decoration: underline;
}

.igd-tv__close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #9a9a9a;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.igd-tv__close:hover,
.igd-tv__close:focus-visible {
	background: #e03e2d;
	color: #fff;
}

.igd-tv__close svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* La striscia: il tondo tirato per il largo quanto la card.
 *
 * Stessa altezza e stessi angoli del tondo — 50px, raggio 25 — perche' e' lo
 * stesso oggetto in un'altra forma, non un terzo elemento. La locandina sta
 * sul contenitore e non sul pulsante che apre, cosi' passa sotto tutti e due i
 * comandi invece di fermarsi prima della crocetta.
 *
 * La sfumatura sopra la locandina non e' decorazione: un titolo bianco su una
 * locandina qualunque e' illeggibile una volta su tre, e da qui non si sa mai
 * quale locandina arrivera'. Scura a sinistra dove c'e' il testo, che si apre
 * verso destra dove l'immagine puo' respirare. */

.igd-tv__teaser {
	display: none;
	position: relative;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	background-color: #111;
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, .92) 30%, rgba(0, 0, 0, .45) 100%),
		var(--igd-tv-poster, none);
	background-position: center;
	background-size: cover;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.igd-tv.is-teaser .igd-tv__teaser {
	display: flex;
}

.igd-tv__teaser[hidden] {
	display: none;
}

/* min-width: 0 come per il titolo nella barra: senza, il figlio flex non si
   stringe sotto la larghezza del suo testo e l'ellissi non arriva mai. */

.igd-tv__teaser-open {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.igd-tv__teaser-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.igd-tv__teaser-icon svg {
	display: block;
	width: 26px;
	height: 26px;
}

.igd-tv__teaser-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	padding-right: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.igd-tv__teaser-open:hover .igd-tv__teaser-title,
.igd-tv__teaser-open:focus-visible .igd-tv__teaser-title {
	text-decoration: underline;
}

/* La chiusura della striscia: bersaglio alto quanto la riga, dischetto scuro
   sotto al segno.

   Le due cose sono separate di proposito. Su una riga da 50px si preme meglio
   una colonna piena che un bottoncino centrato, quindi il pulsante resta alto
   quanto la striscia. Ma quello che si vede deve avere un fondo suo: la
   sfumatura si apre proprio verso destra, ed e' li' che la locandina e' piu'
   chiara — una crocetta grigia senza dischetto si perdeva dentro l'immagine, e
   quale immagine sia non lo sa nessuno in anticipo. */

.igd-tv__teaser-close {
	display: flex;
	position: relative;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.igd-tv__teaser-close::before {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	transition: background-color .2s ease;
}

/* Sopra al dischetto, che e' un pseudo-elemento e sta dietro per conto suo:
   basta togliere l'svg dal flusso statico perche' non ci finisca sotto. */

.igd-tv__teaser-close svg {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
}

/* Lo stesso rosso della crocetta nella barra della card: chiudere è chiudere,
   e da qualunque faccia lo si faccia deve rispondere allo stesso modo. */

.igd-tv__teaser-close:hover::before,
.igd-tv__teaser-close:focus-visible::before {
	background: #e03e2d;
}

/* Il tondo esiste solo a riquadro chiuso. Il display sta qui e non solo
   nell'attributo hidden: una regola d'autore con un display sopra batte
   l'[hidden] del browser, ed e' esattamente cosi' che questo pulsante era
   finito visibile a card aperta. */

.igd-tv__toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #111;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	transition: background-color .2s ease;
}

.igd-tv.is-closed .igd-tv__toggle {
	display: flex;
}

.igd-tv__toggle[hidden] {
	display: none;
}

.igd-tv__toggle:hover {
	background: #e03e2d;
}

.igd-tv__toggle svg {
	display: block;
	width: 26px;
	height: 26px;
}

.igd-tv__stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.igd-tv__screen {
	fill: currentColor;
}

/* Lo schermo è pieno del colore del testo, quindi il triangolo dentro deve
   essere del colore del pulsante per vedersi. */

.igd-tv__glyph {
	fill: #111;
}

.igd-tv__toggle:hover .igd-tv__glyph {
	fill: #e03e2d;
}

/* Sul telefono un riquadro flottante copre una parte enorme dello schermo, e
   di suo non compare. Quando lo si vuole, angolo e margini sono i suoi: su uno
   schermo stretto l'angolo buono e' quasi sempre un altro, e i 25px del
   desktop sono tanti. La larghezza resta quella impostata, ridotta se non ci
   sta.

   Le regole qui dentro rifanno tutti e quattro i lati, non solo quelli che
   servono: quello che l'ancoraggio del desktop aveva messo va tolto, o i due
   si sommano. */

@media (max-width: 781px) {
	.igd-tv {
		display: none;
	}

	.igd-tv--mobile {
		display: flex;
		max-width: calc(100vw - 2 * var(--igd-tv-mx, 12px));
	}

	.igd-tv--m-top-left,
	.igd-tv--m-top-center,
	.igd-tv--m-top-right {
		top: var(--igd-tv-my, 12px);
		bottom: auto;
		flex-direction: column-reverse;
	}

	.igd-tv--m-bottom-left,
	.igd-tv--m-bottom-center,
	.igd-tv--m-bottom-right {
		top: auto;
		bottom: var(--igd-tv-my, 12px);
		flex-direction: column;
	}

	.igd-tv--m-top-left,
	.igd-tv--m-bottom-left {
		right: auto;
		left: var(--igd-tv-mx, 12px);
		align-items: flex-start;
		margin-right: 0;
		margin-left: 0;
	}

	.igd-tv--m-top-right,
	.igd-tv--m-bottom-right {
		right: var(--igd-tv-mx, 12px);
		left: auto;
		align-items: flex-end;
		margin-right: 0;
		margin-left: 0;
	}

	.igd-tv--m-top-center,
	.igd-tv--m-bottom-center {
		right: 0;
		left: 0;
		align-items: center;
		margin-right: auto;
		margin-left: auto;
	}
}