/* ===========================================================
   CASTELLO DI CASOLA — design tokens (v2, stile più morbido)
   =========================================================== */
:root{
  --ink:        #211D19;
  --pietra:     #E9E6DC;
  --pietra-2:   #DDD8C8;
  --grigio:     #ADAA9F;
  --grigio-2:   #6E6C63;
  --notte:      #232B1F;
  --parch:      #F1ECDE;
  --castagna:   #6B4226;
  --castagna-d: #55321D;
  --muschio:    #5B6B4F;
  --cera:       #B8863B;

  --font-display: "Newsreader", Georgia, serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stamp:   "Space Mono", "Courier New", monospace;

  --wrap: 1160px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 8px 26px rgba(33,29,25,.08);
  --shadow-hover: 0 14px 34px rgba(33,29,25,.13);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--pietra); line-height:1.62; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0 0 .45em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
a{ color:inherit; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--castagna); color:var(--parch); padding:.75em 1.2em; z-index:200; border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus{ left:0; top:0; }
:focus-visible{ outline:3px solid var(--cera); outline-offset:3px; border-radius:4px; }

.eyebrow{ font-family:var(--font-stamp); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--castagna); margin:0 0 .8em; }
.eyebrow-light{ color:var(--cera); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- bottoni — morbidi, a pillola ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-stamp); font-size:.83rem; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; padding:.95em 1.7em; border-radius:var(--radius-pill); transition:transform .25s ease, background .25s ease, box-shadow .25s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-arrow{ transition:transform .25s ease; display:inline-block; }
.btn:hover .btn-arrow{ transform:translateX(3px); }
.btn-ghost{ border:1px solid rgba(241,236,222,.5); color:var(--parch); }
.btn-ghost:hover{ background:rgba(241,236,222,.12); }
.btn-solid{ background:var(--cera); color:var(--notte); font-weight:700; box-shadow:0 8px 22px rgba(184,134,59,.35); }
.btn-solid:hover{ background:#c99548; }
.btn-outline-dark{ border:1px solid rgba(33,29,25,.28); color:var(--ink); }
.btn-outline-dark:hover{ background:rgba(33,29,25,.05); }

/* ---------- etichetta a pillola (niente cerchi, niente tagli netti) ---------- */
.tag{ display:inline-block; font-family:var(--font-stamp); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--parch); background:var(--castagna); padding:.45em 1.05em; border-radius:var(--radius-pill); }
.tag-muschio{ background:var(--muschio); }
.tag-cera{ background:var(--cera); color:var(--notte); }
.tag-outline{ background:transparent; color:var(--castagna); border:1px solid currentColor; }

/* ---------- foto: angoli morbidi, ombra leggera, micro-movimento all'hover ---------- */
.img-hover{ overflow:hidden; position:relative; background:var(--grigio); border-radius:var(--radius); box-shadow:var(--shadow); }
.img-hover .img-fill{ position:absolute; inset:-6%; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.img-hover .img-real{ position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.8,.2,1); z-index:1; }
.img-hover:hover .img-fill, .img-hover:hover .img-real{ transform:scale(1.08) rotate(-1.4deg); }

.hero-eyebrow, .hero-lede{ transition:opacity .5s ease; }
.hero-eyebrow.is-fading, .hero-lede.is-fading{ opacity:0; }
.hero-slider{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:1; transition:opacity 1.6s ease; }
.hero-slide.is-active{ opacity:1; z-index:2; }
.img-hover .img-label{ position:absolute; left:12px; bottom:12px; font-family:var(--font-stamp); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(33,29,25,.6); background:rgba(241,236,222,.85); padding:.35em .65em; border-radius:var(--radius-pill); z-index:2; }

