:root {
  --color-bg: #E9F3FD;
  --color-surface: #FFFFFF;
  --color-ink: #1F2D3D;
  --color-ink-muted: #5C7290;
  --color-line: #D3E3F5;
  --color-noche: #2E7BC4;
  --color-noche-soft: #4F97D6;
  --color-brass: #1B5C9E;
  --color-brass-dark: #123F6E;
  --color-hibiscus: #D32F3D;
  --color-guava: #9E2B2B;
  --color-guava-soft: rgba(158, 43, 43, 0.4);
  --color-turquoise: #2E9BD6;
  --color-paper-bright: #FFFFFF;
  --color-paper-muted: #DCEBFA;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Sora", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-fun: "Baloo 2", cursive;

  --max-width: 1320px;
  --radius: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.75rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}

a {
  color: var(--color-brass-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-brass);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-hibiscus);
  outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- Firma: la clave, il pattern ritmico 3-2 di tutta la musica caraibica ----- */

@keyframes clave-beat {

  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.clave-mark {
  display: inline-flex;
  gap: 3px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.clave-mark span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-paper-bright);
  animation: clave-beat 1.8s ease-in-out infinite;
}

.clave-mark span:nth-child(1) {
  animation-delay: 0s;
}

.clave-mark span:nth-child(2) {
  animation-delay: 0.3s;
  background: var(--color-hibiscus);
}

.clave-mark span:nth-child(3) {
  animation-delay: 0.9s;
}

/* Preloader: pulsa lo schema 3-2 invece di un generico spinner */
#preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--color-noche-soft), var(--color-noche));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

#preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.clave-pulse {
  display: flex;
  gap: 10px;
}

.clave-pulse span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-paper-bright);
  animation: clave-beat 1.2s ease-in-out infinite;
}

.clave-pulse span:nth-child(1) {
  animation-delay: 0s;
}

.clave-pulse span:nth-child(2) {
  animation-delay: 0.15s;
}

.clave-pulse span:nth-child(3) {
  background: transparent;
  animation: none;
}

.clave-pulse span:nth-child(4) {
  animation-delay: 0.6s;
  background: var(--color-hibiscus);
}

.clave-pulse span:nth-child(5) {
  animation-delay: 0.75s;
  background: var(--color-hibiscus);
}

/* Separatore a "clave" tra gruppi di date nelle liste */
.serata-group__titolo {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--space-4) 0 var(--space-2);
}

.serata-group__titolo::after {
  content: "";
  flex: 1;
  height: 3px;
  background-image: radial-gradient(circle, var(--color-brass) 1.5px, transparent 1.6px);
  background-size: 10px 3px, 10px 3px, 14px 3px;
  background-position: 0 0, 10px 0, 24px 0;
  background-repeat: repeat-x;
  opacity: 0.55;
}

/* ----- Header ----- */

.site-header {
  background: linear-gradient(180deg, var(--color-noche-soft), var(--color-noche));
  color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--color-guava-soft);
}

/* Come .page: stessa colonna centrale di 1320px del resto del sito, non a tutta larghezza. */
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Il logo sfora il padding verticale dell'header (che qui non esiste più,
   spostato su nav/azioni) per potersi ingrandire quasi a tutta altezza
   senza influenzare l'allineamento degli altri elementi. */
.site-header__logo {
  align-self: stretch;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}

.site-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.site-header__logo:hover {
  text-decoration: none;
  color: var(--color-paper-muted);
}

.site-nav {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .site-nav a {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
  }

  .site-nav a:hover {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom-color: var(--color-hibiscus);
  }

  .site-header__actions [data-menu-toggle] {
    display: none;
  }
}

.icon-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* .icon-button ha un display esplicito (flex): senza questa regola gemella l'attributo
   [hidden] verrebbe ignorato quando il bottone "indietro" è nascosto via JS. */
.icon-button[hidden] {
  display: none;
}

