/* ===========================================================
   Trattoria Ponte di Veja - style.css
   Palette territorio: pietra, bosco, rosso ammonitico, crema
   Font di sistema (offline-safe, GDPR-clean)
   =========================================================== */

:root{
  --cream:#f6f3ec;
  --cream-rgb:246,243,236;
  --ink-rgb:42,38,32;
  --cream-2:#efe9dc;
  --paper:#fffdf8;
  --ink:#2a2620;
  --muted:#6b6355;
  --line:#e3dccc;
  --forest:#3d5a40;
  --forest-deep:#2c4630;
  --stone:#8a7c66;
  --rose:#a6584e;      /* rosso ammonitico */
  --rose-deep:#7a3f38;
  --gold:#c9a24a;
  --shadow:0 12px 40px rgba(52,44,30,.12);
  --shadow-lg:0 24px 60px rgba(52,44,30,.18);
  --serif:"Palatino Linotype","Iowan Old Style","Palatino",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1140px;
  --wrap-narrow:820px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.container{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.container-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 22px}
.center{text-align:center}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--ink);margin:0 0 .5em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.35rem}
h4{font-size:1.15rem;margin-bottom:.35em}
p{margin:0 0 1rem}

.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.74rem;font-weight:700;color:var(--rose);margin:0 0 .6rem;
}
.eyebrow.light{color:var(--gold)}
.section-intro{color:var(--muted);font-size:1.08rem;max-width:60ch}
.center .section-intro{margin-left:auto;margin-right:auto}
.lead{font-size:1.14rem;color:var(--muted)}
.text-link{color:var(--forest);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.98rem;
  padding:14px 26px;border-radius:40px;text-decoration:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  border:1.5px solid transparent;letter-spacing:.01em;
}
.btn-primary{background:var(--forest);color:#f4f0e6;box-shadow:0 8px 22px rgba(61,90,64,.28)}
.btn-primary:hover{background:var(--forest-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--stone)}
.btn-ghost:hover{background:var(--cream-2);transform:translateY(-2px)}
.btn-light{background:rgba(255,253,248,.14);color:#fffdf8;border-color:rgba(255,253,248,.5);backdrop-filter:blur(4px)}
.btn-light:hover{background:rgba(255,253,248,.24);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#2a2620;box-shadow:0 8px 22px rgba(201,162,74,.28);font-weight:700}
.btn-gold:hover{background:#dcb75f;transform:translateY(-2px)}
.btn-lg{padding:17px 38px;font-size:1.06rem}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:linear-gradient(180deg, rgba(24,20,15,.42) 0%, rgba(24,20,15,0) 100%);
  transition:background .3s ease, backdrop-filter .3s ease;
}
/* dopo lo scroll l'header diventa verde, non crema: resta parte del brand
   invece di trasformarsi in una barra bianca staccata dal resto */
.site-header.is-solid{
  background:rgba(37,58,40,.95);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 2px 20px rgba(24,20,15,.18);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--forest);flex-shrink:0}
.brand-mark{display:flex;color:var(--gold)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:var(--serif);font-size:1.22rem;font-weight:600;color:#fffdf8;
  text-shadow:0 1px 12px rgba(0,0,0,.4);transition:color .3s ease, text-shadow .3s ease;
}
.brand-sub{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,248,.78);
  text-shadow:0 1px 12px rgba(0,0,0,.4);transition:color .3s ease, text-shadow .3s ease;
}
.site-nav{display:flex;align-items:center;gap:20px}
.site-nav a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:#fffdf8;opacity:.9;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  transition:opacity .15s, color .3s ease, text-shadow .3s ease;white-space:nowrap;
}
.site-nav a:hover{opacity:1;color:var(--gold)}
.site-nav a.is-current{opacity:1;color:var(--gold);font-weight:600}

/* header verde dopo lo scroll: il testo resta chiaro, cade solo l'ombra
   che serviva sopra la foto */
