/* Il giardino di Villa Diana · stili del sito
   Riferimento: docs/redesign/DESIGN.md e docs/redesign/mockup/index.html */

/* ---------- Colori e font ---------- */
:root{
  --bosco:#1D3B2A;          /* fondo sezioni scure, testo su crema, bordo pulsanti */
  --notte:#132A1D;          /* footer, barra fissa mobile */
  --crema:#F6F2E6;          /* fondo sezioni chiare e header, testo su verde */
  --ambra:#F2C66A;          /* pulsante principale, prezzi, dettagli su verde */
  --bordeaux:#7A1D33;       /* occhielli e link su crema, riquadro extra, checkbox */
  --bianco:#FFFFFF;         /* fondo dei campi del form */
  --testo2-crema:#3F5947;   /* testo secondario su crema */
  --testo2-verde:#D9DDCB;   /* testo secondario su verde */
  --linea-crema:#C9CBB4;    /* divisori su crema */
  --linea-verde:#4C6E59;    /* divisori su verde, bordo filtri non attivi */
  --linea-bordeaux:#9C4A5C; /* divisori nel riquadro extra */

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Figtree',system-ui,sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:84px} /* le ancore non finiscono sotto l'header fisso */
body{margin:0;background:var(--notte)}
a{color:var(--bordeaux)}
summary{list-style:none}
summary::-webkit-details-marker{display:none}

.pagina{background:var(--crema);color:var(--bosco);font-family:var(--sans);font-size:18px;line-height:1.5}

.solo-mobile{display:none}

/* ---------- Sezioni ---------- */
.sez--crema{background:var(--crema);color:var(--bosco);--testo2:var(--testo2-crema);--linea:var(--linea-crema);--occhiello:var(--bordeaux)}
.sez--verde{background:var(--bosco);color:var(--crema);--testo2:var(--testo2-verde);--linea:var(--linea-verde);--occhiello:var(--ambra)}

.contenitore{max-width:1200px;margin:0 auto;padding:clamp(64px,8vw,112px) clamp(20px,4vw,40px)}

.riga{display:flex;flex-wrap:wrap;align-items:flex-start}
.pila{display:flex;flex-direction:column}
.col-intro{flex:1 1 300px;min-width:0}
.col-principale{flex:999 1 520px;min-width:0}

/* ---------- Titoli ---------- */
.intestazione{display:flex;flex-direction:column;gap:14px;text-align:left}
.occhiello{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;color:var(--occhiello)}
.h1,.h2,.h3{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;text-wrap:balance}
.h1{font-size:clamp(40px,4.4vw,62px);line-height:1.04}
.h2{font-size:clamp(36px,4.2vw,56px);line-height:1.08}
.h2--grande{font-size:clamp(40px,5vw,72px);line-height:1.02}
.h3{font-size:28px;line-height:1.15}
.sottotitolo{margin:0;font-size:20px;color:var(--testo2);max-width:620px}

/* ---------- Pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 28px;font-family:inherit;font-weight:700;font-size:19px;text-decoration:none;text-align:center;border-radius:0;border:2px solid;cursor:pointer}
.btn svg{flex:none}
.btn--primario{background:var(--ambra);color:var(--bosco);border-color:var(--bosco)}
.btn--secondario{background:transparent;color:inherit;border-color:currentColor}
.btn--compatto{min-height:54px;padding:0 20px;font-size:18px}
.btn--largo{flex:1 1 220px}
.azioni{display:flex;flex-wrap:wrap;gap:12px}
.azione-singola{display:flex}

.link-forte{color:var(--bordeaux);font-weight:700}
.link-ambra{color:var(--ambra);font-weight:700}

/* ---------- Header ---------- */
.testata{position:sticky;top:0;z-index:20;background:var(--crema);color:var(--bosco);border-bottom:2px solid var(--bosco)}
.testata__in{max-width:1200px;margin:0 auto;padding:10px clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--bosco);line-height:1.05}
.logo__pre{font-size:14px;font-weight:600}
.logo__nome{font-family:var(--serif);font-style:italic;font-weight:600;font-size:26px}
.menu{display:flex;flex-wrap:wrap;gap:0 28px}
.menu a{color:var(--bosco);text-decoration:none;font-weight:700;line-height:54px}