.icon-button:hover {
  border-color: var(--color-hibiscus);
  color: var(--color-hibiscus);
}

.icon-button.is-active {
  color: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
}

.icon-button__label {
  display: none;
}

@media (min-width: 900px) {
  .icon-button--radio {
    width: auto;
    border-radius: 999px;
    padding: 0 var(--space-2);
    gap: 0.5rem;
  }

  .icon-button--radio .icon-button__label {
    display: inline;
    font-family: var(--font-fun);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* Nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--color-noche-soft), var(--color-noche));
  color: #FFFFFF;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.nav-overlay.is-open {
  display: flex;
}

.nav-overlay a {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.nav-overlay a:hover {
  color: var(--color-hibiscus);
  text-decoration: none;
}

.nav-overlay__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* ----- Hero: tabellone marquee delle serate di stasera ----- */

.hero-marquee {
  background: linear-gradient(180deg, var(--color-brass), var(--color-brass-dark));
  color: #FFFFFF;
  padding: var(--space-3);
}

.hero-marquee__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-2);
  align-items: center;
}

.hero-marquee__inner>div {
  min-width: 0;
}

.hero-marquee__logo {
  width: 96px;
  height: auto;
  margin: 0 auto;
}

/* Il logo generico duplica quello già visibile nell'header di ogni pagina: su mobile,
   con la hero in cima, i due finirebbero uno sopra l'altro. Il logo/locandina
   dell'entità (--locale, su schede locale/scuola/congresso) resta sempre visibile:
   è contenuto vero, non un doppione. */
.hero-marquee__logo:not(.hero-marquee__logo--locale) {
  display: none;
}

@media (min-width: 860px) {
  .hero-marquee__inner {
    grid-template-columns: 400px 1fr;
    gap: var(--space-3);
  }

  .hero-marquee__logo:not(.hero-marquee__logo--locale) {
    display: block;
  }

  .hero-marquee__logo {
    width: 400px;
    height: 100%;
    object-fit: contain;
    align-self: stretch;
    margin: 0;
  }
}

.hero-marquee__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--color-hibiscus);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-marquee h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin: 0.3rem 0 0.6rem;
  color: #FFFFFF;
}

.hero-marquee p {
  color: #DCEBFA;
  max-width: 62ch;
  margin: 0 0 var(--space-3);
}

.marquee-ticker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.marquee-ticker__item {
  flex: 0 0 auto;
  background: var(--color-noche-soft);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  min-width: 200px;
  cursor: pointer;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.marquee-ticker__item:hover {
  background: var(--color-noche);
  transform: translateY(1px) scale(0.98);
}

.marquee-ticker__item:active {
  transform: translateY(2px) scale(0.96);
}

.marquee-ticker__item .luogo {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-paper-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.3rem;
}

.marquee-ticker__item h3 {
  font-size: 1.15rem;
  margin: 0;
}

.marquee-ticker__item a {
  color: #FFFFFF;
}

.marquee-ticker__item--more {
  background: var(--color-noche);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.marquee-ticker__item--more:hover {
  background: var(--color-noche-soft);
  text-decoration: none;
}

.marquee-ticker__item--more span:first-child {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-paper-muted);
}

.marquee-ticker__more-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-paper-muted);
}

.marquee-ticker__empty {
  font-family: var(--font-mono);
  color: #DCEBFA;
  font-size: 0.9rem;
}

/* Ticker-filtro di /scuolediballo: bottoni veri (non link), stessa resa visiva dei
   marquee-ticker__item normali ma senza il chrome di default del browser sui <button>. */
button.marquee-ticker__item {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
}

.marquee-ticker__item--filtro[aria-pressed="true"] {
  background: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
}

.marquee-ticker__item--reset {
  background: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
}

.marquee-ticker__item--reset:hover {
  background: var(--color-guava);
}

