/* =========================================================
   AOC — Associazione Ornitologica Cremasca
   Design System moderno
   ========================================================= */
:root{
  /* =========================================================
     Colori brand — palette "Terra Cremasca" (unica palette del sito)
     Verde bosco (primario) · terracotta/mattone di Crema (secondario)
     · oro (accento), su carta calda.
     La famiglia secondaria usa i token --sec-* per le terre
     (terracotta/mattone di Crema). Nessun tema alternativo.
     ========================================================= */
  /* Primario — verde bosco */
  --forest-950:#081711;
  --forest-900:#0f2a1f;
  --forest-800:#163a2a;
  --green-700:#1b5238;
  --green-600:#1f6e49;
  --green-500:#2a8a5f;
  --green-400:#5aaf84;
  --green-100:#d7efe2;
  --green-50:#eef8f2;

  /* Secondario — terra: terracotta e mattone (Crema) */
  --sec-900:#33160e;
  --sec-800:#4a2318;
  --sec-700:#7f3b28;
  --sec-600:#a4553a;
  --sec-500:#c06b4c;
  --sec-200:#f0d4c8;
  --sec-100:#f8e7df;
  --sec-50:#fdf2ee;
  --glow-second:rgba(164,85,58,.5);

  /* Accento — oro su carta calda */
  --cream:#f7f3e9;
  --cream-100:#fcfaf4;
  --sand:#ede4d2;
  --amber-600:#96610e;
  --amber-500:#e0a233;
  --amber-400:#f2c468;
  --amber-100:#fbecce;

  /* Neutri — carta e inchiostro */
  --ink:#14201a;
  --ink-soft:#3a4741;
  --muted:#66716b;
  --line:#e1e6e1;
  --white:#ffffff;

  /* Tipografia */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Layout */
  --container:1200px;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* Ombre */
  --shadow-sm:0 2px 8px rgba(15,42,31,.06);
  --shadow:0 12px 30px -12px rgba(15,42,31,.18);
  --shadow-lg:0 30px 60px -25px rgba(15,42,31,.30);
  --shadow-amber:0 18px 40px -18px rgba(224,162,51,.55);

  /* Transizioni */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.2s var(--ease);
  --t:.4s var(--ease);

  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit}
ul[class]{list-style:none;padding:0}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;color:var(--forest-900);letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,1.6rem + 3.6vw,4.4rem);font-weight:600}
h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,3rem)}
h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem)}
h4{font-size:1.1rem}
p{color:var(--ink-soft)}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.35rem);line-height:1.65;color:var(--ink-soft)}
.eyebrow{
  font-family:var(--font-sans);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-600);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber-500);border-radius:2px}
.text-white,.text-white h1,.text-white h2,.text-white h3,.text-white h4{color:var(--white)}
.text-white p,.text-white .lead{color:rgba(255,255,255,.82)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,3rem + 5vw,7rem)}
.section--tight{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.section--cream{background:var(--cream)}
.section--green{background:linear-gradient(160deg,var(--forest-900),var(--green-700) 62%,var(--sec-800));color:var(--white)}
.center{text-align:center}
.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:clamp(1.1rem,2vw,1.8rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.section-head{max-width:44rem;margin-inline:auto;text-align:center;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head p{margin-top:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.92rem;letter-spacing:.01em;line-height:1;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast);
  will-change:transform;
}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--green-600);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--amber{background:var(--amber-500);color:var(--forest-950);box-shadow:var(--shadow-amber)}
.btn--amber:hover{background:var(--amber-400);transform:translateY(-2px)}
.btn--ghost{border:1.5px solid var(--line);color:var(--forest-900);background:var(--white)}
.btn--ghost:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-2px)}
.btn--light{border:1.5px solid rgba(255,255,255,.4);color:var(--white)}
.btn--light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn--sm{padding:.6rem 1.1rem;font-size:.82rem}
/* ---------- Topbar ---------- */
.topbar{
  background:var(--forest-950);color:rgba(255,255,255,.8);
  font-size:.82rem;letter-spacing:.01em;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;row-gap:.5rem;min-height:40px;padding-block:.3rem;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.8);transition:color var(--t-fast)}
