/* Condiviso dalle due pagine "home" (pubblica e staff, 2026-08-31 — prima solo la
   pubblica, la staff era rimasta indietro su un vecchio impianto a banner
   fotografico + pulsanti pieni, disallineata dal resto dell'app): stesso impianto
   (card mesh in cima, righe/tessere per le destinazioni, footer "Powered by"),
   riprendendo lo stile di wgilab.eu più da vicino di quanto facciano le pagine
   applicative (che devono restare dense/funzionali). Usa i token di design.css,
   caricato prima di questo file. */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: 100vh include la barra degli indirizzi, dvh no */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70vw 45vh at 10% -10%, rgba(252, 145, 110, 0.14), transparent 60%),
    radial-gradient(ellipse 70vw 45vh at 90% 110%, rgba(89, 145, 250, 0.14), transparent 60%);
}

.home {
  flex: 1;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

/* Pagine di dettaglio senza banner (sponsor, stand, stage...): il contenuto va
   ancorato in alto come un documento normale, non centrato verticalmente — la
   centratura di .home è pensata per il blocco corto sotto il banner della home. */
.home--pagina {
  justify-content: flex-start;
}

/* OVERHEAD (occhiello sopra i titoli): uppercase, letter-spacing largo, ink a
   opacità ridotta — MAI blu. Corretto dopo audit con la skill wgi-design: il
   mockup stesso mostra "RADUNO"/"STAGE"/"STAND" in grigio neutro (~#6d6d6d,
   che è esattamente --fg-attenuato), non nel colore d'azione — il blu resta
   riservato a link/CTA/stati attivi. --fg-attenuato è già verificato AA contro
   --bg altrove nel progetto, meglio riusarlo che un'opacity fragile. */
.home-eyebrow {
  position: relative;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-attenuato);
}

/* ---------- Card mesh dell'hero: ricevuta come handoff dai grafici
   (DESIGN/handoff/, 2026-08-28) — valori di colore/angolo/blur REALI, non più
   letti/stimati dal CSS compilato di wgilab.eu come nel primo tentativo. Struttura
   a 4 livelli sovrapposti (base + due aloni sfocati + grana) invece di un unico
   background, perché gli aloni sfocati (filter:blur su cerchi) danno una
   morbidezza che un radial-gradient piatto non replica. ---------- */
:root {
  --hero-rosa: rgb(255, 144, 160);
  --hero-rosa-chiaro: rgb(255, 164, 184);
  --hero-lilla: rgb(200, 185, 210);
  --hero-azzurro: rgb(145, 205, 222);
  --hero-magenta: rgb(255, 50, 201);
  --hero-viola: rgb(190, 100, 220);
  --hero-pesca: rgb(252, 162, 132);
  --hero-blu: rgb(39, 138, 255);
  --hero-ombra: 0 18px 40px rgba(144, 46, 91, 0.18);
}

.home-hero-mesh {
  position: relative;
  width: 100%;
  margin-top: 1.1rem;
  border-radius: 34px;
  overflow: hidden;
  /* clip-path oltre a overflow:hidden — bug noto di Safari/WebKit mobile:
     overflow:hidden + border-radius NON ritaglia sempre i figli con
     filter:blur() (qui .home-hero-mesh__glow-a/-b), che "sfuggono" agli
     angoli arrotondati mostrando un contorno fantoso squadrato dietro la
     card (segnalato da Mirco 2026-08-29, testato su Safari e Chrome iOS —
     Chrome su iOS usa lo stesso motore WebKit di Safari, stesso bug).
     clip-path usa un motore di ritaglio diverso in WebKit, non soggetto a
     questo bug specifico. */
  clip-path: inset(0 round 34px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--hero-ombra);
  isolation: isolate; /* richiesto da mix-blend-mode sulla grana sotto */
}

/* Padding/gap/colore ESATTI di esempio.html (DESIGN/handoff, 2026-08-28) —
   niente arrotondamenti o riadattamenti: dove i grafici hanno dato un valore
   preciso, si riproduce quel valore, non una sua interpretazione. */
.home-hero-mesh__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem; /* 14px */
  padding: 2.375rem 1.5rem 2rem; /* 38px 24px 32px */
  text-align: center;
  color: rgb(255, 255, 255);
}

.home-hero-mesh__base,
.home-hero-mesh__noise {
  position: absolute;
  inset: 0;
}

