/* Sezione visibile: resta alta esattamente un viewport durante il pin. */
.att-vl-section {
	position: relative;
	height: 100vh !important;
	min-height: 100vh !important;
	overflow: hidden;
	isolation: isolate;
	overflow-anchor: none;
	background: #545957;
}

/* Livello video generato dallo shortcode [atha_vehicle_video]. */
.att-vl-video-layer {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.att-vl-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* Contenuti Elementor sopra il video. */
.att-vl-heading,
.att-vl-copy,
.att-vl-cta {
	position: relative;
	z-index: 2;
}

/* Lo stato iniziale viene applicato solo dopo un bootstrap JS riuscito. */
.att-vl-section.attinta-initialized .att-vl-copy,
.att-vl-section.attinta-initialized .att-vl-cta {
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	pointer-events: none;
}

/* GSAP usa visibility/opacity inline; queste classi sono fallback e diagnostica. */
.att-vl-section.is-copy-visible .att-vl-copy,
.att-vl-section.is-cta-visible .att-vl-cta {
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.att-vl-section {
		height: 100vh !important;
		min-height: 100vh !important;
	}

	.att-vl-section.attinta-initialized .att-vl-copy,
	.att-vl-section.attinta-initialized .att-vl-cta {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Dopo il primo completamento la sezione torna nel normale flusso e non viene più pinnata. */
.att-vl-section.attinta-released {
	position: relative;
	height: 100vh !important;
	min-height: 100vh !important;
}

/*
 * Layout mobile dedicato.
 *
 * Il layout Elementor desktop usa spaziature verticali che, su viewport
 * portrait, spingono l'heading troppo in basso e lasciano la CTA sopra i
 * veicoli. In mobile i tre contenuti editoriali diventano overlay espliciti
 * rispetto alla sezione da 100svh. Le variabili possono essere sovrascritte
 * sul singolo container Elementor senza modificare il plugin.
 */
@media (max-width: 767px) {
	.att-vl-section {
		/*
		 * Altezza mobile impostabile dall'editor Elementor (SPEC 1.0.6): la variabile
		 * `--attinta-vehicle-mobile-height` sovrascrive il default `100svh` senza modificare il plugin
		 * (es. sul container Elementor: `selector { --attinta-vehicle-mobile-height: 620px; }`). Il pin
		 * desktop resta a 100vh (fuori da questa media query); il branch mobile è autoplay, non pinnato.
		 */
		height: var(--attinta-vehicle-mobile-height, 100svh) !important;
		min-height: var(--attinta-vehicle-mobile-height, 100svh) !important;
	}

	/*
	 * Su mobile il plugin NON posiziona più heading/copy/CTA (niente overlay assoluto): usano il normale
	 * flusso Elementor (base `position: relative; z-index: 2`, sopra il video di sfondo) nell'ordine del DOM
	 * (heading → copy → CTA). Posizione, spaziatura, allineamento e larghezza si controllano interamente
	 * dall'editor Elementor. (Il posizionamento forzato precedente creava inversioni con i controlli nativi.)
	 */

	.att-vl-video {
		object-position: center bottom;
	}

	.att-vl-section.attinta-released {
		height: var(--attinta-vehicle-mobile-height, 100svh) !important;
		min-height: var(--attinta-vehicle-mobile-height, 100svh) !important;
	}
}