.topbar a:hover{color:var(--amber-400)}
.topbar__info{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;flex:1 1 auto;min-width:0}
.topbar__info span{display:inline-flex;align-items:center;gap:.45rem}
.topbar__social{display:flex;align-items:center;gap:.5rem}
.topbar__social a{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08)}
.topbar__social a:hover{background:var(--amber-500);color:var(--forest-950)}
.topbar__social svg{width:15px;height:15px}
.topbar__actions{display:flex;gap:1.1rem;align-items:center}
.topbar__actions a{display:inline-flex;align-items:center;gap:.4rem}
.topbar__actions svg{width:15px;height:15px}
/* Biglietto da visita della topbar (topbar() in tools/build.mjs): al posto del
   puntalino della posizione ci sono lo stemma ufficiale e quattro righe in colonna
   — nome, via, città, email. I selettori hanno specificità (0,2,0) per battere la
   regola generica `.topbar__info span` qui sopra, che vale anche per .topbar__card
   e .topbar__lines e impone loro display:inline-flex e align-items:center: su una
   colonna flex align-items:center centra ogni riga per conto suo, da cui il testo
   "a scaletta" (corretto con align-items:flex-start).
   Nota: il padding dello stemma va scritto in px, non in % — la percentuale si
   risolve sulla larghezza del contenitore (.topbar__card, ~280px) e non sui 40px
   del riquadro: col 7% l'area dell'immagine finiva a zero e restava visibile solo
   il fondo bianco del riquadro. */
.topbar__info .topbar__card{display:flex;align-items:center;gap:.7rem;min-width:0}
.topbar__info .topbar__logo{display:block;width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--white);padding:4px;object-fit:contain}
.topbar__info .topbar__lines{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;min-width:0}
.topbar__info .topbar__lines strong{color:var(--white);font-size:.8rem;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap}
.topbar__info .topbar__lines span,.topbar__info .topbar__lines a{display:block;font-size:.72rem;line-height:1.25;color:rgba(255,255,255,.72);white-space:nowrap}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60}
.header{
  background:rgba(251,249,243,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--t),background var(--t);
}
.header.is-stuck{box-shadow:var(--shadow);background:rgba(251,249,243,.95)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__mark{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(150deg,var(--green-600),var(--sec-700));box-shadow:var(--shadow-sm)}
.brand__mark svg{width:26px;height:26px}
/* Stemma ufficiale dentro il riquadro del marchio (sorgente: BRAND_LOGO in
   tools/build.mjs). Il file è quadrato con lo stemma circolare su fondo bianco:
   - l'immagine riempie il riquadro e object-fit:contain evita qualsiasi taglio;
   - il padding crea un anello bianco uniforme che stacca il cerchio esterno
     (ASSOCIAZIONE ORNITOLOGICA CREMASCA) dagli angoli arrotondati;
   - border-radius:inherit fa combaciare il fondo bianco del file con il riquadro. */
.brand__mark img{display:block;width:100%;height:100%;object-fit:contain;padding:7%;border-radius:inherit;background:var(--white)}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.12rem;color:var(--forest-900)}
.brand__tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-600);font-weight:700}

