/* ============================================================
   VDU Picnic — blocco "Picnic al Caseificio" (sito Valle degli Ulivi)
   Porting 1:1 del design della sezione picnic di Moira Bijou
   (tema wpa-moira: tokens.css + base.css + components.css).
   TUTTO scoped sotto .vdu-picnic — nessun selettore globale, nessun
   reset che possa toccare elementi fuori dal blocco. I token del
   design sono variabili CSS scoped (--vdu-*): non escono dal blocco.
   ============================================================ */

/* Reset minimo CONFINATO al blocco (non tocca nulla all'esterno). */
.vdu-picnic,
.vdu-picnic *,
.vdu-picnic *::before,
.vdu-picnic *::after { box-sizing: border-box; }

.vdu-picnic {
	/* token del design (scoped) */
	--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;

	/* = .wpa-section + .wpa-sec-picnic */
	position: relative;
	display: block;
	padding: 104px 0;
	background: var(--vdu-olive-cream);
	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 eventuale CSS di tema/builder) */
.vdu-picnic h2,
.vdu-picnic h3 { font-family: var(--vdu-serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: .2px; color: var(--vdu-ink); }
.vdu-picnic p { margin: 0 0 1em; }
.vdu-picnic img { display: block; max-width: 100%; height: auto; }
.vdu-picnic button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; margin: 0; padding: 0; }
.vdu-picnic a { color: inherit; text-decoration: none; }
.vdu-picnic svg { display: inline-block; vertical-align: middle; }
.vdu-picnic .vdu-picnic-icon { flex-shrink: 0; }

/* = .wpa-wrap */
.vdu-picnic-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ── TOP (testo + tiles) ─────────────────────────────────── */
.vdu-picnic-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.vdu-picnic-title { font-family: var(--vdu-serif); font-size: clamp(32px, 4.4vw, 52px); color: var(--vdu-olive-deep); margin-bottom: 8px; line-height: 1.04; }
.vdu-picnic-lead { font-family: var(--vdu-serif); font-size: clamp(20px, 2.4vw, 27px); font-style: italic; color: var(--vdu-olive); margin: 0 0 18px; line-height: 1.3; }
.vdu-picnic-p { font-size: 17.5px; color: var(--vdu-ink-soft); }
.vdu-picnic-chips { display: grid; gap: 12px; margin-top: 26px; }
.vdu-picnic-chip { display: flex; gap: 14px; align-items: center; background: var(--vdu-paper); border: 1px solid var(--vdu-line); border-radius: 12px; padding: 16px 20px; }
.vdu-picnic-chip.is-book { background: #FBEFE0; border: 1.5px solid var(--vdu-gold-soft); }
.vdu-picnic-chip-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--vdu-olive-cream); color: var(--vdu-olive-deep); display: grid; place-items: center; }
.vdu-picnic-chip-ico.is-gold { background: var(--vdu-gold); color: #fff; }
.vdu-picnic-chip-t { font-weight: 800; font-size: 17px; color: var(--vdu-ink); }
.vdu-picnic-chip-t.is-gold { color: var(--vdu-gold-deep); }
.vdu-picnic-chip-d { font-size: 15.5px; color: var(--vdu-ink-soft); }

.vdu-picnic-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 152px; gap: 14px; }
.vdu-picnic-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-picnic-tile.is-span { grid-column: 1; grid-row: 1 / span 2; }
.vdu-picnic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdu-picnic-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 (= .wpa-hover-card / .wpa-media-hover) */
.vdu-picnic-hover-card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.vdu-picnic-hover-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -24px rgba(60,46,16,.6); }
.vdu-picnic-hover-card:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }
.vdu-picnic-media-hover { overflow: hidden; }
.vdu-picnic-media-hover img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.vdu-picnic-media-hover:hover img { transform: scale(1.06); }

/* ── HOW + BASKET ────────────────────────────────────────── */
.vdu-picnic-howbask { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-top: 56px; align-items: start; }
.vdu-picnic-basket { background: var(--vdu-paper); border: 1px solid var(--vdu-line); border-radius: 18px; padding: 32px 34px; box-shadow: var(--vdu-shadow-sm); }
.vdu-picnic-basket-title { font-size: 25px; color: var(--vdu-olive-deep); margin-bottom: 8px; }
.vdu-picnic-basket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 18px; }
.vdu-picnic-basket-item { display: flex; gap: 12px; align-items: flex-start; }
.vdu-picnic-basket-check { color: var(--vdu-olive); flex-shrink: 0; margin-top: 3px; display: inline-flex; }
.vdu-picnic-basket-t { font-weight: 700; font-size: 16.5px; }
.vdu-picnic-basket-d { font-size: 15.5px; color: var(--vdu-ink-soft); line-height: 1.5; }
.vdu-picnic-pay { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; background: var(--vdu-olive-cream); border-radius: 12px; }
.vdu-picnic-pay-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--vdu-olive); color: #fff; display: grid; place-items: center; }
.vdu-picnic-pay p { margin: 0; font-size: 16.5px; color: var(--vdu-ink); line-height: 1.5; }
.vdu-picnic-pay strong { color: var(--vdu-olive-deep); }
.vdu-picnic-pay span { color: var(--vdu-ink-soft); }
.vdu-picnic-perfect { margin: 18px 0 0; font-family: var(--vdu-serif); font-style: italic; font-size: 19px; color: var(--vdu-olive); }

