/* =====================================================================
   radicinrisonanza — stylesheet
   Mobile-first. Breakpoint di riferimento: 480 / 768 / 1024 / 1280px.
   Palette e font presi dal brandbook ufficiale (vedi /brandbook nel
   progetto padre). Colore testo scuro NON specificato dal brandbook:
   valore provvisorio, da confermare col grafico (vedi README).
   ===================================================================== */

/* ---------- 1. Font brand + fallback gratuiti ---------- */
/* Il brandbook (pag. 10-11) indica DUE font, entrambi a pagamento:
   - "II - Type" = Nexa → corpo testo/titoli. Fallback: Poppins (85%
     di somiglianza secondo Typewolf, molto più vicino di Jost).
   - "I - Type" = Minimum → SOLO il wordmark "radicinrisonanza" (logotipo,
     lettere arrotondate senza "i"/"j" puntati). Fallback: Comfortaa, il
     Google Font gratuito visivamente più vicino (geometrico, arrotondato).
   Appoggiare qui i file .woff2 con licenza web quando disponibili: le due
   /* Poppins e Comfortaa serviti in locale (subset latin, woff2) — niente richieste a Google Fonts.
   Nexa e Minimum (a pagamento) non sono presenti: quando arrivano le licenze web, aggiungere qui le @font-face. */
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/comfortaa-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/comfortaa-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Custom properties ---------- */
:root {
  /* Palette ufficiale brandbook */
  --terra: #C9BBA7;
  --verde: #D0DFCD;
  --azzurro: #9BB5B8;
  --azzurro-scuro: #6C9AA2;
  --bianco: #FFFFFF;

  /* DA CONFERMARE col grafico: il brandbook non indica un valore per il
     testo scuro. Placeholder verificato per contrasto AA su --terra/--verde. */
  --testo-scuro: #2E3A3C;

  /* Variante scurita di --azzurro-scuro (#6C9AA2, contrasto 3.1:1 su bianco,
     sotto la soglia AA 4.5:1) usata SOLO per testo/sfondi bottone dove serve
     contrasto: stessa tonalità, luminosità ridotta. --azzurro-scuro originale
     resta invariato per icone/elementi grandi. Da confermare col grafico
     insieme a --testo-scuro. */
  --azzurro-scuro-testo: #4E757C;   /* contrasto 5.05:1 su bianco */
  --azzurro-scuro-testo-hover: #44666B; /* contrasto 6.25:1 su bianco */

  --overlay-hero: rgba(28, 36, 37, .5);
  --overlay-hero-forte: rgba(20, 26, 27, .68);

  /* Tonalità chiara di --terra, condivisa dalla scheda eventi e dal
     banner finale del footer. */
  --terra-light: color-mix(in srgb, var(--terra) 45%, white);
  /* Tonalità ancora più chiara, per lo sfondo delle sezioni tra la prima
     wordmark e il footer — più tenue del footer stesso. */
  --terra-lighter: color-mix(in srgb, var(--terra) 18%, white);

  /* Font: variabili uniche, così si passa ai font ufficiali in un punto
     solo quando arrivano i file con licenza web. */
  --font-brand: "Nexa", "Poppins", "Century Gothic", "Questrial", sans-serif;
  --font-display: "Minimum", "Comfortaa", "Century Gothic", cursive;

  --radius-lg: 32px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --tracking-wide: .14em;
  --tracking-mid: .06em;

  --container: 1180px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --shadow-card: 0 10px 30px -12px rgba(46, 58, 60, .25);
  --header-h: 72px;
}

/* ---------- 3. Reset minimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--testo-scuro);
  background: var(--bianco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 var(--space-2); }

/* Focus visibile per accessibilità da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--azzurro-scuro);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-2);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-4); }
}

.eyebrow {
  display: block;
  font-size: .75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--testo-scuro);
  margin-bottom: var(--space-2);
}

.wordmark {
  text-transform: lowercase;
  letter-spacing: var(--tracking-mid);
  font-weight: 700;
  font-family: var(--font-display);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--bianco);
  color: var(--testo-scuro);
  padding: .6em 1em;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top .2s ease;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- 4. Foto/placeholder generici ---------- */
