/* ═══════════════════════════════════════════════════════════════
   mini.css — override mobile (≤ 700px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── HEADER ───────────────────────────────────────────────────
     Riduce l'altezza e nasconde i loghi 1 e 3 + separatori,
     mostrando solo il logo centrale.
  ─────────────────────────────────────────────────────────────── */
  /* header fisso mobile: compensa altezza ridotta */
  .cs-page { padding-top: 64px; }

  header {
    height: 64px;
    padding: 8px 16px;
    gap: 8px;
  }

  /* mobile: nasconde loghi laterali e separatori, rimane solo il logo centrale */
  .header-logo-side,
  header .header-sep { display: none; }

  header .header-logo { height: 48px; }

  .hamburger { right: 16px; }
  .shop-cart-btn { left: 16px; }

  /* ── PAGE-NAV DROPDOWN ────────────────────────────────────────
     Da riga orizzontale a colonna verticale a tutto schermo.
  ─────────────────────────────────────────────────────────────── */
  .page-nav {
    top: 64px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
  }

  .page-nav a {
    padding: 13px 24px;
    border-bottom: 1px solid rgba(29,29,27,0.1);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }

  .page-nav a:last-child { border-bottom: none; }

  /* ── PROSSIMO EVENTO ────────────────────────────────────────── */
  .ne-main { min-height: calc(100vh - 96px); }

  /* ── FOOTER ───────────────────────────────────────────────────
     Colonna verticale: social → loghi → copyright
  ─────────────────────────────────────────────────────────────── */
  footer {
    height: auto;
    flex-direction: column;
    gap: 20px;
    padding: 28px 20px;
    text-align: center;
  }

  .footer-social { justify-content: center; }

  .footer-logos { gap: 12px; }
  .footer-logos .header-logo { height: 36px; }

  .footer-copy { justify-content: center; }

  /* ── LANDING: cerchio menu ────────────────────────────────────
     Impedisce overflow del cerchio su schermi piccoli (< 375px)
  ─────────────────────────────────────────────────────────────── */
  .menu-circle {
    width: min(92vw, 350px);
    height: min(92vw, 350px);
  }

  .menu-nav-row {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  /* ── ARCHIVIO ─────────────────────────────────────────────────
     Gallery più bassa su mobile.
     max-height accordion aumentata perché il poster portrait
     a width:100% può superare 800px.
  ─────────────────────────────────────────────────────────────── */
  .ar-gallery-wrapper { height: 220px; }
  .ar-event.is-open .ar-event-body { max-height: 2400px; }

  /* ── CHI SIAMO ────────────────────────────────────────────────
     Nelle sezioni normali (non-reverse) sposta l'immagine DOPO
     il testo così la sequenza colori su mobile diventa:
     arancione→scuro | arancione→scuro | arancione→scuro
     invece di: scuro→arancione | arancione→scuro | scuro→arancione
     (che dava due scuri adiacenti tra sezione 2 e 3).
  ─────────────────────────────────────────────────────────────── */
  .cs-section .cs-image { order: 1; }
  .cs-image { min-height: 56vw; }

  /* ── ISCRIZIONE ───────────────────────────────────────────────
     Su mobile i blocchi diventano 1 colonna: forza il numero
     del passo 2 (reverse) a venire PRIMA del contenuto.
  ─────────────────────────────────────────────────────────────── */
  .is-step--reverse .is-step-num-col { order: -1; }

  .is-intro {
    padding: 2.5rem 1.5rem;
  }

  .is-step-content {
    padding: 2rem 1.5rem;
  }

  .is-done {
    padding: 3rem 1.5rem;
  }

  /* ── PROSSIMO EVENTO: poster ──────────────────────────────────
     Su mobile rimuove il padding asimmetrico del poster e forza
     l'immagine a coprire tutta la larghezza.
  ─────────────────────────────────────────────────────────────── */
  .ne-card-poster {
    width: 100%;
    padding: clamp(1rem, 4vw, 1.5rem);
  }

  .ne-card-poster img {
    width: 100%;
    height: auto;
  }

  /* ── CONTATTI ─────────────────────────────────────────────────
     Il ct-main già si stacca a 1fr, aggiungiamo padding ridotto
  ─────────────────────────────────────────────────────────────── */
  .ct-info { padding: 2rem 1.5rem; }
  .ct-card { padding: 2rem 1.5rem; }

  .ct-socials { gap: 14px; }

  .ct-socials a,
  .ct-social-icon { width: 20px; height: 20px; }

}