.home-hero-mesh__base {
  background: linear-gradient(158deg, var(--hero-rosa) 0%, var(--hero-rosa-chiaro) 38%, var(--hero-lilla) 72%, var(--hero-azzurro) 100%);
}

/* alone caldo in alto a destra */
.home-hero-mesh__glow-a {
  position: absolute;
  right: -70px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(10px);
  background: radial-gradient(circle at 38% 32%, var(--hero-magenta) 0%, var(--hero-viola) 52%, rgba(39, 138, 255, 0) 100%);
}

/* alone freddo in basso a sinistra */
.home-hero-mesh__glow-b {
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0.45;
  filter: blur(12px);
  background: linear-gradient(161deg, var(--hero-pesca) 10%, var(--hero-blu) 92%);
}

/* grana: asset reale dei grafici (hero-grana.png, tile 40x56 → 67x95 da
   tablet in su), non più la feTurbulence sintetica usata altrove nel sito —
   qui è il trattamento specifico consegnato per questo hero. */
.home-hero-mesh__noise {
  background: url("/assets/hero-grana.png") top left / 40px 56px repeat;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

@media (min-width: 768px) {
  .home-hero-mesh__glow-a { width: 420px; height: 420px; right: -110px; top: -100px; }
  .home-hero-mesh__glow-b { width: 360px; height: 360px; left: -100px; bottom: -130px; }
  .home-hero-mesh__noise { background-size: 67px 95px; }
}

/* Testo bianco, esattamente come esempio.html (DESIGN/handoff, 2026-08-28) —
   riprodotto identico su richiesta di Mirco, valori in px come nel file dei
   grafici (non riconvertiti/arrotondati). NB: misurato su screenshot reale,
   il contrasto scende a ~1-2,3:1 in alcuni punti (soglia AA testo normale:
   4.5:1) — segnalato, non corretto qui perché la richiesta esplicita è la
   fedeltà pixel a quel file, non un adattamento. */
.home-hero-mesh-eyebrow {
  position: relative;
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.home-hero-mesh-titolo {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero-mesh-parola {
  display: block;
  font-size: 2.5rem; /* 40px */
  line-height: 2.875rem; /* 46px */
  font-weight: 700;
}

.home-hero-mesh-numero {
  display: block;
  font-size: 4.75rem; /* 76px */
  line-height: 4.875rem; /* 78px */
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-hero-mesh-data {
  position: relative;
  margin: 0;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5rem; /* 24px */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* ---------- Righe e griglie delle destinazioni: icone in cerchi pastello
   codificati per categoria (rosa = orientamento generale, blu = raduno,
   corallo = stage, lavanda = stand/sponsor) — tinte derivate dai colori di
   brand reali (corallo, accento-vivo, e il violetto di mezzo del mesh
   dell'hero), non colori nuovi inventati. Card bordate (non ombra sottile):
   un contorno ben visibile invece dell'ombra quasi invisibile usata altrove,
   scelta deliberata per questa sezione più densa di destinazioni. ---------- */
:root {
  --tinta-rosa: #f6b3c6;
  --tinta-blu: #a9d4e0;
  --tinta-corallo: #f6bc9f;
  --tinta-lavanda: #cdb9de;
  --tinta-verde: #b8ddc0; /* "vedi sulla mappa": stesso family pastello, tono verde per l'associazione con un pin/luogo */
  --tinta-oro: #f0d48a; /* Best of Breed sul mobile (classifica-mobile): colore dedicato al premio più importante, distinto dai pallini blu/rosa per sesso */
  --tinta-viola: #c9b3e0; /* usato in staff-clc2025.html, non più dai premi speciali del mobile (passati a blu/rosa per sesso, 2026-09-08) */
  --bordo-marcato: rgba(53, 53, 53, 0.45);
}

/* Versione "nuda" delle tinte, per elementi diversi dal cerchio icona
   (es. il pallino colore delle classi in Programma). */
.tinta-rosa { background: var(--tinta-rosa); }
.tinta-blu { background: var(--tinta-blu); }
.tinta-corallo { background: var(--tinta-corallo); }
.tinta-lavanda { background: var(--tinta-lavanda); }
.tinta-verde { background: var(--tinta-verde); }
.tinta-oro { background: var(--tinta-oro); }
.tinta-viola { background: var(--tinta-viola); }
.tinta-neutra { background: var(--bordo-marcato); }

.home-eyebrow-riga {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.6rem 0 0.6rem;
}

.home-eyebrow-riga .home-eyebrow {
  flex-shrink: 0;
}

.home-eyebrow-riga::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bordo);
}

.home-riga {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1rem;
  margin-top: 0.7rem;
  border-radius: 20px;
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  text-decoration: none;
  color: var(--fg);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.home-riga:first-of-type {
  margin-top: 0;
}

.home-riga:hover,
.home-riga:focus-visible {
  box-shadow: var(--ombra-soft);
}

.home-riga:active {
  transform: scale(0.99);
}

.home-riga:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.home-riga-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.home-riga-titolo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

.home-riga-nota {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fg-attenuato);
}

.home-riga-freccia {
  flex-shrink: 0;
  color: var(--fg);
  transition: transform 150ms ease;
}

.home-riga:hover .home-riga-freccia,
.home-riga:focus-visible .home-riga-freccia {
  transform: translateX(3px);
}

.home-icona-cerchio {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--raggio-pillola);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg);
}

.home-icona-cerchio.tinta-rosa {
  background: var(--tinta-rosa);
}

.home-icona-cerchio.tinta-blu {
  background: var(--tinta-blu);
}

.home-icona-cerchio.tinta-corallo {
  background: var(--tinta-corallo);
}

.home-icona-cerchio.tinta-lavanda {
  background: var(--tinta-lavanda);
}

.home-icona-cerchio.tinta-verde {
  background: var(--tinta-verde);
}

.home-icona-cerchio.tinta-oro {
  background: var(--tinta-oro);
}

.home-icona-cerchio.tinta-viola {
  background: var(--tinta-viola);
}

.home-griglia {
  width: 100%;
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-tessera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem;
  border-radius: 20px;
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  text-decoration: none;
  color: var(--fg);
  text-align: left;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.home-tessera:hover,
.home-tessera:focus-visible {
  box-shadow: var(--ombra-soft);
}

.home-tessera:active {
  transform: scale(0.98);
}

.home-tessera:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.home-tessera-titolo {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg);
}

.home-tessera-nota {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--fg-attenuato);
}

/* Sezione "Durante la rassegna": eyebrow + griglia di card, sotto la card mesh. */
.home-sezione {
  width: 100%;
  margin-top: 1.6rem;
  text-align: left;
}

.home-piede {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.home-piede-riga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Dimensioni/opacità esatte di .wgi-powered__mark (DESIGN/handoff/wgi-brand.css,
   2026-08-28): 118x19px — rapporto fisso del wordmark reale (223.062 x 36),
   non più height:auto/width:auto (che dava una taglia leggermente diversa). */
.home-piede-logo {
  width: 7.375rem; /* 118px */
  height: 1.1875rem; /* 19px */
  opacity: 0.75;
}

/* Colore/spaziatura esatti di .wgi-powered__label (stesso handoff) —
   prima erano un'interpretazione locale (0.68rem/0.07em/--fg-attenuato),
   ora i valori dati dai grafici. */
.home-piede-testo {
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(53, 53, 53, 0.6);
}

/* ---------- Pagine di dettaglio (stage, stand, sponsor, programma, catalogo):
   corpo testo allineato a sinistra — a differenza della home, qui il contenuto è
   da leggere, non da scorrere al volo. Niente banner fotografico su queste
   pagine (a differenza della home): il momento "foto" è solo in apertura, qui
   serve velocità — header con pulsante indietro invece. ---------- */
.pagina-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-top: 0.5rem;
}

.pagina-indietro {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-pillola);
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.pagina-indietro:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.pagina-header-testi {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.pagina-titolo {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.2;
}

.pagina-sottotitolo {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--fg-attenuato);
}

/* Schede in elenco (stand, sponsor...): card singole con bordo marcato e
   spazio tra loro — non una lista continua con separatori, per coerenza con
   le righe della home (.home-riga usa lo stesso linguaggio). */
.pagina-schede {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pagina-scheda {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 20px;
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
}

/* Un solo colore neutro per tutti, non una tinta diversa a rotazione — le
   iniziali bastano a distinguere le schede, il colore non deve competere. */
.pagina-avatar {
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--raggio-pillola);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bordo);
  overflow: hidden;
}