.ph-a .img-fill{ background:repeating-linear-gradient(135deg,#cdcabd,#cdcabd 10px,#c0bcac 10px,#c0bcac 20px); }
.ph-b .img-fill{ background:repeating-linear-gradient(115deg,#bdb9ab,#bdb9ab 8px,#afab9b 8px,#afab9b 16px); }
.ph-c .img-fill{ background:repeating-linear-gradient(150deg,#d7d3c6,#d7d3c6 12px,#cac6b6 12px,#cac6b6 24px); }

/* ---------- sezioni "pannello" morbide, non più fasce a bordo netto ---------- */
.pannello{ border-radius:32px; padding:4rem; margin:5rem auto; max-width:var(--wrap); }
.pannello-scuro{ background:var(--notte); color:var(--parch); }
.pannello-scuro p{ color:rgba(241,236,222,.85); }
.pannello-castagna{ background:var(--castagna-d); color:var(--parch); }
.pannello-castagna p{ color:rgba(241,236,222,.85); }
.pannello-chiaro{ background:var(--pietra-2); }
@media (max-width: 760px){ .pannello{ padding:2.4rem 1.6rem; border-radius:24px; margin:3rem 16px; } }

.pannello-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:center; }
@media (max-width: 860px){ .pannello-grid{ grid-template-columns:1fr; } }

/* ---------- riquadro "scopri di più" ---------- */
.approfondisci{ background:rgba(33,29,25,.04); border-radius:var(--radius-sm); margin-top:1.4rem; overflow:hidden; }
.pannello-scuro .approfondisci, .pannello-castagna .approfondisci{ background:rgba(241,236,222,.08); }
.approfondisci summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6em; padding:.9rem 1.3rem; font-family:var(--font-stamp); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--castagna); }
.pannello-scuro summary, .pannello-castagna summary{ color:var(--cera); }
.approfondisci summary::-webkit-details-marker{ display:none; }
.approfondisci summary::marker{ content:""; }
.approfondisci .chev{ transition:transform .3s ease; }
.approfondisci[open] .chev{ transform:rotate(180deg); }
.approfondisci-corpo{ padding:.2rem 1.3rem 1.5rem; font-family:var(--font-display); font-size:1.02rem; line-height:1.75; }
.approfondisci-corpo p:last-child{ margin-bottom:0; }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(233,230,220,.92); backdrop-filter:blur(6px); border-bottom:1px solid rgba(33,29,25,.08); }
.header-inner{ display:flex; align-items:center; gap:1.8rem; padding:14px 32px; }
.brand{ display:flex; align-items:center; gap:.5em; text-decoration:none; font-family:var(--font-display); font-size:1.08rem; color:var(--ink); margin-right:auto; white-space:nowrap; }
.brand-logo{ width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.main-nav{ display:flex; align-items:center; gap:1.3rem; font-size:.88rem; }
.main-nav a{ text-decoration:none; position:relative; padding:.2em 0; white-space:nowrap; }
.main-nav a:not(.nav-cta):hover{ color:var(--castagna); }
.main-nav .nav-cta{ font-family:var(--font-stamp); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; background:var(--castagna); color:var(--parch); padding:.55em 1.1em; border-radius:var(--radius-pill); }

/* ---------- selettore lingua "custom", il widget Google resta nascosto ---------- */
.gt-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lang-buttons{ display:flex; gap:.35rem; }
.lang-btn{ font-family:var(--font-stamp); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; background:transparent; border:1px solid rgba(33,29,25,.22); color:var(--ink); padding:.4em .7em; border-radius:var(--radius-pill); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.lang-btn:hover{ background:rgba(33,29,25,.06); }
.lang-btn[aria-current="true"]{ background:var(--castagna); color:var(--parch); border-color:var(--castagna); }
/* Se lo script di Google Translate non carica (es. anteprima offline), il gruppo resta comunque pulito */
body{ position:static !important; }
.goog-te-banner-frame{ display:none !important; }
.goog-te-gadget-icon{ display:none !important; }

@media (max-width: 900px){
  .header-inner{ flex-wrap:wrap; }
  .main-nav{ order:3; width:100%; overflow-x:auto; gap:1rem; padding-top:10px; border-top:1px solid rgba(33,29,25,.08); margin-top:10px; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; min-height:86vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--notte); color:var(--parch); border-radius:0 0 40px 40px; }
.hero-illustration{ position:absolute; inset:0; }
.hero-svg{ width:100%; height:100%; display:block; }
.hero-content{ position:relative; padding-bottom:8vh; max-width:740px; }
.hero h1{ font-size:clamp(2.4rem, 6.5vw, 4.6rem); line-height:1.02; margin:0 0 .3em; }
.hero-lede{ font-size:1.1rem; max-width:34em; color:rgba(241,236,222,.88); margin-bottom:1.4em; }
@media (max-width: 700px){ .hero{ border-radius:0 0 28px 28px; } }

/* ===========================================================
   SOGLIA
   =========================================================== */
.soglia{ padding:6rem 0 3rem; }
.soglia-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.2rem; align-items:center; }
.soglia-testo p{ font-size:1.06rem; font-family:var(--font-display); line-height:1.75; }
.soglia-foto{ aspect-ratio:4/5; }
.nota{ font-family:var(--font-stamp); font-size:.7rem; color:var(--muschio); margin-top:1.1em; }
.nota-light{ color:rgba(241,236,222,.55); }
@media (max-width: 860px){ .soglia-grid{ grid-template-columns:1fr; } .soglia-foto{ aspect-ratio:16/9; order:-1; } }

/* ===========================================================
   PORTE — quick-nav verso le sezioni della pagina
   =========================================================== */
.porte{ padding:1rem 0 4rem; }
.porte-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.3rem; }
.porta{ background:var(--pietra-2); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; }
.porta:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.porta-img{ aspect-ratio:4/3; border-radius:0; box-shadow:none; }
.porta-corpo{ padding:1.7rem 1.5rem 1.9rem; flex:1; display:flex; flex-direction:column; }
.porta .tag{ align-self:flex-start; margin-bottom:.9rem; }
.porta h2{ font-size:1.15rem; margin-bottom:.4rem; }
.porta p{ font-size:.88rem; color:rgba(33,29,25,.72); flex:1; }
.porta-link{ font-family:var(--font-stamp); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--castagna); margin-top:.4rem; }
@media (max-width: 1000px){ .porte-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .porte-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CONTENUTO STANDARD DI SEZIONE (Storia, Cosa vedere, ecc.)
   =========================================================== */
.sezione{ padding:4.5rem 0; }
.sezione-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.2rem; align-items:start; }
.sezione-testo p{ font-size:1.04rem; font-family:var(--font-display); line-height:1.75; }
.sezione-foto{ aspect-ratio:4/3; }
@media (max-width: 860px){ .sezione-grid{ grid-template-columns:1fr; } .sezione-foto{ order:-1; aspect-ratio:16/9; } }

/* ---------- elenco locali (dove mangiare) ---------- */
.lista-locali{ display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; }
.locale{ background:rgba(33,29,25,.035); border-radius:var(--radius-sm); padding:1.3rem 1.5rem; display:flex; flex-direction:column; gap:.35rem; }
.locale h4{ font-family:var(--font-display); font-size:1.08rem; margin:0; font-weight:500; }
.locale span{ font-family:var(--font-stamp); font-size:.68rem; text-transform:uppercase; color:var(--grigio-2); }
.locale p{ font-family:var(--font-body); font-size:.9rem; color:rgba(33,29,25,.72); margin:.2rem 0 0; }

/* ===========================================================
   STAGIONI
   =========================================================== */
.stagioni{ padding:4rem 0; }
.stagioni-intro{ max-width:620px; margin-bottom:2.6rem; }
.stagioni-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.stagione .img-hover{ aspect-ratio:1/1; margin-bottom:.8rem; }
.stagione h3{ font-family:var(--font-stamp); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-bottom:.35rem; }
.stagione p{ font-size:.88rem; color:var(--grigio-2); }
@media (max-width: 760px){ .stagioni-grid{ grid-template-columns:1fr 1fr; row-gap:1.8rem; } }

/* variante a 3 colonne, usata da "Casola nella storia" */
.storiche-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
.storiche-grid .img-hover{ aspect-ratio:1/1; margin-bottom:.8rem; }
@media (max-width: 700px){ .storiche-grid{ grid-template-columns:1fr; } }

/* ---------- schema del percorso della Via Francigena ---------- */
.francigena-mappa{ margin-top:3.5rem; padding-top:2.8rem; border-top:1px solid rgba(241,236,222,.18); }
.mappa-caption{ font-family:var(--font-stamp); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cera); margin-bottom:1.2rem; }