/* ---------- Hero: biglietto d'invito sopra la foto ---------- */
.hero{position:relative;overflow:hidden;background:var(--bosco)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.hero-in{position:relative;max-width:1200px;margin:0 auto;min-height:780px;padding:72px 40px;display:flex;align-items:center}
.biglietto{width:100%;max-width:540px;background:var(--crema);color:var(--bosco);border:6px double var(--bosco);outline:3px solid var(--crema);padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:20px}
.biglietto__pre{margin:0;font-size:17px;font-weight:600;color:var(--testo2-crema)}
.invito{margin:0;border-bottom:1px solid var(--bosco)}
.invito div{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--bosco)}
.invito dt{flex:none;width:74px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px}
.invito dd{margin:0}
.biglietto__link{align-self:flex-start;padding:6px 0}

/* ---------- Il giardino ---------- */
.giardino-intro{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:center}
.giardino-intro__foto{flex:1 1 340px;min-width:0;max-width:540px;margin:0}
.giardino-intro__testo{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:26px}
.apertura{margin:0;font-size:22px;line-height:1.5}
.nota-divisa{margin:0;font-size:19px;color:var(--testo2);padding-top:22px;border-top:1px solid var(--linea)}
.foto-larga{margin:clamp(32px,5vw,64px) 0 0;display:flex;flex-direction:column;gap:12px}
.foto-larga img{display:block;width:100%;object-fit:cover;height:clamp(240px,34vw,520px);object-position:50% 85%}
.didascalia{font-size:17px;color:var(--testo2)}

/* foto con proporzioni fisse */
.foto-3x4,.foto-4x3{display:block;width:100%;object-fit:cover;height:auto}
.foto-3x4{aspect-ratio:3 / 4}
.foto-4x3{aspect-ratio:4 / 3}

/* ---------- Liste con divisori ---------- */
.lista{margin:0;padding:0;list-style:none}
.lista--griglia{display:grid;gap:0 40px;font-size:20px;font-weight:600}
.lista--griglia li{padding:13px 0;border-bottom:1px solid var(--linea)}
.lista--feste{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.lista--spunte{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.lista--spunte li{display:flex;align-items:center;gap:14px}
.lista--spunte svg{flex:none}

/* ---------- Le feste ---------- */
#feste .riga{gap:40px 72px}
#feste .col-intro{flex-basis:340px}
.fatte-blocco{margin-top:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:32px}
.fatte{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,13fr);gap:40px 48px;align-items:stretch}
.fatte-foto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;min-width:0}
.scheda{min-width:0;margin:0;display:flex;flex-direction:column;gap:12px}
.scheda figcaption{font-size:19px;font-weight:700}
.locandina{position:relative;flex:1 1 auto;min-height:0}
.locandina img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:left top}

