/**
 * Usatomania Theme Hooks — Homepage a tessere
 *
 * Segnalazione del 28/08: "in homepage facciamo i bordi arrotondati e metti
 * un po' di spazio sotto, vorrei sembrasse una card le varie sezioni".
 *
 * ROLLBACK — questo file è isolato apposta. Per tornare indietro basta
 * togliere la riga 'usm-homepage-card' dall'elenco $sections in
 * inc/class-enqueue.php e alzare USM_TH_VERSION: nessun'altra regola del
 * progetto dipende da qui.
 *
 * Le misure sotto vengono dalla pagina reale: le sezioni erano separate da
 * 64 px di margine e la mappa in fondo occupava 700 px anche su telefono.
 */

/* ── Le sezioni diventano tessere ─────────────────────────────
   Si toccano solo le sezioni di contenuto: l'apertura (hero) e la mappa
   restano a tutta larghezza, perché sono immagini che vivono di bordo a
   bordo. Il selettore prende le sezioni intermedie della sola home. */
body.home .elementor > .elementor-top-section:not(:first-child):not(:last-child),
body.home .elementor > .e-con:not(:first-child):not(:last-child) {
    border-radius: 20px;
    overflow: hidden;
}

/* Lo stacco fra una tessera e l'altra: 64 px erano un salto, 28 tengono le
   sezioni distinte senza spezzare la lettura. */
body.home .elementor > .elementor-top-section,
body.home .elementor > .e-con {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

body.home .elementor > .elementor-top-section:last-child,
body.home .elementor > .e-con:last-child {
    margin-bottom: 0 !important;
}

/* ── La mappa ─────────────────────────────────────────────────
   700 px su uno schermo da 844 significa una schermata intera di mappa
   prima di arrivare al footer: su telefono ne bastano 320. */
@media (max-width: 767.98px) {
    body.home [data-widget_type="google_maps.default"] iframe,
    body.home .elementor-widget-google_maps iframe {
        height: 320px !important;
    }

    body.home .elementor > .elementor-top-section,
    body.home .elementor > .e-con {
        margin-bottom: 20px !important;
    }

    body.home .elementor > .elementor-top-section:not(:first-child):not(:last-child),
    body.home .elementor > .e-con:not(:first-child):not(:last-child) {
        border-radius: 16px;
    }
}