/* =========================================================================
   ONO – Landing "magazzini verticali automatici modulari"
   FIX RESPONSIVE: HERO + CTA + SEZIONE NUMERI

   Sostituisce landing-tablet-fix.css. Va caricato PER ULTIMO.

   Problemi corretti:
   1) .video-content veniva estratto dal flusso o traslato con valori
      tarati a mano, diversi per ogni risoluzione:
        - 768-1366 portrait  (responsive-table-phone.css) -> position:absolute
        - 768-1079 landscape (landing.css)                -> position:absolute
        - 1280-1439 (responsive-desktop.css)              -> translate(-70%, 5%)
        - 1440-1919                                       -> translate(-71.5%, 7%)
        - 1920-2559                                       -> translate(-80%, 5%)
        - 2560-3839                                       -> translate(-90%, 5%)
        - 3840+                                           -> translate(-120%, 5%)
   2) .mobile-hero-slider riceveva dimensioni fuori scala (fino a 220vh di
      altezza, 220% di larghezza, margin-left -60%) con scale() sulle
      immagini: lo sfondo non riempiva mai in modo pulito il suo spazio.
   3) Font in px fissi nei counter (95/50/30) dentro colonne col-md-3 larghe
      165-230px tra 768 e 1100px: numeri ed etichette andavano a capo.
   4) CTA con tre misure diverse per fascia (3.5vw / 15px / 16px), quindi
      pulsanti sproporzionati tra 600 e 767px.

   Principio: nessun valore calibrato per singola risoluzione. Altezza hero
   legata all'header misurato via JS (--header-h), contenuto centrato dal
   flex, sfondo in object-fit: cover, tipografia in clamp().
   ========================================================================= */

/* =========================================================
   A. HERO — struttura, valida da tablet in su
   ========================================================= */
@media (min-width: 768px) {

    /* A1. Contenuto nel flusso, alto quanto la prima schermata utile.
       --header-h e' scritto dal JS in fondo alla pagina; 110px e' il
       fallback se il JS non gira. svh evita lo scroll fantasma causato
       dalla barra del browser su iOS e Android. */
    .video-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 1400px !important;
        height: auto !important;
        min-height: calc(100vh - var(--header-h, 110px)) !important;
        min-height: calc(100svh - var(--header-h, 110px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 48px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 2 !important;
    }

    /* A2. Il blocco titolo + sottotitolo + CTA occupa lo spazio libero e si
       centra al suo interno; il blocco loghi clienti resta appoggiato in
       fondo all'hero. */
    .video-content > .row:first-of-type {
        flex: 1 1 auto !important;
        align-items: center !important;
    }

    .video-content > .row + .row {
        flex: 0 0 auto !important;
    }

    /* A3. Sfondo: copre esattamente la sezione, senza margini negativi
       ne' scale() */
    .mobile-hero-slider,
    .mobile-hero-slider.d-none.d-md-block {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mobile-hero-slider .hero-mobile-swiper,
    .mobile-hero-slider .swiper-wrapper,
    .mobile-hero-slider .swiper-slide {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .mobile-hero-slider .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        top: 0 !important;
        left: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* A4. Overlay a copertura piena */
    .video-overlay {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* =========================================================
   B. TIPOGRAFIA HERO — scala continua, senza scalini
   ========================================================= */
@media (min-width: 768px) {

    .video-content h1 {
        font-size: clamp(32px, 3.6vw, 80px) !important;
        line-height: 1.1 !important;
    }

    .video-content h2 {
        font-size: clamp(17px, 1.6vw, 30px) !important;
        line-height: 1.4 !important;
    }
}

/* =========================================================
   C. CTA — misura unica su tutte le risoluzioni
   ========================================================= */
.video-content .btn {
    font-size: clamp(14px, 1.2vw, 17px) !important;
    padding: 12px 26px !important;
    white-space: nowrap;
}

/* =========================================================
   D. SEZIONE NUMERI — font fluidi con tetto ai valori originali.
   Solo da 768px: sotto entra in scena la versione mobile impilata,
   che ha misure proprie e non va toccata.
   ========================================================= */
@media (min-width: 768px) {

    .counter-box {
        padding: 15px 6px !important;
    }

    .counter-box h2 {
        font-size: clamp(34px, 6vw, 95px) !important;
        line-height: 1 !important;
    }

    /* il simbolo % accanto al numero */
    .counter-box .d-flex > span {
        font-size: clamp(18px, 3.2vw, 50px) !important;
        line-height: 1 !important;
    }

    /* etichetta sotto il numero */
    .counter-box span.d-block {
        font-size: clamp(12px, 1.9vw, 30px) !important;
        line-height: 1.2 !important;
        margin-top: 0.5rem !important;
    }
}