/* ============================================================
   VDU Cheese — blocco "All You Can Cheese" (Valle degli Ulivi).
   Stessa impronta del blocco vdu-picnic: gli stessi token del design,
   le stesse tessere, lo stesso pulsante WhatsApp. TUTTO scoped sotto
   .vdu-cheese — nessun selettore globale, nessun reset che possa
   toccare elementi fuori dal blocco.

   I valori qui sono quelli FINALI del picnic (che li' nascono dal
   sommarsi di piu' giri di rifiniture): si scrivono una volta sola,
   invece di ricopiare anche la stratificazione storica.
   ============================================================ */

/* Reset minimo CONFINATO al blocco. */
.vdu-cheese,
.vdu-cheese *,
.vdu-cheese *::before,
.vdu-cheese *::after { box-sizing: border-box; }

.vdu-cheese {
	/* token del design (scoped) — identici a quelli del blocco picnic */
	--vdu-paper:      #FFFDF8;
	--vdu-ink:        #2A2722;
	--vdu-ink-soft:   #5A534A;
	--vdu-gold:       #B8902F;
	--vdu-gold-deep:  #8A6A1E;
	--vdu-gold-soft:  #C9A24B;
	--vdu-line:       #E4D9C2;
	--vdu-olive:      #5E6B43;
	--vdu-olive-deep: #43502E;
	--vdu-olive-cream:#EEF0E2;
	--vdu-shadow:     0 18px 50px -22px rgba(60,46,16,.45);
	--vdu-shadow-sm:  0 8px 24px -14px rgba(60,46,16,.4);
	--vdu-serif:      'Cormorant Garamond', Georgia, serif;
	--vdu-sans:       'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	position: relative;
	display: block;
	/* stessi valori del picnic a regime: 69px sopra, 72px sotto */
	padding: 69px 0 72px;
	background: var(--vdu-olive-cream);
	/* Il picnic sta subito sopra e ha lo stesso fondo: un filo di riga segna il
	   confine fra i due eventi senza cambiare la tavolozza. */
	border-top: 1px solid var(--vdu-line);
	color: var(--vdu-ink);
	font-family: var(--vdu-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

/* reset di elemento confinati (neutralizzano il CSS di tema/builder) */
.vdu-cheese h2 { font-family: var(--vdu-serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: .2px; color: var(--vdu-ink); }
.vdu-cheese p { margin: 0 0 1em; }
.vdu-cheese img { display: block; max-width: 100%; height: auto; }
.vdu-cheese button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; margin: 0; padding: 0; }
.vdu-cheese a { color: inherit; text-decoration: none; }
.vdu-cheese svg { display: inline-block; vertical-align: middle; }
.vdu-cheese .vdu-cheese-icon { flex-shrink: 0; }

.vdu-cheese-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ── TOP (testo + tessera di apertura) ───────────────────── */
.vdu-cheese-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }

/* Titolo: stesso carattere, stesso peso, stesso colore e stessa spaziatura del
   titolo del picnic. La sola misura diversa e' il CORPO: il titolo del picnic e'
   di venti caratteri, questo ne ha quarantanove, e alla misura del picnic
   (fino a 62px) andrebbe a capo tre volte dentro una colonna da 500px.

   SPECIFICITA' 0,2,0 — e' obbligatoria, non estetica: il reset di blocco
   .vdu-cheese h2 vale 0,1,1 e batterebbe .vdu-cheese-title a 0,1,0. Misurato
   sul campo alla prima passata di questo round: il titolo usciva in Cormorant
   600 color ink invece che nel carattere del documento, verde, 400. E' la
   stessa insidia gia' costata un giro sul blocco picnic. */
.vdu-cheese .vdu-cheese-title {
	font-family: 'kbmgxgqntknaxywsufrdzxutduxanjlkpzfo', var(--vdu-serif);
	font-size: clamp(28px, 3.1vw, 40px);
	font-weight: 400;
	letter-spacing: -1.5px;
	color: rgb(25, 160, 41);
	text-transform: none;
	line-height: 1.12;
	margin-bottom: 20px;
}
.vdu-cheese .vdu-cheese-p { font-size: 17.5px; color: var(--vdu-ink-soft); margin: 0; }

/* ── TESSERE ─────────────────────────────────────────────── */
.vdu-cheese-tile { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--vdu-shadow); position: relative; padding: 0; border: none; cursor: pointer; display: block; text-align: left; width: 100%; background: none; }
.vdu-cheese-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdu-cheese-tile-hint { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--vdu-olive-deep); display: grid; place-items: center; }

