/* =========================================================
   Assisi Progetto Giovani — foglio di stile principale
   ========================================================= */

/* ---------- Token ---------- */
:root {
  /* Palette istituzionale */
  --rosso: #ff0044;
  --azzurro: #33cccc;
  --verde: #99cc00;
  --arancione: #ff9900;

  /* Varianti scure: usate quando serve testo bianco sopra il colore */
  --rosso-scuro: #d6003a;
  --azzurro-scuro: #1f8f8f;
  --verde-scuro: #5f7f00;
  --arancione-scuro: #c46f00;

  /* Neutri di categoria: accompagnano la palette senza aggiungere colore */
  --terra: #b39a83;
  --terra-scuro: #6d5946;
  --ardesia: #8496a8;
  --ardesia-scuro: #4c5c6c;

  /* Neutri */
  --testo: #3b3b3b;
  --testo-soft: #6f6a66;
  --bianco: #ffffff;
  --crema: #faf7f3;
  --crema-2: #f2ede7;
  --bordo: #e6e0d8;
  --sabbia: #f0e9e1;

  /* Tipografia */
  --font-titoli: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-testo: "Google Sans", "Google Sans Text", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Misure */
  --container: 1180px;
  --raggio: 20px;
  --raggio-s: 12px;
  --header-h: 76px;
  --ombra: 0 2px 4px rgba(59, 59, 59, 0.04), 0 12px 32px rgba(59, 59, 59, 0.08);
  --ombra-hover: 0 4px 8px rgba(59, 59, 59, 0.06), 0 20px 48px rgba(59, 59, 59, 0.14);
}

/* Colori per categoria di corsi.
   --accento        tratto pieno (barre, bordi, pallini)
   --accento-scuro  testo e fondi che devono reggere il bianco
   --chiaro/--tenue tinte pastello per i fondi delle hero interne */