.vdu-picnic-steps { background: var(--vdu-olive-deep); color: #fff; border-radius: 18px; padding: 32px 32px; box-shadow: var(--vdu-shadow); }
.vdu-picnic-steps-title { font-size: 25px; color: #fff; margin-bottom: 22px; }
.vdu-picnic-steps-list { display: flex; flex-direction: column; gap: 18px; }
.vdu-picnic-step { display: flex; gap: 16px; align-items: flex-start; }
.vdu-picnic-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; }
.vdu-picnic-step-t { font-weight: 700; font-size: 17.5px; }
.vdu-picnic-step-d { font-size: 16px; color: rgba(255,255,255,.8); }

/* ── CTA WhatsApp (sostituisce il book button) ──────────────
   Aderente all'estetica WA-green del book button di Moira (verde
   #25D366 + bordo 2px + inversione all'hover). */
.vdu-picnic-cta { text-align: center; margin-top: 40px; }
.vdu-picnic-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; color: #fff; 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;
}
.vdu-picnic-wa:hover { background: #fff; color: #128C40; border-color: #25D366; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(18,140,64,.45), 0 2px 8px rgba(0,0,0,.18); }
.vdu-picnic-wa:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }
.vdu-picnic-wa-ico { width: 26px; height: 26px; flex-shrink: 0; }

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