/* Logo reale al posto delle iniziali: riempie tutto il cerchio (object-fit:
   cover, niente margine) — il cerchio resta il contenitore fisso
   indipendentemente dal formato del file sorgente, ma il logo lo copre per
   intero invece di starci "dentro" con bordi vuoti. */
.pagina-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eccezione puntuale: il marchio CLC-Italia.it risultava troppo a contatto
   coi bordi del cerchio rispetto agli altri, un margine interno lo
   rimpicciolisce leggermente senza toccare la regola generale. */
.pagina-avatar img.pagina-avatar-img--piccolo {
  padding: 0.25rem;
  box-sizing: border-box;
}

.pagina-scheda-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pagina-scheda-titolo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

.pagina-scheda-testo {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fg-attenuato);
}

.pagina-pillola-link {
  align-self: flex-start;
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--raggio-pillola);
  background: var(--bg);
  border: 1px solid var(--bordo-marcato);
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.pagina-pillola-link:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.pagina-corpo {
  width: 100%;
  text-align: left;
  margin-top: 1.5rem;
}

/* Card informazioni a righe (quota/durata/con...): etichetta a sinistra, valore
   a destra, righe separate da un filo sottile — non più chip affiancate. */
.pagina-info-card {
  margin-bottom: 1.2rem;
  padding: 0.3rem 1rem;
  border-radius: var(--raggio);
  background: var(--bg);
  border: 1px solid var(--bordo);
}