/* .marquee-ticker__item { display:block } sovrascriverebbe altrimenti [hidden] — stesso
   bug già visto due volte in questa sessione (.form-field, .serata-card): lo anticipo qui. */
.marquee-ticker__item[hidden] {
  display: none;
}

/* Ticker-player di /radio-latina: ogni tassello è un bottone play/stop (non un link),
   diventa rosso mentre suona (stesso linguaggio del tassello --filtro attivo). */
.marquee-ticker__item--radio h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.marquee-ticker__item--radio[aria-pressed="true"] {
  background: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
}

/* Icona play/stop: le due icone convivono nel markup, CSS ne mostra una sola in base
   allo stato "premuto" del tassello (aria-pressed, impostato da app.js). */
.radio-icon-stop {
  display: none;
}

[aria-pressed="true"] .radio-icon-play {
  display: none;
}

[aria-pressed="true"] .radio-icon-stop {
  display: inline-flex;
}

.link-on-noche {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Bottone "Trova serate vicino a te" in home: reset del <button> per farlo apparire
   come un link inline dentro la hero, coerente con .link-on-noche. */
.geo-locate {
  margin: 0 0 var(--space-3);
}

.geo-locate-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.geo-locate-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.geo-locate__feedback {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-paper-muted);
  margin-top: 0.3rem;
}

/* Variante ridotta della hero, per pagine di dettaglio (scheda locale): niente ticker,
   solo logo/titolo/indirizzo + azioni rapide. */
.hero-marquee--mini {
  padding: var(--space-3);
}

.hero-marquee__inner--mini {
  grid-template-columns: none;
  align-items: center;
}

@media (min-width: 860px) {
  .hero-marquee__inner--mini {
    grid-template-columns: 140px 1fr;
    gap: var(--space-3);
  }

  /* Se manca il logo/locandina (campo facoltativo), il testo resta l'unico figlio della
     griglia e finirebbe schiacciato nella colonna stretta da 140px invece che a piena
     larghezza — bug reale, riprodotto su un congresso senza locandina. */
  .hero-marquee__inner--mini > div:only-child {
    grid-column: 1 / -1;
  }
}

.hero-marquee__logo--locale {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.5rem;
  margin: 0 0 var(--space-2);
}

@media (min-width: 860px) {
  .hero-marquee__logo--locale {
    width: 140px;
    height: 140px;
    margin: 0;
  }
}

.hero-marquee--mini h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0.3rem 0 0.4rem;
}

.hero-marquee--mini p {
  margin: 0 0 var(--space-2);
}

