/**
 * 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;
}

/* Su mobile le frecce restano, ma piccole: lo scorrimento vero si fa col dito. */
@media (max-width: 767px) {
	.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;
	}
}