/* ---------- Navigation ---------- */
.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.6rem .78rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.9rem;color:var(--ink);
  transition:background var(--t-fast),color var(--t-fast);white-space:nowrap;
}
.nav__link:hover{background:var(--green-50);color:var(--green-700)}
.nav__link svg{width:13px;height:13px;transition:transform var(--t-fast);opacity:.7}
.nav__item:hover>.nav__link svg{transform:rotate(180deg)}
.nav__item.is-active>.nav__link{color:var(--green-700);background:var(--green-50)}
.nav__dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:250px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.5rem;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav__item:hover .nav__dropdown,.nav__item:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dropdown a{display:block;padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.nav__dropdown a:hover{background:var(--green-50);color:var(--green-700)}
.nav__dropdown a span{display:block;font-size:.76rem;color:var(--muted);font-weight:400}

.header__cta{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--white);place-items:center}
.nav-toggle span{position:relative;width:20px;height:2px;background:var(--forest-900);border-radius:2px;transition:var(--t-fast)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--forest-900);border-radius:2px;transition:var(--t-fast)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--white);
  background:
    radial-gradient(1200px 600px at 78% -10%,rgba(224,162,51,.28),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,var(--glow-second),transparent 55%),
    linear-gradient(160deg,var(--forest-950),var(--green-700) 62%,var(--sec-800));
  padding-block:clamp(4rem,3rem + 6vw,8rem);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);
          mask-image:linear-gradient(180deg,#000,transparent 90%);
}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__title{color:var(--white);margin-top:1.1rem}
.hero__title em{font-style:normal;color:var(--amber-400)}
.hero__text{margin-top:1.3rem;max-width:34rem;color:rgba(255,255,255,.85);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.hero__actions{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__stats{margin-top:2.6rem;display:flex;gap:clamp(1.2rem,4vw,2.6rem);flex-wrap:wrap}
.hero__stat strong{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);color:var(--amber-400);line-height:1}
.hero__stat span{font-size:.85rem;color:rgba(255,255,255,.7);letter-spacing:.03em}
.hero__media{position:relative}
.hero__card{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  /* aspect-ratio uguale alla locandina reale (742x1005) così non viene tagliata da object-fit */
  position:relative;aspect-ratio:742/1005;display:grid;place-items:center;
}
.hero__card svg{width:60%;opacity:.9}
/* Locandina della mostra nell'hero: riempie la card e si apre ingrandita (lightbox) */
.hero__card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.hero__card[data-lightbox]{cursor:zoom-in}
.hero__card[data-lightbox]:hover img{transform:scale(1.03)}
.hero__card[data-lightbox]:focus-visible{outline:2px solid var(--amber-400);outline-offset:3px}
/* Se la locandina non è disponibile si mostra il disegno di riserva (classe aggiunta da main.js) */
.hero__card-fallback{display:none}
.hero__card.is-poster-missing img{display:none}
.hero__card.is-poster-missing .hero__card-fallback{display:block;width:100%;text-align:center}
.hero__badge{
  position:absolute;bottom:-18px;left:-18px;z-index:2;background:var(--white);color:var(--forest-900);
  border-radius:var(--radius);padding:.9rem 1.2rem;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:.7rem;
}
.hero__badge svg{width:30px;height:30px;color:var(--amber-500)}
.hero__badge b{display:block;font-family:var(--font-display);font-size:1.15rem}
.hero__badge small{color:var(--muted)}

/* ---------- Page header (interne) ---------- */
.pagehead{
  position:relative;overflow:hidden;color:var(--white);
  background:
    radial-gradient(900px 400px at 80% -20%,rgba(224,162,51,.25),transparent 60%),
    linear-gradient(160deg,var(--forest-900),var(--green-700) 62%,var(--sec-800));
  padding-block:clamp(3rem,2.5rem + 4vw,5.5rem);
}
.pagehead::before{content:"";position:absolute;inset:0;opacity:.45;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.pagehead__inner{position:relative;z-index:2;max-width:52rem}
.pagehead h1{color:var(--white);margin-top:.8rem}
.pagehead p{margin-top:1rem;color:rgba(255,255,255,.82);font-size:1.1rem}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:rgba(255,255,255,.65);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--amber-400)}
.breadcrumb span{opacity:.5}

/* ---------- Cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.5vw,2rem);box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);height:100%;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--green-400)}
.card__icon{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--green-100);color:var(--green-700);
}
.card__icon svg{width:26px;height:26px}
/* Icone colorate delle card: il riquadro prende la tinta dell'accento, mentre
   l'icona porta il colore dentro la grafica (glifo nell'inchiostro della tinta,
   su un tondo chiaro bordato di tinta media). Le tinte oro / terra / bosco sono
   generate dal build (TINTE in tools/build.mjs), quindi la proprietà color qui
   non serve. */
.card__icon--gold{background:var(--amber-100)}
.card__icon--terra{background:var(--sec-100)}
.card__icon--forest{background:var(--green-100)}
/* Logo del progetto Nest2Go nella card omonima: è l'unica immagine rimasta nelle
   card dei servizi, le altre tre mostrano le icone colorate di cardIcon (glifi
   storici anelli → tessera → ricerca). Larghezza dimezzata: 210px → 105px. */
.card__logo{width:min(100%,105px);height:auto;margin-bottom:1.1rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem}
.card__link{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--green-700);font-size:.9rem}
.card__link svg{width:16px;height:16px;transition:transform var(--t-fast)}
.card:hover .card__link svg{transform:translateX(4px)}

