/* ===============
   LE PAGINE DEI GRUPPI SU TELEFONO - stile mobile, non un desktop rimpicciolito.
   --------------------------------------------------------------------------
   Richiesta del titolare (13/09/2026): "in mobile e' meglio che sia in stile
   mobile".

   Cosa vuol dire, in concreto:
     . i comandi si prendono TUTTA la larghezza e sono alti almeno 44-46px
       (sotto quella misura il dito sbaglia bersaglio);
     . le schede (Bacheca, Informazioni, Persone, Regole) SCORRONO di lato invece
       di andare a capo e schiacciarsi;
     . i campi di testo stanno a 16px: sotto i 16px iOS ingrandisce la pagina da
       solo quando tocchi un campo;
     . le azioni delle persone non stanno schiacciate a destra: vanno sotto;
     . la barra dei passi del percorso si appoggia SOPRA la barra di navigazione
       (58px), altrimenti la copre;
     . il contenuto non finisce mai sotto la barra di navigazione.
   =============== */

@media (max-width: 720px) {
    /* 1. comandi a tutta larghezza, comodi per il dito */
    .gr-app .gr-cta { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    .gr-app .gr-cta .gr-btn { width: 100%; min-height: 46px; justify-content: center; font-size: .95rem; }
    .gr-app .gr-btn--piccolo { min-height: 38px; padding: .45rem .7rem; }
    .gr-app .gr-btn {min-height: 42px;background: var(--background-card-border);}

    /* 2. schede che scorrono di lato (niente capo e schiacciamento) */
    .gr-app .gr-tabbar {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; margin-bottom: .7rem;
    }
    .gr-app .gr-tabbar::-webkit-scrollbar { display: none; }
    .gr-app .gr-tab { flex: 0 0 auto; padding: .7rem .9rem; }

    /* 3. testata del gruppo: copertina piu' bassa, titolo leggibile.
       L'ALTEZZA E' UN MINIMO, NON UNA MISURA FISSA (28/09/2026): se il contenuto della testata e' piu'
       alto (nome su due righe, caratteri di sistema grandi) la copertina cresce con lui invece di
       tagliarlo. Vedi il commento grande in groups-social.css. */
    .gr-app .gr-hero { border-radius: 14px; min-height: 168px; }
    .gr-app .gr-hero__dentro { padding: 1rem .9rem .9rem; }
    .gr-app .gr-hero__dentro h1 { font-size: 1.25rem; }
    .gr-app .gr-hero__tasti { gap: .4rem; }
    /* 3-bis. LA RIGA DELLA TESTATA NON CRESCE PIU' (28/09/2026). Qui c'era una griglia a QUATTRO
       colonne da 183px che scorreva di lato: i tasti coprivano la copertina, cioè la foto del
       gruppo. Adesso la testata ha un tasto solo e i tre puntini (vedi groups-social.css), la riga
       sta in una linea e i tasti tornano alti da dito: 44px, qui erano 35. */
    .gr-app .gr-hero__tasti {display: flex;gap: .4rem;align-items: center;}
    .gr-app .gr-hero__tasti .gr-btn {min-height: 44px;}

    /* 4. righe delle persone: le azioni vanno SOTTO, non schiacciate a destra */
    .gr-app .gr-riga { padding: .6rem .65rem; }
    .gr-app .gr-riga__azioni { width: 100%; margin-left: 0; justify-content: flex-start; }
    .gr-app .gr-avatar, .gr-app .gr-faccia { width: 38px; height: 38px; }

    /* 5. schede piu' strette di margini, testi piu' leggibili */
    .gr-app .gr-card { padding: .9rem .85rem 1rem; border-radius: 14px; }
    .gr-app .gr-card__nota, .gr-app .gr-nota,
    .gr-app .gr-testo, .gr-app .gr-regole {font-size: .7rem;line-height: 1.55;}
    .gr-app .gr-riepilogo__lungo dd { font-size: .9rem; }

    /* 6. campi a 16px: sotto, iOS ingrandisce la pagina da solo */
    .gr-app .gr-input, .gr-app .gr-area, .gr-app .mood-select { font-size: 16px; min-height: 46px; }

    /* 7. il contenuto non finisce sotto la barra di navigazione */
    body.st-body { padding-bottom: calc(var(--app-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 8px); }

    /* 8. la barra dei passi si appoggia SOPRA la barra di navigazione */
    body.st-body .gr-app .gr-barra-passi,
    body.st-body .gr-barra-passi {
        bottom: calc(var(--app-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    }
    .gr-app .gr-barra-passi { padding: .6rem 0 .6rem; }
}

/* Telefoni stretti: ancora piu' essenziale. */
@media (max-width: 420px) {
    .gr-app .gr-hero { min-height: 150px; }
    .gr-app .gr-hero__dentro h1 { font-size: 1.15rem; }
    .gr-app .gr-card { padding: .8rem .75rem .9rem; }
    .gr-app .gr-puntini { display: none; }   /* nel percorso: i puntini rubano spazio */
}