/* Ogni immagine "reale" (bosco, eventi) ha un fallback via CSS + JS:
   se il file non è ancora presente, viene mostrato un riquadro con
   gradiente nei colori del brand e un'etichetta col nome file atteso,
   invece dell'icona di immagine rotta. Basta caricare il file vero
   con lo stesso nome per sostituirlo automaticamente. */
.photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--terra), var(--verde) 55%, var(--azzurro));
}
.photo picture {
  display: contents;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Se l'immagine non carica ancora, il browser mostra il testo alt
     prima che il JS aggiunga is-placeholder: azzerando il font-size non
     trabocca fuori dal contenitore (utile soprattutto per i placeholder
     circolari, es. .team-photo). Non tocca la resa dell'immagine vera. */
  font-size: 0;
}
.photo.is-placeholder img { display: none; }
.photo.is-placeholder::after {
  content: "Placeholder — " attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--testo-scuro);
  background: rgba(255, 255, 255, .35);
}

/* =====================================================================
   HEADER
   ===================================================================== */
:root { --nav-progress: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, var(--nav-progress));
  box-shadow: 0 2px 16px rgba(46, 58, 60, calc(var(--nav-progress) * .08));
}
.site-header.is-solid {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Assente in cima alla pagina: sfuma dentro insieme allo sfondo
   dell'header, guidato dalla stessa --nav-progress (vedi js/main.js). */
.brand-logo {
  display: flex;
  align-items: center;
  gap: .6em;
  opacity: var(--nav-progress);
}
.brand-logo img { height: 40px; width: auto; }
.brand-logo span {
  color: var(--testo-scuro);
  font-size: 1rem;
  letter-spacing: var(--tracking-mid);
}

/* Hamburger a 6 linee, sempre visibile (anche a inizio pagina, sopra la
   foto: resta bianco finché l'header non diventa solido). */
.nav-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: .5em .1em;
  margin-right: -1.4em;
  z-index: 110;
}
.nav-toggle span {
  width: 34px;
  height: 2px;
  background: var(--bianco);
  transition: opacity .2s ease, background-color .25s ease;
}
.site-header.is-solid .nav-toggle span,
.nav-open .nav-toggle span { background: var(--testo-scuro); }

/* Da aperto, le 6 linee sfumano via e appare una "X" (due pseudo-elementi
   incrociati) al loro posto, invece di provare a ruotare 6 barre. */
.nav-open .nav-toggle span { opacity: 0; }
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 2px;
  background: var(--testo-scuro);
  opacity: 0;
  transition: opacity .2s ease;
}
.nav-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-open .nav-toggle::before,
.nav-open .nav-toggle::after { opacity: 1; }

.main-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(78vw, 320px);
  height: 100vh;
  overflow-y: auto;
  background: var(--bianco);
  padding: calc(var(--header-h) + var(--space-3)) var(--space-3) var(--space-3);
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -12px 0 30px rgba(46, 58, 60, .12);
}
.nav-open .main-nav { transform: translateX(0); }
.main-nav ul { display: flex; flex-direction: column; gap: var(--space-3); }
.main-nav a {
  display: block;
  padding-block: .6em;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--testo-scuro);
}
.main-nav .btn { align-self: flex-start; }
/* Sotto-menu "Attività", le 4 pagine di approfondimento delle card
   filosofia: etichetta piccola, poi i 4 link, un filo più contenuti
   dei link principali per segnare la gerarchia. */
.main-nav .nav-group { display: flex; flex-direction: column; gap: var(--space-2); }
.main-nav .nav-group > .eyebrow { margin-bottom: 0; }
.main-nav .nav-subnav { gap: var(--space-2); padding-left: var(--space-2); }
.main-nav .nav-subnav a { font-size: .92rem; padding-block: .4em; }