.locale-action-btn--on-hero {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

.locale-action-btn--on-hero svg {
  color: var(--color-paper-muted);
}

.locale-action-btn--on-hero:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ----- Layout ----- */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

/* AD subito sotto la hero (solo telefono, vedi Config::isMobileUserAgent — su schermi
   larghi questo blocco non esiste proprio, l'annuncio resta dov'è dentro il contenuto).
   Stesso max-width/padding di .page così è allineato al resto anche se sta fuori da essa. */
.page-header-ad {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) 0;
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }

  .page--with-left-nav {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  /* Nel markup <main> viene ora prima di <aside class="page__nav-sidebar"> (contenuto
     subito visibile su mobile, senza scorrere prima tutta la sidebar). Da 900px in su
     la rimettiamo a sinistra solo visivamente: l'ordine del DOM/screen reader resta
     "contenuto poi navigazione" anche su desktop, cambia solo la posizione a schermo. */
  .page--with-left-nav .page__nav-sidebar {
    order: -1;
  }

  .page--full {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page__nav-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-sidebar__group+.nav-sidebar__group {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.nav-sidebar__group h2 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-ink-muted);
  margin: 0 0 0.8rem;
}

.nav-sidebar__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nav-sidebar__group a {
  color: var(--color-ink);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-sidebar__group a:hover {
  color: var(--color-brass-dark);
}

.nav-sidebar__group a[aria-current="page"] {
  color: var(--color-brass-dark);
  font-weight: 700;
}

.nav-sidebar__group svg {
  flex: 0 0 auto;
  color: var(--color-brass);
}

.page__main {
  min-width: 0;
}

.page__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.breadcrumbs {
  margin: var(--space-2) 0 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--color-brass);
}

.breadcrumbs a {
  color: var(--color-ink-muted);
}

.breadcrumbs a:hover {
  color: var(--color-brass-dark);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.page-header {
  padding: var(--space-3) 0 0;
  margin-bottom: var(--space-2);
}

/* Logo del locale (locandina_globale), quando presente: affiancato al titolo, non ritagliato. */
.page-header--with-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.locale-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.4rem;
}

/* Testo lungo (articoli Cultura, Cookie Policy): larghezza di lettura indipendente
   da quella della griglia di pagina, che può essere più larga per le card. */
.article-prose {
  max-width: 75ch;
}

.article-prose iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Immagine di copertina dell'articolo: recuperata dal vecchio sito (uploads/cultura/{ID}/covermid.jpg),
   sorgenti storiche con proporzioni incoerenti e bande nere di riempimento — un ritaglio panoramico
   con object-fit:cover isola la parte reale della foto e scarta le bande. */
.article-cover {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  margin: var(--space-2) 0;
  background: var(--color-line);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-header h1 {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.page-header p {
  color: var(--color-ink-muted);
  margin: 0;
  max-width: 60ch;
}

/* Riga di azioni rapide sulla scheda locale (mappa, segnalazione, link esterni) */
.locale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.locale-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
}

.locale-action-btn svg {
  color: var(--color-brass);
}

.locale-action-btn:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
  background: #D8ECFF;
  text-decoration: none;
}

/* Ad slot placeholder — sostituire con il codice AdSense reale */
.ad-slot {
  background: var(--color-surface);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  text-align: center;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ad-slot--intro {
  margin-top: 0;
}

/* Formato verticale (tipo skyscraper) solo da 900px in su, quando la sidebar sinistra
   è davvero una colonna stretta. Su mobile (nessun aspect-ratio forzato) lo stesso
   annuncio "auto" prende tutta la larghezza disponibile e AdSense sceglie da solo un
   formato rettangolare, molto più fruttuoso di uno skyscraper schiacciato in verticale. */
.ad-slot--vertical {
  padding: var(--space-2);
}

@media (min-width: 900px) {
  .ad-slot--vertical {
    aspect-ratio: 1 / 3;
  }
}

/* align-items/justify-content centrerebbero l'<ins> alla sua larghezza intrinseca (0,
   prima che AdSense lo riempia) invece di farlo espandere: AdSense calcola allora
   availableWidth=0 e non richiede mai l'annuncio. L'<ins> deve riempire il contenitore. */
.ad-slot--vertical .adsbygoogle {
  width: 100% !important;
  height: 100% !important;
}

/* Navigatore regioni/città: pillole con link reali, non dropdown JS */
.region-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
}

/* .region-nav { display:flex } sovrascriverebbe altrimenti [hidden] — stesso bug già
   visto più volte in questa sessione (.form-field, .serata-card, .marquee-ticker__item),
   qui riproposto sul toggle Italia/Estero dei congressi (le chip regione, nascoste
   quando è attivo "Estero", restavano visibili). */
.region-nav[hidden] {
  display: none;
}

.region-nav a,
.region-nav button {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* .region-nav ospita anche bottoni veri per i filtri client-side (Italia/Estero,
   regione dei congressi) — reset del chrome di default del <button>, stessa resa
   visiva dei link. */
.region-nav button {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.region-nav a:hover,
.region-nav button:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
  text-decoration: none;
  background: #D8ECFF;
}

.region-nav a[aria-current="page"],
.region-nav button[aria-pressed="true"] {
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: #FFFFFF;
}

/* Bottone di reset filtro (es. "Elimina Filtro Regione" nei Congressi): stesso
   linguaggio rosso già usato per il reset del filtro stile in Scuole di Ballo. */
.region-nav button.is-reset {
  background: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
  color: #FFFFFF;
}

.region-nav button.is-reset:hover {
  background: var(--color-guava);
  border-color: var(--color-guava);
  color: #FFFFFF;
}

/* Card serata — taglio "biglietto da locale" */
.serata-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* .serata-list { display:flex } sovrascriverebbe altrimenti [hidden] — stesso bug già
   visto più volte in questa sessione, qui riproposto sui pannelli-tab "Canzoni Top" di
   /radio-latina. Prevenuto qui prima ancora di vederlo, non dopo. */
.serata-list[hidden] {
  display: none;
}

/* Tab "Canzoni Top" (bottoni, non link): stesso reset già usato per i tasselli marquee. */
button.city-chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
}

.city-chip[aria-pressed="true"] {
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: #FFFFFF;
}

.serata-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-brass);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-2);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Bottoni azione (mappa + segnala) in alto a destra sulla card */
.serata-card__actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.3rem;
  z-index: 2;
}