.pagina-info-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bordo);
}

.pagina-info-riga:last-child {
  border-bottom: none;
}

.pagina-info-etichetta {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-attenuato);
}

.pagina-info-valore {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
  text-align: right;
}

/* Hero a tinta unita delle pagine stage: colore pieno del brand, non il
   gradiente mesh (quello resta riservato alla home, superficie marketing —
   qui è una pagina prodotto/contenuto, registro sobrio anche nel momento
   "featured", vedi skill wgi-design). Testo scuro sopra il corallo: --corallo
   da solo richiede inchiostro scuro per il contrasto, mai bianco. */
.pagina-hero {
  width: 100%;
  margin-top: 1.3rem;
  margin-bottom: 1.4rem;
  padding: 1.3rem 1.3rem 1.5rem;
  border-radius: 24px;
  background: var(--corallo);
  color: var(--corallo-testo);
  text-align: left;
}

.pagina-hero-icona {
  width: 3rem;
  height: 3rem;
  border-radius: var(--raggio-pillola);
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--corallo-testo);
  margin-bottom: 1rem;
}

.pagina-hero-titolo {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}

.pagina-hero-sottotitolo {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.8;
}

.pagina-testo {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg);
}

.pagina-testo:last-child {
  margin-bottom: 0;
}

.pagina-evidenza {
  text-align: center;
  margin-bottom: 1.4rem;
}

.pagina-icona-evidenza {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--raggio-pillola);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  margin: 0 auto 1rem;
}

.pagina-evidenza-testo {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg);
}

.pagina-nota {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--raggio);
  background: var(--bg);
  border: 1px solid var(--bordo);
  font-size: 0.85rem;
  color: var(--fg-attenuato);
  line-height: 1.5;
}

.pagina-lista {
  width: 100%;
  border-top: 1px solid var(--bordo);
}

.pagina-lista-voce {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--bordo);
}

.pagina-lista-titolo {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--fg);
}

.pagina-lista-testo {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fg-attenuato);
}

.pagina-lista-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primario);
  text-decoration: none;
}

.pagina-lista-link:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

/* Programma: avviso "orari non ancora pubblicati" + sezioni con etichetta
   stile eyebrow + righe con icona. Il mockup mostra orari d'esempio per ogni
   voce, ma Mirco ha confermato che sono solo un placeholder del mockup, non
   dati reali (2026-08-27) — qui restano fuori: la sequenza sì, l'orario no,
   l'avviso in cima spiega il perché senza inventare nulla. */
.programma-avviso {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.3rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raggio);
  background: rgba(252, 145, 110, 0.14);
  border: 1px solid rgba(252, 145, 110, 0.4);
  color: var(--fg);
  font-size: 0.85rem;
  line-height: 1.5;
}

.programma-avviso-icona {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--corallo);
  margin-top: 0.1rem;
}

