/* =========================================================================
   MOBILE LAYOUTS — layout dedicati per la versione mobile (≤767px).
   Filo conduttore: liste/sequenze in SCROLL ORIZZONTALE con snap, al posto
   di lunghe colonne verticali. Questo file NON tocca il desktop ed è caricato
   per ultimo (vince per ordine sui CSS precedenti).
   Sezioni: 1) iMENSA roadmap  2) iMENSA step demo  3) Home eventi (filtri +
   mappa collassabile)  4) Home team.
   ========================================================================= */

/* Bottone "Mostra la mappa": nascosto su desktop, mostrato solo su mobile. */
.map-toggle-mobile { display: none; }

/* Logo iMENSA sull'hero pesca: drop-shadow per staccarlo dallo sfondo chiaro
   e migliorarne il contrasto/leggibilità (non solo mobile). */
.imensa-logo-hero { filter: drop-shadow(0 3px 10px rgba(44, 62, 80, 0.30)); }

@media (max-width: 767.98px) {

  /* =======================================================================
     1) iMENSA — ROADMAP / TIMELINE  ->  orizzontale swipeable con spina
     ======================================================================= */
  .timeline-progress { padding: 0.5rem 0 0; overflow: visible; }

  .timeline-progress .milestones {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .timeline-progress .milestones::-webkit-scrollbar { display: none; }

  .timeline-progress .milestone {
    flex: 0 0 46%;              /* ~2 tappe visibili + peek della 3ª */
    min-width: 46%;
    scroll-snap-align: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 0.4rem 0.6rem;   /* spazio in alto per spina + dot */
    position: relative;
  }

  /* Spina orizzontale: un segmento per tappa, colorato se completata. */
  .timeline-progress .milestone::before {
    content: '';
    position: absolute;
    top: 37px;                 /* centro del dot (dot a top:30px, h 18px) */
    left: 0; right: 0;
    height: 4px;
    background: #e6e8ea;
    z-index: 1;
  }
  .timeline-progress .milestone.completed::before { background: var(--secondary-color); }
  .timeline-progress .milestone.current::before {
    background: linear-gradient(90deg, var(--secondary-color) 0 50%, #e6e8ea 50% 100%);
  }
  /* Il segmento non deve sporgere prima del 1° dot né dopo l'ultimo. */
  .timeline-progress .milestone:first-child::before { left: 50%; }
  .timeline-progress .milestone:last-child::before  { right: 50%; }

  .timeline-progress .milestone-dot {
    width: 18px; height: 18px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .timeline-progress .milestone-content h5 {
    margin-top: 14px;
    font-size: 0.95rem;
    min-height: 2.4em;         /* allinea le date tra le card */
  }
  .timeline-progress .milestone-content span { font-size: 0.78rem; }

  /* Hint "scorri" sotto la timeline. */
  .timeline-progress::after {
    content: '‹  scorri  ›';
    display: block;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: #9aa4a6;
    margin-top: 0.35rem;
  }

  /* =======================================================================
     2) iMENSA — STEP DEMO  ->  carosello orizzontale a snap
     ======================================================================= */
  .demo-content .demo-steps {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 0.75rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .demo-content .demo-steps::-webkit-scrollbar { display: none; }

  .demo-content .demo-steps .step {
    flex: 0 0 82%;
    min-width: 82%;
    max-width: 82%;
    box-sizing: border-box;
    overflow: hidden;          /* niente sbordo oltre la card */
    scroll-snap-align: start;
    flex-direction: row;       /* numero + testo affiancati */
    text-align: left;
    align-items: center;
    gap: 1rem;
    transform: none !important;/* annulla il translateX(10px) di .active */
  }
  /* Senza min-width:0 il contenuto flex non si restringe e il titolo sborda
     sulla card successiva: lo forziamo ad andare a capo dentro la card. */
  .demo-content .demo-steps .step-content { min-width: 0; flex: 1 1 auto; }
  .demo-content .demo-steps .step-content h5,
  .demo-content .demo-steps .step-content p { overflow-wrap: anywhere; }

  /* =======================================================================
     3a) HOME — Filtri eventi  ->  chip a scroll orizzontale
     ======================================================================= */
  .eventi-section .event-filters {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .eventi-section .event-filters::-webkit-scrollbar { display: none; }
  .eventi-section .event-filters .filter-btn {
    flex: 0 0 auto;
    width: auto;               /* annulla il width:200px del @576 */
    white-space: nowrap;
    padding: 0.5rem 1.05rem;
    font-size: 0.8rem;
    scroll-snap-align: start;
  }

  /* =======================================================================
     3b) HOME — Mappa eventi  ->  collassata di default, "Mostra la mappa"
     La mappa 3D (Babylon) è pesante: su mobile parte SOLO al tap sul bottone
     (vedi loader in index.html), evitando ~4 MB di librerie a chi non la apre.
     ======================================================================= */
  .eventi-section .event-map-container { min-height: 0; gap: 0; }

  /* Stato collassato (default su mobile): mostra solo il bottone. */
  .eventi-section .event-map-container .map-header,
  .eventi-section .event-map-container #italy-map-container,
  .eventi-section .event-map-container .map-controls,
  .eventi-section .event-map-container .selected-event-info { display: none; }

  .map-toggle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: 14px;
    background: var(--white);
    color: var(--primary-color);
    font-weight: 600;
  }

  /* Stato aperto: mostra tutto, nasconde il bottone. */
  .eventi-section .event-map-container.map-open .map-header { display: block; margin-top: 6px; }
  .eventi-section .event-map-container.map-open #italy-map-container { display: block; min-height: 58vh; }
  .eventi-section .event-map-container.map-open .map-controls { display: flex; flex-wrap: wrap; }
  .eventi-section .event-map-container.map-open .selected-event-info { display: block; }
  .eventi-section .event-map-container.map-open .map-toggle-mobile { display: none; }

  /* =======================================================================
     4) HOME — Team  ->  carosello orizzontale a snap
     ======================================================================= */
  .team-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* proximity (non mandatory) + touch-action: pan-x -> lo scroll orizzontale
       non resta "bloccato" col touch (mandatory + Lenis lo incastrava). */
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Le due .row.team-grid hanno inline style="justify-content:center", che
       con overflow spinge le card fuori schermo a sinistra e rompe lo scroll:
       forziamo l'allineamento a sinistra. */
    justify-content: flex-start !important;
    scroll-padding-left: 12px;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid > [class*="col-"] {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
  /* Le card team/alumni sono anim-hidden (opacity:0): nel carosello il reveal
     on-scroll non scatta per quelle fuori schermo -> forziamo la visibilità
     (era il motivo per cui gli Alumni non comparivano). */
  .team-grid .team-member-card {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Divisione chiara tra membri ATTUALI e ALUMNI (passati): gli alumni restano
     subito sotto al team, come sezione separata con il proprio scroll. */
  .alumni-divider {
    margin-top: 1.75rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(57, 136, 141, 0.18);
  }
  .alumni-divider .section-title { font-size: 2rem !important; }

  /* =======================================================================
     5) CAROSELLO ORIZZONTALE CONDIVISO
     Applicato ai contenitori con classe .mob-hscroll (aggiunta nell'HTML ai
     .row generici) e ad alcune griglie già dotate di classe propria.
     ======================================================================= */
  .mob-hscroll,
  .imensa-features,
  .about-features,
  .insights-grid,
  .methodology-timeline,
  .concept-cards,
  .stakeholder-cards {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0.6rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mob-hscroll::-webkit-scrollbar,
  .imensa-features::-webkit-scrollbar,
  .about-features::-webkit-scrollbar,
  .insights-grid::-webkit-scrollbar,
  .methodology-timeline::-webkit-scrollbar,
  .concept-cards::-webkit-scrollbar,
  .stakeholder-cards::-webkit-scrollbar { display: none; }

  .mob-hscroll > *,
  .imensa-features > *,
  .about-features > *,
  .insights-grid > *,
  .methodology-timeline > .timeline-step,
  .concept-cards > *,
  .stakeholder-cards > * {
    flex: 0 0 82%;
    min-width: 82%;
    max-width: 82%;
    scroll-snap-align: start;
    margin-bottom: 0 !important;   /* annulla eventuali mb-4 delle col */
    opacity: 1 !important;         /* card sempre visibili nel carosello */
  }

  /* Affordance "scorri": chevron ancorato al bordo destro (resta visibile
     mentre si scorre grazie a position:sticky). Bg-agnostico. */
  .mob-hscroll::after,
  .imensa-features::after,
  .about-features::after,
  .insights-grid::after,
  .methodology-timeline::after,
  .concept-cards::after,
  .stakeholder-cards::after,
  .demo-content .demo-steps::after,
  .team-grid::after {
    content: "\203A";              /* › */
    position: sticky;
    right: 2px;
    flex: 0 0 auto;
    align-self: center;
    margin-left: -30px;            /* non allarga il contenuto scrollabile */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(20, 30, 40, 0.32);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
  }

  /* =======================================================================
     6) GRIGLIE 2×2 (invece di 4 card impilate)
     ======================================================================= */
  .event-stats { grid-template-columns: 1fr 1fr !important; gap: 0.75rem; }
  .event-stats .stat-card { padding: 1.1rem 0.6rem; }
  .event-stats .stat-icon { width: 48px; height: 48px; }
  .event-stats .stat-content h3 { font-size: 1.7rem; }
  .event-stats .stat-content p { font-size: 0.8rem; margin: 0; }

  /* (.insights-grid ora è un carosello orizzontale, vedi sezione caroselli) */

  /* Reset per "Architettura Computazionale" (.methodology-timeline) reso
     carosello: via la spina verticale e lo zigzag odd/even, card visibili. */
  .methodology-timeline { max-width: none; margin: 1.5rem 0; padding: 0; }
  .methodology-timeline .timeline-path { display: none; }
  .methodology-timeline .timeline-step {
    width: auto;
    left: auto !important;
    margin-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .methodology-timeline .step-number { position: static; font-size: 2.6rem; }

  /* Timeline PERCORSO "La Nostra Storia" (.timeline-section .timeline) -> orizzontale.
     NB: la timeline EVENTI (.events-timeline) resta VERTICALE com'era. */
  .timeline-section .timeline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: none;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .timeline-section .timeline::-webkit-scrollbar { display: none; }
  .timeline-section .timeline::before { display: none; }   /* spina verticale via */
  .timeline-section .timeline .timeline-item {
    flex: 0 0 84%;
    min-width: 84%;
    max-width: 84%;
    flex-direction: column !important;  /* data sopra, contenuto sotto */
    align-items: stretch !important;
    text-align: left !important;
    margin: 0 !important;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
  }
  .timeline-section .timeline .timeline-date {
    align-self: flex-start;
    margin: 0 0 8px 0 !important;
  }
  .timeline-section .timeline .timeline-content {
    margin: 0 !important;
    width: auto;
  }

  /* =======================================================================
     7) FOOTER compatto (era alto ~2,2× lo schermo)
     Brand a tutta larghezza, poi Explore | Projects affiancati, poi Contatti.
     ======================================================================= */
  .footer { padding: 28px 0 14px; }
  .footer .footer-main { margin-bottom: 10px; }
  .footer .footer-main > [class*="col-"] { margin-bottom: 12px !important; }
  .footer .footer-main > div:nth-child(1) { flex: 0 0 100%; max-width: 100%; }  /* Brand */
  .footer .footer-main > div:nth-child(2),
  .footer .footer-main > div:nth-child(3) { flex: 0 0 50%; max-width: 50%; }     /* Explore | Projects */
  .footer .footer-main > div:nth-child(4) { flex: 0 0 100%; max-width: 100%; }   /* Contatti */

  /* Menu link allineati a sinistra; Explore (8 link) su 2 colonne per
     dimezzarne l'altezza. Brand e Contatti restano centrati. */
  .footer .footer-links { text-align: left; }
  .footer .footer-links h5::after { left: 0; transform: none; }
  .footer .footer-links a { display: inline-flex; }
  .footer .footer-main > div:nth-child(2) .footer-links ul { column-count: 2; column-gap: 0.6rem; }

  .footer-brand .footer-logo { max-height: 50px; margin-bottom: 0.55rem; }
  .footer-description { margin-bottom: 0.7rem; font-size: 0.86rem; }
  .footer-brand .social-links { margin-bottom: 0; }
  .footer-links h5, .footer-contact h5 { margin-bottom: 0.5rem; font-size: 1rem; }
  .footer-links ul { margin-bottom: 0.2rem; }
  .footer-links li { margin-bottom: 0.28rem; }
  .contact-info { margin-bottom: 0.5rem; }
  .contact-item { margin-bottom: 0.5rem; }
  .footer-bottom { padding-top: 0.8rem; }
}

/* =========================================================================
   Schermi molto stretti (≤430px): l'hero della home riduce il titolo così
   parole lunghe come "Innovazione." non toccano il bordo.
   ========================================================================= */
@media (max-width: 430px) {
  .hero .hero-title,
  .hero-content .hero-title { font-size: clamp(2rem, 9.2vw, 2.7rem) !important; line-height: 1.1; }
}