:root{
  --bg:#ffffff;
  --fg:#121316;
  --muted:#5b616b;
  --brand:#8a3d00;     /* marrone castagna */
  --brand2:#e7a653;    /* dorato autunnale */
  --stroke:#e7e9ee;
  --card:#f7f8fb;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}

.container{width:min(1100px,92vw); margin-inline:auto}
.section{padding:clamp(2.2rem,4vw,4rem) 0}
h1,h2{font-family:Montserrat,Inter,sans-serif}
h2{font-weight:800; font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0 0 .8rem}

/* ================= HERO ================= */
.hero{
  position: relative;
  min-height: 100svh;
  overflow: visible;
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(105%) contrast(102%);
  z-index: 0; /* video sotto */
background-color:#000; 

}

/* Effetti SOLO nella parte bassa del video */
.hero-fx-blur,
.hero-fx-fade{
  position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  z-index: 1; /* sopra al video ma sotto ai testi */
}
.hero-fx-blur{  height: clamp(100px, 12svh, 160px); } /*sfocature*/
.hero-fx-fade{  height: clamp(200px, 15svh, 400px); } /*effetto sfumato bianco*/

/* Blur basso leggero */
.hero-fx-blur{
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.85) 45%, rgba(0,0,0,.1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.08) 100%);
}
/* Sfumatura finale verso il bianco della pagina */
.hero-fx-fade{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.65) 85%,
    #ffffff 100%
  );
}

/* Sfumatura nera dall'alto verso il centro */
.hero-fx-top{
  position:absolute;
  left:0; right:0; top:0;
  height: clamp(60px, 14svh, 200px); /* altezza della fascia */
  pointer-events:none;
  z-index:1; /* sopra al video, sotto ai testi */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.7) 0%,
    rgba(0,0,0,.5) 40%,
    rgba(0,0,0,0) 100%
  );
}


/* Testi dentro il video (fuori dalla hero in HTML ma visivamente sopra al video) */
.hero-content{
  position: relative;
  z-index: 2;                  /* sopra al video e sfumatura */
  margin-top: -64svh;          /* tira su i testi sopra il video */
  padding-top: clamp(12rem, 34svh, 38svh);
  padding-bottom: 2rem;
  text-align: left;
  text-shadow: 0 10px 30px #0008;
  width: min(1100px, 92vw);
  margin-left: auto; margin-right: auto;
   translate: 0 -7vh;
}
/* Kicker sopra al video: più grande e bold */
.hero-content .kicker{
  font-weight: 800;                     /* grassetto pieno */
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  letter-spacing: .40em;                /* un filo meno spaziata per non “aprirsi” troppo */
    text-shadow: 0 4px 10px rgba(0,0,0,.35);
	
	
}


.kicker{
  color: var(--brand2);
  font:600 .95rem/1 Montserrat, sans-serif;
  letter-spacing:.12em; text-transform:uppercase
}
.headline{
  font:800 clamp(2.2rem, 6vw, 4rem)/1.02 Montserrat, sans-serif;
  margin:.4rem 0 1rem;
  color:#ffffff;
  /* ombra extra per leggibilità */
  text-shadow: 0 12px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
}
.cta{
  display:inline-block;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#111; font-weight:800; padding:.9rem 1.2rem; border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  filter: brightness(1.03);
}


.hero-subtitle {
  font: 700 clamp(1.1rem, 2.6vw, 1.9rem)/1.15 Montserrat, sans-serif;
  margin: -.2rem 0 1rem;    /* piccolo distacco sopra e sotto */
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}


/* Mobile */
@media (max-width: 780px){
  .hero{ min-height: 86svh; }
  .hero-content{
    margin-top: -56svh;
    padding-top: clamp(10rem, 30svh, 34svh);
    width: 92vw;
  }
  .hero-video{ object-position: center 45%; }
}
/* Schermi bassi: evita che i testi tocchino la barra */
@media (min-height: 630px) and (max-height: 760px){
  .hero-content{ margin-top: -60svh; padding-top: clamp(11rem, 32svh, 36svh); }
}

/* desktop grandi: un filo più su */
@media (min-width: 1200px){
  .hero-content{ translate: 0 -7vh; }
}

/* mobile: meno aggressivo per non finire sotto la barra */
@media (max-width: 480px){
  .hero-content{ translate: 0 -3vh; }
}

/* piccolo safety: tieni la freccia un po' più bassa per evitare sovrapposizioni */
.scroll-down{
  bottom: clamp(20px, 2.5vh, 32px);
}

/* ============== HEADER ============== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.site-header.scrolled{
  background:#ffffff;
  border-bottom:1px solid var(--stroke);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.header-inner{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;

  /* full-bleed + padding laterale fluido (compatibile smartphone) */
  width:100%;
  margin:0;
  padding-left: max(env(safe-area-inset-left), clamp(100px, 20vw, 160px));
  padding-right:max(env(safe-area-inset-right), clamp(44px, 12vw, 100px));
}

.brand .logo{height:100px; width:auto; display:block }

/* Blocchi nav */
.nav-block{
  display:grid;
  gap:.35rem;
  justify-items:end;   /* allinea tutte le righe a destra */
  text-align:right;    /* testi allineati a destra */
}