/* ── LIGHTBOX (scoped) ───────────────────────────────────── */
.vdu-picnic-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-picnic-lightbox[hidden] { display: none; }
.vdu-picnic-lb-fig { margin: 0; max-width: min(1080px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vdu-picnic-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-picnic-lb-cap { color: rgba(255,255,255,.92); font-family: var(--vdu-serif); font-style: italic; font-size: 19px; text-align: center; }
/* v.003 (22.08.2026) — SPECIFICITA' 0,2,0 sui bottoni del riquadro ingrandito.
   E' l'unica differenza fra la v.002 e la v.003, ed e' una CORREZIONE, non una
   scelta di stile: a 0,1,0 questi selettori PERDEVANO contro il reset di blocco
   .vdu-picnic button (0,1,1), che azzera fondo, bordo e colore. Le tre frecce
   uscivano quindi senza pastiglia e con il colore ereditato dal blocco —
   rgb(42,39,34) su fondo rgba(20,16,8,.92), cioe' scuro su scuro. Misurato il
   22.08.2026, non dedotto.
   Le righe :hover e :focus-visible restano come sono: valgono gia' 0,2,0 grazie
   alla pseudo-classe, e l'ORDINE in cui stanno qui e' quello che fa funzionare
   il caso -prev/-next (dove :hover deve ancora poter rimettere il translateY).
   E' la stessa disposizione, riga per riga, del blocco cheese gia' a norma. */
.vdu-picnic .vdu-picnic-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-picnic-lb-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.vdu-picnic-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vdu-picnic .vdu-picnic-lb-close { top: 22px; right: 22px; font-size: 26px; }
.vdu-picnic .vdu-picnic-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.vdu-picnic .vdu-picnic-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.vdu-picnic-lb-prev:hover { transform: translateY(-50%) scale(1.05); }
.vdu-picnic-lb-next:hover { transform: translateY(-50%) scale(1.05); }
.vdu-picnic-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: .04em; }

/* ── RESPONSIVE (port del media block di Moira) ──────────── */
@media (max-width: 1100px) {
	.vdu-picnic-top { grid-template-columns: 1fr; }
	.vdu-picnic-howbask { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.vdu-picnic-wrap { padding-left: 20px; padding-right: 20px; }
	.vdu-picnic-pay-ico { width: 32px; height: 32px; }
	.vdu-picnic-pay-ico .vdu-picnic-icon { width: 16px; height: 16px; }
	.vdu-picnic-basket-grid { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
	.vdu-picnic { padding: 68px 0; }
}
@media (max-width: 600px) {
	/* v.003 — 0,2,0 anche qui: una media query non aggiunge specificita', e a
	   0,1,0 queste quattro righe avrebbero perso contro la base appena portata
	   a 0,2,0, lasciando i bottoni a 52px sul telefono. */
	.vdu-picnic .vdu-picnic-lb-btn { width: 44px; height: 44px; font-size: 24px; }
	.vdu-picnic .vdu-picnic-lb-close { top: 14px; right: 14px; }
	.vdu-picnic .vdu-picnic-lb-prev { left: 10px; }
	.vdu-picnic .vdu-picnic-lb-next { right: 10px; }
}

/* ── v.002 OVERRIDES ─────────────────────────────────────── */

/* Titolo: Satisfy (font documento-wide da Brizy), verde brand.
   Specificità 0,2,0 → vince sul reset .vdu-picnic h2 (0,1,1). */
.vdu-picnic .vdu-picnic-title {
	font-family: 'kbmgxgqntknaxywsufrdzxutduxanjlkpzfo', var(--vdu-serif);
	font-size: clamp(38px, 5.2vw, 62px);
	font-weight: 400;
	letter-spacing: -1.5px;
	color: rgb(25, 160, 41);
	text-transform: none;
}
@media (max-width: 740px) {
	.vdu-picnic .vdu-picnic-title {
		font-size: 36px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -1px;
	}
}

/* "Come funziona": bianco — vince sul reset .vdu-picnic h3 (0,1,1). */
.vdu-picnic .vdu-picnic-steps-title { color: #ffffff; }

/* CTA WhatsApp: bianco — vince su .vdu-picnic a { color: inherit } (0,1,1). */
.vdu-picnic .vdu-picnic-wa     { color: #fff; }
.vdu-picnic .vdu-picnic-wa-ico { width: 36px; height: 36px; }

/* Colonna destra: immagine ritratto singola al posto delle 3 tile. */
.vdu-picnic-imgs { grid-template-columns: 1fr; grid-auto-rows: auto; }
.vdu-picnic-imgs .vdu-picnic-tile { aspect-ratio: 1000 / 1414; }

/* picnic-4 sotto il howbask: strip landscape, img assoluta per height: 100%. */
.vdu-picnic-foot-img { margin-top: 40px; }
.vdu-picnic-foot-img .vdu-picnic-tile { aspect-ratio: 5 / 2; }
.vdu-picnic-foot-img .vdu-picnic-tile img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

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

/* ── ROUND 3 (correzioni 18 giu 2026, sera) ──────────────────
   Eyebrow .vdu-picnic-pill rimosso (markup + regola). Resta solo
   il titolo verde. */

/* 2.2 — allinea il bordo SUPERIORE del titolo al bordo superiore
   dell'immagine a destra: le due colonne del top partono dall'alto. */
.vdu-picnic-top { align-items: start; }

/* 2.3 — riduce di 1/3 lo spazio vuoto sopra l'immagine a destra
   (104px → 2/3 ≈ 69px). Solo desktop; mobile (≤740px) resta 68px. */
@media (min-width: 741px) {
	.vdu-picnic { padding-top: 69px; }
}

/* 2.4 — hover CTA WhatsApp: inversione piena (sfondo bianco, testo
   + logo + bordo verdi). Specificità 0,3,0 per battere
   .vdu-picnic .vdu-picnic-wa{color:#fff} (0,2,0, più avanti nel
   file). Il logo segue currentColor (fill="currentColor") → verde.
   La transizione morbida è già su .vdu-picnic-wa (base). */
.vdu-picnic .vdu-picnic-wa:hover {
	background: #fff;
	color: rgb(25, 160, 41);
	border-color: rgb(25, 160, 41);
}

/* 3.2 — immagine orizzontale STATICA (no lightbox) sotto "Come
   funziona", STESSA colonna e STESSA larghezza del box. Su desktop
   riempie lo spazio a destra di "Componi il tuo cestino…": la
   colonna steps+immagine si stira all'altezza del cestino e
   l'immagine (flex) cresce per riempire. Su mobile si impila con
   rapporto fisso. */
.vdu-picnic-howbask { align-items: stretch; }
.vdu-picnic-stepscol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vdu-picnic-howimg {
	/* Round 3: ora è un <button> cliccabile (lightbox). position:relative serve al
	   badge hint assoluto; cursor/border/background/padding dal reset .vdu-picnic button.
	   Le classi .vdu-picnic-hover-card/.vdu-picnic-media-hover (nel markup) danno la
	   stessa hover cue delle altre tile. */
	position: relative; cursor: pointer; width: 100%; text-align: left; padding: 0;
	margin: 0; border-radius: 18px; overflow: hidden;
	box-shadow: var(--vdu-shadow-sm);
	/* flex-basis 0: l'immagine cresce per riempire ESATTAMENTE lo spazio
	   residuo della colonna (stirata all'altezza naturale del cestino),
	   senza stirare il cestino. */
	flex: 1 1 0; min-height: 180px;
}
.vdu-picnic-howimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) {
	/* layout impilato: rapporto definito, niente flex-grow. */
	.vdu-picnic-howimg { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* ── RIFINITURE (19 giu 2026) — in place su v.002 ───────────
   (1) Distanza titolo→sottotitolo = 20px esatti: margin-bottom del
       titolo a 20px; il lead ha margin-top 0 → i margini adiacenti
       collassano a 20px esatti. Specificità 0,2,0 → vince sul reset
       .vdu-picnic h2 { margin:0 } (0,1,1) e sul base .vdu-picnic-title
       (0,1,0), che oggi rendevano il margine = 0.
   (2) Il box .vdu-picnic-pay è stato spostato NEL MARKUP nella colonna
       testo, sotto la chip "Prenotazione obbligatoria"; NESSUNA modifica
       CSS (classi e stile del box invariati: regole class-based, non
       legate al contenitore .vdu-picnic-basket).
   (3) Frase finale .vdu-picnic-perfect: centrata + 36px (desktop esatti),
       break dopo "Perfetto per coppie," (nel markup). Riduzione responsive
       <600px con clamp (idiom del blocco: come .vdu-picnic-title/-lead);
       il valore desktop di 36px resta invariato. */
.vdu-picnic .vdu-picnic-title { margin-bottom: 20px; }

.vdu-picnic .vdu-picnic-perfect { text-align: center; font-size: 36px; }
@media (max-width: 600px) {
	.vdu-picnic .vdu-picnic-perfect { font-size: clamp(22px, 6.4vw, 36px); }
}

/* ── RIFINITURE 2 (19 giu 2026) — in place su v.002 ─────────
   6 rifiniture estetiche. Tutto scoped .vdu-picnic, nessun effetto fuori dal blocco. */

/* (1) Box "Paghi solo…" con lo STESSO stile visivo del box "Come funziona"
   (.vdu-picnic-steps): sfondo verde scuro, testo bianco, icona bianca su
   pastiglia oro. Riusa i token --vdu-olive-deep / --vdu-gold (gli stessi del
   box steps e dei numeri-step), nessun valore colore duplicato. */
.vdu-picnic .vdu-picnic-pay { background: var(--vdu-olive-deep); border-radius: 18px; box-shadow: var(--vdu-shadow); }
.vdu-picnic .vdu-picnic-pay p { color: #fff; }
.vdu-picnic .vdu-picnic-pay strong { color: #fff; }
.vdu-picnic .vdu-picnic-pay p span { color: rgba(255, 255, 255, .85); }
.vdu-picnic .vdu-picnic-pay-ico { background: var(--vdu-gold); color: #fff; }

/* (4) +40px sopra "Perfetto…" a parità di altezza del cestino (.vdu-picnic-basket):
   i 40px arrivano dal sotto (margin-bottom 1em=36px del perfect azzerato) + 4px
   dal padding-bottom del cestino (32→28). Netto sull'altezza del cestino = 0.
   Le modifiche del giro 1 (center + 36px + break) restano. */
.vdu-picnic .vdu-picnic-perfect { margin-top: 40px; margin-bottom: 0; }
.vdu-picnic .vdu-picnic-basket { padding-bottom: 28px; }

/* (5) Titolo "Come funziona": 20px sopra (padding-top del box 32→20), 30px sotto
   (margin-bottom del titolo 0→30), +~16% di dimensione (25→29px), bold+italic.
   Altezza del box .vdu-picnic-steps invariata: il padding-bottom assorbe il
   surplus (32→10px). */
.vdu-picnic .vdu-picnic-steps { padding-top: 20px; padding-bottom: 10px; }
.vdu-picnic .vdu-picnic-steps-title { font-size: 29px; font-weight: 700; font-style: italic; margin-bottom: 30px; }

/* (6) Bottone "Prenota su WhatsApp" centrato H+V nello spazio tra il bordo
   inferiore dell'immagine superiore (.vdu-picnic-foot-img) e il bordo inferiore
   della sezione: spazio (218px) invariato, margini sopra/sotto pareggiati a 72px
   (cta margin-top 40→72, section padding-bottom 104→72). Solo desktop (≥741px);
   mobile invariato. H già centrato (text-align center + inline-flex). */
@media (min-width: 741px) {
	.vdu-picnic { padding-bottom: 72px; }
	.vdu-picnic-cta { margin-top: 72px; }
}