.site-header.is-solid .brand-mark{color:var(--gold)}
.site-header.is-solid .brand-name{color:#fffdf8;text-shadow:none}
.site-header.is-solid .brand-sub{color:rgba(255,253,248,.72);text-shadow:none}
.site-header.is-solid .site-nav a{color:#fffdf8;opacity:.88;text-shadow:none}
.site-header.is-solid .site-nav a:hover{opacity:1;color:var(--gold)}
.site-header.is-solid .site-nav a.is-current{opacity:1;color:var(--gold)}

.nav-cta{
  background:var(--gold);color:#2a2620 !important;padding:7px 14px;border-radius:30px;
  opacity:1 !important;text-shadow:none !important;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;font-size:.89rem;
}
.nav-cta-ico{width:14px;height:14px;flex:0 0 auto}
.nav-cta:hover{background:#dcb75f;color:#2a2620 !important}
.site-header.is-solid .nav-cta,
.site-header.is-solid .nav-cta:hover{color:#2a2620 !important}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:8px;gap:5px;
  flex-direction:column;width:42px;
}
.nav-toggle span{
  display:block;height:2.5px;background:#fffdf8;border-radius:2px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:transform .2s, opacity .2s, background .3s ease;
}
.site-header.is-solid .nav-toggle span{background:#fffdf8;box-shadow:none}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Mobile menu overlay ---------- */
.m-menu{
  position:fixed;inset:0;background:var(--cream);z-index:850;
  display:flex;flex-direction:column;justify-content:center;padding:28px 24px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  opacity:0;
}
.m-menu.open{transform:none;opacity:1}
.m-menu a{
  font-family:var(--serif);font-size:clamp(28px,7vw,40px);font-weight:400;
  padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);
  text-decoration:none;display:block;
}
.m-menu a:hover{color:var(--ink)}
.m-menu a.m-menu-cta{
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  color:#2a2620;background:var(--gold);border:0;border-radius:30px;
  padding:14px 28px;margin-top:28px;
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
}
.m-menu a.m-menu-cta:hover{background:#dcb75f;color:#2a2620}

/* ---------- Hero home (foto reale) ---------- */
.hero{
  position:relative;min-height:min(92vh,780px);display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--forest-deep);overflow:hidden;
  /* Il contenuto e appoggiato in basso: senza questo spazio riservato all'header,
     un testo piu lungo (es. la versione EN) risale e finisce sotto la barra. */
  padding-top:88px;
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(24,20,15,.92) 0%, rgba(24,20,15,.62) 45%, rgba(24,20,15,.30) 100%);
}
/* titolo + info pratiche insieme, appoggiati sul fondo della foto */
.hero-body{position:relative;z-index:2;width:100%}
.hero-content{padding:0 22px 32px;color:#fffdf8}
.hero-eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;font-weight:700;
  color:var(--gold);margin:0 0 .8rem;
}
.hero-title{
  font-family:var(--serif);font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.08;
  color:#fffdf8;margin:0 0 .6rem;max-width:19ch;text-shadow:0 2px 22px rgba(0,0,0,.35);
}
.hero-lead{font-size:1.1rem;max-width:56ch;color:rgba(255,253,248,.9);margin-bottom:1.7rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Page hero (pagine interne) ---------- */
.page-hero{
  position:relative;min-height:clamp(300px,46vh,430px);display:flex;align-items:flex-end;
  background:var(--forest-deep);overflow:hidden;
}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(24,20,15,.88) 0%, rgba(24,20,15,.58) 55%, rgba(24,20,15,.32) 100%);
}
.page-hero-content{position:relative;z-index:2;padding:0 22px 46px;color:#fffdf8}
.page-hero-content h1{
  font-size:clamp(1.9rem,4.4vw,3.1rem);color:#fffdf8;margin:0 0 .4rem;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.page-hero-content .hero-lead{margin-bottom:0;font-size:1.06rem}
.page-hero-eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.73rem;font-weight:700;
  color:var(--gold);margin:0 0 .7rem;
}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--muted);padding:16px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--forest);text-decoration:underline}
.crumb span{opacity:.5;margin:0 6px}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,96px) 0}
.section-tight{padding:clamp(40px,5vw,64px) 0}
.section-alt{background:var(--paper)}
.section-stone{background:var(--cream-2)}
.section-dark{background:var(--forest-deep);color:#efe9dc}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fffdf8}
.section-dark p{color:rgba(239,233,220,.88)}
.section-head{margin-bottom:clamp(30px,4vw,50px)}
.on-dark{color:#fffdf8 !important}
.on-dark-soft{color:rgba(239,233,220,.85) !important}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.grid-2.top{align-items:start}
.grid-2 > *{min-width:0}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Figure ---------- */
.figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--cream-2)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure-tall img{aspect-ratio:3/4}
.figure-wide img{aspect-ratio:16/10}
.figure-square img{aspect-ratio:1/1}
/* Mappe e disegni: si vedono interi, alla loro proporzione naturale.
   Niente aspect-ratio forzato e niente padding, altrimenti attorno
   resta una cornice chiara che sull'immagine sembra un bordo bianco. */
.figure-map{background:transparent;border:0;box-shadow:none;border-radius:14px}
.figure-map img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;padding:0;border-radius:14px}
/* Il dipinto del Mantegna: verticale ma contenuto, non a tutta colonna */
.figure-mantegna{max-width:300px;margin-inline:auto}
.figure figcaption{
  font-size:.84rem;color:var(--muted);padding:10px 14px;background:var(--paper);
  border-top:1px solid var(--line);
}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;margin-top:8px;
}
.gallery-item{
  margin:0;border:0;padding:0;background:var(--cream-2);border-radius:12px;overflow:hidden;
  cursor:zoom-in;box-shadow:0 6px 18px rgba(52,44,30,.10);display:block;width:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* Presepe Montano: solo 2 foto, una sopra l'altra, niente scorrimento */
.presepe-stack{grid-template-columns:1fr;gap:18px;width:100%;max-width:340px;margin-inline:auto}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.gallery-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(20,17,12,.94);
  display:none;align-items:center;justify-content:center;padding:26px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1200px,94vw);max-height:88vh;object-fit:contain;border-radius:8px}
.lightbox-close{
  position:absolute;top:18px;right:20px;background:rgba(255,253,248,.14);border:1px solid rgba(255,253,248,.35);
  color:#fffdf8;width:44px;height:44px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,253,248,.26)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,253,248,.12);
  border:1px solid rgba(255,253,248,.32);color:#fffdf8;width:48px;height:48px;border-radius:50%;
  font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-nav:hover{background:rgba(255,253,248,.24)}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}

/* ---------- Cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:34px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  box-shadow:0 4px 16px rgba(52,44,30,.06);
}
.card p:last-child{margin-bottom:0}

/* Card con foto: link a pagina */
.linkcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.linkcard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(52,44,30,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.linkcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.linkcard img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .5s ease}
.linkcard:hover img{transform:scale(1.04)}
.linkcard-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.linkcard-body h3{margin-bottom:.3em}
.linkcard-body p{color:var(--muted);font-size:.97rem;flex:1}
.linkcard-more{
  font-weight:600;font-size:.92rem;color:var(--forest);margin-top:12px;display:inline-flex;
  align-items:center;gap:7px;
}
.linkcard:hover .linkcard-more{gap:11px}
.linkcard-more::after{content:"\2192";transition:transform .2s ease}

/* ---------- Facts ---------- */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.facts li{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 16px rgba(52,44,30,.06);
}
.fact-num{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--rose);line-height:1.1}
.fact-lab{font-size:.9rem;color:var(--muted);line-height:1.4}
.section-dark .facts li{background:rgba(255,253,248,.07);border-color:rgba(255,253,248,.16)}
.section-dark .fact-num{color:var(--gold)}
.section-dark .fact-lab{color:rgba(239,233,220,.8)}

/* ---------- Spazi (capienze) ---------- */
/* align-items:start come nel carosello: con descrizioni di lunghezza diversa
   il centrato faceva salire e scendere il testo rispetto alla foto. */
