/* ==========================================================================
   Verde Abitare — v8 · ultimo strato (caricato dopo v7.css)
   Regola: uno spazio solo. Gutter di pagina = 28px (come .va-container),
   passo interno = 8px. Niente elementi decorativi in movimento sul body.
   ========================================================================== */

:root { --va8-g: 28px; --va8-s: 8px; }
@media (max-width: 767px) { :root { --va8-g: 15px; --va8-s: 15px; } }

/* 1. Fili animati di sfondo: via dal body (restano solo nel preloader) */
.va-bglines, #va-flo { display: none !important; }

/* 2. Galleria scheda immobile — miniature con lo stesso fiato ai bordi e in mezzo */
.va-gallery__thumbs {
	display: flex !important;
	gap: var(--va8-s) !important;
	padding: var(--va8-s) 0 0 !important;
	margin: 0 !important;
	scroll-padding-inline: 0;
	scroll-snap-type: x proximity !important;
	align-items: stretch !important;
}
.va-gallery__thumb-btn { flex: 0 0 auto !important; margin: 0 !important; scroll-snap-align: start; }
@media (max-width: 767px) {
	.va-gallery__thumbs {
		padding: var(--va8-s) !important;
		scroll-padding-inline: var(--va8-s);
	}
	/* la scheda prezzo sotto la galleria sta sulla stessa linea delle miniature */
	.va-herocard { padding: var(--va8-s) !important; gap: var(--va8-s) !important; }
}

/* 3. Dati principali (m², locali, camere, bagni, classe): griglia che va a capo,
      mai una barra di scorrimento dentro la pagina */
.va-shortcode--prop-specs {
	display: flex !important;
	flex-wrap: wrap !important;
	overflow: visible !important;
	padding-bottom: 0 !important;
}
.va-shortcode--prop-specs > * { flex: 1 1 96px !important; min-width: 0 !important; width: auto !important; }

/* 4. Caroselli orizzontali (immobili simili, in evidenza): il primo elemento
      parte dal gutter di pagina, non dal bordo dello schermo */
.va-hscroll > .va-grid--3 {
	padding-left: var(--va8-g) !important;
	padding-right: var(--va8-g) !important;
	scroll-padding-inline: var(--va8-g);
}

/* 5. Nessuna pagina deve poter scorrere di lato: quello che sborda si taglia
      al bordo della pagina (clip non crea un contenitore di scroll, lo sticky resta) */
.va-main { overflow-x: clip; }

/* 6. Tipologie che scorrono dentro una pagina di testo (Territorio): stessa
      fascia a tutta larghezza della home invece di sfondare la pagina */
.va-prose > .va-shortcode--categories.is-marquee {
	display: flex !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	max-width: none !important;
}

/* 7. Fasce che scorrono (tipologie, recensioni): bordo sfumato invece del taglio
      netto, e le recensioni arrivano fino al bordo invece di fermarsi al gutter */
.va-section--marquee,
.va-shortcode--reviews {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--va8-g), #000 calc(100% - var(--va8-g)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--va8-g), #000 calc(100% - var(--va8-g)), transparent 100%);
}
.va-container > .va-shortcode--reviews { margin-left: calc(-1 * var(--va8-g)) !important; margin-right: calc(-1 * var(--va8-g)) !important; }

/* 8. Comparsa: dissolvenza + leggera scala (niente salto verticale).
      Card e blocchi (.va-reveal, gestiti da v6.js) e testi/titoli/immagini
      (.va8-*, gestiti da va-enter.js) entrano nello stesso modo. */
.va-reveal { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.va-reveal:not(.is-in) { opacity: 0; transform: scale(.97) !important; }

html.va8-js .va-main :is(h1,h2,h3,h4,p,img,blockquote,figure,.va-kicker,.va-btn):not(.va8-on):not(:is(.va-reveal,.va-reveal *,.va-hscroll *,.is-marquee *,.va-gallery__thumbs *,.va-map *,.gm-style *,form *,.va-filters *,.va-search__map *,.va-cmpmodal *,.va-promo *,.va-lbx *)) {
	opacity: 0;
	transform: scale(.965);
}
.va8-anim { transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1) !important; transition-delay: var(--va8-d, 0s) !important; }
@media (prefers-reduced-motion: reduce) {
	html.va8-js .va-main * { opacity: 1 !important; transform: none !important; }
	.va-reveal { opacity: 1 !important; transform: none !important; }
}
/* nei caroselli orizzontali la comparsa allo scroll non scatta mai per le card
   fuori schermo: restavano vuote. Sempre visibili. */
.va-hscroll .va-reveal, .va-shortcode--featured .va-reveal { opacity: 1 !important; }

/* 9. Testata su mobile/tablet: 15px ai lati (non 28) per la barra del logo e per
      la barra REF sotto, che su schermi stretti respirano meglio. Da desktop resta 28. */
@media (max-width: 1023px) {
	html body .va-header .va-header__main .va-container { padding-left: 15px !important; padding-right: 15px !important; }
	html body .va-ctabar,
	html body.single-immobile .va-ctabar { padding: 8px 15px !important; }
}

/* 10. Mobile: gutter di pagina 15px ovunque (richiesta cliente 23/09), non solo in testata.
       Tutto cio' che usciva "a filo" col -28px segue il nuovo gutter. */
@media (max-width: 767px) {
	html body .va-container { padding-left: var(--va8-g) !important; padding-right: var(--va8-g) !important; }
	html body .va-hscroll { margin-left: calc(-1 * var(--va8-g)) !important; margin-right: calc(-1 * var(--va8-g)) !important; }
	html body .va-recent__strip { margin-right: calc(-1 * var(--va8-g)) !important; }
	/* piede: il fondo scuro continua sotto la barra di navigazione, niente striscia chiara */
	html body .va-footer { margin-bottom: 0 !important; padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 11. Fascia promo del piede che scorre: bordo sfumato come le altre */
.va-footer__promos .va-container:has(.is-marquee) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--va8-g), #000 calc(100% - var(--va8-g)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--va8-g), #000 calc(100% - var(--va8-g)), transparent 100%);
}

/* 12. Area riservata (accesso / crea account): la griglia prendeva la larghezza
       minima del bottone Google (iframe) e la scheda usciva dallo schermo a destra */
@media (max-width: 767px) {
	.va-auth { grid-template-columns: minmax(0, 1fr) !important; }
	.va-auth > * { min-width: 0; }
	.va-auth__card iframe { max-width: 100% !important; }
}
@media (max-width: 480px) { .va-auth__card { padding: 22px 18px !important; } }