/* ==============================================================
   STYLE.CSS — Estate Sampietrana
   ==============================================================
   Foglio di stile unico per tutto il sito. Approccio mobile-first:
   gli stili di base sono pensati per lo smartphone, le media query
   in fondo al file adattano il layout a tablet e desktop.
   ============================================================== */

/* --------------------------------------------------------------
   0) FONT "POPPINS" OSPITATO LOCALMENTE (cartella /fonts/)
   Prima veniva caricato dal CDN di Google Fonts: portandolo sul
   nostro stesso hosting evitiamo di inviare l'indirizzo IP dei
   visitatori a Google ad ogni caricamento pagina (nessun bisogno
   di banner cookie per questo). Se serve un peso diverso da questi
   quattro, si scarica il relativo file .woff2 e si aggiunge qui.
   -------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-800.woff2") format("woff2");
}

/* --------------------------------------------------------------
   1) VARIABILI CSS (palette colori, font, misure ricorrenti)
   Per cambiare i colori del sito basta modificare i valori qui:
   si aggiornano automaticamente in tutte le pagine/elementi.
   -------------------------------------------------------------- */
:root {
  /* Palette principale "Estate Sampietrana" */
  --blu-mare: #1b6ca8;
  --giallo-sole: #f4a93c;
  --bianco-calce: #fdfbf7;
  --terracotta: #c1541f;

  /* Varianti chiare/scure usate per sfumature e hover */
  --blu-mare-scuro: #0e4d80;
  --terracotta-scura: #9e4118;
  --testo-scuro: #22303d;
  --grigio-testo: #5a6772;
  --bordo-chiaro: #e7e1d6;

  /* Tipografia */
  --font-titoli: "Poppins", sans-serif;
  --font-testo:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Misure ricorrenti */
  --raggio-bordo: 14px;
  --ombra-card: 0 4px 16px rgba(27, 108, 168, 0.12);
  --larghezza-massima: 1140px;
}

/* --------------------------------------------------------------
   2) RESET DI BASE
   -------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-testo);
  color: var(--testo-scuro);
  background: var(--bianco-calce);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.container {
  width: 100%;
  max-width: var(--larghezza-massima);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------
   3) HEADER (logo del Comune)
   Header trasparente sovrapposto in alto all'hero.
   -------------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 16px;
}

/* Variante per le pagine senza hero video (es. info.html): l'header
   non galleggia più sopra a un video, quindi serve uno sfondo pieno */
.site-header--pagina {
  position: static;
  background: var(--blu-mare-scuro);
  padding: 14px 0;
}