/* Il mockup del brandbook mostra solo un'icona hamburger in alto a destra,
   a qualsiasi larghezza — niente barra di navigazione orizzontale sempre
   visibile. Il menu resta quindi un cassetto (drawer) anche da desktop. */

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block;
  padding: .85em 1.8em;
  border-radius: 999px;
  background: var(--azzurro-scuro-testo);
  color: var(--bianco);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--azzurro-scuro-testo-hover); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--bianco);
  overflow: hidden;
}
/* Sfondo a immagini scorrevoli: una pila di foto sovrapposte, una sola
   visibile alla volta (.is-active), js/main.js alterna la classe a
   intervalli con una dissolvenza incrociata via opacity. */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide picture { display: contents; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--overlay-hero) 0%, var(--overlay-hero-forte) 100%);
  z-index: -1;
}
.hero-content {
  position: relative;
  padding: calc(var(--header-h) + var(--space-4)) 0 var(--space-5);
  text-align: center;
}
/* Marchio grande sopra il payoff, come nel mockup. Vive nel normale flusso
   della pagina (non è fixed): scorrendo si rimpicciolisce, risale
   visibilmente e sfuma, mentre il logo dell'header sfuma dentro allo
   stesso ritmo (--nav-progress, calcolata su 520px di scroll in
   js/main.js — lenta apposta, per essere percepita come transizione e
   non come un taglio netto). */
.hero-mark {
  width: 110px;
  height: auto;
  margin: 0 auto var(--space-3);
  opacity: calc(1 - var(--nav-progress));
  transform: translateY(calc(var(--nav-progress) * -140px)) scale(calc(1 - var(--nav-progress) * .7));
  transform-origin: top left;
}
.hero-payoff {
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.25;
  margin: 0;
  max-width: 14ch;
}
.hero-quote {
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  line-height: 1.5;
  opacity: .92;
}
@media (min-width: 768px) {
  /* Come nel mockup: marchio + payoff in alto a sinistra sulla foto,
     non centrati. */
  .hero-content { text-align: left; padding-top: calc(var(--header-h) + var(--space-5)); }
  .hero-mark { width: 140px; margin: 0 0 var(--space-3); transform-origin: top left; }
}
@media (max-width: 767px) {
  .hero-mark { transform-origin: top center; }
}

/* Wordmark a piena larghezza, SEPARATA dalla foto hero, su sfondo chiaro
   pieno — fedele alla banda dedicata del mockup (pag. 13 del brandbook),
   non più sovrapposta all'immagine. Non è più testo ricostruito: è la
   scritta vettoriale reale del logo (logo-scritta.svg), quindi basta
   farla scalare a piena larghezza come una normale immagine responsive. */
.wordmark-band {
  background: var(--bianco);
  padding: var(--space-3) 0;
  overflow: hidden;
}
/* Quella subito prima del footer: letteralmente SOPRA il footer, non solo
   "prima" nel flusso — sfondo trasparente e margine negativo per farla
   scivolare a cavallo del bordo, sovrapposta al blocco colorato sotto
   (che a sua volta ha un padding-top maggiorato per non farsi coprire
   il contenuto). */
.wordmark-band:has(+ .site-footer) {
  position: relative;
  z-index: 2;
  /* Stesso sfondo chiaro della sezione sopra (--terra-lighter, non il
     --terra-light della card eventi): continua senza stacco quello che
     c'è già dietro, l'unico salto di tono resta quello verso il footer
     (--terra) subito sotto. */
  background: var(--terra-lighter);
  margin-bottom: -2.5rem;
}
.hero-wordmark {
  margin: 0;
}
.hero-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  color: var(--bianco);
  font-size: .7rem;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite;
}
.hero-scroll svg { width: 20px; height: 20px; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
}

/* =====================================================================
   FILOSOFIA
   ===================================================================== */