.t-rosso {
  --accento: var(--rosso); --accento-scuro: var(--rosso-scuro);
  --accento-chiaro: #ffd9e2; --accento-tenue: #fff3f6;
}
.t-azzurro {
  --accento: var(--azzurro); --accento-scuro: var(--azzurro-scuro);
  --accento-chiaro: #cdf1f1; --accento-tenue: #eefafa;
}
.t-verde {
  --accento: var(--verde); --accento-scuro: var(--verde-scuro);
  --accento-chiaro: #e6f2c2; --accento-tenue: #f6fbe8;
}
.t-arancione {
  --accento: var(--arancione); --accento-scuro: var(--arancione-scuro);
  --accento-chiaro: #ffe6c2; --accento-tenue: #fff6e8;
}
.t-terra {
  --accento: var(--terra); --accento-scuro: var(--terra-scuro);
  --accento-chiaro: #eee2d6; --accento-tenue: #faf6f2;
}
.t-ardesia {
  --accento: var(--ardesia); --accento-scuro: var(--ardesia-scuro);
  --accento-chiaro: #dde6ee; --accento-tenue: #f2f6fa;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}
/* height:auto impedisce che l'attributo height dell'immagine deformi il
   rendering quando la larghezza e' imposta dal CSS */
img, video, iframe { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Utility ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.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: 12px; top: -60px; z-index: 200;
  background: var(--rosso-scuro); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--azzurro-scuro); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tipografia ---------- */
.display, h1, h2 {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-family: var(--font-testo); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }

.occhiello {
  font-family: var(--font-titoli);
  font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--rosso);
  margin: 0 0 0.9em;
}
.sezione-intro { max-width: 62ch; color: var(--testo-soft); font-size: 1.08rem; }
.lead { font-size: 1.18rem; line-height: 1.6; }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--rosso-scuro); color: #fff; box-shadow: 0 8px 20px rgba(214, 0, 58, 0.28); }
.btn--primario:hover { background: #b80031; }
.btn--linea { border-color: currentColor; color: var(--testo); }
.btn--linea:hover { background: var(--testo); color: #fff; }
.btn--chiaro { background: #fff; color: var(--testo); }
.btn--chiaro:hover { background: var(--crema-2); }
/* Pulsante a contorno per la hero: quasi solo bordo, un velo di bianco
   appena percettibile invece di un riempimento pieno. Il velo chiaro
   della foto sotto il testo lo rende leggibile senza bisogno di uno
   sfondo marcato. */
.btn--contorno {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-width: 1px; border-color: rgba(59, 59, 59, 0.55);
  color: var(--testo); font-weight: 400;
}
.btn--contorno:hover { background: var(--testo); color: #fff; border-color: var(--testo); }
.btn--testo { color: var(--testo-soft); text-decoration: underline; padding-left: 12px; padding-right: 12px; }
.btn--testo:hover { color: var(--testo); transform: none; }
.btn--sm { padding: 10px 20px; font-size: 0.94rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--header-h);
}
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 54px; width: auto; }
.nav .nav-cta { display: none; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 9px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--testo);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav a:hover { background: var(--crema-2); }
.nav a[aria-current="page"] { color: var(--rosso); font-weight: 700; }
/* Il "Chiamaci" dell'header usa il rosso pieno del marchio */
.header-cta { flex: 0 0 auto; }
.header-cta .btn--primario {
  background: var(--rosso); font-weight: 700;
  box-shadow: 0 8px 20px rgba(255, 0, 68, 0.26);
}
.header-cta .btn--primario:hover { background: var(--rosso-scuro); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 2px solid var(--bordo);
  border-radius: 12px; padding: 9px 12px; cursor: pointer; line-height: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--testo); margin: 4px 0; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .logo img { height: 38px; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--bordo);
    padding: 8px 24px 20px; margin: 0; display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: 14px 8px; border-bottom: 1px solid var(--crema-2); border-radius: 0; }
  .nav li:last-child a { border-bottom: 0; }
  .nav .nav-cta { display: block; margin-top: 14px; }
  .nav .nav-cta a { background: var(--rosso); color: #fff; border-radius: 999px; text-align: center; font-weight: 700; }
}

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--testo); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Velo bianco leggero: schiarisce quanto basta a leggere il testo sulla
   sinistra, lasciando scoperta la foto sul resto della scena */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(98deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.87) 30%,
                    rgba(255, 255, 255, 0.5) 54%, rgba(255, 255, 255, 0.06) 82%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%,
                    rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.85) 100%);
}
.hero__inner {
  display: flex; flex-direction: column; justify-content: center;
  /* Schermo pieno, al netto dell'header sticky */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-top: 56px; padding-bottom: 56px;
}
/* Su schermi stretti il testo occupa tutta la larghezza: il velo
   orizzontale non basterebbe, quindi diventa uniforme dall'alto. */
@media (max-width: 820px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%,
                                rgba(255, 255, 255, 0.76) 58%,
                                rgba(255, 255, 255, 0.92) 100%);
  }
}
.hero__titolo { margin: 0 0 22px; max-width: 14ch; }
.hero__citazione {
  margin: 0 0 30px; max-width: 54ch;
  border-left: 4px solid var(--rosso); padding-left: 20px;
}
.hero__citazione p {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55;
  font-style: italic; margin: 0 0 10px;
}
.hero__citazione cite {
  font-style: normal; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo-soft);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sezioni ---------- */
.sezione { padding: clamp(64px, 9vw, 110px) 0; }
.sezione--crema { background: var(--crema); }
/* Filetto sopra la banda rossa: senza, due sezioni bianche di seguito
   danno l'impressione di uno spazio vuoto doppio */
.sezione--banda { border-top: 1px solid var(--bordo); }
.sezione--crema + .sezione--banda { border-top: 0; }
.sezione__testa { max-width: 720px; margin-bottom: 48px; }