/* Feature list (testo + icone) */
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature__icon{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--amber-100);color:var(--amber-600)}
.feature__icon svg{width:22px;height:22px}
.feature h4{margin-bottom:.25rem}
.feature p{font-size:.92rem}

/* Two-column */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-100),var(--sand))}
.split__media svg{width:52%;opacity:.85}
.split__media--dark{background:linear-gradient(150deg,var(--forest-800),var(--green-600))}

/* Mappa della sede (embed Google Maps nella pagina "Dove siamo"): il riquadro
   riusa .split__media (raggio, ombra, 4/3) come contenitore flex verticale, con
   l'iframe che occupa tutto lo spazio e la legenda indirizzo/indicazioni sotto. */
.split__media--map{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line)}
.split__media--map iframe.map-embed{flex:1 1 auto;width:100%;min-height:340px;border:0;display:block;background:var(--green-50)}
.split__media--map .map-caption{display:flex;align-items:center;justify-content:space-between;gap:.7rem 1.2rem;flex-wrap:wrap;padding:.85rem 1.15rem;border-top:1px solid var(--line);background:var(--cream-100);font-size:.88rem;font-weight:600;color:var(--forest-900)}
.split__media--map .map-caption>span{display:inline-flex;align-items:center;gap:.5rem}
.split__media--map .map-caption svg{width:16px;height:16px;opacity:1;flex-shrink:0;color:var(--green-600)}
.split__media--map .map-caption a{display:inline-flex;align-items:center;gap:.4rem;color:var(--green-700);transition:color var(--t-fast)}
.split__media--map .map-caption a:hover{color:var(--amber-600)}
.split__media--map .map-caption a svg{transition:transform var(--t-fast)}
.split__media--map .map-caption a:hover svg{transform:translateX(3px)}
/* Stemma sociale nel blocco "Chi siamo" (home e storia): medaglione circolare
   bianco con lo stemma sempre INTERO e perfettamente centrato.
   Nel file lo stemma riempie il 96% del lato (margine 13px su 720px), quindi
   senza anello il border-radius:50% faceva toccare — e sembrare tagliato — il
   testo del cerchio esterno (ASSOCIAZIONE ORNITOLOGICA CREMASCA).
   - width/padding sono % del riquadro dedicato (.split__media, box-sizing:border-box);
   - aspect-ratio:1/1 rende il medaglione un cerchio esatto anche prima che
     l'immagine sia caricata;
   - object-fit:contain garantisce che il disegno non venga mai tagliato;
   - il padding (7.5% => ~12% del diametro) crea l'anello bianco uniforme che
     tiene lo stemma staccato dal bordo su tutti i lati;
   - l'ombra è volutamente poco spostata verso il basso, così il centro ottico
     del medaglione coincide con quello geometrico. */
.split__media--logo img{
  width:70%;height:auto;aspect-ratio:1/1;object-fit:contain;
  padding:7.5%;border-radius:50%;background:var(--white);
  box-shadow:0 14px 34px -18px rgba(15,42,31,.38);
}
/* Logo della mostra nella card scura del blocco "La nostra mostra" (home) */
.split__media--mostra{aspect-ratio:16/9}
/* Logo del progetto Nest2Go nella pagina dedicata (pannello scuro) */
.split__media--nest2go img{width:92%;height:auto}
/* Logo del modulo Solaris nella pagina Nest2Go (pannello chiaro) */
.split__media--solaris img{width:88%;height:auto}
.split__media--mostra img{
  width:92%;height:auto;border-radius:var(--radius);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.55);
}
/* ---------- Chips / tag ---------- */
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--line);font-size:.83rem;font-weight:600;color:var(--ink-soft);
}
.chip svg{width:15px;height:15px;color:var(--green-600)}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin-top:1rem;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--green-500),var(--sec-500),var(--amber-500))}
.timeline__item{position:relative;padding-bottom:2rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-2rem;top:4px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--green-500);box-shadow:0 0 0 4px var(--green-50)}
.timeline__year{font-family:var(--font-display);font-weight:600;color:var(--amber-600);font-size:1.15rem}
.timeline__item p{margin-top:.3rem;font-size:.95rem}