/* ---------- Prezzi ---------- */
#prezzi .pila{gap:40px}
#prezzi .riga{gap:40px 80px}
.listino{flex:999 1 480px;min-width:0;font-size:21px;border-top:2px solid var(--ambra)}
.listino li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--linea)}
.prezzo{font-weight:700;font-size:24px;line-height:1;color:var(--ambra);white-space:nowrap}
.listino .link-ambra{white-space:nowrap}
.condizioni{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.condizione{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.condizione--ultima{border-bottom:0}
.condizione__titolo{font-size:21px;font-weight:700}
.condizione__testo{color:var(--testo2)}

/* ---------- Incluso / extra ---------- */
#incluso .riga{gap:56px 72px}
.incluso{flex:999 1 540px;min-width:0;gap:32px}
.extra{flex:1 1 340px;min-width:0;background:var(--bordeaux);color:var(--crema);padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;gap:18px}
.extra__pre{margin:0;font-size:17px;font-weight:700}
.extra .lista{font-size:20px;font-weight:600;border-top:1px solid var(--linea-bordeaux)}
.extra .lista li{padding:12px 0;border-bottom:1px solid var(--linea-bordeaux)}
.extra__nota{margin:0;font-size:18px}

/* ---------- Foto: filtri e galleria ---------- */
#foto .pila{gap:30px}
.filtri{display:flex;flex-wrap:wrap;gap:10px}
.filtro{min-height:52px;padding:0 20px;background:transparent;color:var(--crema);border:2px solid var(--linea-verde);border-radius:0;font-family:inherit;font-size:18px;font-weight:700;cursor:pointer}
.filtro[aria-pressed="true"]{background:var(--crema);color:var(--bosco);border-color:var(--crema)}
.galleria{display:flex;flex-wrap:wrap;gap:16px}
.galleria figure{flex:1 1 340px;min-width:0;margin:0}  /* l'ultima riga si allarga: niente buchi */
.galleria figure[hidden]{display:none}
.galleria-foto{display:block;width:100%;height:320px;object-fit:cover}
.galleria-foto--basso{object-position:50% 85%} /* inquadra la parte bassa della foto (es. DJ e casse, meno cielo) */
.testo-semplice{margin:0}

/* ---------- Come si prenota ---------- */
#come .pila{gap:40px}
.passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:32px}
.passi li{border-top:2px solid var(--bosco);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.passo__num{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;color:var(--bordeaux)}
.passo__titolo{font-size:21px;font-weight:700}
.passo__testo{color:var(--testo2)}

/* ---------- Domande frequenti ---------- */
#domande .riga,#dove .riga{gap:32px 80px}
.faq{border-top:2px solid var(--ambra)}
.faq details{border-bottom:1px solid var(--linea-verde)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:14px 0;cursor:pointer;font-size:21px;font-weight:700}
.faq p{margin:0;padding:0 56px 24px 0;font-size:19px;color:var(--testo2-verde)}
.piu{flex:none;width:40px;height:40px;border:2px solid var(--ambra);color:var(--ambra);display:flex;align-items:center;justify-content:center;font-size:0;font-weight:400;line-height:1}
.piu::before{content:"+";font-size:26px}
details[open] .piu{background:var(--ambra);color:var(--bosco)}
details[open] .piu::before{content:"\2212"}

/* ---------- Richiesta: form e contatti ---------- */
#richiesta .riga{gap:56px 80px}
.modulo{flex:999 1 540px;min-width:0;display:flex;flex-direction:column;gap:24px}
.campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px 24px}
.campo{display:flex;flex-direction:column;gap:8px}
.etichetta{font-size:18px;font-weight:700}
.input{width:100%;min-height:58px;padding:0 16px;font-size:19px;font-family:inherit;background:var(--bianco);color:var(--bosco);border:2px solid var(--bosco);border-radius:0}
textarea.input{padding:14px 16px;line-height:1.4;resize:vertical}
.gruppo{margin:0;padding:0;border:0}
.gruppo legend{padding:0;margin-bottom:10px;font-size:18px;font-weight:700}
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:2px 24px}
.scelta{display:flex;align-items:center;gap:14px;min-height:50px}
.casella{width:28px;height:28px;flex:none;accent-color:var(--bordeaux)}
.consenso{display:flex;align-items:flex-start;gap:14px}
.btn--invio{flex:0 1 360px}

/* Tendine e calendario personalizzati (creati da js/main.js al posto di select e input date) */
.tendina,.calendario{position:relative}
.tendina__bottone{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.tendina__bottone svg{flex:none}
.tendina__bottone[aria-expanded="true"]{border-width:3px;padding:0 15px}
.tendina__bottone[aria-expanded="true"] .tendina__freccia{transform:rotate(180deg)}
.tendina__bottone--vuoto .tendina__testo{color:var(--testo2-crema)}
.tendina__lista{position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:35;margin:0;padding:0;list-style:none;background:var(--bianco);border:2px solid var(--bosco);max-height:min(440px,70vh);overflow-y:auto;font-size:19px}
.tendina__lista li{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 16px;cursor:pointer;border-top:1px solid var(--linea-crema)}
.tendina__lista li:first-child{border-top:0}
.tendina__lista li::before{content:"";flex:none;width:20px;height:20px}
.tendina__lista li:hover,.tendina__lista li.attiva{background:var(--crema)}
.tendina__lista li[aria-selected="true"]{font-weight:700}
.tendina__lista li[aria-selected="true"]::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3B2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}