.header-interno {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-interno--pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Logo + testo non si devono mai restringere: altrimenti "San Pietro
   Vernotico" andrebbe a capo su una riga in più rispetto a index.html,
   perché lo spazio verrebbe conteso con il link "Torna al programma" */
.header-interno--pagina .header-interno {
  flex-shrink: 0;
}

.header-torna {
  flex-shrink: 1;
  text-align: right;
}

.header-torna {
  color: var(--bianco-calce);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0.9;
  text-align: end;
  transition: opacity 0.2s ease;
}

.header-torna:hover {
  opacity: 1;
}

.logo-comune {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.header-testo {
  color: var(--bianco-calce);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------
   4) HERO (video/immagine + titolo + countdown)
   Il testo è allineato in basso a sinistra, per lasciare respirare
   il video nella parte alta dell'inquadratura.
   -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  background: var(
    --blu-mare-scuro
  ); /* colore di riserva mentre il media carica */
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sfumatura scura SOLO nella zona del testo (centro/basso), non su tutto
   il video: da qui in su il mare resta ben visibile e luminoso. */
.hero-sfumatura {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.hero-contenuto {
  position: relative;
  z-index: 3;
  text-align: left;
  width: 100%;
  padding-bottom: 36px;
}

/* Piccola etichetta sopra il titolo, es. "Estate 2026" */
.hero-eyebrow {
  color: var(--giallo-sole);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hero-titolo {
  margin-top: 6px;
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 4.2rem);
  color: var(--bianco-calce);
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-claim {
  margin-top: 12px;
  max-width: 30ch;
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  color: var(--bianco-calce);
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Countdown verso il prossimo evento */
.countdown {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.countdown-label {
  color: var(--bianco-calce);
  font-weight: 600;
  font-size: 0.85rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.countdown-numeri {
  display: flex;
  gap: 12px;
}

.countdown-unita {
  background: rgba(20, 30, 40, 0.35);
  border: 1px solid rgba(253, 251, 247, 0.3);
  -webkit-backdrop-filter: blur(4px); /* Safari richiede anche il prefisso */
  backdrop-filter: blur(4px);
  border-radius: var(--raggio-bordo);
  padding: 10px 16px;
  min-width: 64px;
  text-align: center;
}

.countdown-unita span {
  display: block;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--giallo-sole);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.countdown-unita small {
  color: var(--bianco-calce);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.countdown-evento {
  margin-top: 6px;
  color: var(--bianco-calce);
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.countdown-pallino {
  color: var(--giallo-sole);
}

.countdown-fine {
  color: var(--bianco-calce);
  font-weight: 600;
  font-size: 1.1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Pulsante principale della hero: porta alla lista eventi */
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  width: 100%;
  background: var(--giallo-sole);
  color: var(--testo-scuro);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.15s ease,
    background 0.2s ease;
}

.hero-cta:hover {
  background: var(--terracotta);
  color: var(--bianco-calce);
  transform: translateY(-2px);
}

/* Indicatore di scroll verso la lista eventi, con animazione "bounce" */
.scroll-hint {
  position: relative;
  z-index: 3;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  color: var(--bianco-calce);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  animation: rimbalza 2s ease-in-out infinite;
}

.scroll-freccia {
  font-size: 1.3rem;
}

@keyframes rimbalza {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* --------------------------------------------------------------
   5) SEZIONE FILTRI
   -------------------------------------------------------------- */
.sezione-filtri {
  padding-top: 48px;
  text-align: center;
}

.titolo-sezione {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--blu-mare-scuro);
}

.sottotitolo-sezione {
  margin-top: 6px;
  color: var(--grigio-testo);
}

/* Contenitore delle sfumature ai bordi: suggeriscono visivamente che i
   filtri si possono scorrere orizzontalmente (vedi script.js,
   funzione aggiornaOmbreFiltri, che aggiunge/toglie le classi qui sotto). */
.filtri-scroll-wrapper {
  position: relative;
  margin-top: 20px;
}

.filtri-scroll-wrapper::before,
.filtri-scroll-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px; /* esclude il padding verticale del contenitore filtri */
  width: 34px;
  pointer-events: none; /* non deve intercettare i click sui pulsanti */
  z-index: 2;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.filtri-scroll-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bianco-calce),
    rgba(253, 251, 247, 0)
  );
}

.filtri-scroll-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bianco-calce),
    rgba(253, 251, 247, 0)
  );
}

/* Quando si è già all'inizio/alla fine, la sfumatura di quel lato sparisce
   perché non c'è più nulla da scoprire in quella direzione */
.filtri-scroll-wrapper.a-inizio::before,
.filtri-scroll-wrapper.a-fine::after {
  opacity: 0;
}

/* Se tutti i filtri entrano senza dover scorrere, niente sfumature */
.filtri-scroll-wrapper.senza-scroll::before,
.filtri-scroll-wrapper.senza-scroll::after {
  opacity: 0;
}

/* Tutti i filtri su un'unica riga: se non entrano nella larghezza dello
   schermo si scorre orizzontalmente invece di andare a capo, così restano
   sempre tutti allo stesso livello. */
.filtri-categorie {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  overflow-x: auto;
  /* "overflow-x: auto" rende automaticamente anche overflow-y "auto":
     senza un po' di spazio sopra e sotto, il sollevamento dei pulsanti
     al passaggio/click (vedi transform su .filtro-btn:hover) verrebbe
     tagliato dal bordo del contenitore. */
  padding: 6px 2px;
  scrollbar-width: none; /* Firefox */
}

.filtri-categorie::-webkit-scrollbar {
  display: none; /* Chrome/Safari: nasconde la barra di scorrimento */
}

.filtro-btn {
  flex-shrink: 0; /* non si restringe: se serve, si scorre invece di comprimersi */
  background: var(--bianco-calce);
  border: 2px solid var(--bordo-chiaro);
  color: var(--testo-scuro);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.filtro-btn:hover {
  transform: translateY(-2px);
  border-color: var(--giallo-sole);
}

.filtro-btn.attivo {
  background: var(--blu-mare);
  border-color: var(--blu-mare);
  color: var(--bianco-calce);
}

/* --------------------------------------------------------------
   6) LISTA EVENTI (agenda raggruppata per giorno)
   -------------------------------------------------------------- */
.sezione-eventi {
  padding: 40px 20px 60px;
}

.giorno-gruppo {
  margin-top: 32px;
}

.giorno-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--terracotta);
  border-bottom: 2px solid var(--bordo-chiaro);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.giorno-eventi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Card evento: opacità/traslazione iniziali per l'animazione di comparsa */
.card-evento {
  background: #fff;
  border-radius: var(--raggio-bordo);
  box-shadow: var(--ombra-card);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    box-shadow 0.2s ease;
}

.card-evento.visibile {
  opacity: 1;
  transform: translateY(0);
}

.card-evento:hover {
  box-shadow: 0 8px 24px rgba(27, 108, 168, 0.18);
}

/* "contain" invece di "cover": molte immagini evento sono locandine
   verticali piene di testo (titolo, date, orari) che non vanno ritagliate.
   Lo spazio che eventualmente avanza ai lati (sopra/sotto o a destra/sinistra)
   viene riempito con la stessa immagine, ingrandita e sfocata sullo sfondo,
   invece di un bordo di colore piatto: un effetto più curato, tipo "poster
   in vetrina" (lo stesso trucco usato da Spotify/Instagram). */
.card-immagine {
  position: relative;
  overflow: hidden;
  cursor: pointer; /* si può cliccare per ingrandire la locandina (lightbox) */
  background: var(
    --blu-mare-scuro
  ); /* di riserva finché l'immagine non carica */
}

.card-immagine::before {
  content: "";
  position: absolute;
  inset: -12px; /* leggero margine extra: evita che si vedano i bordi sfocati */
  background-image: var(--sfondo-locandina);
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.75);
  transform: scale(1.15);
}

.card-immagine img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 260px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.card-immagine:hover img {
  transform: scale(1.03);
}

.card-corpo {
  padding: 18px;
}

.badge {
  display: inline-block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  transition: transform 0.15s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* Tag "Concluso", mostrato a fianco del badge categoria per gli eventi passati */
.badge-stato {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bordo-chiaro);
  color: var(--grigio-testo);
}

.badge-gratuito {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blu-mare-scuro);
  background: #e4f1fa;
  padding: 3px 10px;
  border-radius: 999px;
}