/* ---------- Value / stat strip ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1px;background:var(--line);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.strip__item{background:var(--white);padding:clamp(1.4rem,3vw,2.2rem);text-align:center}
.strip__item strong{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,1.5rem + 1.6vw,2.8rem);color:var(--green-700);line-height:1}
.strip__item span{font-size:.88rem;color:var(--muted)}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:1rem;grid-auto-rows:1fr}
.gallery__item{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,var(--green-100),var(--sand));aspect-ratio:4/3;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);
}
.gallery__item:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}
.gallery__item svg{width:44%;opacity:.7;color:var(--green-700)}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,42,31,.75));opacity:0;transition:opacity var(--t)}
.gallery__item:hover::after{opacity:1}
.gallery__cap{position:absolute;left:1rem;bottom:1rem;color:var(--white);font-weight:600;font-size:.9rem;z-index:2;opacity:0;transform:translateY(6px);transition:var(--t)}
.gallery__item:hover .gallery__cap{opacity:1;transform:translateY(0)}
.gallery__item--tall{grid-row:span 2;aspect-ratio:3/4}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery--article{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
/* Anteprima della galleria in home: griglia fissa 3×2 (6 foto) */
.gallery--teaser{grid-template-columns:repeat(3,1fr)}
/* ---------- News ---------- */
.news-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);height:100%}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-card__media{aspect-ratio:16/9;background:linear-gradient(150deg,var(--green-600),var(--sec-700));display:grid;place-items:center;position:relative;overflow:hidden}
.news-card__media svg{width:34%;color:rgba(255,255,255,.85)}
.news-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.news-card__date{position:absolute;top:1rem;left:1rem;background:var(--white);color:var(--green-700);border-radius:var(--radius-pill);padding:.3rem .8rem;font-size:.75rem;font-weight:700}
.news-card__body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.news-card__cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--amber-600)}
.news-card__body h3{font-size:1.15rem;margin:.5rem 0}
.news-card__body p{font-size:.92rem}
.news-card__foot{margin-top:auto;padding-top:1rem}

/* Article layout */
.article{max-width:46rem;margin-inline:auto}
.article__meta{display:flex;gap:1rem;align-items:center;color:var(--muted);font-size:.88rem;flex-wrap:wrap}
.article__hero{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/7;background:linear-gradient(150deg,var(--green-600),var(--sec-700));display:grid;place-items:center;margin:1.8rem 0}
.article__hero svg{width:24%;color:rgba(255,255,255,.85)}
.article__hero img{width:100%;height:100%;object-fit:cover;display:block}
.prose>*+*{margin-top:1.2rem}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.6rem}
.prose ul{padding-left:1.3rem;color:var(--ink-soft)}
.prose li+li{margin-top:.5rem}
.prose blockquote{border-left:4px solid var(--amber-500);padding:.6rem 0 .6rem 1.3rem;font-family:var(--font-display);font-size:1.25rem;color:var(--forest-900);font-style:italic}
.prose img{width:100%;height:auto;border-radius:var(--radius);margin-top:1.2rem}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;margin-top:1.6rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-weight:700;font-size:.88rem;color:var(--forest-900)}
.field .req{color:var(--amber-600)}
.field input,.field textarea,.field select{
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-50)}
.field textarea{min-height:150px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Contact cards ---------- */
.contact-card{display:flex;gap:1rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem}
.contact-card__icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-100);color:var(--green-700)}
.contact-card__icon svg{width:20px;height:20px}
.contact-card h4{font-size:.95rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.contact-card p,.contact-card a{font-weight:600;color:var(--forest-900)}
.contact-card a:hover{color:var(--green-700)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,4rem);background:linear-gradient(140deg,var(--forest-900),var(--green-600) 55%,var(--sec-700));color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.4;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:22px 22px}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{color:var(--white)}
.cta-band p{color:rgba(255,255,255,.82);max-width:34rem;margin-top:.6rem}
/* ---------- Footer ---------- */
.footer{background:var(--forest-950);color:rgba(255,255,255,.72);padding-block:clamp(3rem,5vw,4.5rem) 1.5rem;position:relative}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.6fr;gap:clamp(1.8rem,4vw,3rem)}
.footer .brand__name{color:var(--white)}
.footer .brand__tag{color:var(--amber-400)}
.footer p{color:rgba(255,255,255,.62);font-size:.92rem}
.footer h4{color:var(--white);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.1rem;font-family:var(--font-sans);font-weight:700}
.footer__links{list-style:none;display:grid;gap:.6rem}
.footer__links a{font-size:.92rem;color:rgba(255,255,255,.72);transition:color var(--t-fast)}
.footer__links a:hover{color:var(--amber-400)}
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem}
.footer__social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--white);transition:var(--t-fast)}
.footer__social a:hover{background:var(--amber-500);color:var(--forest-950);transform:translateY(-3px)}
.footer__social svg{width:18px;height:18px}
.footer__news{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.footer__news .field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--white)}
.footer__news .field input::placeholder{color:rgba(255,255,255,.4)}
.footer__bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.footer__bottom a{color:rgba(255,255,255,.72)}
.footer__bottom a:hover{color:var(--amber-400)}

