/* =================================================================
   BATTAGLIA VINI — "Luce": versione chiara, editoriale
   Importa la struttura della versione scura e ne ridefinisce
   soltanto colori, contrasti e il taglio dell'hero.
   ================================================================= */
@import url('style.css');

:root{
  --bg:        #faf7f0;   /* carta calda */
  --bg-2:      #f2ebdf;   /* fascia alternata */
  --bg-3:      #ffffff;   /* schede */
  --cream:     #2b1f18;   /* testo principale (espresso) */
  --muted:     #6d5c50;
  --gold:      #8a6a24;   /* bronzo, leggibile su carta */
  --gold-soft: #7c2233;   /* rosso vino: accento editoriale */
  --line:      rgba(43,31,24,.16);
  --ink:       #f6f1e6;   /* testo chiaro per le fasce scure */
}

body{font-weight:400}
.section-head__lead,.story__text p,.wine__body>p{font-weight:400}

/* ---------- Nav ---------- */
.nav{isolation:isolate}
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(250,247,240,.92) 0%,rgba(250,247,240,.55) 60%,rgba(250,247,240,0) 100%);
  transition:opacity .5s var(--ease);
}
.nav.scrolled::before{opacity:0}
.nav.scrolled{background:rgba(250,247,240,.92);border-bottom-color:var(--line)}
.nav__burger span{background:var(--cream)}

/* ---------- Hero: taglio editoriale a due campi ---------- */
.hero__bg{left:38%;background-position:center 45%}
.hero__overlay{
  background:
    linear-gradient(to right,var(--bg) 0%,var(--bg) 30%,rgba(250,247,240,.92) 40%,rgba(250,247,240,0) 58%),
    linear-gradient(to top,rgba(250,247,240,.55) 0%,transparent 40%);
}
.hero__logo{filter:none;height:clamp(96px,12vw,140px)}
.hero__eyebrow,.hero__title,.hero__lead{text-shadow:none}
.hero__title{font-weight:400}
.hero__lead{color:var(--muted)}
.hero__scroll span{background:linear-gradient(var(--gold),transparent)}