.card-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 10px;
  color: var(--testo-scuro);
}

.card-meta,
.card-luogo {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--grigio-testo);
}

.card-descrizione {
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--testo-scuro);
}

.card-azioni {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.btn-calendario {
  background: var(--giallo-sole);
  color: var(--testo-scuro);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 14px;
  border-radius: 999px;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.btn-calendario:hover {
  background: var(--terracotta);
  color: #fff;
  transform: translateY(-2px);
}

.btn-condividi {
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 999px;
  border: 2px solid var(--bordo-chiaro);
  color: var(--testo-scuro);
  transition:
    transform 0.15s ease,
    border-color 0.2s ease;
}

.btn-condividi:hover {
  transform: translateY(-2px);
  border-color: var(--blu-mare);
}

.nessun-evento {
  color: var(--grigio-testo);
  text-align: center;
  padding: 30px 0;
}

/* Pannello che racchiude l'evento di oggi: sfondo, bordo e ombra propri
   per farlo risaltare nettamente rispetto ai giorni successivi (che
   restano su sfondo semplice, come righe compatte, più sotto). */
.pannello-oggi {
  background: linear-gradient(
    145deg,
    rgba(27, 108, 168, 0.07),
    rgba(244, 169, 60, 0.09)
  );
  border: 1px solid rgba(27, 108, 168, 0.18);
  border-radius: 20px;
  padding: 20px 16px 24px;
  margin-bottom: 44px; /* distacco netto prima dei "Prossimi giorni" */
  box-shadow: 0 10px 28px rgba(27, 108, 168, 0.1);
}

.pannello-oggi .giorno-gruppo {
  margin-top: 0;
}

.pannello-oggi .giorno-titolo {
  color: var(--blu-mare-scuro);
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
}

.etichetta-oggi {
  font-family: var(--font-testo);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--grigio-testo);
  text-transform: none;
  letter-spacing: normal;
}

/* Titolo che introduce i giorni successivi, ben separato dal pannello
   dell'evento di oggi sopra di esso */
.titolo-prossimi-giorni {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grigio-testo);
  margin-bottom: 4px;
}