.section { padding: var(--space-6) 0; }
/* Sfondo tenue di terra (più chiaro del footer), dalla prima wordmark
   fino alla scheda eventi — non più bianco puro. */
#filosofia,
#eventi,
#chi-siamo { background: var(--terra-lighter); }
/* Niente stacco quasi-bianco fra la scheda eventi e la wordmark/footer
   sotto (entrambe --terra-light): lo spazio normale della sezione resta
   solo sopra la card. */
#eventi { padding-bottom: 0; }
.section-head {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.section-head h2, .section-head h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
#filosofia .section-head h2 { font-weight: 400; }
.section-head--left { margin: 0 0 var(--space-4); text-align: left; max-width: none; }

/* ---------- Pagina Chi Siamo ---------- */
.team-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}
@media (min-width: 640px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
.team-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin-bottom: var(--space-3);
}
.team-member h2 {
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: .2em;
}
.team-member p { max-width: 48ch; }

/* Due colonne come nel mockup: illustrazione del marchio + testo/card.
   Impilate su mobile, affiancate da 1024px. */
.filosofia-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 1024px) {
  /* Icona grande "in proporzione alle scritte", come nel mockup: la
     colonna del marchio è quasi quanto quella del testo, non un dettaglio
     piccolo a lato. */
  .filosofia-grid { grid-template-columns: minmax(300px, 460px) 1fr; gap: var(--space-5); }
}
.filosofia-mark { display: none; }
@media (min-width: 1024px) {
  .filosofia-mark { display: block; }
  .filosofia-mark img { width: 100%; height: auto; }
}

.philosophy-cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
.card {
  background: var(--bianco);
  border: 1px solid var(--terra);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(46, 58, 60, .35);
}
.card-icon {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.card h3 {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: .2em;
}
.card p { font-size: .9rem; }

/* =====================================================================
   EVENTI
   ===================================================================== */
/* "Scheda" Terra contenuta nella sezione (che condivide lo sfondo bianco
   di Filosofia), non una sezione a piena larghezza — come nel mockup. */
.eventi-card {
  background: var(--terra-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
}
/* Titolo su una riga, non in grassetto (a differenza degli altri H2). */
.eventi-card .section-head h2 {
  font-weight: 400;
  font-size: clamp(1rem, 2.8vw, 1.6rem);
  white-space: nowrap;
}
/* Riga scorrevole invece di una griglia fissa: con 3 card o meno riempie
   la larghezza e non serve scorrere, con più di 3 lo spazio finisce e la
   riga scorre in orizzontale invece di andare a capo — stesso markup,
   nessuna variante di layout da gestire lato JS. */
.events-grid {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-1); /* respiro per la scrollbar */
}
.events-grid .event-card,
.events-grid .event-placeholder-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .events-grid .event-card,
  .events-grid .event-placeholder-card {
    flex-basis: calc((100% - 2 * var(--space-3)) / 3);
  }
}
/* Solo foto + data in copertina (come nel mockup, pag. 13), ma la card
   è cliccabile: porta alla pagina di dettaglio dell'evento. */
.event-card {
  display: block;
  border-radius: var(--radius-md);
  transition: transform .2s ease;
}
.event-card:hover,
.event-card:focus-visible { transform: translateY(-3px); }
.event-card .photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease;
}
.event-card:hover .photo,
.event-card:focus-visible .photo {
  box-shadow: 0 16px 34px -14px rgba(46, 58, 60, .4);
}
.event-date {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  display: inline-block;
  background: var(--azzurro-scuro-testo);
  color: var(--bianco);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  padding: .35em .9em;
  border-radius: 999px;
}

/* Slot vuoto quando gli eventi live sono meno di 3 — tono azzurro (non
   terra) apposta, per leggersi subito come "non ancora riempito" invece
   che come una card evento vera. */
