/* ============================================================================
   Multidialogo — mobile.css
   Regole responsive comuni a TUTTE le pagine. Caricato per ultimo, così
   sovrascrive gli stili di pagina.
     1) Padding laterale 5% su mobile.
     2) Sezioni "testo + immagine a destra" (desktop) -> su mobile l'immagine
        va sopra e il testo sotto.
   ============================================================================ */

/* ---- 1) Padding laterale 5% su mobile (tutte le pagine) ---------------- */
@media (max-width: 768px) {
  /* Pagine DS5 (home, servizi, chi-siamo, ...) e blog: il gutter dei .container
     dipende da --page-pad, qui forzato a 5%. */
  .ip { --page-pad: 5%; }

  /* Webinar: elenco (/webinar) e schede singole (/webinar/<slug>). */
  .wb-container { padding-left: 5%; padding-right: 5%; }

  /* Pagine di contenuto (perche-integrare, aggiornamenti, cookie-policy,
     multicerta-manuale-app, iscriviti-alla-newsletter): senza gutter proprio. */
  .cp .cp-hero,
  .cp .cp-section { padding-left: 5%; padding-right: 5%; }

  /* MultiTalk (pagina scura standalone). */
  .mt-nav, .mt-hero, .mt-ep, .mt-guests-hd, .mt-guests,
  .mt-infos, .mt-cta, .mt-concluso-band, .mt-foot {
    padding-left: 5% !important; padding-right: 5% !important;
  }
}

/* ---- 2) Testo + immagine a destra -> su mobile immagine sopra, testo sotto -
   Le sezioni a due colonne del DS collassano a una colonna a <=980px: qui la
   colonna immagine (ultimo figlio della griglia) viene portata in cima. --- */
@media (max-width: 980px) {
  .ip-hero-in > :last-child,     /* hero pagine: colonna .ip-visual (immagine) */
  .value-in > :last-child,       /* chi siamo: "I nostri valori" (.value-illus) */
  .mf-guarda-grid > :last-child  /* multinforma: "Guarda dove e quando vuoi" */
  { order: -1 !important; }

  /* Hero: testo, icona e pulsanti centrati su mobile */
  .ip-hero-in { text-align: center; }
  .ip-hero-in .ip-hero-icon { margin-left: auto; margin-right: auto; }
  .ip-hero-in .ip-sub { margin-left: auto; margin-right: auto; }  /* ha max-width -> centrata */
  .ip-hero-in .ip-cta-row { justify-content: center; }

  /* Foto hero dei servizi: piccola e centrata su mobile, per uniformare il
     visual tra le pagine servizi (evita anche l'overflow orizzontale dovuto
     alle immagini a 108-112% di larghezza). */
  .ip-visual { justify-content: center !important; }
  .ip-visual img {
    max-width: 100% !important; width: auto !important;
    max-height: 200px !important; height: auto !important;
    margin-left: auto; margin-right: auto;
  }
}

/* ---- 2b) Multinvio: su smartphone niente immagine hero, la CTA sale su ----
   Il grande envelope della hero Multinvio occupa tutto il primo schermo su
   telefono: lo nascondo così testo, icona e pulsanti risalgono in cima. */
@media (max-width: 768px) {
  .mv-hero-visual { display: none !important; }
}

/* ---- 4) Slider servizi (multicerta / multinvio) — navigazione a frecce -----
   Desktop: restano le frecce laterali (.slider-arrow) + i dots assoluti; i
   pulsanti-freccia in basso sono nascosti. Smartphone: via immagini e frecce
   laterali (i "caret"); i dots scendono nel flusso e compaiono i pulsanti con
   le icone freccia, in basso, sotto testo e CTA. --------------------------- */
.slider-navbtn { display: none; }   /* visibili solo su smartphone */

@media (max-width: 768px) {
  /* solo testo + CTA: niente immagine */
  .slider-visual { display: none !important; }
  /* via le frecce laterali (i "caret") */
  .slider-arrow { display: none !important; }
  /* la sezione non deve più tenere l'altezza della colonna immagine */
  .slider-in { min-height: auto; padding-top: 64px; padding-bottom: 24px; }
  /* navigazione in basso, nel flusso del documento */
  .slider-dots { position: static; transform: none; left: auto; bottom: auto; }
  .slider-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; margin: 6px 0 44px;
  }
  .slider-navbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    border: 1.5px solid var(--md-blu-multi); background: transparent;
    color: var(--md-blu-multi); cursor: pointer;
    transition: background .15s, color .15s;
  }
  .slider-navbtn:hover, .slider-navbtn:active { background: var(--md-blu-multi); color: #fff; }
  /* contenuti centrati (titolo, testo, CTA) */
  .slider-text { text-align: center; }
  .slider-text p { margin-left: auto; margin-right: auto; }
  /* CTA più piccola (di default è 24px / 22px 52px) */
  .slider-attiva { font-size: 15px; padding: 13px 28px; margin-top: 22px; }
}

