/* =========================================================
   FIX MOBILE HERO + BLOCCO STORIA - TONY CHANKU
   File: assets/css/mobile-fix.css
   ========================================================= */

/* Mantiene il desktop invariato: agisce soprattutto su tablet e smartphone */

/* Tablet */
@media (max-width: 1100px) {
    .tc-home {
        background-position: 42% center;
    }

    .tc-home-story__bg {
        background:
            linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.94)),
            var(--tc-story-image) left center / cover no-repeat;
    }
}

/* Smartphone */
@media (max-width: 768px) {
    .tc-home {
        /*
           Prima mostrava quasi solo Vesuvio.
           Con questa posizione si recupera più parte centrale/sinistra della scena.
        */
        background-position: 38% center;
        background-size: cover;
    }

    .tc-home__shade {
        background:
            linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.38) 38%, rgba(0,0,0,.86) 100%),
            radial-gradient(circle at 50% 35%, rgba(255,168,48,.18), transparent 28%);
    }

    .tc-home__inner {
        padding-top: 110px;
        padding-bottom: 42px;
    }

    .tc-home__title h1 {
        font-size: clamp(3rem, 15vw, 4.3rem);
        line-height: .92;
    }

    .tc-home__title p {
        max-width: 92%;
    }

    /*
       Blocco storia: su mobile non deve mostrare solo spalla/braccio.
       Spostiamo l'immagine più verso sinistra/alto e oscuriamo meglio il fondo.
    */
    .tc-home-story__bg {
        background:
            linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.72) 44%, rgba(0,0,0,.97) 100%),
            var(--tc-story-image) 30% center / cover no-repeat;
        opacity: .95;
    }

    .tc-home-story__inner {
        padding-top: 220px;
        padding-bottom: 52px;
    }

    .tc-home-story__text {
        padding: 18px 0 0;
    }
}

/* Smartphone stretti */
@media (max-width: 480px) {
    .tc-home {
        background-position: 34% center;
    }

    .tc-home__inner {
        padding-top: 104px;
    }

    .tc-home__title h1 {
        font-size: clamp(2.85rem, 14vw, 3.8rem);
    }

    .tc-home__title p {
        font-size: 1rem;
        max-width: 94%;
    }

    .tc-home-story__bg {
        background:
            linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.74) 46%, rgba(0,0,0,.98) 100%),
            var(--tc-story-image) 25% center / cover no-repeat;
    }

    .tc-home-story__inner {
        padding-top: 210px;
        padding-bottom: 46px;
    }
}

/* Smartphone molto bassi o browser con barra grande */
@media (max-width: 420px) {
    .tc-home {
        background-position: 32% center;
    }

    .tc-home-story__bg {
        background:
            linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.76) 48%, rgba(0,0,0,.98) 100%),
            var(--tc-story-image) 22% center / cover no-repeat;
    }
}