/* Top bar (social + proloco) */
.topbar{display:flex; align-items:center; gap:1rem; padding-top: 6px;}
.ico{width:22px; height:22px; display:inline-block; opacity:.95; filter:drop-shadow(0 0 1px #0003)}
.ico.ig{background:url('media/index/ico-ig.png') center/contain no-repeat}
.ico.fb{background:url('media/index/ico-fb.png') center/contain no-repeat}
.ico.yt{background:url('media/index/ico-yt.png') center/contain no-repeat}


/* icona piccola */
.proloco-ico {
  width: 18px;
  height: 18px;
    display:inline-block;
    line-height:18px;
}


/* allinea verticalmente social + pulsante */
.social { display:flex; gap:.6rem; align-items:center; }

/* Pulsante PRO LOCO: bianco semitrasparente sopra il video */
.proloco-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .65rem;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:800; font-size:.9rem; line-height:1;
  backdrop-filter: saturate(120%) blur(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height: 28px;  /* altezza simile alle icone */
}

.proloco-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  background: rgba(255,255,255,.26);
}



/* Quando l’header diventa bianco dopo lo scroll,
   rendiamo il pulsante pieno e testo scuro per contrasto */
.site-header.scrolled .proloco-btn{
  background: rgba(255,255,255,.92);
  border-color:#00000014;
  color:#2b2f36;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.site-header.scrolled .proloco-btn:hover{
  background:#fff;
}

/* Main menu */
.mainnav{display:flex; gap:1rem; font-weight:800}
.mainnav a{ padding:.5rem 0rem; border-radius:999px; border:1px solid transparent;  font-size: 1.3rem;   /* aumenta leggermente (default ≈ 1rem) */
  font-weight: 900;     /* grassetto forte */ }

/* Colori sopra al video */
.site-header:not(.scrolled) .logo{ filter:none }
.site-header:not(.scrolled) .mainnav a,
.site-header:not(.scrolled) .topbar{ color:#ffffff; text-shadow:0 0 6px rgba(0,0,0,.6) }
.site-header:not(.scrolled) .mainnav a:hover{ background:#ffffff22; border-color:#ffffff33 }

/* Colori dopo lo scroll */
.site-header.scrolled .logo{ filter:none }
.site-header.scrolled .mainnav a{ color:#2b2f36 }
.site-header.scrolled .mainnav a:hover{ background:#00000006; border-color:#00000010 }

/* Burger + mobile drawer */
.burger{display:none; background:none; border:0; width:40px; height:34px; position:relative}
.burger span{position:absolute; left:8px; right:8px; height:2px; background:currentColor; transition:.25s}
.burger span:nth-child(1){top:9px}
.burger span:nth-child(2){top:16px}
.burger span:nth-child(3){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-header:not(.scrolled) .burger{color:#fff}
.site-header.scrolled .burger{color:#2b2f36}

.mobile-drawer{display:none; background:#ffffff; border-bottom:1px solid var(--stroke)}
.mobile-drawer.open{display:block}
.mobile-top{display:flex; align-items:center; justify-content:flex-end; padding:.7rem 1rem; border-bottom:1px solid var(--stroke)}
.mobile-nav{display:flex; flex-direction:column}
.mobile-nav a{padding:1rem 1.1rem; border-top:1px solid var(--stroke); color:#2b2f36}

/* ============== CONTENUTI ============== */
.info-list{list-style:none; padding:0; margin:.5rem 0}
.info-list li{padding:.25rem 0; color:#3b4048}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:.7rem}
.grid img{grid-column:span 6; border:1px solid var(--stroke); border-radius:12px}
@media (max-width:780px){ .grid img{grid-column:span 12} }

.contact{display:grid; gap:.9rem; max-width:560px}
.contact input, .contact textarea{
  width:100%; border:1px solid var(--stroke); background:#fff; color:#111; border-radius:10px; padding:.8rem;
}


/* ===== Footer (brown, 2 colonne + bottom) ===== */
.site-footer{
  background: var(--news-bg);
  color:#fff;
  padding: 2rem 0 1.2rem;
  border-top:none;
}
.site-footer a{ color:#fff; }

.footer-grid{
  display:grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr);
  gap: 1.5rem 2rem;
  align-items:start;
}

/* Brand + titolo */
.footer-brand{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem;
}
.footer-brand .logo{
  width:40px; height:40px; border-radius:8px; object-fit:contain;
  background:#fff; padding:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.footer-brand .title{
  font: 800 1rem/1 Montserrat, sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Info contatti */
.footer-info{ list-style:none; padding:0; margin:.2rem 0 0; color:#f0f0f0; }
.footer-info li{ margin:.2rem 0; opacity:.95 }
.footer-info a{ text-decoration:underline; text-underline-offset:3px; }




/* Loghi partner — 3 affiancati, dimensione uguale */
.footer-logos{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-start;   /* usa center se li vuoi centrati */
  flex-wrap: nowrap;            /* non andare a capo su desktop */
}

.footer-logos a{
  width: 220px;                 /* regola qui la larghezza */
  height: 80px;                 /* e qui l'altezza */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:14px;
  padding: 10px;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}

.footer-logos img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;          /* niente deformazioni */
  display:block;
}

/* Mobile: lascia andare a capo e riduci un filo le card */
@media (max-width: 680px){
  .footer-logos{ flex-wrap: wrap; justify-content:center; }
  .footer-logos a{ width: 140px; height: 64px; }
}



/* Firma sviluppatore */
.site-by{
  opacity:.9;
  font-size:.9rem;
}
.site-by a{
  color:#fff;                /* testo bianco nel footer marrone */
  text-decoration:underline;
  text-underline-offset:3px;
}

.foot-links{ display:flex; gap:.9rem; }
.foot-links a{
  color:rgba(255,255,255,.9);
  text-decoration:underline; text-underline-offset:3px;
}

/* Responsive */
@media (max-width:780px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.6rem }
}

/* Responsive: su mobile uso burger */
@media (max-width:1000px){
  .mainnav{display:none}
  .topbar{display:none}
  .burger{display:block}
  .nav-block{display:none}
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem .75rem;
}

.footer-bottom .site-by{
  flex:0 0 100%;
  text-align:center;
  margin-top:1.5rem;
  font-size:clamp(1rem, 1vw + .2rem, 1.15rem);
}


 
/* Accessibilità */
@media (prefers-reduced-motion: reduce){
  .hero-video{
    display:block !important;   /* mostra l’elemento, così il poster si vede */
  }
}

:target{scroll-margin-top:84px}



/* ===== Countdown sotto al titolo ===== */
.countdown{
  display:inline-block;
  margin:.2rem 0 1rem;
  padding:.45rem .8rem;
  font-weight:700;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* ===== Freccia "scroll giù" in fondo al video ===== */
.scroll-down{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%);
  z-index:2; /* sopra al video */
  width:44px; height:44px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#111;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:bounce 1.8s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .15s ease;
}
.scroll-down:hover{
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
@keyframes bounce{
  0%,100%{ transform:translateX(-50%) translateY(0) }
  50%{    transform:translateX(-50%) translateY(-6px) }
}

/* Mobile: freccia un filo più su */
@media (max-width:780px){
  .scroll-down{ bottom:18px }
}
.scroll-down{
  pointer-events: auto; /* assicura click anche se ci sono overlay */
  z-index: 3;           /* sopra a video (0) e sfumature (1) */
}


/* ===== Sezione intro sotto al video ===== */
.intro{
  text-align:center;
  max-width: 900px;
}
.intro-kicker{
  color: var(--brand2);
  font: 600 .95rem/1 Montserrat, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin: 0 0 .6rem;
}
.intro-title{
  font: 800 clamp(1.8rem, 3.8vw, 2.6rem)/1.1 Montserrat, sans-serif;
  color: var(--fg);
  margin: 0 0 .4rem;
}
.intro-subtitle{
  font-weight: 700;
  letter-spacing: .04em;
  color: #8a3d00; /* var(--brand) ma più leggibile su bianco */
  margin: 0 0 1.2rem;
}
.intro-body{
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  margin: 0 auto 1.4rem;
}

.intro-actions{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* variante ghost per la CTA secondaria */
.cta-ghost{
  background: transparent;
  color: var(--fg);
  border: 2px solid #00000014;
  box-shadow:none;
}
.site-header:not(.scrolled) .cta-ghost{ color:#2b2f36 }
.cta-ghost:hover{
  background:#00000006;
  border-color:#00000018;
}

/* ===== Sezione storia ===== */
.storia-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:2rem;
  align-items:center;
}

.storia-text{
  grid-column: span 6;
}

.storia-img{
  grid-column: span 6;
}

.storia-img img{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--stroke);
}

/* Mobile: impila testo sopra immagine */
@media (max-width: 780px){
  .storia-text, .storia-img{
    grid-column: span 12;
  }
}

/* ===== NEWS ===== */
.news-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom: .8rem;
}
.news-all{ font-weight:700; text-decoration:underline; }
.news-track{
  display:flex; gap:1rem;
  overflow-x:auto;
  padding: 0 1rem .4rem 0;      /* ← gutter destro = 1rem */
  scroll-padding-right: 1rem;   /* ← evita il “taglio” in snap */
  -webkit-overflow-scrolling:touch;
}
.news-track::after{
  content:"";
  flex:0 0 1rem;   /* spazio finale uguale al gap */
}


.news-track::-webkit-scrollbar{ height:8px }
.news-track::-webkit-scrollbar-thumb{ background:#00000022; border-radius:999px }

/* Larghezza card: entra sempre 3-up nel container (con 2 gap da 1rem) */
.news-card{
  flex: 0 0 min(360px, calc((100% - 2rem) / 3));
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:12px;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.news-card:hover{ transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.1); }

.news-link{ display:block; height:100% }
/* Thumbs news: tutte 3:2 coerenti, taglio elegante */
.news-card img{
  width:100%;
  aspect-ratio: 5 / 3;   /* prima 3/2: ora leggermente più basse */
  object-fit: cover;
  display:block;
}

.news-body{ padding: .9rem .9rem 1.1rem }
.news-meta{ color: #6b7280; font-size:.9rem; margin-bottom:.35rem }
.news-meta .tag{
  font-weight:700; color: var(--brand);
}
.news-title{
  font: 800 1.1rem/1.15 Montserrat, sans-serif;
  margin:0 0 .35rem;
}
.news-excerpt{ color:#3b4048; margin:0 }

.news-arrows{
  position:relative; margin-top:.5rem; display:flex; gap:.5rem; justify-content:flex-end;
}
.news-arrows button{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--stroke); background:#fff; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* Su mobile restano 3/2 per non diventare troppo piatte */
@media (max-width:780px){
  .news-card img{ aspect-ratio: 3 / 2; }
}
@media (max-width:780px){
  .news-arrows{ display:none } /* su mobile si usa lo swipe */
}

/* Nascondi la barra di scorrimento nelle News (ma lascia swipe/drag attivi) */
.news-track{
  -ms-overflow-style: none;  /* IE/Edge legacy */
  scrollbar-width: none;     /* Firefox */
}
.news-track::-webkit-scrollbar{
  display: none;             /* Chrome/Safari/Opera */
}


/* Colore di sfondo della banda News (castagna) */
:root{ --news-bg: #4b2e1d; }            /* cambia qui il marrone, se vuoi */

/* Estende il colore a tutta la viewport, ma il contenuto resta centrato */
.fullbleed-news{
  background: var(--news-bg);
  box-shadow: 0 0 0 100vmax var(--news-bg); /* “allarga” visivamente */
  clip-path: inset(0 -100vmax);             /* evita overflow orizzontale */
  padding: clamp(32px,6vw,72px) 0;
}

/* Contrasti corretti su sfondo scuro */
#news .section-title,
#news .news-header a{ color:#fff; }
#news .news-card{ background:#fff; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
#news .news-card .tag,
#news .news-card .category{ color:#a6632b; }


/* Testi su sfondo scuro */
#news h2,
#news .news-all{ color:#fff; }

/* Card e tag */
#news .news-card{ background:#fff; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
#news .news-card .tag,
#news .news-card .category{ color:#a6632b; }


body{ overflow-x:hidden; }


/* ===== CAROUSEL (Gallery center mode) ===== */
.carousel{
  position:relative;
}

/* più respiro verticale per non “tagliare” l’immagine centrale ingrandita */
.car-viewport{
  overflow:hidden;
  padding: .9rem 0; /* prima era .2rem 0 */
}

.car-track{
  display:flex; align-items:center;
  gap: 14px;
  will-change: transform;
  transition: transform .35s ease;
}

/* di base le slide sono più piccole (enfasi sul centro) */
.car-slide{
  flex: 0 0 calc((100% - 2*14px) / 3);
  transform-origin: center center;
  transform: scale(.75);               /* prima .86 */
  opacity: .55;                        /* prima .65 */
  transition: transform .25s ease, opacity .25s ease, filter .25s ease, box-shadow .25s ease;
  perspective: 800px;
}

/* la slide centrale viene evidenziata di più */
.car-slide.is-center{
  transform: scale(1.25);              /* prima 1 */
  opacity: 1;
  z-index: 1;
  filter: saturate(1.06) contrast(1.04);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

/* immagini dentro le slide */
.car-slide img{
  width:100%; height:auto; display:block;
  border-radius:14px;
  border:1px solid var(--stroke);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Mobile: 1 alla volta, enfasi più soft (evita scalature eccessive su schermi piccoli) */
@media (max-width:780px){
  .car-slide{ flex: 0 0 100%; transform: scale(.96); opacity:.9; }
  .car-slide.is-center{ transform: scale(1.02); }
  .car-prev{ left:4px } .car-next{ right:4px }
}

/* frecce sempre sopra e cliccabili (lasciamo come hai già) */
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--stroke); background:#fff; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  font-size:22px; line-height:1; display:grid; place-items:center;
  z-index: 3;
  pointer-events: auto;
}
.car-prev{ left:-6px } 
.car-next{ right:-6px }
.car-arrow:hover{ box-shadow:0 10px 24px rgba(0,0,0,.12) }


.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1rem;
}
.btn-see-all{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border:1px solid var(--stroke);
  border-radius:999px; font-weight:600; text-decoration:none;
  background:#fff; color:#2b2f36;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-see-all:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
@media (max-width:680px){
  .section-head{ flex-wrap:wrap; }
}


.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:.75rem;
}
.g-item{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background:#fff;
  aspect-ratio: 4 / 3;   /* <<< tutte le anteprime 4:3 */
}

.g-item img{
  width:100%; height:100%;
  object-fit: cover;     /* riempie senza deformare */
  display:block;
}

/* LIGHTBOX */
.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.9);
  display:grid; place-items:center;
  padding: clamp(8px, 3vw, 24px);
}
.lb-img{
  max-width: 96vw; max-height: 90vh;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.lb-btn{
  position:fixed; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid #ffffff33; background:#ffffff10; color:#fff;
  display:grid; place-items:center; font-size:22px; cursor:pointer;
  backdrop-filter: blur(6px);
}
.lb-prev{ left: clamp(8px, 2vw, 22px); }
.lb-next{ right: clamp(8px, 2vw, 22px); }
.lb-close{
  top: clamp(8px, 2vw, 22px); right: clamp(8px, 2vw, 22px); transform:none;
}
.lb-count{
  position:fixed; bottom: clamp(8px, 2vw, 22px); left:50%; transform:translateX(-50%);
  color:#fff; font-weight:700; opacity:.9;
}
@media (max-width:780px){
  .lb-btn{ width:40px; height:40px; font-size:20px; }
}



/* Evidenziazione SOLO quando lo script mette .active (hash presente) */
.mainnav a.active{
  background:#00000006;
  border-color:#00000012;
}
.site-header:not(.scrolled) .mainnav a.active{
  background:#ffffff22;
  border-color:#ffffff33;
}




/* Focus visibile per accessibilità tastiera */
.mainnav a:focus-visible,
.mobile-nav a:focus-visible{
  outline:3px solid #00000033;
  outline-offset:3px;
  border-radius:999px;
}
/* il focus resta visibile solo per la tastiera */
.mainnav a:focus { outline: none; }               /* niente outline sul click */
.mainnav a:focus:not(:focus-visible){
  background: transparent;
  border-color: transparent;
}

:root{ --header-h: 100px; }  /* già coerente con .header-inner */
.page-with-fixed-header{
  padding-top: calc(var(--header-h) + 1.2rem);
}

.info-centered{ text-align:center; }
.info-img{
  width:min(920px, 100%);
  aspect-ratio: 16/9;           /* opzionale: mantieni proporzione */
  object-fit: cover;
  border-radius:16px;
  border:1px solid var(--stroke);
  margin: .8rem auto 0;         /* centra */
  display:block;
}
.info-cta{
  margin-top:.6rem;
  font-weight:800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}

#infoutili{ scroll-margin-top: calc(var(--header-h) + 16px); }
html{ scroll-behavior: smooth; } /* se non l’hai già */


/* Titolo e sottotitolo SOLO nelle pagine interne (Contatti/Gallery) */
.page-with-fixed-header .headline{
  color: var(--fg);
  text-shadow: none;
  margin-bottom: .6rem;
}
.page-with-fixed-header .kicker{
  margin-bottom: 1.2rem;
}







/* Griglia per pagina "Tutte le news" */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
@media (max-width:1024px){
  .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:780px){
  .news-grid{ grid-template-columns: 1fr; }
}




/* Badge crediti sopra video hero */


.credit-badge{
  position:absolute;
  right:12px;
  bottom: clamp(70px, 7svh, 120px); /* alzata rispetto alla sfumatura */
  z-index: 2;                      /* sopra alla sfumatura */
  background: rgba(0,0,0,.38);
  color:#fff;
  padding:.2rem .45rem;
  border-radius:5px;
  font-size:.6rem;
  letter-spacing:.01em;
  backdrop-filter: blur(2px);
}

/* Su schermi stretti: ancora un filo più giù per non toccare i testi */
@media (max-width: 480px){
  .credit-badge{ bottom: 12px; font-size: .68rem; }
}


.hero{ position:relative; } /* sicurezza: assicurati che l’hero sia posizionata */


/* Stile base per la lista credits */
.credits-list{ margin-top:1rem; }
.credit-item{ padding: .75rem 0; border-bottom:1px solid var(--stroke); }
.credit-title{ font-weight:800; margin:0 0 .3rem; }
.credit-meta{ list-style:none; padding:0; margin:0; }
.credit-meta li{ margin:.15rem 0; }



/* Wrapper per posizionare il bottone a destra nella pagina */
.back-wrap{
  margin-bottom: .8rem;
}
.back-wrap--right{
  display: flex;
  justify-content: flex-end; /* a destra */
}

/* Su mobile lo riportiamo a sinistra/centrato (come preferisci) */
@media (max-width: 680px){
  .back-wrap--right{ justify-content: flex-start; } /* oppure center */
}

/* Pulsante 'Torna indietro' */
.back-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid #00000012;
  background:#00000006;
  font-weight:700; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase;
  color: var(--fg);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.back-btn:hover{
  transform: translateY(-1px);
  background:#0000000d;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.back-btn:active{ transform: translateY(0); }


/* ===== Pulsanti/riquadri sotto Info utili ===== */
.info-actions{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem;
}
@media (max-width:780px){
  .info-actions{ grid-template-columns: 1fr; }
}
.info-card{
  display: grid;
  gap: .15rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.info-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border-color: #00000012;
}
.info-card__title{
  font: 800 1.15rem/1.1 Montserrat, sans-serif;
  color: var(--fg);
}
.info-card__hint{
  color: var(--muted);
  font-size: .98rem;
}

/* ===== Sezione parcheggi con mappe affiancate ===== */
.parking-section{
  display: grid;
  gap: 1rem;
}

.map-card{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--stroke, #eaeaea);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 1rem;
}

@media (max-width: 900px){
  .map-card{
    grid-template-columns: 1fr;
  }
}

/* Mappa responsive 16:9 */
.map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f3f3;
}
.map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Testo a lato */
.map-text{
  display: grid;
  align-content: start;
  gap: .5rem;
}
.map-title{
  font: 800 1.3rem/1.2 Montserrat, system-ui, sans-serif;
  margin: 0;
  color: var(--fg, #111);
}
.map-bullets{
  margin: 0; padding-left: 1.1rem;
  color: var(--muted, #555);
}
.map-bullets li{ margin: .2rem 0; }



/* ===== Blocco contatti: testo a sinistra, mappa a destra ===== */
.contact-hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.2rem;
  background:#fff;
  border:1px solid var(--stroke, #eaeaea);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:1rem;
  margin: 0 auto 1.2rem auto;
}

@media (max-width: 900px){
  .contact-hero{
    grid-template-columns: 1fr;
  }
}

/* Colonna testo */
.contact-hero__text{
  display:grid;
  align-content:start;
  gap:.6rem;
}
.contact-hero .info-list{
  margin:.2rem 0 .4rem 0;
}
.contact-hero .info-list li{
  margin:.15rem 0;
}

/* CTA bottoni */
.map-cta{
  margin-top:.2rem;
  display:flex; gap:.5rem; flex-wrap:wrap;
}

/* sostituisci il secondo blocco .btn con: */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem .9rem; border-radius:10px;
  border:1px solid #00000012; background:#fff;
  font-weight:700; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-ghost:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08) }
/* e dove usi i bottoni “bianchi” cambia class="btn" in class="btn-ghost" */

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.btn--primary{ background:#111; color:#fff; border-color:#111; }
.btn--primary:hover{ background:#000; }

/* Colonna mappa responsiva 16:9 */
.contact-hero__map{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:10px; overflow:hidden; background:#f3f3f3;
}
.contact-hero__map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Spaziatura coerente prima del form */
main .contact{ margin-top: 1.2rem; }


/* === Info-card con lo stesso stile del bottone .cta === */
.info-actions .info-card{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #111;                      /* come .cta */
  border: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.info-actions .info-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  filter: brightness(.98);
}

/* testi dentro i riquadri scuri/chiari coerenti */
.info-actions .info-card__title,
.info-actions .info-card__hint{
  color: #111;                      /* stesso colore testo del bottone .cta */
}

/* per accessibilità: focus visibile come il bottone */
.info-actions .info-card:focus{
  outline: 3px solid #00000022;
  outline-offset: 2px;
}


.form-note{
  font-size:.9rem; line-height:1.4; color:#555;
  background:#f6f7f9; border:1px solid #e6e8eb; border-radius:8px;
  padding:10px; margin:.75rem 0 0;
}
.form-note a{ color:#0b57d0; }


/* Tipografia e layout base per privacy/cookie */
.legal-container{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.65;color:#111;max-width:900px;margin:40px auto;padding:0 16px}
.legal-container h1,.legal-container h2{line-height:1.25}
.legal-container table{border-collapse:collapse;width:100%;margin:12px 0}
.legal-container th,.legal-container td{border:1px solid #e6e8eb;padding:10px;text-align:left;vertical-align:top}
.legal-muted{color:#666}
.legal-note{background:#fff7e6;border:1px solid #ffe3ad;border-radius:8px;padding:10px;margin:14px 0}
.legal-container a{color:#0b57d0}


/* === Override font hero title/subtitle con Kaushan Script === */
/* Titolo (h1) grande */
.hero-content .headline{
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.04;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(3.8rem, 10vw, 7rem);
  margin: .2rem 0 .4rem;
}

/* Sottotitolo (h2) più piccolo */
.hero-content .hero-subtitle{
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.05;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  margin: -.2rem 0 1rem;
}

/* === Alza la scritta dell'hero (poco di più) === */
.hero-content{ translate: 0 -21vh; }

@media (min-width: 1200px){
  .hero-content{ translate: 0 -27vh; }
}

@media (max-width: 480px){
  .hero-content{ translate: 0 -14vh; }
}

/* assicura che non venga “tagliata” */
.hero{ overflow: visible; }

/* === Contorno leggero nero per titolo e sottotitolo hero === */
.hero-content .headline,
.hero-content .hero-subtitle{
  /* fallback cross-browser con più text-shadow */
  text-shadow:
    0 0 1px rgba(0,0,0,.55),
    0 0 2px rgba(0,0,0,.35),
    1px 1px 2px rgba(0,0,0,.35),
   -1px 1px 2px rgba(0,0,0,.35),
    1px -1px 2px rgba(0,0,0,.35),
   -1px -1px 2px rgba(0,0,0,.35);
}

/* su browser WebKit il bordo è più pulito: usa lo stroke e alleggerisci le ombre */
@supports (-webkit-text-stroke: 1px black){
  .hero-content .headline,
  .hero-content .hero-subtitle{
    -webkit-text-stroke: 1px rgba(0,0,0,.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
}

/* Storia: mostra l’immagine intera, senza tagli */
.storia-img img{
  max-height: none;     /* niente limite d’altezza */
  height: auto;         /* rispetta le proporzioni */
  object-fit: contain;  /* nessun ritaglio */
}


/* Se vuoi allineare meglio verticalmente i contenuti */
.storia-grid{
  align-items: start;       /* era center, scegli tu: start/center */
  row-gap: 1.6rem;          /* un filo più di respiro su mobile */
}





/* === Dove mangiare: griglia di riquadri (definitiva) === */
.food-sections{ margin-top:.4rem; }

.food-title{
  font:800 1.35rem/1.15 Montserrat,system-ui,sans-serif;
  margin:.2rem 0 .6rem;
  color:var(--fg);
}

/* 4 card per riga su desktop, responsive */
.food-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.9rem;
  align-items:stretch;
}
@media (max-width:1100px){ .food-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){  .food-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){  .food-grid{ grid-template-columns:1fr; } }

/* Card uniformi, centrate, stessa altezza */
.food-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;
  min-height:220px;           /* più alte per farci stare gli indirizzi */
  padding:1.15rem 1.2rem;

  background:#F6EFE8;         /* marroncino molto chiaro */
  border:1px solid #e8ded4;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.food-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  border-color:#e2d6ca;
  filter:brightness(1.02);
}

/* Titolo: max 2 righe */
.food-name{
  margin:0 0 .6rem 0; /* spazio extra sopra l'indirizzo */
  font:800 1.12rem/1.18 Montserrat,system-ui,sans-serif;
  color:var(--fg);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}


.site-by__logo{
  height: 1.05em;      /* grande quanto la scritta */
  width: auto;
  vertical-align: -0.18em;  /* allinea alla baseline del testo */
  margin: 0 .35em;     /* piccolo spazio ai lati */
  display: inline-block;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* neutro (niente alone) */
}
.site-footer .site-by img{ /* garantisce il bianco su sfondo scuro se servisse */
  background: transparent;  /* lascia invariato il logo */
}



/* Indirizzo: intero, corsivo, più piccolo del titolo */
.food-address{
  margin:.6rem 0 0;
  font:500 .90rem/1.5 Montserrat,system-ui,sans-serif;
  font-style:italic;
  color:#3d3a38;
  display:block;
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;   /* va a capo se serve */
  word-break:normal;
  hyphens:auto;
}


/* Indirizzo: intero, corsivo, più piccolo del titolo */
.food-tel{
  margin:.6rem 0 0;
  font:500 .90rem/1.5 Montserrat,system-ui,sans-serif;
  font-style:italic;
  color:#3d3a38;
  display:block;
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;   /* va a capo se serve */
  word-break:normal;
  hyphens:auto;
}

/* riduce solo il margine quando segue l'indirizzo */
.food-address + .food-tel{ margin-top:.25rem; }

.food-tel a{ text-decoration: underline; text-underline-offset: 2px; }

/* “Indirizzo:” non in corsivo e marcato */
.food-label{
  font-weight:700;
  font-style:normal;
  color:#2d2a28;
  margin-right:.25rem;
}

/* Gruppi "Dove mangiare" */
.food-group { margin: 28px 0 8px; }
.food-group-title{
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: .2px;
}

/* Griglia dei riquadri per ogni gruppo */
.food-cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
@media (max-width: 1100px){
  .food-cards{ grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 768px){
  .food-cards{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (max-width: 520px){
  .food-cards{ grid-template-columns: 1fr; gap: 12px; }
}


/* Wrapper gruppi */
.food-groups { display:block; }



/* Larghezza card dentro i gruppi "Dove mangiare" */
.food-cards .food-card { grid-column: span 3; }          /* 4 per riga su desktop (12/3) */

@media (max-width: 1100px){
  .food-cards .food-card { grid-column: span 4; }        /* 2 per riga (8/4) */
}
@media (max-width: 768px){
  .food-cards .food-card { grid-column: span 2; }        /* 2 per riga (4/2) */
}
@media (max-width: 520px){
  .food-cards .food-card { grid-column: span 1; }        /* 1 per riga */
}









/* Mappa responsiva nella sezione Info utili */
.info-hero .map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* mantiene proporzioni senza usare height fisso */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #f6efe8;           /* tono in linea col resto della pagina */
  border: 1px solid #e8ded4;
}
.info-hero .map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* opzionale: su mobile un po' più alto per leggibilità */
@media (max-width: 600px){
  .info-hero .map-embed{ aspect-ratio: 4 / 3; }
}


/* Spazio extra tra MAPPA e PULSANTI */
#infoutili .info-hero{ margin-bottom: 4.4rem; }   /* distanzia la mappa */
#infoutili .info-actions{ margin-top: .2rem; }    /* micro-fine tuning */

/* Layout dei due riquadri (larghezza invariata) */
#infoutili .info-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}
@media (max-width: 680px){
  #infoutili .info-actions{ grid-template-columns: 1fr; }
}

/* Riquadri più alti e ben centrati */
#infoutili .info-actions .info-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 116px;           /* ← più alto (aumenta a 124–132px se vuoi ancora) */
  padding: 1rem 1.2rem;        /* spessore verticale */
  border-radius: 14px;         /* coerente col resto */
}

/* Titolo e sottotitolo un filo più grandi/leggibili */
#infoutili .info-card__title{
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.2;
  margin: 0;
}
#infoutili .info-card__hint{
  margin-top: .28rem;
  font-size: .96rem;
  line-height: 1.3;
}

/* Più spazio PRIMA e DOPO i pulsanti */
#infoutili .info-actions{
  margin: 1.2rem 0 2.4rem; /* ↑ sopra | ↓ sotto */
}

/* Mobile: un filo meno spazio per non “spingere” troppo */
@media (max-width: 680px){
  #infoutili .info-hero{ margin-bottom: 1.8rem; }
  #infoutili .info-actions{ margin: 1rem 0 2rem; }
}


/* Layout articoli: titolo + grid 2 colonne */
.article-head{ 
  position: relative; 
  margin-bottom: 1rem;
}

/* Bottone "Torna indietro" alto-dx */
.back-top{
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .75rem;
  font: 700 .92rem/1.1 Montserrat, system-ui, sans-serif;
  color: #2d2a28; text-decoration: none;
  background: #F6EFE8; border: 1px solid #e8ded4; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.back-top:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  border-color: #e2d6ca;
}

/* Griglia contenuti + immagine laterale */
.article-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* testo | immagine */
  gap: 1.2rem 2rem;
  align-items: start;
  margin-top: .6rem;
}

/* Colonna immagine (right) */
.article-side{ position: relative; }
.side-figure{
  margin: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #fff;
}
.side-figure img{ display:block; width:100%; height:auto; }
.side-figure figcaption{
  font: 500 .9rem/1.4 Inter, system-ui, sans-serif;
  color: #555; padding: .5rem .75rem;
}

/* Responsive: su tablet/mobile l’immagine va sotto, e il bottone non è assoluto */
@media (max-width: 980px){
  .article-grid{ grid-template-columns: 1fr; }
  .back-top{
    position: static; float: right; margin-top: .25rem; /* resta in alto a dx */
  }
}
@media (max-width: 560px){
  .back-top{ float: none; display:inline-flex; margin:.5rem 0 0 auto; }
}



/* l'header dell'articolo fa da contenitore di posizionamento */
.article-head{ position: relative; }

/* stesso bottone globale, ma messo in alto a destra qui */
.article-head .back-btn{
  position: absolute;
  top: 0; 
  right: 0;
  margin: 0;              /* evita margini ereditati */
}

/* su tablet/mobile torna in flusso e resta a destra */
@media (max-width: 980px){
  .article-head .back-btn{
    position: static;
    float: right;
    margin-top: .25rem;
  }
}
@media (max-width: 560px){
  .article-head .back-btn{
    float: none;
    margin-left: auto;    /* resta allineato a destra */
    display: inline-flex;
  }
}

/* === Fix NEWS mobile: niente riquadri allungati === */
@media (max-width: 900px) {
  /* track orizzontale scorrevole */
  .news-track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    align-items: flex-start;       /* evita che le card si stirino in altezza */
    padding: 0 16px;
  }

  /* ogni card occupa ~80% viewport (tipo carosello) */
  .news-card{
    flex: 0 0 80vw;
    max-width: 360px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background: #111;              /* opzionale, estetica */
    height: auto;                  /* importante: niente altezze imposte */
  }

  /* struttura verticale, non stirare */
  .news-link{
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: stretch;
  }

  /* l’immagine mantiene proporzioni (16:9) e non si deforma */
  .news-card img{
    width: 100%;
    height: auto;                  /* fallback */
    aspect-ratio: 16 / 9;          /* mantiene forma su tutti i device moderni */
    object-fit: cover;             /* riempie senza deformare */
    display: block;
  }

  .news-body{
    padding: 12px;
  }
}

/* HARD OVERRIDE nel caso altrove ci sia un "height:100%" sull’immagine */
.news-card img{ height: auto !important; }


/* === Bottone "Torna su" flottante === */
.to-top{
  position: fixed;
  right: clamp(12px, 2vw, 18px);
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 1000;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #2b2f36;
  border: 1px solid #00000014;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .15s ease;
}
.to-top:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.to-top.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* scroll morbido per il link #top */
html{ scroll-behavior: smooth; }

/* su desktop rendilo leggermente più grande */
@media (min-width: 992px){
  .to-top{ width: 48px; height: 48px; }
}

/* === PRO LOCO CAVE: testo sempre nero su mobile === */
@media (max-width: 780px){
  /* in header e nel menu mobile */
  .proloco-btn{
    color:#111 !important;          /* forza il testo nero */
    background:#fff;                 /* resta leggibile anche sopra al video */
    border-color:#00000014;
  }
  .proloco-btn:hover{ background:#fff; } /* evita che torni semitrasparente */
}


/* --- HOTFIX Android/Motorola: disattiva effetti sopra al video --- */
@media (max-width: 820px){
  /* togli overlay e filtri che su alcuni device “imbiancano” il video */
  .hero-fx-top,
  .hero-fx-blur,
  .hero-fx-fade{
    display: none !important;
  }

  /* assicurati che il video stia “davanti” al background del wrapper */
.hero-video{
  position: absolute;  /* torna assoluto */
  inset: 0;
  z-index: 0;          /* video sotto */
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

  /* se avevi blur/mask sul wrapper, neutralizzali su mobile */
  .hero, .hero::before, .hero::after{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    mask-image: none !important;
  }
}


/* Cover per la pagina Dove mangiare */
.food-hero { margin: 24px 0 32px; }
.food-hero img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  aspect-ratio: 16 / 10;   /* ← coerente con la tua immagine */
  object-fit: cover;
}
@media (max-width:768px){ .food-hero{ margin:16px 0 24px; } }