/**
 * Carosello video della home.
 *
 * La larghezza di un video si ricava da quanti se ne vogliono vedere, così il
 * numero è una sola impostazione del widget e non una serie di misure da
 * rifare a ogni scaglione.
 */

.fm-vh {
	--fm-vh-visible: 3;
	--fm-vh-gap: 12px;
	--fm-vh-radius: 0px;
	--fm-vh-ratio: 4 / 5;
	--fm-vh-nav-color: #fff;
	--fm-vh-nav-bg: rgba(0, 0, 0, .45);
	position: relative;
}

.fm-vh__track {
	display: flex;
	gap: var(--fm-vh-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fm-vh__track::-webkit-scrollbar {
	display: none;
}

.fm-vh__item {
	flex: 0 0 calc((100% - (var(--fm-vh-visible) - 1) * var(--fm-vh-gap)) / var(--fm-vh-visible));
	scroll-snap-align: start;
	display: block;
	position: relative;
	border-radius: var(--fm-vh-radius);
	overflow: hidden;
	text-decoration: none;
	background: #000;
}

/* Il fondo nero è l'attesa, non un bordo: senza, il riquadro lampeggia bianco. */
.fm-vh__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--fm-vh-ratio);
	overflow: hidden;
}

.fm-vh__poster,
.fm-vh__media .fm-vh__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fm-vh__poster {
	object-fit: cover;
	transition: opacity .3s ease;
}

/* Quando il filmato è montato la copertina esce di scena ma resta lì: se il
   video non parte (dati risparmiati, blocco del browser) si rivede. */
.fm-vh__media.is-playing .fm-vh__poster {
	opacity: 0;
}

/* Il filmato non riceve il tocco: tutto il riquadro è un link, e un comando
   del lettore rimasto in piedi se lo prenderebbe al posto suo. */
.fm-vh__stage {
	pointer-events: none;
}

/* Del lettore non deve restare niente in vista: qui il filmato e' un'insegna,
   non un video da comandare. Togliere l'attributo dei comandi basta oggi; questi
   avanzi — pulsante centrale, barra, rotella, livello dei sottotitoli — si
   spengono anche se domani il lettore cambia versione o adattatore. La
   copertina del player (.vjs-poster) resta: e' quello che si vede se l'avvio
   automatico viene rifiutato. */
.fm-vh__stage .vjs-control-bar,
.fm-vh__stage .vjs-big-play-button,
.fm-vh__stage .vjs-loading-spinner,
.fm-vh__stage .vjs-text-track-display,
.fm-vh__stage .vjs-title-bar,
.fm-vh__stage .vjs-error-display,
.fm-vh__stage [class*="swarm-overlay"],
.fm-vh__stage [class*="watermark"] {
	display: none !important;
}

.fm-vh__stage > *,
.fm-vh__stage video,
.fm-vh__stage iframe,
.fm-vh__stage smartvideo {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border: 0;
	display: block;
}

.fm-vh__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--fm-vh-nav-color);
	background: var(--fm-vh-nav-bg);
	transition: opacity .2s ease;
}

.fm-vh__nav svg {
	width: 22px;
	height: 22px;
}

.fm-vh__nav--prev {
	left: 6px;
}

.fm-vh__nav--next {
	right: 6px;
}

.fm-vh__nav[hidden] {
	display: none;
}

.fm-vh--empty {
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: .7;
	text-align: center;
}

@media (max-width: 767px) {
	/* Su uno schermo stretto tre video affiancati sono francobolli: si
	   impilano, a larghezza piena, e il quarto scende sotto agli altri.
	   In colonna non c'e' niente da far scorrere di lato, quindi le frecce
	   spariscono — e ogni filmato nasce quando ci si arriva scorrendo, che e'
	   il modo piu' parsimonioso di tutti. */
	.fm-vh--mobile-stack .fm-vh__track {
		flex-direction: column;
		overflow-x: hidden;
		scroll-snap-type: none;
	}

	.fm-vh--mobile-stack .fm-vh__item {
		flex: 0 0 auto;
		width: 100%;
	}

	.fm-vh--mobile-stack .fm-vh__nav {
		display: none;
	}

	/* A carosello se ne vede uno per volta, grande: l'86 per cento della
	   larghezza lascia in vista il bordo del prossimo, che e' il modo piu'
	   onesto di dire "qui si scorre" senza scriverlo. Il numero di video
	   affiancati impostato nel widget vale per computer e tavoletta: su un
	   telefono, dove il dito e' lo strumento, uno per volta e' l'unica misura
	   che si guarda davvero. */
	.fm-vh--mobile-carousel .fm-vh__item {
		flex: 0 0 86%;
	}

	/* Dove restano affiancati, le frecce si rimpiccioliscono: lo scorrimento
	   vero si fa col dito. */
	.fm-vh__nav {
		width: 32px;
		height: 32px;
	}

	.fm-vh__nav svg {
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-vh__track {
		scroll-behavior: auto;
	}
}