/* ---- 5) Spazio in alto uniforme (~20px) sotto il menu, su mobile ----------
   L'header fisso (72px) è già compensato da body{padding-top:72px}; le hero,
   però, aggiungono un grosso padding-top (pensato per il vecchio layout) che su
   mobile lascia un vuoto enorme. Lo riporto a ~20px: il contenuto non è
   attaccato al menu, ma nemmeno troppo staccato. Le pagine webinar/multitalk
   hanno header nel flusso (nessun body offset): il loro padding-top è solo
   spazio bianco, quindi vale la stessa riduzione. --------------------------- */
@media (max-width: 980px) {
  /* pagine DS (servizi, azienda, multipremio, team): niente hero a tutta
     altezza, altrimenti il testo resta centrato verticalmente e "scende". */
  .ip-hero, .team-page .ip-hero { min-height: auto; }
  .ip-hero-in,
  .cs-hero .ip-hero-in,
  .team-page .ip-hero-in { padding-top: 20px; }
  /* home */
  header.hero { padding-top: 20px; }
  /* blog (lista + articolo) */
  .blog-hero-in { padding-top: 20px; }
  /* pagine di contenuto (perche-integrare, aggiornamenti, cookie-policy, ...) */
  .cp-hero { padding-top: 20px; }
  /* webinar: elenco (.wl-hero-in) e scheda singola (.wb-hero-in) */
  .wl-hero-in, .wb-hero-in { padding-top: 20px; }
}

/* ---- 3) HOME — hero: icona Multidialogo centrata e slider tablet sopra la CTA -
   La hero home ha una colonna testo (icona, h1, sub, CTA, rating) + lo slider
   come seconda colonna. Su mobile "appiattisco" la colonna testo con
   display:contents e riordino: così lo slider tablet finisce sopra i pulsanti. */
@media (max-width: 860px) {
  .hero-in { display: flex; flex-direction: column; align-items: center; }
  .hero-in > div:first-child { display: contents; }   /* appiattisce la colonna testo */
  .hero-in .hero-mark   { order: 1; margin-left: auto; margin-right: auto; }
  .hero-in h1           { order: 2; }
  .hero-in .sub         { order: 3; }
  .hero-in .hero-slider { order: 4; }                  /* slider sopra la CTA */
  .hero-in .hero-cta    { order: 5; }
  .hero-in .fineprint   { order: 6; }
  .hero-in .rating      { order: 7; }
}

/* ---- 6) Scala tipografica uniforme su smartphone -------------------------
   Titoli 24px · subheading 16px · testi 15px, in tutto il sito. Coprono le
   pagine DS, home, blog, pagine di contenuto, webinar, multitalk e lo slider.
   NB: escludo di proposito i micro-titoli delle card e le etichette del chrome
   (nav/footer), che a 24px romperebbero i layout. --------------------------- */
@media (max-width: 768px) {
  /* --- Titoli (hero h1 + titoli di sezione h2) → 24px --- */
  .ip-h1, .ip-h2, .ip-shead h2, .mp-closing h2, .mp-shead h2,
  .hero h1, .h2-ds, .prob-body h2, .hmp-left h2, .cta-box h2,
  .numbers-title, .num-n, .value-title, .mav-slide-title,
  .cp-hero h1, .cp-section h2, .cp-cta h2, .cp-prose h2,
  .bl-hero h1, .bl-article-head h1, .bl-feat h2, .bl-section-title, .bl-content h2, .bl-empty h2,
  .wl-hero h1, .wb-hero-in h1, .mt-h1, .slider-text h2 {
    font-size: 24px !important; line-height: 1.2 !important;
  }
  /* span-riga interni che avevano una dimensione propria */
  .prob-body h2 .pl1, .prob-body h2 .pl2 { font-size: 24px !important; }

  /* --- Subheading (lead sotto il titolo) → 16px --- */
  .ip-sub, .hero .sub, .cp-lead, .wl-hero-lead, .mt-sub {
    font-size: 16px !important; line-height: 1.5 !important;
  }

  /* --- Testi (corpo) → 15px --- */
  .ip-section p, .ip-shead p, .slider-text p,
  .cp-section p, .cp-prose p, .cp-prose li,
  .bl-content p, .bl-content li,
  .mt-ep p, .wl-hero p {
    font-size: 15px !important; line-height: 1.6 !important;
  }
}

/* ---- 7) Blog — mobile: hero centrato, meno spazio prima della card ---------
   Centra logo, titolo e testo della hero; riduce il vuoto tra hero e prima
   card; centra l'intestazione "In evidenza" e i tab (Ultimi articoli/Popolari).
   NB: h1 (max-width:15ch) e .lead (max-width:560px) vanno centrati con margin
   auto, non basta text-align sul contenitore. -------------------------------- */
@media (max-width: 768px) {
  /* hero: tutto centrato */
  .blog-hero-in { text-align: center; padding-bottom: 28px; }
  .blog-hero-mark,
  .blog-hero h1,
  .blog-hero .lead { margin-left: auto; margin-right: auto; }
  /* avvicina la card "In evidenza" alla hero */
  .blog-feat { padding-top: 22px; }
  /* intestazione "In evidenza" + tab centrati e impilati */
  .blog-feat-head {
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  }
}