.space{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,58px);align-items:start;
  padding:clamp(34px,5vw,58px) 0;border-bottom:1px solid var(--line);
}
.space .space-copy{padding-top:2px}
.space:last-child{border-bottom:0}
.space.flip .space-media{order:2}
.space-cap{
  display:inline-block;background:var(--forest);color:#f4f0e6;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:30px;margin-bottom:14px;
}
.space-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.space-list li{padding-left:26px;position:relative;color:var(--muted);font-size:.98rem}
.space-list li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--gold);
}

/* ===========================================================
   Storia: ogni tappa con la sua foto, alternata destra/sinistra.
   =========================================================== */
/* il filo conduttore: una linea verticale al centro con un puntino
   per ogni tappa, cosi' si vede che sono passaggi della stessa storia
   e non cinque blocchi staccati */
.story-line{position:relative}
.story-line::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,
    transparent 0%, var(--line) 5%, var(--line) 95%, transparent 100%);
}
.story-step{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:center;
  padding:clamp(30px,4vw,52px) 0;
}
.story-step::before{
  content:"";position:absolute;left:50%;top:50%;z-index:2;
  width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;
  background:var(--rose);border:3px solid var(--cream);
  box-shadow:0 0 0 4px rgba(var(--cream-rgb),.9);
}
.story-step.flip .story-media{order:2}
.story-media .figure{box-shadow:var(--shadow-lg)}
.story-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.story-copy{min-width:0}
.story-year{
  display:inline-block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:600;color:var(--rose);line-height:1;margin-bottom:.35em;
}
.story-copy h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.5em}
.story-copy p{color:var(--muted)}
.story-copy p:last-child{margin-bottom:0}

/* ===========================================================
   Archivio: pista di foto che scorre in orizzontale, frecce
   in basso a destra. Loop infinito gestito da slider.js.
   NB: niente scroll-behavior in CSS e niente scroll-snap,
   sabotano il riallineamento (vedi commento in slider.js).
   =========================================================== */
.filmstrip{position:relative;margin-top:8px}
.filmstrip-track{
  display:flex;gap:16px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.filmstrip-track::-webkit-scrollbar{display:none}
.filmstrip-track .gallery-item{
  flex:0 0 clamp(230px,26vw,320px);min-width:0;margin:0;
}
/* variante con foto piu' grandi, per le tappe della Lessinia */
.filmstrip-lg .gallery-item{flex:0 0 clamp(280px,32vw,400px)}
.filmstrip-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
@media (max-width:860px){
  /* in colonna il filo si sposta a sinistra e i puntini con lui */
  .story-line::before{left:9px;margin-left:0}
  .story-step{grid-template-columns:1fr;padding-left:40px}
  .story-step::before{left:9px;top:34px;margin-left:-8.5px}
  .story-step.flip .story-media{order:0}
  .filmstrip-track .gallery-item{flex:0 0 78%}
  .filmstrip-nav{justify-content:center}
}

/* Carosello a scorrimento "un arco che la gente racconta": ogni slide e'
   un curio intero (foto + testo), non una miniatura. A scorrimento con
   scroll-snap, mai a loop: le frecce si disattivano a inizio/fine set. */
.filmstrip-story .filmstrip-track{scroll-snap-type:x mandatory}
.filmstrip-story .story-slide{
  flex:0 0 100%;min-width:0;scroll-snap-align:start;
  border-bottom:0;margin:6px 3px;
  background:var(--paper);border-radius:22px;box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,44px);
}
/* virgolette decorative dietro al testo: danno carattere al racconto
   senza aggiungere altro colore, il segno resta dietro al testo vero */
.filmstrip-story .story-slide > div:last-child{position:relative;padding-top:.2em}
.filmstrip-story .story-slide > div:last-child::before{
  content:"\201C";position:absolute;top:-.42em;left:-.08em;z-index:0;
  font-family:var(--serif);font-size:5.5rem;line-height:1;
  color:var(--gold);opacity:.22;pointer-events:none;
}
.filmstrip-story .story-slide > div:last-child > *{position:relative;z-index:1}
@media (max-width:860px){
  .filmstrip-story .story-slide{padding:26px 22px;border-radius:18px}
  .filmstrip-story .story-slide > div:last-child::before{font-size:4rem}
}
.slider-btn:disabled{opacity:.32;cursor:default;pointer-events:none;transform:none}

/* ---------- Timeline storia ---------- */
.timeline{position:relative;margin-top:12px}
.timeline::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--line);
}
.tl-item{position:relative;padding:0 0 44px 34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-7px;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--rose);border:3px solid var(--cream);
}
.tl-year{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--rose);
  display:block;line-height:1.1;margin-bottom:.25em;
}
.tl-item h3{margin-bottom:.35em}
.tl-item p:last-child{margin-bottom:0}

/* ---------- Menu ---------- */
.menu-course{margin-bottom:clamp(36px,5vw,54px)}
.menu-course:last-child{margin-bottom:0}
.menu-course-hd{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px;
  padding-bottom:12px;border-bottom:2px solid var(--line);
}
.menu-course-hd h3{margin:0;font-size:1.5rem}
.menu-course-hd .en{font-size:.9rem;color:var(--stone);font-style:italic}
.menu-course-hd .it{font-size:.9rem;color:var(--stone);font-style:italic} /* stessa resa di .en, usata sulle intestazioni della pagina en/menu.html per la glossa italiana */
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.menu-list li{padding-left:22px;position:relative;font-size:1.04rem;line-height:1.5}
.menu-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
}
.menu-item-name{display:block}
.menu-item-en{display:block;font-size:.88rem;color:var(--stone);font-style:italic;margin-top:2px}
br.name-break{display:inline}
@media (max-width:520px){ br.name-break{display:none} }
.menu-note{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}
.menu-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.menu-item-price{flex:0 0 auto;font-family:var(--serif);font-weight:600;color:var(--forest);white-space:nowrap;text-align:right}
.menu-item-price.dual-price{display:flex;gap:20px;white-space:normal}
.price-pair{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.price-amount{display:block}
.price-note{display:block;font-family:var(--sans);font-weight:400;font-style:italic;color:var(--stone);font-size:.72rem}
.menu-special{
  background:var(--paper);border:1px solid var(--gold);border-left:5px solid var(--gold);
  border-radius:12px;padding:22px 24px;margin-top:22px;
}
.menu-special h4{color:var(--rose-deep);margin-bottom:.4em}
.menu-special p:last-child{margin-bottom:0}
.menu-special .menu-item-row{margin-bottom:.4em}
.menu-special .menu-item-row h4{margin-bottom:0}
.wine-group{margin-bottom:20px}
.wine-group:last-child{margin-bottom:0}
.wine-house{
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);margin:0 0 6px;
}
.wine-group p{margin:0 0 2px;color:var(--ink)}
.wine-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 2px;color:var(--ink)}
.wine-cols{columns:2;column-gap:44px}
.wine-cols .wine-group{break-inside:avoid}

