/**
 * grapesjs.css — stili del contenuto generato dal page builder GrapeJS, sul sito PUBBLICO.
 *
 * Estratti da assets_app/css/sharevents2025.css. Riguardano SOLO il contenuto costruito col
 * page builder (wrapper .se-gjs-page, layout .gjs-row/.gjs-cell): NON il chrome dell'editor
 * (quello vive nel gestionale, manage.gogoagenda.com/web/_assets/css/grapesjs.css).
 *
 * ORDINE DI CARICAMENTO — incluso in views/templates/shared/_head.tpl DOPO main.css e
 * sharevents2025.css, così vince a parità di specificità sulle regole legacy #custom_page.
 *
 * ⚠ SEZIONE "CONTENUTO" CONDIVISA — da tenere allineata con la sezione 6 di
 *   manage.gogoagenda.com/web/_assets/css/grapesjs.css (quella caricata nel canvas dell'editor).
 *   Le stesse .gjs-row/.gjs-cell descrivono il layout che l'autore vede nell'editor e che viene
 *   pubblicato qui: se le due copie divergono, l'editor mostra un layout diverso dal pubblicato.
 *
 * La logica di layout (flex:1 1 0 base + flex-basis:auto/column a ≤767px) è ora IDENTICA a
 * quella del canvas dell'editor → l'autore vede lo stesso layout che viene pubblicato.
 *
 * ⚠ DIVERGENZE RESIDUE rispetto alla copia del canvas (manage) — intenzionali, non bug:
 *     A. gap: 10px su .gjs-row      → nel canvas SÌ, qui NO. Solo spaziatura tra colonne in
 *                                      editing; aggiungerlo qui cambierebbe le pagine già
 *                                      pubblicate → lasciato fuori di proposito.
 *     B. se-staff-avatar !important  → qui SÌ, nel canvas NO. Serve a battere
 *                                      "#custom_page img{max-width:100% !important}" di main.css,
 *                                      che nel canvas non esiste.
 *     C. scope #custom_page          → nel canvas .gjs-row è nudo; qui è #custom_page .gjs-row
 *                                      (specificità per battere le regole legacy #custom_page).
 *
 * Storico: in origine qui mancava flex:1 1 0 (celle dimensionate al contenuto) e il breakpoint
 * mobile era a 878px senza flex-direction:column → le celle con sola immagine collassavano a 0
 * in modalità riga (immagini sparite, footer sovrapposto). Riconciliato col canvas dell'editor.
 */

/* ==========================================================================
   Helper di coesistenza — neutralizzano le regole legacy sul contenuto grape
   ========================================================================== */

/* main.css ha una regola globale `h1, h2 { text-align: center }` (design legacy) che, essendo
   DIRETTA sull'h2, batte l'allineamento ereditato dalla cella → i titoli delle Sezioni grape
   (Staff, Feature, ecc.) risultavano centrati anche quando la loro colonna è a sinistra.
   Qui i titoli grape tornano a SEGUIRE la loro cella/sezione (`inherit`): quelli con allineamento
   esplicito dal design (regola per-id `.se-gjs-page #id{text-align:…}`, specificità maggiore)
   restano come sono; le pagine legacy non-grape non vengono toccate. */
.se-gjs-page h1,
.se-gjs-page h2,
.se-gjs-page h3,
.se-gjs-page h4,
.se-gjs-page h5,
.se-gjs-page h6 {
    text-align: inherit;
}

/* Contenuto del page builder GrapeJS: ogni blocco (_game/_numbers/_countdown/…) si avvolge in
   <div class="container">, il cui senso è centrarsi (max-width + margini automatici). Ma su z la
   .container base (main.css) ha SOLO il padding e la max-width, NON i margini auto → i blocchi
   restavano incollati a sinistra. Qui ripristiniamo l'auto-centratura della .container SOLO dentro
   il contenuto grape (.se-gjs-page), senza toccare le pagine legacy (Unlayer/.u_row). */
.se-gjs-page .container {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   6. CSS DEL CONTENUTO GENERATO — ⚠ allineare con la sezione 6 di manage (vedi header)
   ========================================================================== */

/* Righe/colonne del page builder (GrapeJS .gjs-row/.gjs-cell): mantieni le colonne
   affiancate. min-width:0 permette alle celle flex di restringersi e img responsive
   evita che un'immagine larga forzi il wrap (colonne impilate). */
#custom_page .gjs-row {
    display: flex;
    flex-wrap: wrap;
}

/* flex: 1 1 0 → le celle DIVIDONO lo spazio in parti uguali (come nel canvas dell'editor),
   invece di dimensionarsi al contenuto. Senza, una cella che contiene SOLO un'immagine a
   rapporto d'aspetto (background-image / padding-top%, con l'eventuale testo in overlay
   position:absolute) non riceve larghezza dal contenuto e COLLASSA a 0 in modalità riga
   (≥768px) → l'immagine sparisce e le sezioni sottostanti risalgono (es. footer che si
   sovrappone). Le regole per-id esportate dal design (.se-gjs-page #id{flex:…}, stessa
   specificità ma nel <style> inline della pagina → vincono per ordine) restano prioritarie. */
#custom_page .gjs-cell {
    flex: 1 1 0;
    min-width: 0;
}

#custom_page .gjs-cell img {
    max-width: 100%;
    height: auto;
}

/* Avatar del blocco Staff/bio: dimensioni FISSE 120x120. Due regole del frontend lo
   sovrascrivono: "#custom_page .gjs-cell img { height:auto }" (qui sopra, 1,1,1) e soprattutto
   "#custom_page img { max-width:100% !important }" in main.css. La classe marcatore
   se-staff-avatar (1,2,1) + !important vince su entrambe e blocca le dimensioni. */
#custom_page .gjs-cell img.se-staff-avatar {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    object-fit: cover;
    border-radius: 50%;
}

/* Mobile: una colonna per riga. IMPORTANTE — si impila tenendo la riga in FLEX-ROW + wrap
   e forzando ogni cella a larghezza 100%, NON con flex-direction:column. Motivo: in column
   l'altezza della cella è l'asse PRINCIPALE e Chromium NON conta il padding-% del figlio
   (un blocco a rapporto d'aspetto: background-image o .embed_16_9-container con padding-top%),
   così la cella collassa a 0 e le immagini spariscono / le sezioni sotto risalgono (footer
   sovrapposto). In row mode l'altezza è l'asse TRASVERSALE e conta il padding del figlio.
   !important batte il flex per-id esportato dal design (.se-gjs-page #id{flex:…}, stessa
   specificità → altrimenti vincerebbe lui per ordine sorgente). */
@media (max-width: 767px) {
    #custom_page .gjs-cell {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    /* .reverse: inverti l'ordine visivo con wrap-reverse (le celle 100% restano impilate) */
    #custom_page .gjs-row.reverse {
        flex-wrap: wrap-reverse;
    }
}