/* ---------- mappa Google Maps / Leaflet ---------- */
.mappa-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:1.6rem 0; line-height:0; }
.mappa-francigena-embed{ margin:0 0 1rem; }
#mappa-francigena{ height:420px; width:100%; background:var(--grigio); font-family:var(--font-body); }
@media (max-width: 700px){ #mappa-francigena{ height:320px; } }

/* marker custom sulla mappa Leaflet, coerenti con i tag a pillola del sito */
.mappa-marker{ position:relative; }
.mappa-dot{ position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%; background:var(--parch); border:2px solid var(--notte); box-shadow:0 0 0 3px rgba(35,43,31,.18); transform:translate(-50%,-50%); }
.mappa-dot-qui{ width:16px; height:16px; background:var(--cera); }
.mappa-marker .tag{ position:absolute; left:11px; top:-13px; white-space:nowrap; box-shadow:var(--shadow); }
.mappa-label-small{ position:absolute; left:9px; top:-9px; white-space:nowrap; font-family:var(--font-stamp); font-size:.65rem; background:rgba(241,236,222,.92); color:var(--ink); padding:.25em .55em; border-radius:var(--radius-pill); box-shadow:var(--shadow); }

/* ===========================================================
   CITAZIONE
   =========================================================== */
.citazione blockquote{ margin:0; text-align:center; font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem, 2.8vw, 1.9rem); line-height:1.5; }
.citazione cite{ display:block; margin-top:1.1rem; font-family:var(--font-stamp); font-style:normal; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--grigio-2); }

