/* ============================================================
   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-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--vdu-olive); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.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; }
.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-lb-close { top: 22px; right: 22px; font-size: 26px; }
.vdu-picnic-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.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) {
	.vdu-picnic-lb-btn { width: 44px; height: 44px; font-size: 24px; }
	.vdu-picnic-lb-close { top: 14px; right: 14px; }
	.vdu-picnic-lb-prev { left: 10px; }
	.vdu-picnic-lb-next { right: 10px; }
}

@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; }
}