/* ---------- Bottoni ---------- */
.btn--gold{background:var(--gold-soft);border-color:var(--gold-soft);color:#fff}
.btn--gold:hover{background:transparent;color:var(--gold-soft)}
.btn--ghost{border-color:rgba(43,31,24,.28);color:var(--cream)}
.btn--ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* ---------- Vini ---------- */
.wine{box-shadow:0 1px 2px rgba(70,50,35,.05)}
.wine:hover{box-shadow:0 22px 48px rgba(70,50,35,.13);border-color:var(--gold-soft)}
.wine__stage{
  background:
    radial-gradient(120px 60px at 50% 96%,rgba(124,34,51,.09),transparent 70%),
    radial-gradient(circle at 50% 32%,rgba(138,106,36,.07),transparent 62%);
}
.wine__stage::after{background:radial-gradient(ellipse,rgba(70,50,35,.22),transparent 70%)}
.wine__bottle{filter:drop-shadow(0 16px 20px rgba(70,50,35,.28))}
.filter.is-active{background:var(--gold-soft);border-color:var(--gold-soft);color:#fff}
.filter:hover{border-color:var(--gold-soft)}

/* ---------- Storia ---------- */
.story__badge{background:var(--gold-soft);color:#fff;box-shadow:0 18px 40px rgba(70,50,35,.22)}
blockquote{border-left-color:var(--gold-soft)}

/* ---------- Territorio: fascia scura di contrasto ---------- */
.territory__overlay{background:linear-gradient(to right,rgba(30,21,16,.9),rgba(30,21,16,.55))}
.territory__content .eyebrow{color:#d8b26a}
.territory__content h2,.territory__content p{color:var(--ink)}
.territory__content em,.territory__content strong{color:#e6c98a}
.terroir-tags span{border-color:#c8a24c;color:#e6c98a}

/* ---------- Mappe ---------- */
.cmap-prov{fill:rgba(43,31,24,.04);stroke:rgba(138,106,36,.5)}
.cmap-prov.is-active{fill:rgba(124,34,51,.13);stroke:var(--gold-soft)}
.cmap-rc{fill:rgba(43,31,24,.03);stroke:rgba(43,31,24,.16)}
.cmap-zone{fill:rgba(124,34,51,.16);stroke:rgba(124,34,51,.4)}
.cmap-zone.is-on{fill:rgba(124,34,51,.5);stroke:var(--gold-soft)}
.cmap-city{fill:var(--cream)}
.cmap-citylabel{fill:rgba(43,31,24,.8)}
.cmap-dot,.cmap-ping{fill:var(--gold-soft);stroke:var(--gold-soft)}
.cmap-zonelabel{fill:#8a4250}
.cmap-zonelabel.is-active{fill:var(--gold-soft)}
.cmap-sea{fill:rgba(109,92,80,.55)}
.lmap-prov{fill:rgba(43,31,24,.05);stroke:rgba(43,31,24,.2)}
.lmap-prov.is-on{fill:rgba(124,34,51,.5);stroke:var(--gold-soft)}

/* ---------- Denominazioni ---------- */
.umbrella:hover,.umbrella.is-active{border-color:var(--gold-soft);background:rgba(124,34,51,.035)}
.tcard:hover,.tcard.is-active{border-color:var(--gold-soft);box-shadow:0 18px 40px rgba(70,50,35,.1)}

/* ---------- Metodo ---------- */
.pstep:hover::after{background:var(--gold-soft);box-shadow:0 0 0 6px rgba(124,34,51,.14)}
.pstep::after{border-color:var(--gold-soft)}
.pstep__num{color:#f0d79a}
.process__note{color:var(--gold-soft)}

/* ---------- Galleria ---------- */
.gallery__cap{color:var(--ink)}
.lbox__figure figcaption span{color:var(--ink)}
.lbox__figure figcaption em{color:#e6c98a}
.lbox__close{color:var(--ink)}
.lbox__nav{color:var(--ink);background:rgba(30,21,16,.55);border-color:rgba(243,235,221,.25)}
.lbox__nav:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:#fff}

/* ---------- Scheda vino ---------- */
.wmodal__backdrop{background:rgba(43,31,24,.55)}
.wmodal__dialog{border-color:var(--gold-soft);box-shadow:0 40px 90px rgba(43,31,24,.3)}
.wglass__bowl{border-color:rgba(43,31,24,.28);background:linear-gradient(160deg,rgba(255,255,255,.5),transparent 55%)}
.wglass__stem{background:rgba(43,31,24,.24)}
.wglass__foot{background:rgba(43,31,24,.18)}
.wglass__shine{background:linear-gradient(rgba(255,255,255,.75),transparent)}
.wmodal__map{border-color:var(--gold-soft);color:var(--gold-soft)}
.wmodal__map:hover{background:var(--gold-soft);color:#fff}

/* ---------- Contatti / FAQ / Footer ---------- */
.contact__form{background:var(--bg-3)}
.contact__form input,.contact__form textarea{background:var(--bg)}
.contact__card{border-left-color:var(--gold-soft)}
.faq__item[open] summary h3,.faq__item summary:hover h3{color:var(--gold-soft)}
.faq__icon::before,.faq__icon::after{background:var(--gold-soft)}
.footer{background:var(--bg-2)}

/* ---------- Responsive: hero a piena larghezza ---------- */
@media(max-width:900px){
  .hero__bg{left:0;background-position:center 42%}
  .hero__overlay{
    background:
      linear-gradient(to bottom,rgba(250,247,240,.94) 0%,rgba(250,247,240,.88) 55%,rgba(250,247,240,.7) 100%);
  }
}