/* Chi siamo */
.chi-siamo__griglia {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
/* La foto segue l'altezza della colonna di testo, su ogni formato */
.chi-siamo__foto {
  border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra);
  display: flex; min-height: 100%;
}
.chi-siamo__foto img { width: 100%; height: 100%; object-fit: cover; }
.chi-siamo__citazione {
  margin: 28px 0 0; padding: 22px 26px; background: var(--crema);
  border-left: 5px solid var(--rosso); border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
}
.chi-siamo__citazione p { margin: 0 0 6px; font-style: italic; }
.chi-siamo__citazione cite { font-style: normal; font-weight: 600; font-size: 0.94rem; color: var(--testo-soft); }
/* Le due colonne restano affiancate fino al tablet, cosi' l'altezza della
   foto continua a corrispondere a quella del testo. Solo sul telefono,
   dove non c'e' piu' un testo "di fianco", si passa a colonna singola. */
@media (max-width: 720px) {
  .chi-siamo__griglia { grid-template-columns: 1fr; }
  .chi-siamo__foto { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Fatti in evidenza */
.fatti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.fatto {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 26px 26px 24px; border-top: 5px solid var(--accento, var(--rosso));
}
.fatto__numero {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.025em;
  font-size: 1.7rem; color: var(--accento-scuro, var(--rosso)); line-height: 1.15;
}
.fatto p { margin: 6px 0 0; color: var(--testo-soft); font-size: 0.98rem; }
@media (max-width: 780px) { .fatti { grid-template-columns: 1fr; } }

/* ---------- Filtri corsi ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.filtro {
  border: 2px solid var(--bordo); background: #fff; color: var(--testo);
  border-radius: 999px; padding: 9px 18px; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.filtro:hover { border-color: var(--testo-soft); }
.filtro[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: #fff; }

/* Su schermi stretti i filtri scorrono in orizzontale invece di impilarsi */
@media (max-width: 700px) {
  .filtri {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -24px 36px; padding: 0 24px 8px;
  }
  .filtri::-webkit-scrollbar { display: none; }
  .filtro { flex: 0 0 auto; }
}

/* ---------- Gruppo + card corso ---------- */
.gruppo { margin-bottom: 72px; scroll-margin-top: calc(var(--header-h) + 20px); }
.gruppo:last-child { margin-bottom: 0; }
.gruppo[hidden] { display: none; }
.gruppo__testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 8px; }
.gruppo__titolo {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.45rem, 2.7vw, 1.95rem); margin: 0;
}
.gruppo__barra { height: 6px; width: 72px; background: var(--accento); border-radius: 999px; margin-bottom: 18px; }
.gruppo__intro { color: var(--testo-soft); max-width: 60ch; margin-bottom: 30px; }
.gruppo__altro { margin: 20px 0 0; }
.gruppo__altro a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.96rem; color: var(--accento-scuro); text-decoration: none;
}
.gruppo__altro a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sezione__coda { margin: 8px 0 0; }

.griglia-corsi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px;
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 26px 26px 22px; text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accento);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); border-color: transparent; }
.card__titolo {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.28rem; margin: 6px 0 6px;
}
.card__sottotitolo { color: var(--testo-soft); font-size: 0.98rem; margin: 0 0 18px; }
.card__date { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; }
/* Corsi senza sottotitolo: mantiene lo stesso respiro sotto al titolo */
.card__titolo + .card__date { margin-top: 14px; }
.card__date li { display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; }
.card__date li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accento); transform: translateY(-2px); }
.card__date .etichetta { display: block; font-size: 0.82rem; color: var(--testo-soft); }
.card__vuoto { font-size: 0.95rem; color: var(--testo-soft); margin: 0 0 20px; font-style: italic; }
.card__extra { font-size: 0.9rem; color: var(--testo-soft); margin: -12px 0 18px; }

/* Edizioni concluse: restano leggibili, ma in secondo piano */
.card__date li.passata { opacity: 0.42; }
.card__date li.passata::before { background: var(--testo-soft); }

/* Date a piu' tappe (es. corso vocazionale): le due date sono un'unica
   edizione, quindi al posto del pallino una barra verticale le raccoglie
   insieme all'etichetta. */