/* ===========================================================
   Contatti: una scheda sola invece di elenco a sinistra e foto
   che galleggia a destra. La foto riempie meta' scheda fino al
   bordo, i dati stanno su carta con icone e griglia.
   =========================================================== */
/* Niente riquadro attorno: la foto e le scritte stanno semplicemente
   affiancate. Nel sito ci sono gia' molti bordi e schede. */
.contact-card{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,4.5vw,62px);align-items:center;
}
.contact-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.contact-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* velo caldo: la foto d'archivio e' virata seppia, cosi' rientra nella palette */
.contact-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, rgba(61,90,64,.16) 0%, rgba(166,88,78,.10) 100%);
}
.contact-body{display:flex;flex-direction:column}

.contact-grid{
  list-style:none;margin:0 0 30px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:24px 26px;
}
.contact-grid li{display:flex;gap:14px;align-items:flex-start;min-width:0}
.cg-wide{grid-column:1 / -1}
.cg-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  background:var(--cream-2);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
}
.cg-icon svg{width:20px;height:20px}
.cg-lab{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--stone);margin-bottom:3px;
}
.cg-val{display:block;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.cg-val a{color:var(--forest);font-weight:600;text-decoration:none}
.cg-val a:hover{text-decoration:underline}
.cg-note{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}

.contact-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;
  padding-top:26px;border-top:1px solid var(--line);
}

@media (max-width:860px){
  .contact-card{grid-template-columns:1fr}
  .contact-media img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .contact-actions .btn{width:100%;text-align:center}
}

/* ---------- Info list ---------- */
.info-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:20px}
.info-list li{display:flex;flex-direction:column;gap:3px}
.info-lab{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone)}
.info-val{font-size:1.06rem;line-height:1.55}
.info-val a{color:var(--forest);font-weight:600;text-decoration:none}
.info-val a:hover{text-decoration:underline}

/* ---------- Servizi grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.svc{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 22px;
  box-shadow:0 4px 16px rgba(52,44,30,.06);
}
.svc-icon{
  width:44px;height:44px;border-radius:12px;background:var(--cream-2);color:var(--forest);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.svc h4{margin-bottom:.3em}
.svc p{color:var(--muted);font-size:.96rem;margin-bottom:0}

/* ---------- Curiosità (territorio) ---------- */
.curio{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;
  padding:clamp(30px,4vw,50px) 0;border-bottom:1px solid var(--line);
}
.curio:last-child{border-bottom:0}
.curio.flip .curio-media{order:2}
.curio h3{margin-bottom:.4em}
.curio p:last-child{margin-bottom:0}

/* ---------- Video (rassegna) ---------- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.video-card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 16px rgba(52,44,30,.06);display:flex;flex-direction:column;
}
.video-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.video-card-body{padding:18px 20px 20px}
.video-card-body h4{margin-bottom:.2em}
.video-card-body p{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.video-link{
  font-weight:600;font-size:.9rem;color:var(--forest);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
}
.video-link:hover{text-decoration:underline}

/* ---------- Note e placeholder ---------- */
.soft-note{border-left:3px solid var(--gold);padding-left:16px;color:var(--muted);font-style:italic}
.disclaimer{font-size:.86rem;color:var(--stone);margin-top:20px}

/* ---------- Map ---------- */
.map-embed{
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);
  background:var(--cream-2);
}
.map-embed iframe{display:block;width:100%;height:100%;min-height:380px;border:0}
/* La mappa si vede da subito, ma e' uno schema disegnato da noi: nessuna
   richiesta a Google prima che il visitatore lo chieda esplicitamente. */
.map-consent{position:relative;min-height:380px;background:var(--cream-2);overflow:hidden}
.map-sketch{display:block;width:100%;height:auto}
.map-actions{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:rgba(var(--cream-rgb),.93);border-top:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.btn-sm{padding:10px 18px;font-size:.9rem}
.map-privacy{font-size:.82rem;color:var(--muted);line-height:1.35}
@media (max-width:520px){
  .map-actions{flex-direction:column;align-items:stretch;text-align:center}
  .map-actions .btn{width:100%}
}

/* ---------- Fascia con foto di sfondo (non un blocco di colore piatto) ---------- */
.band-photo{
  position:relative;overflow:hidden;color:#efe9dc;
  padding:clamp(64px,8vw,110px) 0;text-align:center;
}
.band-photo .band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band-photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(24,20,15,.80) 0%, rgba(24,20,15,.70) 55%, rgba(24,20,15,.82) 100%);
}
.band-photo > .container,
.band-photo > .container-narrow{position:relative;z-index:2}
.band-photo h2{text-shadow:0 2px 20px rgba(0,0,0,.4)}
.band-photo p{color:rgba(255,253,248,.9)}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--forest-deep);color:#efe9dc;padding:clamp(56px,7vw,88px) 0;text-align:center}
.final-cta h2{color:#fffdf8}
.final-cta p{color:rgba(239,233,220,.85);max-width:52ch;margin-left:auto;margin-right:auto;margin-bottom:1.8rem}

/* variante con foto di sfondo: la tavola imbandita.
   Serve un velo scuro sopra, altrimenti il testo chiaro sparisce. */
.final-cta-photo{position:relative;overflow:hidden;padding:clamp(72px,9vw,120px) 0}
.final-cta-photo .cta-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* velo scuro neutro: il virato rosso litigava con il verde delle sezioni vicine */
.final-cta-photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(20,17,13,.88) 0%, rgba(20,17,13,.80) 50%, rgba(16,13,10,.92) 100%);
}
.final-cta-photo > .container{position:relative;z-index:2}
.final-cta-photo h2{text-shadow:0 2px 20px rgba(0,0,0,.4)}
.final-cta-photo p{color:rgba(255,253,248,.92)}
.cta-note{
  font-size:.95rem;color:var(--gold) !important;font-weight:600;
  margin-top:-.8rem;margin-bottom:2rem !important;
}

