/**
 * Faro Video Popup — stili
 * Palette FARO: primary #16456b, secondary #0e2c45
 */

:root {
	--faro-vpop-primary: #16456b;
	--faro-vpop-secondary: #0e2c45;
}

/* ---- Wrapper allineamento ---- */
.faro-vpop-wrap--left { text-align: left; }
.faro-vpop-wrap--center { text-align: center; }
.faro-vpop-wrap--right { text-align: right; }

/* ---- Link trigger (button reso come link testuale) ---- */
.faro-vpop-trigger {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--faro-vpop-primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .2s;
}
.faro-vpop-trigger::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--faro-vpop-primary);
	/* triangolino play bianco */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='%23ffffff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color .2s, transform .2s;
}
.faro-vpop-trigger:hover,
.faro-vpop-trigger:focus-visible {
	color: var(--faro-vpop-secondary);
}
.faro-vpop-trigger:hover::before,
.faro-vpop-trigger:focus-visible::before {
	background-color: var(--faro-vpop-secondary);
	transform: scale(1.08);
}
.faro-vpop-trigger:focus-visible {
	outline: 2px solid var(--faro-vpop-primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---- Overlay ---- */
.faro-vpop-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(8, 22, 36, .82);
	opacity: 0;
	transition: opacity .25s ease;
}
.faro-vpop-overlay[hidden] {
	display: none;
}
.faro-vpop-overlay.is-open {
	opacity: 1;
}

/* ---- Dialog ---- */
.faro-vpop-dialog {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: #000;
	border-radius: 14px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
	transform: translateY(16px) scale(.98);
	transition: transform .25s ease;
}
.faro-vpop-overlay.is-open .faro-vpop-dialog {
	transform: translateY(0) scale(1);
}

.faro-vpop-title {
	color: #fff;
	font-size: 1.1rem;
	margin: 0;
	padding: 16px 56px 12px 20px;
	font-weight: 700;
}

/* ---- Video responsive 16:9 ---- */
.faro-vpop-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
}
/* Se c'è il titolo, gli angoli alti del video non devono essere arrotondati */
.faro-vpop-title + .faro-vpop-video-wrap {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.faro-vpop-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
}
/* Fallback per browser molto vecchi senza aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
	.faro-vpop-video-wrap { height: 0; padding-bottom: 56.25%; }
}

/* ---- Bottone chiudi ---- */
.faro-vpop-close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: var(--faro-vpop-secondary);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
	transition: background .2s, transform .2s;
}
.faro-vpop-close:hover,
.faro-vpop-close:focus-visible {
	background: var(--faro-vpop-primary);
	color: #fff;
	transform: scale(1.06);
	outline: none;
}

/* Su schermi piccoli la X torna dentro l'angolo per non uscire dallo schermo */
@media (max-width: 600px) {
	.faro-vpop-close { top: 6px; right: 6px; }
	.faro-vpop-overlay { padding: 12px; }
}

/* Blocca lo scroll della pagina quando un popup è aperto */
body.faro-vpop-lock {
	overflow: hidden;
}

/* =========================================================
   VIDEO INLINE — [faro_video_inline]
   Box video mostrato direttamente in pagina (non popup),
   centrato, con descrizione sotto. Non parte da solo, no loop.
   ========================================================= */
.faro-vinline {
	--faro-vinline-width: 800px;
	max-width: var(--faro-vinline-width);
	margin-block: 24px;
}
.faro-vinline--center { margin-inline: auto; }
.faro-vinline--left   { margin-inline: 0 auto; }
.faro-vinline--right  { margin-inline: auto 0; }

.faro-vinline__title {
	margin: 0 0 14px;
	color: var(--faro-vpop-secondary);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}
.faro-vinline--center .faro-vinline__title { text-align: center; }
.faro-vinline--right .faro-vinline__title  { text-align: right; }

.faro-vinline__wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 44px -24px rgba(14, 44, 69, .55);
}
@supports not (aspect-ratio: 16 / 9) {
	.faro-vinline__wrap { height: 0; padding-bottom: 56.25%; }
}
.faro-vinline__video,
.faro-vinline__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	border: 0;
}

.faro-vinline__text {
	margin-top: 16px;
	color: var(--faro-vpop-secondary);
	line-height: 1.6;
	font-size: .98rem;
}
.faro-vinline--center .faro-vinline__text { text-align: center; }
.faro-vinline--right .faro-vinline__text  { text-align: right; }
.faro-vinline__text p { margin: 0 0 .8em; }
.faro-vinline__text p:last-child { margin-bottom: 0; }