/* ============================================================================
   VDU Recensioni — v.002 — blocco d'invito sotto il widget (RUN-VDU-RIORDINO-7, 20.10.2026)
   Stelle, invito su due righe e pulsante «Lascia la tua recensione», FUORI dall'area di consenso.

   MISURE PRESE DAL VIVO sul sito il 20.10.2026 (Chromium e WebKit, home e /caseificio, servito senza query):
   - sottotitolo della sezione «Dicono di noi» («Solo recensioni vere e verificabili su TripAdvisor.»):
     Overpass, 24 px sopra i 991 px, 15 px a 820, 390 e 360 px; interlinea 1,6. Invito e testo del
     pulsante hanno QUELLA dimensione (variabile --vdu-rec-fs);
   - pulsante «Scopri il Caseificio» (home): fondo rgb(25, 160, 41). E' il colore del pulsante
     (variabile --vdu-rec-verde): a riposo bordo di 2 px e testo in quel colore su fondo bianco,
     ombra morbida; in hover riempimento in quel colore, testo bianco, ombra un poco piu' marcata;
   - stelle dell'intestazione del widget: 30 px.
   ALTEZZA del pulsante = quella dei pulsanti lunghi del sito (wp-content/vdu-comune/pulsanti/v.001:
   min-height 2,24 em + 4 px sul loro carattere, clamp(17px, 1.53vw, 22px)), cosi' a ogni larghezza e'
   alto quanto gli altri; con un testo di dimensione diversa cambia solo la spaziatura interna, mai
   bordo, colori od ombra.

   SPECIFICITA': tutto sotto .vdu-recensioni (0,2,0 / 0,2,1): batte le regole generiche del costruttore
   (.brz a, .brz p) senza !important. position + z-index: il fondo dei blocchi Brizy e' un div.brz-bg
   assoluto che copre i figli non posizionati.
   ============================================================================ */

.vdu-recensioni .vdu-recensioni-invito {
	--vdu-rec-fs: 24px;
	--vdu-rec-verde: rgb(25, 160, 41);
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	margin: 28px 0 0;
	padding: 0 0 6px;
	text-align: center;
	font-family: Overpass, sans-serif;
}
.vdu-recensioni .vdu-recensioni-stelle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1px;
	margin: 0 0 10px;
	padding: 0;
	line-height: 0;
}
.vdu-recensioni .vdu-recensioni-stella {
	display: block;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
}
.vdu-recensioni .vdu-recensioni-testo {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 0;
	font-family: inherit;
	font-size: var(--vdu-rec-fs);
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: rgb(58, 58, 58);
	overflow-wrap: break-word;
}
.vdu-recensioni a.vdu-recensioni-pulsante {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: calc(2.24 * clamp(17px, 1.53vw, 22px) + 4px);
	margin: 0;
	padding: .27em 1.45em;
	border: 2px solid var(--vdu-rec-verde);
	border-radius: 999px;
	background: #fff;
	color: var(--vdu-rec-verde);
	font-family: inherit;
	font-size: var(--vdu-rec-fs);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
	cursor: pointer;
}
.vdu-recensioni a.vdu-recensioni-pulsante:hover,
.vdu-recensioni a.vdu-recensioni-pulsante:focus-visible {
	background: var(--vdu-rec-verde);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.vdu-recensioni a.vdu-recensioni-pulsante:focus-visible {
	outline: 2px solid var(--vdu-rec-verde);
	outline-offset: 3px;
}

/* tablet e telefono: il sottotitolo scende a 15 px (misurato a 820, 390 e 360 px) */
@media (max-width: 991px) {
	.vdu-recensioni .vdu-recensioni-invito {
		--vdu-rec-fs: 15px;
		margin-top: 20px;
	}
	.vdu-recensioni .vdu-recensioni-testo {
		margin-bottom: 14px;
	}
}
/* schermi molto stretti: il testo del pulsante puo' andare a capo invece di sbordare */
@media (max-width: 340px) {
	.vdu-recensioni a.vdu-recensioni-pulsante {
		white-space: normal;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vdu-recensioni a.vdu-recensioni-pulsante {
		transition: none;
	}
}

/* ============================================================================
   v.003 — RUN-VDU-RIORDINO-12, 27.10.2026 — spazi del blocco sul telefono (sotto i 768 px, punto di rottura mobile di
   Brizy). Tutto cio' che sta sopra e' la v.002 byte per byte. Decisione di Enrico del 25.10.2026 e regola d'agenzia
   (disposizione 2026-10-25-0731-SKILL-SITI-spaziatura-box-recensioni-mobile):
   1. RIQUADRO ESTERNO = il contenitore di riga Brizy (.brz-row__container) che contiene il blocco: e' il suo fondo
      (.brz-bg: bianco, bordo di 1 px rgb(155, 50, 50), ombra) a disegnare il riquadro. Ha su ogni pagina lo stesso margine
      laterale che ha su /caseificio, misurato a 360, 390 e 414 px: 15 px dai bordi dello schermo (li' viene dallo spazio
      interno di 15 px della sezione, che in home e' 0). Si limita la larghezza del contenitore a 100vw - 30 px e lo si
      centra: dove la sezione e' gia' rientrata di 15 px (/caseificio) non cambia niente, dove e' a tutta larghezza (home)
      il riquadro rientra di 15 px per lato. Titolo e sottotitolo della sezione restano dove sono: la regola prende il solo
      contenitore del blocco (:has).
   2. SCHEDE: l'area del widget ha uno spazio interno di 15 px per lato, cosi' ogni scheda sta ad almeno 15 px dal bordo
      del riquadro. Il plugin non ha un'impostazione nativa equivalente (solo allineamento, frecce, caratteri). Il
      cursore del widget misura la larghezza del suo contenitore: le schede si stringono, non escono.
   Invito, stelle e pulsante non sono toccati. Da 768 px in su nessuna regola si applica.
   ============================================================================ */
@media (max-width: 767px) {
	.brz-row__container:has(.vdu-recensioni[data-vdu-recensioni="v.003"]) {
		--vdu-rec-margine: 15px;
		box-sizing: border-box;
		width: 100% !important;      /* e' un elemento flessibile: coi margini auto si stringerebbe al contenuto */
		max-width: calc(100vw - 2 * var(--vdu-rec-margine)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.vdu-recensioni[data-vdu-recensioni="v.003"] .vdu-recensioni-widget {
		box-sizing: border-box;
		padding-left: var(--vdu-rec-margine, 15px);
		padding-right: var(--vdu-rec-margine, 15px);
	}
}