/* ===========================================================================
   sv-responsive.css — layer responsive autoritativo. Caricato per ULTIMO.
   Breakpoint stile UIkit: 1200 (l) · 960 (m) · 640 (s).

   Perché serve: la consegna era un'app React desktop-first. Non aveva né un
   menu mobile né il collasso delle griglie, e i CSS di pagina ridefiniscono
   spesso .nav-links e le griglie SENZA media query — caricando dopo sv-base
   vincerebbero. Da qui si forza con !important dove necessario.

   Trucco di targeting: grid-template-columns è INERTE sugli elementi non-grid,
   quindi targettare per suffisso di classe è sicuro e copre anche le griglie
   dichiarate inline nei template.
   =========================================================================== */

/* ============ ≤ 1200px ============ */
@media (max-width: 1200px) {
	:root { --gutter: 20px; }
	.mega { width: min(90vw, 640px); }
}

/* ============ ≤ 960px (tablet) ============ */
@media (max-width: 960px) {
	/* Griglie di card → 2 colonne.

	   `:not(.agr-grid)` — vedi la nota sull'eccezione in fondo a questo file. */
	[class*="-grid"]:not(.agr-grid), [class*="-cards"], [class*="-cols"], [class*="-strip"],
	[class*="-steps"], [class*="-inner"], [class*="-table"], .grid-3, .grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Layout a due colonne asimmetriche → una colonna già da tablet */
	.hero-split-grid, .cta-form-wrap, .foot-grid, [class*="-split"], [class*="-aside"] {
		grid-template-columns: 1fr !important;
	}

	/* ── Nav mobile ────────────────────────────────────────────────────────
	   Forzata con !important: i CSS di pagina ridefiniscono .nav-links senza
	   media query e caricano prima di questo file. */
	#main-nav .nav-links {
		display: none !important;
		position: fixed; inset: 72px 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		padding: 8px 0;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	#main-nav.nav-open .nav-links { display: flex !important; }
	#main-nav .nav-links > a,
	#main-nav .nav-links .has-mega {
		padding: 14px 20px !important;
		font-size: 16px !important;
		border-bottom: 1px solid var(--border-soft);
	}
	#main-nav .nav-burger { display: flex !important; }
	#main-nav .nav-cta { display: none !important; }

	/* Mega menu: in linea nel drawer, aperto al tap (classe da sv-app.js) */
	#main-nav .mega-wrap { position: static; }
	#main-nav .mega {
		position: static; transform: none !important;
		width: auto; opacity: 1; pointer-events: auto;
		display: none; grid-template-columns: 1fr !important;
		border: 0; border-radius: 0; box-shadow: none;
		background: var(--bg-alt); padding: 4px 8px;
	}
	#main-nav .mega-wrap.mega-open .mega { display: grid; }
	#main-nav .mega-wrap:hover .mega:not(.mega-open) { opacity: 1; }
	.mega-foot { flex-direction: column; gap: 4px; }
}

/* ============ ≤ 640px (mobile): tutto a 1 colonna ============ */
@media (max-width: 640px) {
	/* `:not(.agr-grid)` — vedi la nota sull'eccezione in fondo a questo file. */
	[class*="-grid"]:not(.agr-grid), [class*="-cards"], [class*="-cols"], [class*="-strip"],
	[class*="-steps"], [class*="-inner"], [class*="-table"], [class*="-section"],
	[class*="-content"], [class*="-row"], [class*="-split"], [class*="-aside"],
	.grid-2, .grid-3, .grid-4, .form-grid, .foot-grid, .cta-form-wrap {
		grid-template-columns: 1fr !important;
	}

	/* ┌─ IL BINARIO ORIZZONTALE: 16px, UNA VOLTA SOLA ──────────────────────┐
	   │ Il rientro dai bordi dello schermo lo dichiaravano DUE elementi     │
	   │ diversi: `section` qui sotto (16px) e `.wrap` col suo --gut         │
	   │ (clamp(18px,4vw,40px), cioè 18px su un telefono). Dove i due si     │
	   │ annidano — e si annidano quasi ovunque — i valori si sommavano:     │
	   │ 34px per lato misurati su home, archivio, contatti e scheda, cioè   │
	   │ 68px dei 390 di un telefono spesi in margini.                       │
	   │                                                                      │
	   │ Peggio: l'annidamento va nei due versi. Nelle pagine di contenuto è  │
	   │ `section > .wrap`, nella scheda immobile è `.wrap > section`. Una    │
	   │ regola sola sull'uno o sull'altro non li prende entrambi.            │
	   │                                                                      │
	   │ Quindi: --gut scende a 16 (così .wrap da solo è già a norma) e chi   │
	   │ si ritrova un contenitore già rientrato dentro o attorno rinuncia    │
	   │ al proprio. Il risultato è 16px sempre, da qualunque parte venga.    │
	   │                                                                      │
	   │ Attenzione: questo riguarda il BINARIO della pagina, non il padding  │
	   │ interno dei componenti. Un .panel, una card o la testata navy della  │
	   │ scheda continuano ad avere il loro, e si somma al binario: è         │
	   │ giusto, altrimenti il testo toccherebbe la cornice del riquadro.     │
	   └──────────────────────────────────────────────────────────────────────┘ */
	:root { --gutter: 16px; --gut: 16px; }
	section, .site-footer, .container { padding-left: 16px !important; padding-right: 16px !important; }
	#main-nav .container { padding-left: 16px !important; padding-right: 16px !important; }

	/* Contiene già un .wrap: il binario lo mette quello. */
	section:has(.wrap), .site-footer:has(.wrap), .container:has(.wrap) {
		padding-left: 0 !important; padding-right: 0 !important;
	}
	/* Sta dentro un .wrap: il binario gliel'ha già messo lui. */
	.wrap section, .wrap .container {
		padding-left: 0 !important; padding-right: 0 !important;
	}
	.cta-form-aside, .cta-form-body { padding: 32px 20px !important; }
	.card { padding: 22px !important; }

	/* Righe flex: vanno a capo o si impilano */
	[class*="-actions"], [class*="-pills"], [class*="-meta"], [class*="-badges"],
	.foot-bottom, .nav-cta { flex-wrap: wrap; }
	.foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

	/* Titoli: contenuti su schermo stretto */
	h1 { font-size: clamp(30px, 8.5vw, 40px) !important; }
	.section-head h2 { font-size: clamp(25px, 7vw, 34px) !important; }

	/* Nessun media sfora la viewport */
	img, video, iframe, svg { max-width: 100%; }

	/* L'eyebrow è nowrap by design: su schermi stretti deve poter andare a capo,
	   altrimenti sfora (un sopratitolo lungo sfora). */
	.eyebrow { white-space: normal !important; }
	/* Anche i testi che la consegna forzava su una riga sola. */
	.section-head p { white-space: normal !important; }

	/* Tabelle: scrollabili invece che rotte */
	table { display: block; overflow-x: auto; white-space: nowrap; }

	/* Spazio in fondo per non finire sotto la CTA telefono fissa */
	.site-footer { padding-bottom: 96px; }

	/* La barra si abbassa e il logo con lei: da scrivania la testata può
	   permettersi 78px, su un telefono sono un morso di schermata sopra ogni
	   pagina. 64px con il logo a 44 tiene il marchio leggibile senza rubare
	   la piega. */
	.nav { min-height: 64px; }
	.nav__logo img { height: 44px; }
}