.event-placeholder-card {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--azzurro);
  background: color-mix(in srgb, var(--azzurro) 14%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
}
.event-placeholder-card span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--testo-scuro);
  opacity: .7;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Marrone pieno (--terra, non diluito), più scuro della banda della
   wordmark subito sopra (--terra-light): il passaggio di tono segna
   dove finisce la pagina e inizia il footer — niente più menu qui, la
   navigazione è nell'hamburger dell'header. */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--terra);
  color: var(--testo-scuro);
  padding: calc(var(--space-5) + 2.5rem) 0 var(--space-3);
  text-align: center;
}
.footer-wordmark {
  width: 100%;
  margin: 0;
}
.footer-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}
.footer-baseline {
  font-size: .8rem;
  color: var(--testo-scuro);
  display: flex;
  flex-direction: column;
  gap: .4em;
}
@media (min-width: 768px) {
  .footer-baseline {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* =====================================================================
   COOKIE BANNER (statico, nessun servizio esterno)
   ===================================================================== */
.cookie-banner {
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 200;
  max-width: 560px;
  margin: 0 auto;
  background: var(--testo-scuro);
  color: var(--bianco);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: .85rem; flex: 1 1 220px; }
.cookie-actions { display: flex; gap: .6em; }
.cookie-actions button {
  border: 1px solid var(--bianco);
  background: transparent;
  color: var(--bianco);
  padding: .7em 1.2em;
  min-height: 44px;
  border-radius: 999px;
  font-size: .8rem;
}
.cookie-actions button.primary { background: var(--azzurro-scuro-testo); border-color: var(--azzurro-scuro-testo); }

/* =====================================================================
   PAGINA EVENTO (eventi/*.html)
   ===================================================================== */
.event-back {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
}
.event-back svg { width: 16px; height: 16px; }

.event-hero {
  position: relative;
  height: 46vh;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  color: var(--bianco);
  overflow: hidden;
}
.event-hero .photo { position: absolute; inset: 0; z-index: -2; }
.event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 36, 37, .1) 0%, var(--overlay-hero-forte) 100%);
  z-index: -1;
}
.event-hero-content { position: relative; padding-bottom: var(--space-4); }

/* Padding-bottom ridotto (non a zero come #eventi in home: qui non c'è
   una card a fare da cuscinetto, il pulsante finale del form toccherebbe
   subito la wordmark/footer sotto) — abbastanza piccolo da non leggersi
   più come lo stacco quasi-bianco di --terra-lighter contro --terra-light. */
.event-detail { padding: var(--space-6) 0 var(--space-4); background: var(--terra-lighter); }
.event-detail-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
}
/* Pagine di approfondimento attività (attivita/*.html): stessa struttura
   e sfondo delle pagine evento, contenuto diverso — la citazione lunga al
   posto del modulo di iscrizione. */
.activity-eyebrow {
  font-family: "Comfortaa", cursive;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--azzurro-scuro-testo);
  margin-top: .5em;
  display: block;
}
.activity-quote {
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.6;
  color: var(--testo-scuro);
  border-left: 3px solid var(--terra);
  padding-left: var(--space-3);
  margin: var(--space-4) 0;
}
/* Elenco di proposte/titoli di percorso (attivita/ecotuning-ed-escursionismo.html):
   ogni voce è una frase-titolo virgolettata, non una lista puntata comune. */
.proposte-list {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.proposte-list li {
  font-style: italic;
  color: var(--testo-scuro);
  padding-left: var(--space-3);
  border-left: 2px solid var(--terra-light);
}
/* Firma sotto una citazione lunga attribuita (es. poesia di Giulia in
   attivita/life-green-coaching.html) — non è body text normale. */
.activity-quote-signature {
  font-family: "Comfortaa", cursive;
  font-size: .85rem;
  color: var(--azzurro-scuro-testo);
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-4);
}
/* Pagina evento generica (eventi/evento.html): stato di caricamento e
   di errore prima che js/main.js sappia se lo slug esiste su AlPasso. */