.cal{position:absolute;left:0;top:calc(100% - 2px);z-index:35;width:100%;min-width:300px;max-width:400px;background:var(--bianco);border:2px solid var(--bosco);padding:14px}
.cal__testa{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal__mese{margin:0;font-size:19px;font-weight:700}
.cal__nav{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;background:transparent;color:var(--bosco);border:2px solid var(--bosco);border-radius:0;cursor:pointer}
.cal__nav:disabled{border-color:var(--linea-crema);color:var(--linea-crema);cursor:default}
.cal__griglia{width:100%;border-collapse:collapse;table-layout:fixed}
.cal__griglia th{height:36px;font-size:16px;font-weight:600;color:var(--testo2-crema);text-align:center}
.cal__griglia td{padding:1px;text-align:center}
.cal__giorno{width:100%;min-width:40px;height:44px;padding:0;background:transparent;color:var(--bosco);border:2px solid transparent;border-radius:0;font-family:inherit;font-size:18px;cursor:pointer}
.cal__giorno:hover{background:var(--crema)}
.cal__giorno[aria-current="date"]{border-color:var(--linea-crema);font-weight:700}
.cal__giorno[aria-pressed="true"]{background:var(--ambra);border-color:var(--bosco);font-weight:700}
.cal__giorno[aria-disabled="true"]{color:#8A968C;background:transparent;cursor:default}
.cal__giorno:focus-visible,.cal__nav:focus-visible,.tendina__bottone:focus-visible{outline:3px solid var(--bordeaux);outline-offset:2px}
.cal__giorno:focus-visible{outline-offset:-3px}

/* errori del modulo */
.errore-campo{margin:0;display:flex;align-items:flex-start;gap:8px;font-size:17px;font-weight:700;line-height:1.35;color:var(--bordeaux)}
.errore-campo svg{flex:none;margin-top:1px}
.consenso + .errore-campo{margin-top:-12px}
.riepilogo{margin:0;padding:16px 18px;border:2px solid var(--bordeaux);border-left-width:8px;background:var(--bianco);color:var(--bosco)}
.riepilogo__titolo{display:block;font-size:19px;font-weight:700;color:var(--bordeaux)}
.riepilogo ul{margin:6px 0 0;padding-left:22px}
.riepilogo li{margin:2px 0}
.riepilogo a{color:var(--bordeaux);font-weight:700}
.input[aria-invalid="true"]{border-color:var(--bordeaux)}
.casella[aria-invalid="true"]{outline:2px solid var(--bordeaux);outline-offset:2px}
.esito{margin:0;font-size:19px;font-weight:700;padding:14px 16px;border:2px solid var(--bosco);background:var(--bianco)}
.esito--errore{border-color:var(--bordeaux);color:var(--bordeaux)}

.contatti{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:22px}
.contatti__intro{margin:0;color:var(--testo2)}
.contatto{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--linea)}
.contatto--email{gap:4px}
.contatto__nome{font-size:21px}
.contatto__titolo{font-size:21px;font-weight:700}
.contatto__email{font-size:19px;overflow-wrap:anywhere;padding:6px 0}

/* ---------- Dove siamo ---------- */
.dove{gap:18px}
.indirizzo{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:30px;line-height:1.2}
.info-riga{margin:0;padding-top:16px;border-top:1px solid var(--linea)}
.dove .azione-singola{padding-top:8px}

/* ---------- Footer ---------- */
.piede{background:var(--notte);color:var(--crema)}
.piede__in{max-width:1200px;margin:0 auto;padding:64px clamp(20px,4vw,40px) 40px;display:flex;flex-direction:column;gap:40px}
.piede .riga{gap:40px 72px}
.piede__marchio{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:10px}
.piede__nome{font-family:var(--serif);font-style:italic;font-weight:600;font-size:34px;line-height:1.1;color:var(--ambra)}
.piede__marchio span:last-child{font-size:19px}
.piede__col{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;font-size:19px}
.piede__col--legale{flex-basis:200px}
.piede__titolo{font-weight:700;color:var(--ambra);padding-bottom:6px}
.piede__col > span:not(.piede__titolo),.piede__col a{padding:8px 0}
.piede__col a{color:var(--crema);overflow-wrap:anywhere}
.piede__copy{margin:0;padding-top:22px;border-top:1px solid var(--linea-verde);font-size:16px;color:var(--testo2-verde)}

/* ---------- Barra fissa in basso (solo mobile) ---------- */
.barra{position:sticky;bottom:0;z-index:30;background:var(--notte);color:var(--crema);border-top:2px solid var(--ambra);padding:10px 12px;gap:10px;grid-template-columns:3fr 2fr}

/* ---------- Pagine legali ---------- */
.legale{max-width:72ch}
.legale .aggiornato{margin:0 0 8px;color:var(--testo2)}
.legale h2{margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--linea);font-family:var(--serif);font-style:italic;font-weight:600;font-size:30px;line-height:1.15}
.legale h3{margin:24px 0 8px;font-size:20px;font-weight:700}
.legale p,.legale ul{margin:0 0 16px}
.legale ul{padding-left:24px}
.legale li{margin-bottom:8px}
.legale a{color:var(--bordeaux);font-weight:700}
.da-completare{background:var(--ambra);padding:0 6px}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .solo-desktop{display:none !important}
  .solo-mobile{display:block}
  .barra{display:grid}
  .hero-img{position:static;height:440px}
  .hero-in{min-height:0;margin-top:-88px;padding:0 14px 56px}
  .galleria{gap:10px}
  .galleria figure{flex-basis:150px}
  .galleria-foto{height:190px}
  .fatte{grid-template-columns:minmax(0,1fr)}
  .fatte-foto{grid-template-columns:minmax(0,1fr)}
  .locandina{position:static}
  .locandina img{position:static;height:auto;aspect-ratio:4 / 5}
}