/* seconda variante della CTA: rosso ammonitico invece del verde bosco,
   cosi' la fascia "prenota" si stacca da quella della cucina sopra */
.final-cta-warm{background:linear-gradient(160deg, var(--rose-deep) 0%, #63332d 60%, #4a2723 100%)}
.final-cta-warm .eyebrow.light{color:var(--gold)}
.final-cta-warm p{color:rgba(255,247,242,.9)}
.final-cta-warm .cta-note{color:#f2d79a !important}

/* ---------- Footer ---------- */
.site-footer{background:#241f19;color:#cfc6b4;padding:56px 0 26px}
.footer-inner{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr .5fr;gap:36px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,253,248,.12);
}
.footer-brand{font-family:var(--serif);font-size:1.3rem;color:#fffdf8;margin:0 0 .5rem;font-weight:600}
.footer-addr{font-size:.95rem;line-height:1.7;margin:0 0 14px}
.footer-col-hd{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#8a7c66;margin:0 0 12px;
}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{color:#cfc6b4;text-decoration:none;font-size:.95rem;transition:color .15s}
.footer-links a:hover{color:#fffdf8}
.footer-contacts{display:flex;flex-direction:column;gap:9px}
.footer-contacts a{color:#cfc6b4;text-decoration:none;font-size:.95rem}
.footer-contacts a:hover{color:#fffdf8}
.footer-socials{display:flex;gap:14px;align-items:center}
.footer-socials a{color:#cfc6b4;transition:color .2s}
.footer-socials a:hover{color:#fffdf8}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:22px;
}
.footer-mini{font-size:.85rem;color:#8a7c66;margin:0}

/* Firma d'agenzia: standard Delivery §4.1, stessa estetica del sito Mattia
   Padovani (serif, 600, 15px, link nell'accent sottolineato) ritarata sul footer
   scuro del Ponte: li' il testo era var(--ink) su fondo chiaro, qui sarebbe
   invisibile. Deve staccare dalla riga © accanto, che resta smorzata. */
.foot-credit{
  font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.02em;
  color:#cfc6b4;margin:0;
}
.foot-credit a{
  color:var(--gold);text-decoration:underline;text-underline-offset:3px;
  transition:color .2s;
}
.foot-credit a:hover{color:#e0bf74}
.footer-mini a{color:#a89a83;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s, border-color .2s}
.footer-mini a:hover{color:#fffdf8;border-bottom-color:#8a7c66}
.footer-legal{
  padding-top:22px;margin-top:0;
  display:flex;flex-direction:column;gap:5px;
  border-top:0;
}
.footer-legal-line{color:#8a7c66}
.footer-legal-links{margin-top:2px}
.footer-legal-links a{color:#a89a83;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.footer-legal-links a:hover{color:#fffdf8;border-bottom-color:#8a7c66}
.footer-todo{color:#6f6656;font-style:italic}
.footer-bottom{border-top:1px solid rgba(255,253,248,.10);margin-top:10px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .site-nav{gap:15px}
  .site-nav a{font-size:.87rem}
}
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .site-nav{display:none}

  .grid-2,.space,.curio{grid-template-columns:1fr}
  .space.flip .space-media,.curio.flip .curio-media{order:0}
  .wine-cols{columns:1}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .hero{min-height:min(78vh,560px)}
}
@media (max-width:520px){
  body{font-size:16px}
  .facts{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .menu-list li .menu-item-row{display:contents}
  .menu-list li .menu-item-name{display:inline}
  .menu-list li .menu-item-price{display:inline-flex;vertical-align:baseline;margin-left:10px;text-align:left}
  .menu-list li .menu-item-price.dual-price{gap:14px}
  /* piatti a doppio prezzo (antipasti): nome+inglese restano un blocco unico
     (.menu-item-text), il prezzo va dopo, cosi' non si intromette tra le due lingue */
  .menu-list li.has-dual-price{display:flex;flex-direction:column}
  .menu-list li.has-dual-price .menu-item-price{display:flex;order:3;margin-left:0;margin-top:6px}
  .menu-special .menu-item-row{flex-direction:column;align-items:flex-start;gap:4px}
  .wine-line{display:block}
  .wine-line .menu-item-price{margin-left:10px}
  .hero-actions .btn{text-align:center}
  .lightbox-nav{width:40px;height:40px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}

.pt-0{padding-top:0}

/* ===========================================================
   Gli spazi della trattoria - carosello a loop infinito
   Slide = uno spazio. Dentro ogni slide: galleria a sinistra,
   descrizione a destra.
   NB: niente scroll-snap e niente scroll-behavior:smooth sui
   contenitori, sabotano il riallineamento del loop.
   =========================================================== */
.spaces{position:relative;margin-top:34px}
/* NB: niente scroll-behavior qui. Impostarlo a "auto" annulla il behavior:"smooth"
   passato a scrollBy dalle frecce; il riallineamento del loop forza gia' l'istantaneo
   via style inline dentro jumpInstant(). */
.spaces-track{
  display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.spaces-track::-webkit-scrollbar{display:none}

/* align-items:start, non center: le descrizioni hanno lunghezze diverse
   (la sala ha quattro punti elenco, la terrazza due) e con l'allineamento
   centrato il testo saliva e scendeva a ogni slide rispetto alla foto. */
.space-slide{
  flex:0 0 100%;min-width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3.4vw,46px);align-items:start;
  padding:6px 2px 2px;
}

/* --- colonna sinistra: la galleria dello spazio ---
   Le foto sono sovrapposte e si alternano in dissolvenza da sole
   (vedi slider.js). Niente frecce: in questa sezione erano troppe. */
.space-shots{position:relative;min-width:0}
.shots-track{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--cream-2);box-shadow:var(--shadow-lg);
}
.shots-track .gallery-item{
  position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:none;
  box-shadow:none;width:100%;cursor:zoom-in;display:block;
  opacity:0;pointer-events:none;transition:opacity 1.1s ease;
}
/* senza pointer-events le slide spente restano cliccabili sopra quella attiva
   e la lightbox aprirebbe la foto sbagliata */
.shots-track .gallery-item.is-active{opacity:1;pointer-events:auto}
.shots-track .gallery-item img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;transition:transform 6s ease;
}
.shots-track:hover .gallery-item.is-active img{transform:scale(1.04)}
.shots-track .gallery-item:hover{transform:none}
.shots-track .gallery-item:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* la didascalia "3 / 11": dice a che punto siamo senza aggiungere bottoni */
.shots-count{
  position:absolute;left:14px;bottom:14px;z-index:3;
  background:rgba(24,20,15,.62);color:#fffdf8;border-radius:30px;
  padding:5px 14px;font-size:.8rem;letter-spacing:.04em;backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums;
}
/* barra di avanzamento sottile: si capisce che scorre da sola */
.shots-bar{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:rgba(255,253,248,.22);border-radius:0 0 16px 16px;overflow:hidden;
}
.shots-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}

@media (prefers-reduced-motion:reduce){
  .shots-track .gallery-item{transition:none}
  .shots-track .gallery-item img{transition:none}
  .shots-bar{display:none}
}

/* --- colonna destra: la descrizione --- */
.space-copy{min-width:0;padding-top:2px}
.space-copy h3{
  font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.2rem);
  margin:.35rem 0 .7rem;color:var(--ink);
}
.space-copy p{color:var(--muted)}

/* --- bottoni tondi condivisi --- */
.slider-btn{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;padding:0 0 3px;
  box-shadow:0 6px 18px rgba(52,44,30,.16);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.slider-btn:hover{background:var(--gold);border-color:var(--gold);color:#2a2620;transform:translateY(-2px)}
.slider-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.spaces-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}

@media (max-width:860px){
  .space-slide{grid-template-columns:1fr;gap:22px}
  .spaces-nav{justify-content:center}
  .space-copy h3{margin-top:0}
}

/* ---------- Info pratiche, dentro l'hero ----------
   Non e' una sezione a se': e' una fascia trasparente appoggiata sul
   fondo della foto, separata dal titolo solo da un filetto chiaro.
   Cosi' sotto l'hero la pagina passa direttamente al crema, senza
   quel blocco verde che tagliava in due. */
.quickbar{
  position:relative;color:#fffdf8;padding:20px 0 26px;
  border-top:1px solid rgba(255,253,248,.18);
  background:rgba(20,17,12,.30);
  backdrop-filter:blur(8px) saturate(120%);
}
.quickbar-inner{
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:26px 30px;align-items:center;
  position:relative;z-index:1;
}
.qb-item{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
/* separatori sottili al posto dei blocchi accostati */
.qb-item + .qb-item::before{
  content:"";position:absolute;left:-15px;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg, rgba(255,253,248,0), rgba(255,253,248,.22), rgba(255,253,248,0));
}
.qb-cta::before{display:none}
.qb-lab{
  text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:700;color:var(--gold);
}
.qb-val{font-size:1rem;font-weight:600;color:#fffdf8}
.qb-sub{font-size:.88rem;color:rgba(255,253,248,.72)}
.qb-link{font-size:.88rem;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.qb-link:hover{color:#fffdf8}
.qb-cta{justify-self:end}

@media (max-width:980px){
  .quickbar-inner{grid-template-columns:1fr 1fr;gap:20px}
  .qb-cta{grid-column:1 / -1;justify-self:stretch}
  .qb-cta .btn{width:100%;text-align:center}
  /* i separatori verticali hanno senso solo con gli item affiancati in riga */
  .qb-item + .qb-item::before{display:none}
}
@media (max-width:860px){
  /* in colonna la fascia diventa alta e coprirebbe tutta la foto:
     il padding-top tiene sempre scoperta una banda di immagine sopra */
  .hero{min-height:0;padding-top:38vh}
  .hero-content{padding-bottom:24px}
  .quickbar{padding:18px 0 22px;background:rgba(20,17,12,.55)}
  .qb-cta .qb-sub{display:none}   /* il numero e' gia' nel bottone che chiama */
}
@media (max-width:560px){
  .quickbar-inner{grid-template-columns:1fr;gap:16px}
}

/* ===========================================================
   Servizi: righe con immagine di sfondo che si rivela
   Pattern clonato da Studio Tecnico Bedoni-Bodini.
   Differenza voluta: qui c'e' anche il reveal su touch, che
   sul sito di origine manca (su telefono gli sfondi non si
   vedevano mai perche' :hover non esiste).
   =========================================================== */
.serv-head{margin-bottom:42px}
.serv-head h2{margin:0}
.serv-head-note{color:var(--muted);max-width:62ch;font-size:1rem;margin:.7rem 0 0}

.service-list{border-top:1px solid var(--line)}
.service-item{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.service-bg{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;z-index:0}
.service-bg img{width:100%;height:100%;object-fit:cover}
/* La maschera del sito di origine e' un gradiente da sinistra a destra: li'
   funziona perche' il fondo e' scuro e il testo chiaro. Qui il fondo e' crema
   e il testo scuro, quindi con quel gradiente o non si vede la foto o non si
   legge il testo. Soluzione: la maschera si apre solo nella finestra centrale,
   dove non passa nessun testo, e resta coprente sotto il titolo (sinistra) e
   sotto la descrizione (destra). */
.service-bg-mask{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(var(--cream-rgb),.95) 0%,
    rgba(var(--cream-rgb),.90) 26%,
    rgba(var(--cream-rgb),.34) 42%,
    rgba(var(--cream-rgb),.34) 58%,
    rgba(var(--cream-rgb),.90) 70%,
    rgba(var(--cream-rgb),.95) 100%);
}
@media (max-width:860px){
  /* su mobile la descrizione va a capo sotto il titolo e occupa tutta la riga:
     niente finestra libera, quindi maschera uniforme e piu' coprente */
  .service-bg-mask{background:rgba(var(--cream-rgb),.86)}
}

.service-ghost{
  position:absolute;right:0;bottom:-.06em;font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:clamp(46px,8.5vw,132px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(var(--ink-rgb),.10);pointer-events:none;
  opacity:0;transform:translateX(16px);transition:opacity .4s,transform .4s;
  white-space:nowrap;z-index:0;
}

.service-row{
  display:flex;align-items:center;padding:32px 8px;gap:26px;position:relative;z-index:2;
  transition:padding-left .3s ease;
}
.service-n{font-size:.8rem;color:var(--rose);letter-spacing:.12em;flex:0 0 auto;min-width:24px}
.service-name{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,2.1rem);
  letter-spacing:-.01em;transition:color .25s ease;flex:1;min-width:0;color:var(--ink);
}
.service-tagline{
  color:var(--muted);font-size:.93rem;line-height:1.55;
  flex:0 0 clamp(200px,28vw,340px);
}

.service-item:hover .service-bg,
.service-item.touch-active .service-bg{opacity:1}
.service-item:hover .service-ghost,
.service-item.touch-active .service-ghost{opacity:1;transform:translateX(0)}
.service-item:hover .service-name,
.service-item.touch-active .service-name{color:var(--forest)}
.service-item:hover .service-row,
.service-item.touch-active .service-row{padding-left:20px}

@media (max-width:860px){
  .service-row{flex-wrap:wrap;gap:8px 16px;padding:26px 4px}
  .service-tagline{flex:0 0 100%;padding-left:50px}
}

/* ===========================================================
   Photostrip: sequenza di foto che si alterna da sola.
   Usata per il ponte (fascia scura) e per le generazioni della
   famiglia (chi siamo). Le slide sono tutte sovrapposte, quindi
   il contenitore ha bisogno di un aspect-ratio suo.
   =========================================================== */
/* 4/5 in due colonne: affiancata a un blocco di testo lungo, una foto 4/3
   resta troppo bassa e la riga sembra sbilanciata. A una colonna torna 4/3,
   altrimenti a tutta larghezza diventa una foto altissima. */
.photostrip{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--cream-2);box-shadow:var(--shadow-lg);
}
/* colonna foto piu' larga del testo (usata in "Chi siamo"): con piu'
   larghezza il 4/5 diventa altissimo, quindi la foto passa a quadrata. */
.grid-2.media-wide{grid-template-columns:.82fr 1.18fr}
.grid-2.media-wide .photostrip{aspect-ratio:1/1}

@media (max-width:860px){
  .photostrip,
  .grid-2.media-wide .photostrip{aspect-ratio:4/3}
  .grid-2.media-wide{grid-template-columns:1fr}
}
/* photostrip dentro una curiosita' (territorio): stessa dimensione della
   figure-wide che sostituisce, non la 4/5 di default */
.curio .photostrip{aspect-ratio:16/10;border-radius:14px;box-shadow:var(--shadow)}
@media (max-width:860px){
  .curio .photostrip{aspect-ratio:16/10}
}

/* Carosello "un arco che la gente racconta": barra di controllo piu' curata,
   staccata dal racconto con un filo sottile, contatore a fianco delle frecce
   invece di due bottoni che galleggiano da soli. */
.filmstrip-story .filmstrip-nav{
  justify-content:flex-end;align-items:center;gap:14px;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
}
.story-counter{
  font-family:var(--sans);font-size:.82rem;color:var(--muted);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;margin-right:auto;
}
.ps-slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .7s ease;pointer-events:none;
}
.ps-slide.is-active{opacity:1}
.ps-slide img{width:100%;height:100%;object-fit:cover}
.ps-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:52px 22px 18px;font-size:.92rem;line-height:1.45;color:#fffdf8;
  background:linear-gradient(to top, rgba(20,17,12,.86) 0%, rgba(20,17,12,.55) 55%, rgba(20,17,12,0) 100%);
}
.ps-cap b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:1px}
.ps-dots{
  position:absolute;top:14px;right:14px;z-index:4;display:flex;gap:7px;
  background:rgba(20,17,12,.42);padding:7px 10px;border-radius:30px;backdrop-filter:blur(4px);
}
/* frecce: le foto le sfoglia la persona, non si muovono da sole */
.ps-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,253,248,.5);
  background:rgba(20,17,12,.45);backdrop-filter:blur(5px);color:#fffdf8;
  font-size:1.6rem;line-height:1;padding:0 0 4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.ps-nav:hover{background:var(--gold);border-color:var(--gold);color:#2a2620}
.ps-nav:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ps-prev{left:14px}
.ps-next{right:14px}
@media (max-width:520px){
  .ps-nav{width:40px;height:40px;font-size:1.35rem}
  .ps-prev{left:8px}
  .ps-next{right:8px}
}
.ps-dot{
  width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,253,248,.42);transition:background .3s ease,transform .3s ease;
}
.ps-dot.is-on{background:var(--gold);transform:scale(1.35)}
.ps-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ps-slide{transition:none}
}

/* ---------- Video del monumento (rimpiazza la photostrip) ---------- */
.monument-grid{grid-template-columns:.9fr 1.1fr}
.monument-video{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.35)}
.monument-facts{margin-top:clamp(28px,4vw,48px)}
.monument-facts .facts-inline{border-top-color:rgba(255,253,248,.18);margin-top:0}
@media(max-width:768px){
  .monument-grid{grid-template-columns:1fr}
  .monument-video{border-radius:4px}
}

/* ---------- Facts in riga (versione compatta, quando la colonna
              destra e' occupata da una photostrip) ---------- */
.facts-inline{
  list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 34px;
}
.facts-inline li{display:flex;flex-direction:column;gap:1px}
.facts-inline .fact-num{font-size:1.3rem}
.facts-inline .fact-lab{font-size:.83rem}
.section-dark .facts-inline{border-top-color:rgba(255,253,248,.18)}

/* ===========================================================
   Cosa trovi qui: una card grande (il ponte, che e' il motivo
   per cui la gente sale) e due card piu' piccole di fianco.
   =========================================================== */
.linkcards-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:stretch}
.linkcards-feature .lc-side{display:grid;grid-template-rows:1fr 1fr;gap:22px}
.linkcard-media{position:relative;overflow:hidden}
.linkcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.linkcard:hover .linkcard-media img{transform:scale(1.04)}
.lc-kicker{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(20,17,12,.6);color:#fffdf8;backdrop-filter:blur(4px);
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 13px;border-radius:30px;
}
.linkcard-lg .linkcard-media{aspect-ratio:4/3}
.linkcard-lg .linkcard-body{padding:28px 28px 30px}
.linkcard-lg .linkcard-body h3{font-size:1.75rem}
.linkcard-lg .linkcard-body p{font-size:1.03rem}
.linkcard-sm{display:grid;grid-template-columns:38% 1fr;align-items:stretch}
.linkcard-sm .linkcard-media{height:100%;min-height:150px}
.linkcard-sm .linkcard-body{padding:20px 22px}
.linkcard-sm .linkcard-body h3{font-size:1.28rem}
.linkcard-sm .linkcard-body p{font-size:.94rem}
.lc-detail{
  margin:0;font-size:.86rem;color:var(--stone);border-left:2px solid var(--gold);
  padding-left:11px;
}
.linkcard-lg .lc-detail{margin-top:4px}

@media (max-width:860px){
  .linkcards-feature{grid-template-columns:1fr}
  .linkcards-feature .lc-side{grid-template-rows:auto auto}
}
@media (max-width:520px){
  .linkcard-sm{grid-template-columns:1fr}
  .linkcard-sm .linkcard-media{aspect-ratio:16/10;min-height:0}
}

/* ===========================================================
   Galleria con didascalie, raggruppata per tema
   (le altre tappe della Lessinia)
   =========================================================== */
.gal-group{margin-top:56px}
.gal-group:first-of-type{margin-top:10px}
/* intestazione centrata, con un filetto dorato al posto della riga piena */
.gal-group-hd{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-bottom:26px;text-align:center;
}
.gal-group-hd h3{margin:0;font-size:1.45rem}
.gal-group-hd span{font-size:.92rem;color:var(--muted)}
.gal-group-hd::after{
  content:"";display:block;width:64px;height:2px;margin-top:12px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* galleria centrata e sfalsata: le foto non restano incolonnate a sinistra
   e la riga prende un andamento a onda invece che a griglia rigida */
.gallery-stagger{
  grid-template-columns:repeat(auto-fit, minmax(210px, 250px));
  justify-content:center;gap:18px;padding-bottom:34px;
}
.gallery-stagger .gallery-item{--off:0px;transform:translateY(var(--off))}
.gallery-stagger .gallery-item:nth-child(even){--off:30px}
.gallery-stagger .gallery-item:hover{transform:translateY(calc(var(--off) - 4px))}
@media (max-width:520px){
  .gallery-stagger{grid-template-columns:1fr 1fr;gap:10px;padding-bottom:18px}
  .gallery-stagger .gallery-item:nth-child(even){--off:16px}
}
.gallery-item .gi-cap{
  display:block;padding:11px 14px 13px;background:var(--paper);border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.4;color:var(--ink);text-align:left;font-weight:600;
}
.gallery-item .gi-cap small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:1px}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:2000;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
.preloader.done{opacity:0;pointer-events:none}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.preloader-name{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.preloader-sub{font-family:var(--sans);font-size:.84rem;font-weight:400;color:var(--muted);letter-spacing:.05em}
.preloader-bar{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden;margin-top:10px}
.preloader-bar::after{
  content:'';position:absolute;left:0;top:0;bottom:0;
  background:var(--gold);
  animation:preload-progress .8s ease forwards;
}
@keyframes preload-progress{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .preloader-bar::after{animation:none;width:100%}
}

/* ---------- Selettore lingua ----------
   Un solo link, senza tendina: mostra la bandiera della lingua di DESTINAZIONE
   (pagina IT -> bandiera inglese, pagina EN -> bandiera italiana), senza scritta
   a fianco. Chi arriva capisce che quella e' la lingua in cui puo' passare.
   ⚠️ E' l'opposto del pattern in uso fino al 2026-08-11, dove la label diceva la
   lingua corrente: cambiato su richiesta esplicita di Angela, non reinvertire.
   Due istanze nello stesso markup: .lang-switch-desktop vive dentro .site-nav
   (a destra della nav-cta), .lang-switch-mobile dentro .header-actions insieme
   al nav-toggle. Si alternano sul breakpoint 860px gia' usato per .nav-toggle/
   .site-nav, cosi' resta sempre visibile e cliccabile: l'header ha z-index:900,
   sopra il .m-menu (850). */
.header-actions{display:flex;align-items:center;gap:12px}

.lang-switch-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:32px;flex:0 0 auto;border-radius:8px;padding:0;
  border:1.5px solid rgba(255,253,248,.55);background:rgba(255,253,248,.12);
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.lang-switch-mobile{display:none}
/* L'istanza desktop vive dentro .site-nav, che smorza i link con opacity .9/.88
   (`.site-header.is-solid .site-nav a` = 0,3,1): serve piu' specificita' o la
   bandiera resta slavata. */
.site-nav .lang-switch-link,
.site-header.is-solid .site-nav .lang-switch-link{opacity:1}
.lang-switch-link:hover{background:rgba(255,253,248,.26);transform:translateY(-1px)}
.lang-switch-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.site-header.is-solid .lang-switch-link{border-color:rgba(255,253,248,.4);background:rgba(255,253,248,.1)}

.lang-switch-flag{display:block;width:24px;height:17px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.lang-switch-flag svg{display:block;width:100%;height:100%}

@media (max-width:860px){
  .lang-switch-desktop{display:none}
  .lang-switch-mobile{display:inline-flex}
}