/* =============================================
   MBcRETICA — stylesheet dedicato al mobile
   Regole aggiuntive, separate da style.css,
   attive solo sotto i 768px.
   ============================================= */

@media (max-width: 768px) {

    /* ---- Blocca ogni overflow orizzontale: la pagina non deve mai sforare i 100vw ---- */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .main-header, .hero, .section, .main-footer, .footer-inner {
        max-width: 100vw;
    }

    /* Il badge anno della timeline è tirato indietro di 2.5rem: allineato alla
       riduzione del padding (2.5rem -> 2rem) applicata da style.css su mobile,
       altrimenti sporge di mezzo rem oltre il bordo sinistro della sezione. */
    .timeline__year { left: -2rem; }

    /* ---- Valori (Innovazione, Etica, Affidabilità, Collaborazione): erano
       in griglia 2x2 (regola di style.css a 1024px), troppo stretta su
       telefono: ogni card scendeva sotto i 90px di contenuto utile. ---- */
    .cards--4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .cards--4 .card {
        padding: 1.5rem;
    }

    /* ---- Tutti i pulsanti: una sola riga, centrati, larghezza piena ---- */
    .btn-hero,
    .btn-header-cta,
    .btn-submit,
    .btn-whatsapp,
    .btn-pill,
    .cta-card__btn,
    .footer-social__btn,
    .gov-card__btn,
    .wb-platform-card__header .btn-hero {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        align-self: stretch;
    }

    /* Pulsanti dentro le card (es. ecosistema brand): occupano tutta la larghezza disponibile */
    .panel__btn { align-self: stretch; }

    /* Contenitori che affiancano più pulsanti: li impilano invece di metterli in riga */
    .hero__actions,
    .section__cta,
    .wb-platform-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    /* ---- Footer: le 4 colonne impilate erano tutte allineate a sinistra,
       senza separazione tra un blocco e l'altro. Le centriamo e aggiungiamo
       una linea divisoria tra un blocco e l'altro, per un risultato più
       ordinato da leggere in colonna unica. ---- */
    .footer-inner { gap: 2.5rem; text-align: center; padding-bottom: 2.5rem; }

    .footer-brand, .footer-nav, .footer-col, .footer-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-brand, .footer-nav, .footer-col {
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0,88,102,.12);
    }
    .footer-col { gap: 1.5rem; }

    .footer-garanzie-card { width: 100%; max-width: 320px; }
    .footer-nav ul { align-items: center; }
    .footer-policy-badges { align-items: center; }

    /* Riga finale: copyright e dati legali impilati e centrati invece che in riga */
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: .6rem;
    }
    .footer-legal { line-height: 1.8; }

    /* ---- Pagina Retica: alcune griglie usavano colonne "1fr"/"repeat()" senza
       un minimo di 0, quindi se il contenuto di una card non poteva restringersi
       abbastanza, la griglia si allargava oltre il contenitore e "sbordava".
       Aggiungiamo minmax(0, 1fr) ovunque e permettiamo alle card di restringersi. ---- */
    .cog-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
    .cog-aderenti {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }
    .retica-network-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .cog-wrapper, .cog-aderenti, .retica-network-row,
    .cog-wrapper > *, .cog-aderenti > *, .retica-network-row > * {
        min-width: 0;
    }

    /* ---- Card CTA navy (Partner24 "Un network di competenze al tuo
       servizio", Cluster SCP "Domande sulla governance"): usano stile
       inline con margin:0 auto e max-width:900px. Su desktop lo spazio
       in eccesso del viewport la centra da sola; sotto i 900px il margine
       "auto" si azzera e la card tocca i bordi dello schermo, tagliando
       anche gli angoli arrotondati. Forziamo un margine laterale fisso
       (serve !important per battere lo style inline). ---- */
    .section--cta-navy {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
}