.card-action {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
}

.card-action:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
}

.card-action-menu {
  position: relative;
}

.card-action-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(30, 45, 65, 0.18);
  min-width: 160px;
  overflow: hidden;
}

.card-action-menu__dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--color-ink);
  cursor: pointer;
}

.card-action-menu__dropdown button:hover {
  background: var(--color-bg);
  color: var(--color-brass-dark);
}

.serata-card:hover {
  border-left-color: var(--color-hibiscus);
  transform: translateX(2px);
}

/* .serata-card { display:grid } sovrascriverebbe altrimenti il default del browser per
   l'attributo hidden (stesso bug già visto su .form-field) — usato dal filtro stili di
   /scuolediballo per nascondere le card che non insegnano lo stile selezionato. */
.serata-card[hidden] {
  display: none;
}

/* Descrizione scuola: troncata a 2 righe con ellipsis, per stare al colpo d'occhio nella card. */
.serata-card__desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cultura-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: var(--space-3) 0 var(--space-4);
}

.cultura-search svg {
  position: absolute;
  left: 1.1rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-ink-muted);
  pointer-events: none;
  transition: color 0.15s ease;
}

.cultura-search input[type="search"] {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem 0.85rem 3rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(31, 45, 61, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.cultura-search input[type="search"]::placeholder {
  color: var(--color-ink-muted);
}

/* Safari aggiunge una "x" nativa (::-webkit-search-cancel-button) per svuotare il campo,
   ma con l'icona lente sovrapposta a sinistra basta lasciare respiro anche a destra —
   già garantito dal padding-right sopra, nessuna regola aggiuntiva necessaria qui. */
.cultura-search input[type="search"]:hover {
  border-color: var(--color-noche-soft);
}

.cultura-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-noche);
  box-shadow: 0 0 0 3px rgba(46, 123, 196, 0.18);
}

.cultura-search:focus-within svg {
  color: var(--color-noche);
}

.stile-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.stile-chip {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
}

.serata-card__body {
  padding-top: 1.6rem;
}

.serata-card__locandina {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-line);
}

/* Card Cultura: qui .serata-card__locandina è un contenitore (non l'<img> stesso) perché
   la copertina può mancare sul CDN e va nascosta come blocco intero via data-hide-parent-on-error. */
.serata-card__locandina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.serata-card__locandina--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-paper-bright);
  font-size: 1.6rem;
  background: var(--color-noche);
}

.serata-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
  text-transform: none;
  font-weight: 700;
}

.serata-card .luogo {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}

.serata-card p {
  margin: 0;
  font-size: 0.92rem;
}

/* Elemento+classe invece della sola classe: stessa specificità di ".serata-card p" (che
   altrimenti vincerebbe per via dell'elemento in più) ma dichiarata dopo nel file, quindi
   vince il pareggio senza bisogno di !important (non ammesso nel CSS della variante AMP). */