/* hover helpers — identici a quelli del picnic */
.vdu-cheese-hover-card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.vdu-cheese-hover-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -24px rgba(60,46,16,.6); }
.vdu-cheese-hover-card:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }
.vdu-cheese-media-hover { overflow: hidden; }
.vdu-cheese-media-hover img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.vdu-cheese-media-hover:hover img { transform: scale(1.06); }

/* Tessera di apertura: rapporto nativo della foto, nessun ritaglio. */
.vdu-cheese-imgs .vdu-cheese-tile { aspect-ratio: 4 / 3; }

/* ── GRIGLIA CENTRALE ────────────────────────────────────
   Due colonne. La verticale sta a sinistra e occupa due righe: la sua
   altezza la decidono le due tessere di destra, quindi il riquadro
   resta alto quanto loro due piu' il divario e la foto non va tagliata
   di traverso. La striscia larga chiude la griglia su tutta l'ampiezza. */
.vdu-cheese-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.vdu-cheese-grid .vdu-cheese-tile { aspect-ratio: 3 / 2; }
.vdu-cheese-grid .vdu-cheese-tile.is-span { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
/* L'immagine esce dal flusso — stessa tecnica della striscia di chiusura del
   picnic. Serve perche' altrimenti e' LEI a dettare l'altezza della tessera
   (525 x 788 al rapporto nativo) invece delle due righe che la tessera occupa:
   misurato alla prima passata, la colonna di destra restava 74px piu' corta e
   le due tessere non si allineavano ne' sopra ne' sotto. Fuori dal flusso, la
   tessera si stira alle righe (350 + 14 + 350 = 714) e la foto le copre. */
.vdu-cheese-grid .vdu-cheese-tile.is-span img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.vdu-cheese-grid .vdu-cheese-tile.is-wide { grid-column: 1 / -1; aspect-ratio: 5 / 2; }

/* ── STRISCIA DI CHIUSURA (come .vdu-picnic-foot-img) ────── */
.vdu-cheese-foot-img { margin-top: 40px; }
.vdu-cheese-foot-img .vdu-cheese-tile { aspect-ratio: 5 / 2; }
.vdu-cheese-foot-img .vdu-cheese-tile img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── CTA WhatsApp — stessi valori calcolati del pulsante del picnic ── */
.vdu-cheese-cta { text-align: center; margin-top: 72px; }
.vdu-cheese-wa {
	display: inline-flex; align-items: center; gap: 10px; justify-content: center;
	padding: 17px 34px; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: .01em;
	background: #25D366; border: 2px solid #25D366; cursor: pointer; white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px rgba(37,211,102,.7), 0 2px 6px rgba(0,0,0,.12);
	transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* 0,2,0 — vince sul reset .vdu-cheese a { color: inherit } (0,1,1), come nel picnic. */
.vdu-cheese .vdu-cheese-wa     { color: #fff; }
.vdu-cheese .vdu-cheese-wa-ico { width: 36px; height: 36px; flex-shrink: 0; }
/* 0,3,0 — deve battere la riga qui sopra, altrimenti al passaggio del mouse il
   testo resterebbe bianco su fondo bianco (bug latente misurato sul picnic). */
.vdu-cheese .vdu-cheese-wa:hover {
	background: #fff;
	color: rgb(25, 160, 41);
	border-color: rgb(25, 160, 41);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(18,140,64,.45), 0 2px 8px rgba(0,0,0,.18);
}
.vdu-cheese-wa:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }

/* ── REVEAL (additivo: attivo SOLO con JS; senza JS e' gia' visibile) ── */
.vdu-cheese.is-js .vdu-cheese-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.vdu-cheese.is-js .vdu-cheese-reveal.is-in { opacity: 1; transform: none; }

/* ── RIQUADRO INGRANDITO (scoped) ────────────────────────── */
.vdu-cheese-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(20,16,8,.92); }
.vdu-cheese-lightbox[hidden] { display: none; }
.vdu-cheese-lb-fig { margin: 0; max-width: min(1080px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vdu-cheese-lb-img { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); object-fit: contain; }
.vdu-cheese-lb-cap { color: rgba(255,255,255,.92); font-family: var(--vdu-serif); font-style: italic; font-size: 19px; text-align: center; }
/* 0,2,0 — stessa ragione del titolo: questi sono <button>, e il reset di blocco
   .vdu-cheese button (0,1,1) azzera fondo, bordo e colore. A 0,1,0 le tre frecce
   uscirebbero senza pastiglia e con il colore ereditato dal blocco, cioe' scure
   su fondo scuro. */
.vdu-cheese .vdu-cheese-lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; width: 52px; height: 52px; font-size: 30px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.vdu-cheese-lb-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.vdu-cheese-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vdu-cheese .vdu-cheese-lb-close { top: 22px; right: 22px; font-size: 26px; }
.vdu-cheese .vdu-cheese-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.vdu-cheese .vdu-cheese-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.vdu-cheese-lb-prev:hover { transform: translateY(-50%) scale(1.05); }
.vdu-cheese-lb-next:hover { transform: translateY(-50%) scale(1.05); }
.vdu-cheese-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: .04em; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
	.vdu-cheese-top { grid-template-columns: 1fr; }
	.vdu-cheese-grid { grid-template-columns: 1fr; }
	/* impilate: ogni tessera torna al proprio rapporto, niente righe da occupare */
	.vdu-cheese-grid .vdu-cheese-tile.is-span { grid-column: auto; grid-row: auto; aspect-ratio: 2 / 3; }
	.vdu-cheese-grid .vdu-cheese-tile.is-wide { grid-column: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
	.vdu-cheese-wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 740px) {
	.vdu-cheese { padding: 68px 0; }
	.vdu-cheese-cta { margin-top: 40px; }
	.vdu-cheese .vdu-cheese-title { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
	.vdu-cheese-foot-img .vdu-cheese-tile { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
	.vdu-cheese .vdu-cheese-lb-btn { width: 44px; height: 44px; font-size: 24px; }
	.vdu-cheese .vdu-cheese-lb-close { top: 14px; right: 14px; }
	.vdu-cheese .vdu-cheese-lb-prev { left: 10px; }
	.vdu-cheese .vdu-cheese-lb-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.vdu-cheese.is-js .vdu-cheese-reveal { opacity: 1; transform: none; transition: none; }
	.vdu-cheese-hover-card, .vdu-cheese-media-hover img, .vdu-cheese-wa { transition: none; }
}

/* ============================================================================
   v.002 — RESTYLING A OTTO FASCE (22.08.2026)

   Tutto quello che sta sopra e' la v.001, riga per riga. Da qui in giu' c'e'
   SOLO cio' che la v.002 aggiunge o cambia: chi confronta le due versioni legge
   la differenza in un posto solo.

   SPECIFICITA' 0,2,0 OVUNQUE — non e' estetica, e' obbligatoria. I reset di
   blocco (.vdu-cheese h2, .vdu-cheese p, .vdu-cheese h3, .vdu-cheese button,
   .vdu-cheese a) valgono 0,1,1 e batterebbero qualunque regola di sola classe.
   E' la lezione del round 1, pagata sul titolo.

   INSIDIA CHE NE DISCENDE, e che costa un mobile rotto se la si dimentica:
   una regola a 0,2,0 batte anche le regole responsive della v.001, che sono a
   0,1,0. Quindi ogni valore portato a 0,2,0 qui deve essere RIDICHIARATO a
   0,2,0 anche dentro le media query — vedi .vdu-cheese-top piu' sotto.
   ============================================================================ */

/* Reset di elemento per l'h3 dei riquadri (0,1,1), come gia' esiste per l'h2:
   il tema e il costruttore hanno regole proprie sugli h3. */
.vdu-cheese h3 { font-family: var(--vdu-serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: .2px; color: var(--vdu-ink); }

/* ── FASCE 1 e 2 — testata a tutta larghezza ─────────────── */
.vdu-cheese .vdu-cheese-head { margin-bottom: 36px; }
.vdu-cheese .vdu-cheese-title { margin-bottom: 16px; }

/* Il titolo e' UN SOLO h2 con due righe: r1 alla stessa misura del titolo del
   picnic (misurata dal vivo il 22.08.2026: 62px a 1440, 36px a 390), r2 alla
   misura che il titolo del cheese aveva in v.001 (40px a 1440, 28px a 390).
   Le espressioni sono le stesse dei due blocchi, non due numeri copiati: cosi'
   le due righe continuano a seguire il picnic e la v.001 a ogni larghezza.
   Carattere, peso, colore e spaziatura restano quelli dell'h2. */
.vdu-cheese .vdu-cheese-title-r1 { display: block; font-size: clamp(38px, 5.2vw, 62px); }
.vdu-cheese .vdu-cheese-title-r2 { display: block; font-size: clamp(28px, 3.1vw, 40px); }

/* Sottotitolo: sotto il titolo, sopra il corpo — e la misura sta in mezzo alle
   due (26px a 1440, contro 40 del titolo r2 e 17,5 del corpo). Allineamento
   ereditato dal blocco, cioe' lo stesso del titolo. */
.vdu-cheese .vdu-cheese-sub {
	font-family: var(--vdu-serif);
	font-style: italic;
	font-size: clamp(19px, 2.1vw, 26px);
	line-height: 1.3;
	color: var(--vdu-olive);
	margin: 0;
}

/* ── FASCIA 3 — l'immagine domina: 35% testo, 65% foto ──── */
.vdu-cheese .vdu-cheese-top { grid-template-columns: 35fr 65fr; }
.vdu-cheese .vdu-cheese-p + .vdu-cheese-p { margin-top: 14px; }
.vdu-cheese .vdu-cheese-p strong { color: var(--vdu-ink); font-weight: 800; }

/* ── FASCE 4 e 7 — i due riquadri contrastati ────────────
   Stesso identico stile per i due: fondo verde scuro contro la crema d'oliva
   del blocco, bordino oro, ombra. */
.vdu-cheese .vdu-cheese-box {
	margin-top: 44px;
	padding: 26px 30px 28px;
	background: var(--vdu-olive-deep);
	border: 1px solid var(--vdu-gold-soft);
	border-radius: 18px;
	box-shadow: var(--vdu-shadow);
	color: #fff;
}
.vdu-cheese .vdu-cheese-box-title {
	font-family: var(--vdu-serif);
	font-size: 29px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 18px;
}
.vdu-cheese .vdu-cheese-box-line { margin: 0; font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.92); }
.vdu-cheese .vdu-cheese-box strong { color: #fff; font-weight: 800; }

/* Passi numerati del riquadro "Come funziona": stessa pastiglia oro dei passi
   del blocco picnic. */
.vdu-cheese .vdu-cheese-steps { display: flex; flex-direction: column; gap: 16px; }
.vdu-cheese .vdu-cheese-step { display: flex; gap: 14px; align-items: flex-start; }
.vdu-cheese .vdu-cheese-step-n {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
	background: var(--vdu-gold); color: #fff;
	display: grid; place-items: center;
	font-family: var(--vdu-serif); font-weight: 700; font-size: 19px; line-height: 1;
}
.vdu-cheese .vdu-cheese-step-t { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.92); padding-top: 8px; }

/* ── FASCIA 6 — "Dal vivo" ──────────────────────────────── */
.vdu-cheese .vdu-cheese-live {
	margin: 44px 0 0;
	text-align: center;
	font-family: var(--vdu-serif);
	font-style: italic;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.3;
	color: var(--vdu-olive-deep);
}
.vdu-cheese .vdu-cheese-live strong { font-weight: 700; color: var(--vdu-olive-deep); }

/* ── FASCIA 8 — riga di chiusura + pulsante ─────────────── */
.vdu-cheese .vdu-cheese-close { margin: 34px 0 0; text-align: center; font-size: 18px; color: var(--vdu-ink-soft); }
.vdu-cheese .vdu-cheese-close strong { color: var(--vdu-ink); font-weight: 800; }
/* Il pulsante ora ha la propria riga sopra: i 72px della v.001 servivano a
   staccarlo dalla striscia fotografica, qui lo staccherebbero dalla sua frase.
   E' una proprieta' del CONTENITORE: il pulsante resta identico. */
.vdu-cheese .vdu-cheese-cta { margin-top: 30px; }

/* ── RESPONSIVE della v.002 ─────────────────────────────── */
@media (max-width: 1100px) {
	/* Ridichiarata a 0,2,0: la regola della v.001 e' a 0,1,0 e da sola
	   PERDEREBBE contro .vdu-cheese .vdu-cheese-top qui sopra, lasciando due
	   colonne anche sul telefono. */
	.vdu-cheese .vdu-cheese-top { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
	.vdu-cheese .vdu-cheese-title-r1 { font-size: 36px; }
	.vdu-cheese .vdu-cheese-title-r2 { font-size: 28px; }
	.vdu-cheese .vdu-cheese-head { margin-bottom: 28px; }
}
@media (max-width: 600px) {
	.vdu-cheese .vdu-cheese-box { padding: 22px 20px 24px; margin-top: 34px; }
	.vdu-cheese .vdu-cheese-box-title { font-size: 24px; margin-bottom: 14px; }
	.vdu-cheese .vdu-cheese-step-n { width: 32px; height: 32px; font-size: 17px; }
	.vdu-cheese .vdu-cheese-step-t { padding-top: 5px; }
}