/* Giorni di agosto: intestazione di un colore diverso da quella di luglio
   (terracotta di default), per distinguere i due mesi mentre si scorre
   la lista, senza aggiungere etichette o divisori */
.giorno-gruppo--agosto .giorno-titolo {
  color: var(--blu-mare);
}

/* Giorni diversi da oggi: righe compatte impilate, non una griglia di card */
.giorno-eventi--compatto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.riga-evento-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

/* Riga chiusa: solo l'essenziale, invita ad aprire con la freccia */
.riga-evento {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-left: 3px solid var(--bordo-chiaro);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(27, 108, 168, 0.08);
  padding: 12px 14px;
  text-align: left;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.riga-evento-wrapper.aperta .riga-evento {
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

.riga-evento:hover {
  box-shadow: 0 4px 12px rgba(27, 108, 168, 0.14);
  transform: translateY(-1px);
}

.riga-evento-wrapper.aperta .riga-evento:hover {
  transform: none;
}

.riga-evento-orario {
  flex-shrink: 0;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--grigio-testo);
  background: var(--bianco-calce);
  border: 1px solid var(--bordo-chiaro);
  border-radius: 6px;
  padding: 4px 7px;
}

.riga-evento-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.riga-evento-titolo {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--testo-scuro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.riga-evento-sottotitolo {
  font-size: 0.82rem;
  color: var(--grigio-testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.riga-evento-freccia {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--bordo-chiaro);
  transition: transform 0.2s ease;
}

.riga-evento-wrapper.aperta .riga-evento-freccia {
  transform: rotate(90deg);
  color: var(--blu-mare);
}

/* Scheda completa che compare sotto la riga, quando aperta: si aggancia
   visivamente alla riga sopra (angoli e ombra solo in basso) */
.riga-evento-dettaglio .card-evento {
  opacity: 1;
  transform: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(27, 108, 168, 0.12);
  border: 1px solid var(--bordo-chiaro);
  border-top: none;
}

/* Blocco "Eventi conclusi" in fondo alla lista: chiuso di default,
   si apre cliccando sul titolo (vedi .toggle-conclusi) */
.sezione-conclusi {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid var(--bordo-chiaro);
}

/* Azzera il margine di default del tag <h3> che ora avvolge il bottone
   (vedi script.js, creaSezioneConclusi): nessuna differenza visiva voluta. */
.titolo-conclusi-contenitore {
  margin: 0;
}

.toggle-conclusi {
  width: 100%;
  background: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--grigio-testo);
  padding: 6px 0;
}

.toggle-conclusi-numero {
  font-family: var(--font-testo);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grigio-testo);
  background: var(--bordo-chiaro);
  border-radius: 999px;
  padding: 2px 10px;
}

.toggle-conclusi-freccia {
  margin-left: auto;
  font-size: 1.3rem;
  transition: transform 0.25s ease;
}

.toggle-conclusi.aperto .toggle-conclusi-freccia {
  transform: rotate(90deg);
}

.contenuto-conclusi {
  margin-top: 16px;
}

/* --------------------------------------------------------------
   8) SEZIONE INFO PRATICHE
   -------------------------------------------------------------- */
.sezione-info {
  padding: 20px 20px 70px;
}

.info-griglia {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.info-scheda {
  background: #fff;
  border-radius: var(--raggio-bordo);
  box-shadow: var(--ombra-card);
  padding: 20px;
}

/* Era <h3>: corretto a <h2> per non saltare un livello nella gerarchia
   dei titoli (in info.html l'unico h1 è "Informazioni pratiche"),
   stile visivo invariato. */
.info-scheda h2 {
  font-family: var(--font-titoli);
  color: var(--blu-mare-scuro);
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.info-scheda p {
  color: var(--grigio-testo);
  font-size: 0.92rem;
}

.link-meteo {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--terracotta);
  transition: color 0.2s ease;
}

.link-meteo:hover {
  color: var(--terracotta-scura);
}

/* --------------------------------------------------------------
   9) FOOTER
   -------------------------------------------------------------- */
.site-footer {
  background: var(--blu-mare-scuro);
  color: var(--bianco-calce);
  text-align: center;
  padding: 30px 20px;
}

.logo-footer {
  height: 48px;
  margin: 0 auto 12px;
  filter: brightness(0) invert(1); /* logo in bianco su sfondo scuro */
}

.site-footer p {
  font-size: 0.85rem;
  opacity: 0.85;
}

.footer-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--bianco-calce);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-link:hover {
  opacity: 1;
}

/* --------------------------------------------------------------
   10) PAGINA "INFORMAZIONI PRATICHE" (info.html)
   Pagina separata, raggiungibile dal link nel footer, per non
   appesantire la home con contenuti che si consultano di rado.
   -------------------------------------------------------------- */
.pagina-info-intro {
  max-width: var(--larghezza-massima);
  margin: 0 auto;
  padding: 40px 20px 0;
}

.pagina-info-intro p {
  margin-top: 8px;
  color: var(--grigio-testo);
}


/* --------------------------------------------------------------
   11) LIGHTBOX (locandina ingrandita)
   Si apre cliccando sull'immagine di un evento (vedi script.js,
   funzioni apriLightbox/chiudiLightbox).
   -------------------------------------------------------------- */
body.lightbox-attivo {
  overflow: hidden; /* blocca lo scroll dello sfondo mentre è aperto */
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 16, 22, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.aperto {
  opacity: 1;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-chiudi {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.12);
  border: 1px solid rgba(253, 251, 247, 0.35);
  color: var(--bianco-calce);
  font-size: 1.1rem;
  transition: background 0.2s ease;
}

.lightbox-chiudi:hover {
  background: rgba(253, 251, 247, 0.25);
}


/* ==============================================================
   MEDIA QUERY — TABLET (da 600px)
   ============================================================== */
@media (min-width: 600px) {
  /* Sui tablet/desktop il pulsante non deve allargarsi per tutta la
     larghezza del container: lo limitiamo direttamente, così il blocco
     "hero-contenuto" resta un ".container" centrato come l'header
     (stesso bordo sinistro del logo) e non serve spostarlo a mano. */
  .hero-cta {
    width: fit-content; /* "auto" su un flex a blocco riempirebbe comunque tutto lo spazio */
    min-width: 280px;
  }

  .giorno-eventi {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-griglia {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==============================================================
   MEDIA QUERY — DESKTOP (da 1000px)
   ============================================================== */
@media (min-width: 1000px) {
  .logo-comune {
    height: 52px;
  }

  .giorno-eventi {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-griglia {
    grid-template-columns: repeat(4, 1fr);
  }

  .card-immagine img {
    height: 300px;
  }

  /* Da desktop in su c'è spazio a sufficienza: nella scheda che si apre
     cliccando una riga compatta, locandina e testo stanno affiancati
     invece che impilati. Si applica solo qui (non alla card "Oggi", che
     vive dentro la griglia a colonne e resta impilata). */
  .riga-evento-dettaglio .card-evento {
    display: flex;
    align-items: stretch;
  }

  .riga-evento-dettaglio .card-immagine {
    flex: 0 0 40%;
    max-width: 380px;
  }

  .riga-evento-dettaglio .card-immagine img {
    height: 100%; /* riempie tutta l'altezza della riga, non un valore fisso */
  }

  .riga-evento-dettaglio .card-corpo {
    flex: 1;
    padding: 26px 30px;
  }
}

/* ==============================================================
   ACCESSIBILITÀ: rispetta la preferenza "riduci animazioni"
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}