p.disclaimer-stagionale {
  color: var(--color-hibiscus);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 0.4rem;
}

.page__main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page__main li {
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--color-line);
}

.page__main li:last-child {
  border-bottom: none;
}

/* Sezioni vetrina della homepage — righe di card a scorrimento orizzontale */
.home-section {
  margin-top: var(--space-4);
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.home-section__head .serata-group__titolo {
  margin: 0;
  flex: 1;
}

.home-section__head a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Carosello a pagine (6 elementi per pagina, griglia 3x2) con frecce */
.carousel {
  position: relative;
}

.carousel__viewport {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
}

.carousel__page {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: var(--space-2);
  scroll-snap-align: start;
  align-content: start;
}

.carousel__page .serata-card {
  grid-template-columns: 72px 1fr;
}

.carousel__page .serata-card__locandina {
  width: 72px;
  height: 72px;
}

.carousel__page .serata-card p {
  font-size: 0.82rem;
}

/* Le frecce galleggiano sopra i bordi della griglia invece di occupare
   colonne proprie: recupera la larghezza laterale per le card, che su
   pagine con sidebar è già stretta. */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(16, 36, 42, 0.22);
}

.carousel__arrow--prev {
  left: 4px;
}

.carousel__arrow--next {
  right: 4px;
}

.carousel__arrow:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
}