[data-event-loading] {
  color: var(--testo-scuro);
  opacity: .7;
}
.event-error-notice {
  max-width: 60ch;
  color: var(--testo-scuro);
}
.event-error-notice a { text-decoration: underline; }
.event-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.event-meta-row .event-date {
  position: static;
}
.event-capacity {
  font-size: .85rem;
  color: var(--azzurro-scuro-testo);
  font-weight: 500;
}
.event-location {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .85rem;
  color: var(--testo-scuro);
}
/* Campi opzionali da AlPasso (difficoltà, distanza, dislivello, durata,
   prezzo) — nascosti finché js/main.js non conferma che l'evento li ha
   compilati (vedi docs/api-v1.md: sono null se la guida non li ha messi). */
.event-extra {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
  color: var(--testo-scuro);
  opacity: .85;
}
.event-detail h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  font-weight: 400;
  margin-bottom: var(--space-3);
}
.event-detail p { max-width: 60ch; }
.event-detail .btn { margin-top: var(--space-2); }

/* Istruzioni di pagamento e opzioni aggiuntive — stesso tono discreto del
   regolamento, mostrati solo se la guida li ha compilati su AlPasso. */
.event-payment-info {
  background: var(--bianco);
  border: 1px solid var(--terra);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-3);
}
.event-payment-info p:last-child { margin: 0; font-size: .85rem; white-space: pre-line; }
.event-options {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: .5em;
}
.event-options li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: .85rem;
  padding: .6em .9em;
  border: 1px solid var(--azzurro);
  border-radius: var(--radius-sm);
}
.event-options .option-price { color: var(--azzurro-scuro-testo); font-weight: 500; white-space: nowrap; }

/* Form iscrizione — stessi campi di AlPasso (vedi commento in js/main.js),
   qui su un'unica pagina invece del wizard multi-step: è ancora un
   mailto statico, non serve lo stato di un wizard. */
.rsvp {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--terra);
}
.rsvp h2 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}
.rsvp-form { display: grid; gap: var(--space-2); max-width: 480px; }
.field { display: grid; gap: .4em; }
.field label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--testo-scuro);
}
.field .hint { font-size: .78rem; color: var(--testo-scuro); opacity: .75; }
.field input,
.field textarea {
  font: inherit;
  padding: .8em 1em;
  border: 1px solid var(--azzurro);
  border-radius: var(--radius-sm);
  background: var(--bianco);
  color: var(--testo-scuro);
}
.field textarea { resize: vertical; min-height: 90px; }
.field-row { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }

/* Regolamento: nascosto finché non arrivano i dati reali da AlPasso
   (vedi js/main.js) — l'API impone di mostrarlo vicino alla casella. */
.regulation-box {
  background: var(--bianco);
  border: 1px solid var(--terra);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
.regulation-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--testo-scuro);
  margin: 0 0 .5em;
}
.regulation-text {
  max-height: 180px;
  overflow-y: auto;
  font-size: .85rem;
  line-height: 1.5;
  white-space: pre-line;
}

/* Stati del form: successo, errore generale, errore per campo, evento
   chiuso/pieno/passato — vedi js/main.js. */
.rsvp-success {
  background: color-mix(in srgb, var(--verde) 55%, white);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: .9rem;
}
.rsvp-error {
  color: #8a3b3b;
  font-size: .85rem;
  margin-top: var(--space-1);
}
.field-error {
  display: block;
  color: #8a3b3b;
  font-size: .78rem;
  margin-top: .3em;
}
.rsvp-closed-notice {
  background: var(--terra-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: .9rem;
}

.rsvp .consent {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  font-size: .85rem;
}
.rsvp .consent input { margin-top: .25em; accent-color: var(--azzurro-scuro-testo); }

/* =====================================================================
   Breakpoint 1280 — respiro extra sui container grandi
   ===================================================================== */
@media (min-width: 1280px) {
  :root { --space-6: 8rem; }
}