/* ==========================================================================
   HERO (page d'accueil) — Responsive (FRONT-END uniquement).
   Charge via wp_enqueue_style('cdp-hero') — PAS dans l'editeur (le
   reordonnancement ne doit pas s'appliquer au canvas etroit d'edition).

   Le DESKTOP (>= 1024px) est strictement inchange : toutes les regles sont
   sous @media (max-width: 1023.98px).

   Hook : la hero est le 1er groupe du contenu de la page.
   Scope = .entry-content > .wp-block-group:first-child > .wp-block-columns
   ========================================================================== */

@media (max-width: 1023.98px) {

    /* --- Empilement (aligne sur la navbar : < 1024px) --- */
    .entry-content > .wp-block-group:first-child > .wp-block-columns {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* On "aplatit" les deux colonnes pour que leurs enfants deviennent les
       items flex de la hero -> permet d'entrelacer texte (col. gauche) et
       video (col. droite) dans l'ordre voulu. */
    .entry-content > .wp-block-group:first-child > .wp-block-columns > .wp-block-column {
        display: contents !important;
    }

    /* --- Ordre mobile : Titre -> sous-titre -> VIDEO -> preuves -> CTA --- */
    .entry-content > .wp-block-group:first-child > .wp-block-columns h1 {
        order: 1 !important;
    }
    .entry-content > .wp-block-group:first-child > .wp-block-columns > .wp-block-column > p {
        order: 2 !important; /* sous-titre */
    }
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-embed {
        order: 3 !important; /* video remontee */
        width: 100% !important; /* sinon la boite aspect-ratio collapse a 0 en flex */
    }
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-group-is-layout-constrained {
        order: 4 !important; /* bloc de stats (preuves sociales) */
    }
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-group.is-content-justification-left.wp-block-group-is-layout-flex {
        order: 5 !important; /* groupe CTA */
    }

    /* --- Masquer les annotations manuscrites une fois empile --- */
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-image.alignright {
        display: none !important; /* « decouvrez la methode en video » */
    }
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-buttons + .wp-block-image {
        display: none !important; /* fleche « c'est gratuit » */
    }

    /* --- Neutraliser les <br> manuels du titre (wrap naturel en mobile) --- */
    .entry-content > .wp-block-group:first-child > .wp-block-columns h1 br {
        display: none !important;
    }

    /* --- Centrage du contenu de la hero (titre, sous-titre, preuves, CTA) --- */
    .entry-content > .wp-block-group:first-child > .wp-block-columns h1,
    .entry-content > .wp-block-group:first-child > .wp-block-columns > .wp-block-column > p {
        text-align: center !important;
    }
    /* Preuves sociales (2 lignes flex) + groupe CTA : centrer les groupes flex
       justifies a gauche. La video (pleine largeur) n'est pas concernee. */
    .entry-content > .wp-block-group:first-child > .wp-block-columns .wp-block-group.is-content-justification-left {
        justify-content: center !important;
    }
}