.card__date li.con-tappe {
  display: block; position: relative; padding-left: 17px;
}
.card__date li.con-tappe::before {
  position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; height: auto; border-radius: 999px;
  background: var(--accento); transform: none;
}
li.con-tappe .etichetta { display: block; margin: 0 0 2px; }
li.con-tappe .tappa { display: block; }
.tappa-piu { display: none; }
.tappa--passata { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 1px; }
.tappa__numero {
  display: inline-block; margin-right: 7px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--accento-scuro, var(--testo-soft));
}
.tappa--passata .tappa__numero { color: var(--testo-soft); }
.box__nota {
  font-size: 0.92rem; color: var(--testo-soft); margin: -6px 0 16px;
}
.card__link {
  margin-top: auto; font-weight: 700; font-size: 0.96rem; color: var(--accento-scuro);
  display: inline-flex; align-items: center; gap: 8px;
}
.card:hover .card__link { gap: 12px; }
.card__link svg { transition: transform 0.18s ease; }
.card:hover .card__link svg { transform: translateX(3px); }
.badge {
  align-self: flex-start; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--crema-2); color: var(--testo-soft);
}
.badge--online { background: rgba(51, 204, 204, 0.18); color: var(--azzurro-scuro); }
.card__collab {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px;
  border-radius: 7px; box-shadow: 0 2px 6px rgba(59, 59, 59, 0.2);
}

/* Card gruppi e parrocchie */
.card--statica { cursor: default; }
.card--statica:hover { transform: none; box-shadow: none; border-color: var(--bordo); }
.card--statica p { color: var(--testo-soft); font-size: 0.98rem; margin: 0; }

