/* ==========================================================================
   Responsive della landing Geomarketing (Kairos)
   Caricato dopo kairos-header.css: corregge hero, frecce, sezioni e ancore
   ========================================================================== */

/* --- ancore: offset uguale all'header nello stato di ARRIVO --------------
   Appena la pagina scorre (>24px) la top bar si chiude e la navbar si riduce
   a --kairos-nav-h-scrolled (64px, 80px da 1024px): e' quella l'altezza che
   copre la sezione quando lo scroll finisce, non i 152/168px dell'header a
   riposo. Usando l'altezza a riposo la sezione atterrava ~90px troppo in
   basso. Nessun margine in piu': la sezione si attacca sotto la navbar, come
   fa lo script dei link del menu in index.html. */
#perche, #cosa, #dove, #metodo, #contatti {
    scroll-margin-top: var(--kairos-nav-h-scrolled);
}
/* la hero sta in cima alla pagina: un margine alto quanto la viewport
   riporta sempre lo scroll a 0 (il browser lo limita da solo) */
#home {
    scroll-margin-top: 100vh;
}

/* --- hero: tipografia --------------------------------------------------- */
#home h1 {
    font-size: 34px;
    line-height: 1.12;
    margin-bottom: 20px;
}
#home .fs-20 {
    font-size: 17px;
    line-height: 1.6;
}
#home .fs-20 p {
    margin-bottom: 14px;
}
#home .fs-20 p:last-child {
    margin-bottom: 0;
}
/* gli a capo forzati del titolo hanno senso solo sul desktop largo */
@media (max-width: 1199px) {
    #home h1 br {
        display: none;
    }
}
@media (min-width: 576px) {
    #home h1 {
        font-size: 40px;
    }
}
@media (min-width: 768px) {
    #home h1 {
        font-size: 46px;
        margin-bottom: 25px;
    }
    #home .fs-20 {
        font-size: 18px;
    }
}
@media (min-width: 992px) {
    #home h1 {
        font-size: 56px;
        line-height: 1.08;
        margin-bottom: 30px;
    }
}
@media (min-width: 1200px) {
    #home h1 {
        font-size: 64px;
        line-height: 1.05;
    }
    #home .fs-20 {
        font-size: 19px;
    }
}
@media (min-width: 1400px) {
    #home h1 {
        font-size: 70px;
        line-height: 70px;
    }
    #home .fs-20 {
        font-size: 20px;
    }
}

/* --- hero: sotto i 992px l'altezza segue il contenuto ------------------- */
@media (max-width: 991px) {
    section#home {
        height: auto !important;
        min-height: 0 !important;
    }
    #home .swiper {
        height: auto;
    }
    #home .swiper-slide {
        height: auto;
        padding: 60px 0 90px; /* spazio in basso per i pallini/frecce */
    }
    #home .swiper-slide .container {
        height: auto !important;
    }
    /* il padding percentuale della riga (xl-ps-10) sotto i 1200px toglie solo spazio al testo */
    #home .swiper-slide .row {
        padding-left: 0 !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #home .swiper-slide .row {
        padding-left: 0 !important;
    }
    /* righe di testo non troppo lunghe */
    #home .swiper-slide .kairos-hero__copy {
        max-width: 860px;
    }
}
@media (max-width: 767px) {
    #home .swiper-slide {
        padding: 50px 0 80px;
    }
    #home .swiper-pagination-bullets {
        bottom: 28px;
    }
}

/* --- hero: frecce ------------------------------------------------------- */
/* sotto i 768px: solo pallini */
@media (max-width: 767px) {
    #home .slider-one-slide-prev-1,
    #home .slider-one-slide-next-1 {
        display: none !important;
    }
}
/* 768–1699px: coppia di frecce in basso a destra, allineata al bordo del contenitore */
@media (min-width: 768px) and (max-width: 1699px) {
    #home .slider-one-slide-prev-1,
    #home .slider-one-slide-next-1 {
        top: auto;
        bottom: 30px;
        left: auto;
        margin-top: 0;
        transform: none;
    }
    #home .slider-one-slide-next-1 {
        right: calc((100% - 720px) / 2);
    }
    #home .slider-one-slide-prev-1 {
        right: calc((100% - 720px) / 2 + 72px);
    }
}
@media (min-width: 992px) and (max-width: 1699px) {
    #home .slider-one-slide-next-1 {
        right: calc((100% - 960px) / 2);
    }
    #home .slider-one-slide-prev-1 {
        right: calc((100% - 960px) / 2 + 72px);
    }
}
@media (min-width: 1200px) and (max-width: 1699px) {
    #home .slider-one-slide-next-1 {
        right: calc((100% - 1140px) / 2);
    }
    #home .slider-one-slide-prev-1 {
        right: calc((100% - 1140px) / 2 + 72px);
    }
}
@media (min-width: 1400px) and (max-width: 1699px) {
    #home .slider-one-slide-next-1 {
        right: calc((100% - 1320px) / 2);
    }
    #home .slider-one-slide-prev-1 {
        right: calc((100% - 1320px) / 2 + 72px);
    }
}
/* da 1700px in su: frecce ai lati, sui margini del contenitore dell'header (regola in kairos-header.css) */

/* --- sezione "Scegliere la location giusta" ------------------------------ */
/* la texture decorativa sotto i 992px finisce dietro al testo: nascosta */
@media (max-width: 991px) {
    section.position-relative > .container > img.position-absolute {
        display: none;
    }
}

/* --- sezione "Il metodo Kairos": immagini sotto l'accordion ------------- */
@media (max-width: 991px) {
    #metodo .col-xl-6.position-relative {
        margin-top: 10px;
    }
}

/* --- footer: menu su due colonne invece di una voce per riga ------------ */
.kairos-footer-menu {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 32px;
    row-gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kairos-footer-menu li {
    margin: 0;
    padding: 0;
}
@media (max-width: 575px) {
    .kairos-footer-menu {
        justify-content: center;
    }
}

/* --- "Contatti": fascia CTA + footer ---------------------------------------
   niente min-height sul blocco: allungarlo fino alla viewport stirava il footer
   e lasciava una fascia nera vuota sotto il copyright.
   Lo scroll si ferma a fine pagina e lo scrollspy marca comunque "Contatti". */
#contatti {
    display: block;
}

/* --- sezione "Perché": mappa del mondo intera ----------------------------
   L'immagine e' larghissima (1410x448, circa 3:1) e il tema la stendeva in
   "cover" su una colonna quasi quadrata: si vedeva solo un pezzo di Asia e
   Oceania. In "contain" si vede tutta, con un po' di respiro ai lati. */
#perche .kairos-mappa {
    background-size: contain !important;
    background-position: center !important;
    background-origin: content-box;
    padding: 40px 50px;
}
/* sotto i 992px la colonna va a tutta larghezza: l'altezza fissa del tema
   (400/300px) lascerebbe fasce vuote, quindi l'altezza segue le proporzioni */
@media (max-width: 991px) {
    #perche .kairos-mappa {
        height: auto !important;
        aspect-ratio: 1410 / 448;
        box-sizing: content-box;
        padding: 30px 20px 0;
    }
}