@media (max-width: 1100px) {
  .carousel__page {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .carousel__page {
    grid-template-columns: 1fr;
  }

  .carousel__arrow {
    display: none;
  }
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.sidebar-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-radio-list .radio-chip {
  width: 100%;
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.radio-chip:hover {
  border-color: var(--color-brass);
}

.radio-chip .icon-button {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  color: var(--color-noche);
  border-color: var(--color-line);
}

.radio-chip .icon-button.is-active {
  color: var(--color-hibiscus);
  border-color: var(--color-hibiscus);
}

.city-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Tab "Canzoni Top" di /radio-latina: seguite subito da .serata-list senza un <h2> in
   mezzo a dare spaziatura — a differenza delle altre liste chip del sito, qui serve un
   margine esplicito o i pannelli sotto restano attaccati. */
.city-chip-list--tabs {
  margin-bottom: var(--space-3);
}

/* Festività: 2 per riga invece del wrap libero, indipendentemente dalla lunghezza del nome. */
.city-chip-list--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.city-chip-list--2col .city-chip {
  justify-self: stretch;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  font-size: 0.76rem;
  padding: 0.4rem 0.6rem;
}

.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.city-chip svg {
  color: var(--color-brass);
}

.city-chip:hover {
  border-color: var(--color-hibiscus);
  color: var(--color-brass-dark);
  text-decoration: none;
  background: var(--color-surface);
}

.city-chip[aria-current="page"] {
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: #FFFFFF;
}

/* Specificità (0,2,1) di `.nav-sidebar__group a[aria-current="page"]` batte quella di
   `.city-chip[aria-current="page"]` (0,2,0) — bug reale: le chip stili nella sidebar di
   /corsi (che sono anche dentro un .nav-sidebar__group) restavano col testo blu scuro
   invece che bianco. Specificità alzata apposta oltre quella regola. */
.nav-sidebar__group .city-chip[aria-current="page"] {
  color: #FFFFFF;
}

.empty-state {
  color: var(--color-ink-muted);
  text-align: center;
  padding: var(--space-4) 0;
  font-family: var(--font-mono);
}

/* Stato vuoto per singolo giorno nel calendario settimanale di /dovesiballa/{regione}:
   più leggero di .empty-state, che è pensato per un'unica lista intera vuota, non per un
   giorno tra altri con contenuto — con 7 giorni possono comparire più stati vuoti di fila. */
.settimana-giorno__vuoto {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}

/* Modali (mappa + segnalazione) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 48, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  z-index: 500;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin: 0 0 0.8rem;
  padding-right: var(--space-3);
}

.modal__subtitle {
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  margin: -0.4rem 0 1rem;
}

.modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.modal__close:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
}

.modal__map {
  border-radius: var(--radius);
}

.modal__locandina {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.modal__spotify {
  display: block;
  border-radius: var(--radius);
}

/* Bottone "Ascolta" sulle card canzone (Spotify) — pillola con icona, sfondo chiaro. */
.brano-card__ascolta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brass-dark);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.brano-card__ascolta:hover {
  border-color: var(--color-hibiscus);
  color: var(--color-hibiscus);
}

/* Riga "programma settimanale" nella scheda locale: miniatura locandina (se esiste) + testo del giorno. */
.programma-settimanale__riga {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.programma-settimanale__locandina {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.programma-settimanale__locandina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.programma-settimanale__locandina:hover {
  border-color: var(--color-brass);
}

/* Corpo scheda congresso: locandina ridotta cliccabile (apre la modale) allineata a
   sinistra del testo, invece della vecchia locandina a piena larghezza sopra il testo. */
.congresso-corpo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.congresso-corpo__locandina {
  flex-shrink: 0;
  width: 180px;
  position: relative;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: none;
  box-shadow: 0 6px 20px rgba(30, 45, 65, 0.18);
}

.congresso-corpo__locandina img {
  display: block;
  width: 100%;
  height: auto;
}

.congresso-corpo__locandina-zoom {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(31, 45, 61, 0.65);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.congresso-corpo__locandina:hover .congresso-corpo__locandina-zoom,
.congresso-corpo__locandina:focus-visible .congresso-corpo__locandina-zoom {
  opacity: 1;
}

.congresso-corpo__testo {
  min-width: 0;
}

@media (max-width: 640px) {
  .congresso-corpo {
    flex-direction: column;
  }

  .congresso-corpo__locandina {
    width: 140px;
  }
}

.modal__feedback {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
}

.modal__feedback.is-ok {
  color: var(--color-turquoise);
}

.modal__feedback.is-error {
  color: var(--color-hibiscus);
}

/* Form segnalazione */
.form-field {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

/* .form-field { display:block } sovrascriverebbe altrimenti il default del
   browser per l'attributo hidden (regola d'autore vs UA, a parità di specificità
   vince l'autore) — bug reale trovato mostrando due gruppi di opzioni sovrapposti
   nella modale "segnala" quando uno dei due doveva restare nascosto. */
.form-field[hidden] {
  display: none;
}

.form-field input[type="email"],
.form-field textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
  background: var(--color-bg);
}

.form-field input[type="email"]:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-brass);
  outline-offset: 1px;
}

.form-field legend {
  padding: 0;
  margin-bottom: 0.4rem;
}

.form-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-noche-soft), var(--color-brass));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-brass), var(--color-brass-dark));
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.site-footer {
  text-align: center;
  color: #DCEBFA;
  background: linear-gradient(180deg, var(--color-brass), var(--color-brass-dark));
  padding: var(--space-4) var(--space-2);
  font-size: 0.85rem;
  margin-top: var(--space-4);
  border-top: 3px solid var(--color-guava-soft);
}

.site-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__logo {
  height: 62px;
  width: auto;
}

.site-footer__disclaimer {
  margin: 0;
  line-height: 1.7;
}

.site-footer__disclaimer a {
  color: #FFFFFF;
  text-decoration: underline;
}

.site-footer__policy-link {
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: underline;
}

/* ----- Contenuti testuali lunghi (es. Cookie Policy) ----- */

.policy-table-wrap {
  overflow-x: auto;
  margin: var(--space-2) 0;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.policy-table td {
  border: 1px solid var(--color-line);
  padding: var(--space-1);
  vertical-align: top;
}

.policy-table td:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}