/* ============ Eccezioni al targeting per suffisso ============
   Le regole qui sopra colpiscono per suffisso di classe ([class*="-strip"] e
   compagnia). È un buon rastrello per una consegna desktop-first, ma prende
   anche griglie che a una colonna non ci vogliono stare: vanno rimesse a posto
   qui, DOPO, perché a parità di specificità e di !important vince l'ultima.

   .si-strip — le sei specifiche dell'immobile (locali, mq, camere, bagni,
   piano, terrazzo). Sono icona + numero + una parola, scritti IN RIGA: impilate
   una per riga diventavano sei blocchi alti ~100px, cioè mezzo schermo di
   telefono per sei dati.

   Tre per riga fino al tablet, due sul telefono. Il confine è la voce più
   lunga: "170 m² superficie" misura ~154px, e nei 358px utili di un telefono
   da 390 una griglia a tre lascerebbe celle da 110px — misurato, e infatti
   sforava (.pw/isf-scheda-verifica.js lo controlla a ogni giro). A due, le
   celle sono da 171px e ci sta. */
@media (max-width: 960px) {
	.si-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
	.si-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ┌─ L'ECCEZIONE: .agr-grid, LA GRIGLIA DELLE RECENSIONI ────────────────────┐
   │                                                                          │
   │ Il rastrello per suffisso di classe si regge su un assunto scritto in    │
   │ cima a questo file — «targettare per suffisso è sicuro» — che era vero    │
   │ finché TUTTE le griglie del sito erano quelle della consegna: dichiarate  │
   │ senza media query, quindi bisognose di essere forzate da qui.             │
   │                                                                          │
   │ Dal 2026-07-30 non è più così. Le recensioni le stampa il plugin          │
   │ amazon-google-reviews, che porta la propria griglia `.agr-grid` con le    │
   │ proprie media query (576 / 768 / 992 / 1200) e il numero di colonne per   │
   │ ciascun breakpoint preso dalle sue impostazioni.                          │
   │                                                                          │
   │ `[class*="-grid"]` la pescava, e con !important vinceva: sotto i 960px    │
   │ la griglia restava a 2 colonne e sotto i 640 a 1, qualunque cosa dicesse  │
   │ il pannello. Il difetto peggiore non era il numero di colonne — 2 su      │
   │ tablet è ragionevole — ma il fatto che TRE dei cinque campi «colonne»     │
   │ del pannello non facessero niente, senza dirlo: si sposta il valore, si   │
   │ salva, e in pagina non cambia nulla.                                      │
   │                                                                          │
   │ Qui si esclude e basta, invece di riscrivere i suoi breakpoint con        │
   │ !important: quella strada avrebbe rimesso nel tema la decisione su quante │
   │ colonne mostrare, cioè esattamente ciò che il pannello del plugin serve   │
   │ a decidere. Verificato da .pw/diag-recensioni-griglia.js, che misura      │
   │ colonne e sbordamento a tredici larghezze.                                │
   │                                                                          │
   │ Se un domani si aggiunge un altro plugin con una griglia sua, la          │
   │ soluzione è la stessa: un `:not()` in più qui, e una riga in questa nota. │
   └──────────────────────────────────────────────────────────────────────────┘ */