/* ---------- Animazioni reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(14,26,20,.92);backdrop-filter:blur(6px);display:none;place-items:center;padding:2rem}
.lightbox.is-open{display:grid}
.lightbox__box{max-width:min(1100px,92vw);width:auto;max-height:88vh;border-radius:var(--radius-lg);display:grid;place-items:center;position:relative}
.lightbox__box svg{width:min(60vw,520px);color:rgba(255,255,255,.9)}
.lightbox__box img{max-width:min(1100px,92vw);max-height:88vh;border-radius:var(--radius-lg);display:block;box-shadow:var(--shadow-lg)}
.lightbox__cap{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:var(--white);font-weight:600}
.lightbox__close{position:absolute;top:1.2rem;right:1.4rem;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--white);display:grid;place-items:center;font-size:1.4rem}
.lightbox__close:hover{background:var(--amber-500);color:var(--forest-950)}

/* ---------- Utility ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.mini-nav{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--forest-900);padding:.7rem 1.1rem;border-radius:0 0 var(--radius) 0;z-index:300}
.skip-link:focus{left:0}

/* ---------- Tables (calendario) ---------- */
.table-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
table.simple{width:100%;border-collapse:collapse;background:var(--white)}
table.simple th,table.simple td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.93rem}
table.simple thead th{background:var(--green-50);color:var(--forest-900);font-family:var(--font-sans);text-transform:uppercase;font-size:.76rem;letter-spacing:.08em}
table.simple tr:last-child td{border-bottom:0}
table.simple tbody tr:hover{background:var(--cream)}
/* Riga secondaria nelle celle (tipo di manifestazione, note ingabbio/apertura/sgabbio) */
table.simple .table-meta{display:block;margin-top:.25rem;color:var(--muted);font-size:.8rem;font-weight:500}

/* ---------- Notice / alert ---------- */
.notice{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.3rem;border-radius:var(--radius);background:var(--amber-100);border:1px solid var(--amber-400);color:#6b4a0a}
.notice svg{flex-shrink:0;width:22px;height:22px;color:var(--amber-600);margin-top:.15rem}
.notice p{color:#6b4a0a;font-size:.92rem}
.notice a{color:#6b4a0a;font-weight:700;text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav-toggle{display:grid}
  /* (rimossa la regola che nascondeva la seconda voce della topbar: l'email non è
     più una <span> separata ma una riga dentro .topbar__card, vedi topbar()) */
  /* Biglietto della topbar: fra 641 e 960px restano stemma, nome ed email; via e
     città sono comunque nella pagina Dove siamo e nel footer. */
  .topbar__info .topbar__lines span{display:none}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,360px);
    background:var(--cream-100);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform var(--t);padding:5rem 1.4rem 2rem;overflow-y:auto;z-index:70;
  }
  body.nav-open .nav{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav__link{justify-content:space-between;padding:.9rem 1rem;font-size:1rem}
  .nav__dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 .4rem .8rem;min-width:0;display:none}
  .nav__item.is-expanded .nav__dropdown{display:block}
  .nav__item:hover .nav__dropdown{display:none}
  .nav__item.is-expanded .nav__dropdown{display:block}
  .nav-scrim{position:fixed;inset:0;background:rgba(14,26,20,.5);opacity:0;visibility:hidden;transition:var(--t);z-index:65}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}
  .hero__inner{grid-template-columns:1fr}
  .hero__media{max-width:520px}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
}
@media (max-width:640px){
  .header__cta .btn span{display:none}
  .topbar__info{display:none}
  .footer__grid{grid-template-columns:1fr}
  .hero__stats{gap:1.6rem}
  .gallery--teaser{grid-template-columns:repeat(2,1fr)}
}