.programma-sezione {
  margin-top: 1.8rem;
}

.programma-sezione-titolo {
  margin: 0 0 0.9rem;
}

/* Sotto-etichetta Mattina/Pomeriggio dentro "Le classi Raduno" (richiesto da
   Mirco 2026-09-08): stesso trattamento occhiello, un filo più piccolo per
   restare sotto il titolo di sezione nella gerarchia. */
.programma-classi-turno {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.68rem;
}

.programma-righe {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.programma-riga {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: var(--raggio);
  background: var(--superficie);
  border: 1px solid var(--bordo);
}

.programma-riga-corpo {
  flex: 1;
  min-width: 0;
}

.programma-riga-intestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.2rem;
}

.programma-riga-intestazione .programma-riga-titolo {
  margin: 0;
}

.programma-riga-titolo {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
}

/* Orario confermato accanto al titolo della riga (novità.md, 2026-09-01) — pillola
   discreta, non un accento vivo: è un'informazione di supporto, non un'azione. */
.programma-riga-orario {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: var(--raggio-pillola);
  background: rgba(252, 145, 110, 0.16);
  color: var(--fg);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.programma-riga-testo {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--fg-attenuato);
}

.programma-classi {
  display: flex;
  flex-direction: column;
}

.programma-classe {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bordo);
}

.programma-classe:last-child {
  border-bottom: none;
}

.programma-classe-pallino {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.4rem;
}

.programma-classe-corpo {
  flex: 1;
  min-width: 0;
}

.programma-classe-titolo {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg);
}

.programma-classe-testo {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: var(--fg-attenuato);
}

/* Catalogo: chip di filtro per classe + elenco iscritti con numero di
   catalogo colorato per classe (stessa mappa classe→tinta di Programma). */
.catalogo-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem;
}

.catalogo-filtro {
  padding: 0.5rem 1rem;
  border-radius: var(--raggio-pillola);
  border: 1px solid var(--bordo-marcato);
  background: var(--superficie);
  color: var(--fg);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.catalogo-filtro.attivo {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* Totale per categoria sul filtro stesso (richiesto da Mirco 2026-09-02) —
   leggermente attenuato per non competere con l'etichetta della classe. */
.catalogo-filtro-conteggio {
  opacity: 0.6;
  font-weight: 600;
}

.catalogo-filtro.attivo .catalogo-filtro-conteggio {
  opacity: 0.75;
}

.catalogo-filtro:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.catalogo-conteggio {
  margin: 1.3rem 0 0.7rem;
  font-size: 0.82rem;
  color: var(--fg-attenuato);
}

/* Logo piccolo dentro la nota (.pagina-nota resta invariata per le altre pagine
   che la usano solo come testo) — altezza fissa, larghezza libera per non
   deformare il logo, la nota non cresce oltre la sua dimensione normale. */
.catalogo-nota-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.catalogo-nota-logo {
  height: 1.1rem;
  width: auto;
  flex-shrink: 0;
}

.catalogo-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.catalogo-riga {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--superficie);
  text-decoration: none;
  color: inherit;
}

.catalogo-riga:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

/* Senza link CLC-Italia (dato non ancora arrivato, vedi Mirco §8b): niente
   freccia, per non promettere un tocco che non fa nulla. */
.catalogo-riga.senza-link .catalogo-freccia {
  display: none;
}

.catalogo-numero {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--raggio-pillola);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--fg);
}

.catalogo-corpo {
  flex: 1;
  min-width: 0;
}

/* Normalizzazione visiva: i nomi arrivano da iscritti.xlsx con maiuscole/
   minuscole incoerenti — uniformati in maiuscolo senza toccare il dato reale,
   stessa regola già in classifica.css/classifica-mobile.css per coerenza in
   tutte le pagine pubbliche. */
.catalogo-nome {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
}

/* Icona "solo sfilata" (§16, richiesto da Mirco 2026-09-02) accanto al nome —
   colore attenuato per restare un dettaglio, non competere col nome stesso. */
.catalogo-icona-sfilata {
  margin-left: 0.35rem;
  vertical-align: -0.1em;
  color: var(--fg-attenuato);
}

.catalogo-dettagli {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--fg-attenuato);
}

.catalogo-freccia {
  flex-shrink: 0;
  color: var(--fg-attenuato);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}