/* ===========================================================
   GALLERIA — griglia robusta, righe di altezza fissa
   =========================================================== */
.galleria{ padding:1rem 0 4.5rem; }
.galleria-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:14px; }
.galleria-grid .img-hover.tall{ grid-row:span 2; }
@media (max-width: 900px){ .galleria-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px; } }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--grigio-2); color:var(--parch); padding:4rem 0 1.5rem; border-radius:40px 40px 0 0; margin-top:2rem; }
.footer-inner{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(241,236,222,.16); }
.footer-brand{ font-family:var(--font-display); font-size:1.1rem; display:flex; align-items:center; flex-wrap:wrap; gap:.5em; }
.footer-brand p{ font-family:var(--font-body); font-size:.85rem; color:rgba(241,236,222,.7); margin-top:.6em; width:100%; }
.footer-nav{ display:flex; flex-direction:column; gap:.6rem; font-size:.92rem; }
.footer-nav a{ text-decoration:none; }
.footer-nav a:hover{ color:var(--cera); }
.footer-cta p{ font-family:var(--font-stamp); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cera); margin-bottom:.5em; }
.footer-cta a{ text-decoration:none; font-family:var(--font-display); font-size:1.12rem; color:var(--parch); }
.footer-fine{ font-family:var(--font-stamp); font-size:.68rem; color:rgba(241,236,222,.5); text-align:center; padding-top:1.5rem; margin:0; }
@media (max-width: 700px){ .footer-inner{ grid-template-columns:1fr; } .site-footer{ border-radius:28px 28px 0 0; } }