/* ---------- Banda telefono ---------- */
.banda {
  background: linear-gradient(125deg, #e10040 0%, #ad002f 100%);
  color: #fff; border-radius: var(--raggio);
  padding: clamp(36px, 5vw, 56px); display: grid;
  grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center;
}
.banda h2 { color: #fff; margin-bottom: 12px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.banda p { color: rgba(255, 255, 255, 0.92); margin: 0; }
.banda__numeri { display: grid; gap: 12px; }
.telefono {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 14px; padding: 16px 20px; color: #fff; font-weight: 700; font-size: 1.15rem;
  transition: background-color 0.15s ease;
}
.telefono:hover { background: rgba(255, 255, 255, 0.26); }
.telefono svg { flex: 0 0 auto; }
@media (max-width: 860px) { .banda { grid-template-columns: 1fr; } }

/* ---------- Pagine interne ---------- */
/* Hero delle pagine interne: tinta pastello della categoria, testo scuro.
   Niente nero nelle sfumature. */
.page-hero {
  position: relative; color: var(--testo); isolation: isolate;
  padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 4px solid var(--accento, var(--rosso));
  background:
    radial-gradient(90% 130% at 88% 10%, #fff 0%, transparent 60%),
    linear-gradient(118deg, var(--accento-chiaro, #ffd9e2) 0%, var(--accento-tenue, #fff3f6) 78%);
}
.page-hero h1 { margin-bottom: 10px; }
.page-hero__sottotitolo { font-size: 1.15rem; color: var(--testo-soft); margin: 0; max-width: 56ch; }
.page-hero .occhiello { color: var(--accento-scuro, var(--rosso-scuro)); }

.briciole { font-size: 0.92rem; margin-bottom: 22px; color: var(--testo-soft); }
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
.briciole span { opacity: 0.6; margin: 0 6px; }

.contenuto { max-width: 68ch; }
.contenuto h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
.contenuto .nota-eta {
  display: inline-block; background: var(--crema); border: 1px solid var(--bordo);
  border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 0.95rem;
}
.figura-corso {
  margin: 0 0 34px; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra);
}
.figura-corso img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.citazione-blocco {
  border-left: 5px solid var(--accento, var(--rosso)); padding: 6px 0 6px 22px; margin: 32px 0;
  font-style: italic; color: var(--testo-soft);
}
.citazione-blocco cite { display: block; font-style: normal; font-weight: 600; margin-top: 8px; font-size: 0.92rem; }

/* Layout due colonne pagina corso */
.corso-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .corso-layout { grid-template-columns: 1fr; } }

/* Corsi senza testo: l'avviso prende tutta l'altezza della colonna,
   pareggiata su quella del riquadro delle date accanto. Sotto i 900px
   il box non e' piu' sticky/affiancato, quindi l'altezza forzata non
   serve piu'. */
.corso-layout--avviso { align-items: stretch; }
.corso-layout--avviso .contenuto { display: flex; }
@media (max-width: 900px) {
  .corso-layout--avviso { align-items: start; }
  .corso-layout--avviso .contenuto { display: block; }
}

.avviso-corso {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  width: 100%; padding: clamp(28px, 4vw, 40px);
  background: var(--crema-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.avviso-corso__icona {
  display: inline-flex; width: 60px; height: 60px; border-radius: 14px;
  background: rgba(196, 111, 0, 0.14); color: var(--arancione-scuro);
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.avviso-corso__icona svg { width: 32px; height: 32px; }
.avviso-corso p { margin: 0; font-size: 1.18rem; color: var(--testo); max-width: 42ch; }

.box {
  background: var(--crema); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 28px; position: sticky; top: calc(var(--header-h) + 24px);
}
@media (max-width: 900px) { .box { position: static; } }
.box h2 { font-family: var(--font-testo); font-weight: 700; font-size: 1.15rem; margin: 0 0 14px; }
.box + .box { margin-top: 20px; }
.box__collab {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 20px; border-top: 1px solid var(--bordo);
}
.box__collab img { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; }
.box__collab span { font-size: 0.86rem; color: var(--testo-soft); line-height: 1.35; }
.box__date { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.box__date li { padding: 12px 16px; background: #fff; border-radius: var(--raggio-s); border: 1px solid var(--bordo); font-weight: 600; }
.box__date li.passata { opacity: 0.45; font-weight: 500; background: transparent; }
/* Stessa logica nel riquadro laterale: una barra colorata raccoglie le
   due tappe di una stessa edizione */
.box__date li.con-tappe { border-left: 4px solid var(--accento); }
.box__date li.in-arrivo { background: transparent; border-style: dashed; font-weight: 500; color: var(--testo-soft); }
.box__date .etichetta { display: block; font-weight: 500; font-size: 0.85rem; color: var(--testo-soft); }
.box__date .tag-passata {
  display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--testo-soft);
}
.box__orari { font-size: 0.94rem; color: var(--testo-soft); margin: 14px 0 0; }

/* ---------- Materiale ---------- */
.griglia-materiale { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 480px)); gap: 24px; }
.card-doc {
  display: flex; gap: 20px; align-items: flex-start; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-doc:hover { transform: translateY(-4px); box-shadow: var(--ombra-hover); }
.card-doc__icona {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 0, 68, 0.1); color: var(--rosso-scuro);
  display: grid; place-items: center;
}
.card-doc h3 { margin: 0 0 6px; }
.card-doc p { margin: 0 0 10px; color: var(--testo-soft); font-size: 0.97rem; }
.card-doc__meta { font-size: 0.85rem; color: var(--testo-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* ---------- Video ---------- */
.annata { margin-bottom: 68px; scroll-margin-top: calc(var(--header-h) + 20px); }
.annata:last-child { margin-bottom: 0; }
.annata__testa { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.annata__anno {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem); color: var(--rosso); line-height: 1;
}
.annata__linea { flex: 1; height: 2px; background: var(--bordo); }
.griglia-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.video-card { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; }
.video-card__testo { padding: 20px 24px 24px; }
.video-card h3 { margin: 0 0 4px; }
.video-card p { margin: 0; color: var(--testo-soft); font-size: 0.94rem; }

/* ---------- Calendario ---------- */
.cal { position: relative; }
.cal__barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.cal__titolo { min-width: 210px; }
.cal__titolo h2 {
  margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); text-transform: capitalize;
}
.cal__conteggio { margin: 2px 0 0; font-size: 0.9rem; color: var(--testo-soft); }
.cal__nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--bordo); background: #fff; color: var(--testo);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cal__nav:hover:not(:disabled) { border-color: var(--rosso); color: var(--rosso); }
.cal__nav:disabled { opacity: 0.35; cursor: default; }
.cal__salta { margin-left: auto; }
.cal__salta select {
  font: inherit; font-size: 0.95rem; color: var(--testo);
  padding: 10px 14px; border-radius: 999px;
  border: 2px solid var(--bordo); background: #fff; cursor: pointer;
}

.cal__legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.cal-legenda__voce {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: var(--testo-soft);
}
.cal-legenda__voce::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px;
  background: var(--accento); flex: 0 0 auto;
}

.cal-griglia {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--bordo);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s); overflow: hidden;
}
.cal-dow {
  background: var(--crema); padding: 10px 8px; text-align: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--testo-soft);
}
.cal-dow abbr { text-decoration: none; }
.cal-giorno {
  background: #fff; min-height: 104px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-giorno--fuori { background: var(--crema); }
.cal-giorno__n { font-size: 0.82rem; font-weight: 600; color: var(--testo-soft); }
.cal-giorno--oggi { background: #fffaf0; }
.cal-giorno--oggi .cal-giorno__n {
  background: var(--rosso); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.cal-giorno__eventi { display: flex; flex-direction: column; gap: 3px; }

.cal-evento {
  border: 0; cursor: pointer; text-align: left; font: inherit;
  background: var(--accento-chiaro); color: var(--accento-scuro);
  border-left: 3px solid var(--accento);
  font-size: 0.74rem; font-weight: 600; line-height: 1.25;
  padding: 4px 6px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter 0.15s ease;
}
.cal-evento:hover { filter: brightness(0.95); }
.cal-evento--segue { min-height: 10px; padding: 3px 6px; }
.cal-evento--passato { opacity: 0.45; }

.cal-popup {
  position: absolute; z-index: 60; width: min(280px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  box-shadow: 0 6px 16px rgba(59, 59, 59, 0.12), 0 24px 56px rgba(59, 59, 59, 0.2);
  padding: 20px 20px 18px;
}
.cal-popup__chiudi {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: var(--crema-2); color: var(--testo);
  display: grid; place-items: center; cursor: pointer;
}
.cal-popup__chiudi:hover { background: var(--bordo); }
.cal-popup__categoria {
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accento-scuro);
  padding-right: 28px;
}
.cal-popup__titolo {
  margin: 0 0 4px; font-family: var(--font-titoli); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.02em; color: var(--testo);
}
.cal-popup__sotto { margin: 0 0 10px; font-size: 0.9rem; color: var(--testo-soft); }
.cal-popup__quando {
  margin: 0 0 16px; font-size: 0.94rem; font-weight: 600; color: var(--testo);
}
.cal-popup__azioni { display: flex; flex-direction: column; gap: 8px; }
.cal-popup .btn { width: 100%; }
.cal-popup .btn--linea { border-color: var(--bordo); }
.cal-popup .btn--linea:hover { border-color: var(--testo); }

.cal__nota { margin: 26px 0 0; font-size: 0.94rem; color: var(--testo-soft); }

/* ---------- Aggiungi al calendario ---------- */
.agg-cal { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
li.con-tappe .agg-cal { margin-left: 0; }
.agg-cal__bottone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid var(--bordo); background: #fff; color: var(--testo-soft);
  cursor: pointer; padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.agg-cal__bottone:hover, .agg-cal__bottone[aria-expanded="true"] {
  border-color: var(--accento, var(--rosso)); color: var(--accento-scuro, var(--rosso-scuro));
  background: var(--crema);
}
.agg-cal__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 200px; gap: 2px;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  box-shadow: var(--ombra-hover); padding: 6px;
}
.agg-cal__voce {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.88rem;
  padding: 9px 10px; border-radius: 8px; border: 0; background: none; color: var(--testo);
  text-decoration: none; cursor: pointer;
}
.agg-cal__voce:hover { background: var(--crema-2); }

@media (max-width: 720px) {
  .cal__salta { margin-left: 0; width: 100%; }
  .cal__salta select { width: 100%; }
  .cal-giorno { min-height: 72px; padding: 4px; }
  .cal-giorno__n { font-size: 0.72rem; }
  .cal-evento { font-size: 0; padding: 0; min-height: 8px; border-left-width: 0;
                background: var(--accento); border-radius: 3px; }
  .cal-dow { padding: 8px 2px; font-size: 0.66rem; }
  /* Su schermo stretto il popup si ancora in fondo, a tutta larghezza */
  .cal-popup { position: fixed; left: 12px; right: 12px; bottom: 12px;
               top: auto !important; width: auto; max-height: 80vh; overflow-y: auto; }

  /* Stessa logica per il mini-menu "aggiungi al calendario": ancorato a
     destra del pulsante, su schermo stretto puo' finire fuori dal bordo
     sinistro se il pulsante e' vicino al margine. Diventa un foglio
     fisso in fondo, sempre interamente visibile. */
  .agg-cal__menu {
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    top: auto !important; width: auto; min-width: 0;
    max-height: 60vh; overflow-y: auto;
  }
}

/* ---------- Contatti ---------- */
.contatti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contatti-griglia h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
@media (max-width: 900px) { .contatti-griglia { grid-template-columns: 1fr; } }
.dato { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--bordo); }
.dato:first-of-type { padding-top: 0; }
.dato__icona { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--crema-2); display: grid; place-items: center; color: var(--rosso-scuro); }
.dato h3 { margin: 0 0 4px; font-size: 1.05rem; }
.dato p { margin: 0; color: var(--testo-soft); }
.dato a { color: var(--testo); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255, 0, 68, 0.3); }
.dato a:hover { border-bottom-color: var(--rosso); }
.mappa { border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--bordo); }
.mappa iframe { width: 100%; height: 420px; border: 0; display: block; }
.mappa__blocco {
  min-height: 420px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 8px;
  padding: 36px; background: var(--crema);
}
.mappa__blocco p { margin: 0; color: var(--testo-soft); font-size: 0.97rem; max-width: 42ch; }
.mappa__blocco .btn { margin-top: 12px; }
.mappa__nota { font-size: 0.88rem !important; }
.mappa__nota a { color: var(--testo); }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check li::before {
  content: "✓"; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(153, 204, 0, 0.22); color: var(--verde-scuro);
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.avviso {
  background: rgba(255, 153, 0, 0.12); border: 1px solid rgba(255, 153, 0, 0.4);
  border-radius: var(--raggio-s); padding: 18px 22px; margin: 0 0 28px;
}
.avviso strong { color: var(--arancione-scuro); }
.avviso p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sabbia); color: var(--testo-soft);
  border-top: 1px solid var(--bordo);
  padding: 72px 0 32px; font-size: 0.97rem;
}
.site-footer a { color: var(--testo-soft); text-decoration: none; }
.site-footer a:hover { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
.footer__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
@media (max-width: 980px) { .footer__griglia { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer__griglia { grid-template-columns: 1fr; gap: 32px; } }
.footer__logo { width: 118px; margin-bottom: 18px; }
.footer h3 {
  color: var(--testo); font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Righe con icona: indirizzo e recapiti */
.footer__riga { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.footer__riga svg { flex: 0 0 auto; margin-top: 4px; color: var(--rosso); opacity: 0.9; }
.footer__contatti li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contatti svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 5px;
  color: var(--rosso); opacity: 0.9;
}
/* Il marchio CFJ ha la dicitura in bianco: su fondo chiaro serve un
   blocco scuro perche' torni leggibile. L'intera riga (icona + testo)
   diventa un unico "bottone" scuro, non cliccabile. */
.footer__cfj {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  background: #3b3b3b; border-radius: 10px; padding: 12px 16px;
}
.footer__cfj img { width: 42px; height: auto; flex: 0 0 auto; }
.footer__cfj span { font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); }
.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer .footer__social-voce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--rosso); background: transparent; color: var(--rosso);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.footer .footer__social-voce:hover { background: var(--rosso); color: #fff; text-decoration: none; }
.footer__basso {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid #d8cfc2;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 0.88rem;
}
/* Stesso aspetto dei link accanto, pur restando un pulsante */
.link-preferenze {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--testo-soft); font: inherit; text-align: left;
  text-decoration: none;
}
.link-preferenze:hover { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pagine legali ---------- */
.contenuto--legale { max-width: 74ch; }
.contenuto--legale h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-top: 2em;
  padding-top: 0.6em; border-top: 2px solid var(--bordo);
}
.contenuto--legale h3 {
  font-size: 1.08rem; margin-top: 1.8em; margin-bottom: 0.5em; color: var(--testo);
}
.contenuto--legale ul { padding-left: 1.3em; }
.contenuto--legale li { margin-bottom: 8px; }
.tabella {
  width: 100%; border-collapse: collapse; margin: 18px 0 24px;
  font-size: 0.94rem; display: block; overflow-x: auto;
}
.tabella th, .tabella td {
  border: 1px solid var(--bordo); padding: 12px 14px;
  text-align: left; vertical-align: top; min-width: 130px;
}
.tabella th { background: var(--crema); font-weight: 700; }
.nota-tabella { display: block; font-size: 0.85rem; color: var(--testo-soft); }
.box-legale {
  margin-top: 48px; padding: 26px 28px; background: var(--crema);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.box-legale p:last-child { margin-bottom: 0; }

/* ---------- Banner consenso cookie ---------- */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  padding: 16px; display: flex; justify-content: center;
  animation: cookie-entra 0.28s ease-out;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-entra { from { transform: translateY(16px); opacity: 0; } }
.cookie-banner__box {
  width: 100%; max-width: 720px; background: #fff;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 8px 20px rgba(36, 31, 29, 0.12), 0 30px 70px rgba(36, 31, 29, 0.22);
  padding: 26px 28px; max-height: 84vh; overflow-y: auto;
}
.cookie-banner__titolo {
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.32rem; margin: 0 0 10px;
}
.cookie-banner p { font-size: 0.96rem; color: var(--testo-soft); margin: 0 0 16px; }
.cookie-banner a { color: var(--testo); text-underline-offset: 3px; }
.cookie-banner__azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-banner__scelte {
  display: grid; gap: 14px; margin: 4px 0 20px; padding: 18px 20px;
  background: var(--crema); border-radius: var(--raggio-s);
}
.cookie-banner__scelte[hidden] { display: none; }
.cookie-scelta { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.cookie-scelta strong { display: block; font-size: 0.98rem; }
.cookie-scelta p { margin: 4px 0 0; font-size: 0.9rem; }
.cookie-scelta__fisso {
  flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--verde-scuro); padding-top: 3px;
}

/* Interruttore accessibile: la casella resta focalizzabile da tastiera */
.interruttore { flex: 0 0 auto; position: relative; width: 52px; height: 30px; cursor: pointer; }
.interruttore input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.interruttore__cursore {
  position: absolute; inset: 0; border-radius: 999px;
  background: #cfc8c0; transition: background-color 0.18s ease;
}
.interruttore__cursore::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.interruttore input:checked + .interruttore__cursore { background: var(--verde-scuro); }
.interruttore input:checked + .interruttore__cursore::after { transform: translateX(22px); }
.interruttore input:focus-visible + .interruttore__cursore {
  outline: 3px solid var(--azzurro-scuro); outline-offset: 3px;
}

@media (max-width: 560px) {
  .cookie-banner { padding: 10px; }
  .cookie-banner__box { padding: 22px 20px; }
  .cookie-banner__azioni .btn { flex: 1 1 100%; }
}