/* =========================================================
   FIX MOBILE DEFINITIVO HOMEPAGE - TONY CHANKU
   File: assets/css/mobile-home-definitiva.css
   ========================================================= */

/*
   Questo file deve essere caricato DOPO:
   style.css
   template-home.css
   template-brano.css
   mobile-fix.css

   Scopo:
   - hero più leggibile su smartphone
   - pulsanti meno giganti
   - immagine mobile dedicata se presente
   - card in evidenza più compatta
   - blocco storia meno tagliato
*/

@media (max-width: 768px) {

    /*
       Se carichi questo file:
       assets/img/ui/home-hero-mobile.jpg

       verrà usato automaticamente solo su smartphone.
       Se il file non esiste, il browser userà comunque il fondo scuro/hero già esistente.
    */
    .tc-home {
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.56) 42%, rgba(0,0,0,.92) 100%),
            url("../img/ui/home-hero-mobile.jpg") center top / cover no-repeat,
            var(--tc-hero-image) 38% center / cover no-repeat;
    }

    .tc-home__shade {
        background:
            linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.82) 100%);
    }

    .tc-home__inner {
        padding-top: 112px;
        padding-bottom: 30px;
        gap: 26px;
    }

    .tc-home__title h1 {
        font-size: clamp(3.05rem, 14.5vw, 4.25rem);
        line-height: .92;
        letter-spacing: .005em;
    }

    .tc-home__title p {
        margin: 16px 0 20px;
        max-width: 88%;
        font-size: 1.05rem;
        line-height: 1.22;
    }

    /*
       Pulsanti più simili al template:
       non larghi a tutta pagina, ma comunque comodi da premere.
    */
    .tc-home__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        width: 100%;
    }

    .tc-home__actions .btn,
    .tc-home__actions a {
        width: min(100%, 330px) !important;
        min-height: 54px;
        padding: 0 22px;
        justify-content: center;
        font-size: .82rem;
        letter-spacing: .16em;
    }

    /*
       Card in evidenza più compatta:
       nello screenshot occupa troppo spazio verticale.
    */
    .tc-home-feature {
        margin-top: 6px;
        padding: 16px;
        border-radius: 18px;
    }

    .tc-home-feature__top {
        margin-bottom: 12px;
        font-size: .82rem;
        letter-spacing: .16em;
    }

    .tc-home-feature__media img {
        aspect-ratio: 1.25 / 1;
        border-radius: 12px;
    }

    .tc-home-feature h2 {
        font-size: 1rem;
        line-height: 1.2;
    }

    .tc-home-feature__sub {
        font-size: .68rem;
    }

    .tc-home-feature__platforms {
        gap: 9px;
        margin: 13px 0;
        font-size: .72rem;
    }

    .tc-home-feature__cta {
        min-height: 40px;
        font-size: .72rem;
    }

    /*
       Ultime uscite: evita card troppo larghe/tagliate.
    */
    .tc-home-release-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .tc-home-release__img img {
        aspect-ratio: 1 / 1;
    }

    /*
       Blocco storia:
       su smartphone è più naturale usarlo come sezione testuale con immagine di fondo morbida.
    */
    .tc-home-story {
        min-height: auto;
    }

    .tc-home-story__bg {
        background:
            linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.98) 100%),
            var(--tc-story-image) 18% top / cover no-repeat;
        opacity: .92;
    }

    .tc-home-story__inner {
        min-height: auto;
        padding-top: 260px;
        padding-bottom: 46px;
    }

    .tc-home-story__text h2 {
        font-size: clamp(1.7rem, 9vw, 2.45rem);
        line-height: 1.05;
    }

    .tc-home-story__text p {
        font-size: 1rem;
        line-height: 1.55;
    }

    .tc-home-story__text strong {
        font-size: 1.35rem;
    }
}

@media (max-width: 430px) {
    .tc-home__inner {
        padding-top: 104px;
    }

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

    .tc-home__title p {
        max-width: 92%;
        font-size: .98rem;
    }

    .tc-home__actions .btn,
    .tc-home__actions a {
        width: min(100%, 300px) !important;
        min-height: 50px;
        font-size: .76rem;
    }

    .tc-home-story__inner {
        padding-top: 230px;
    }
}

/*
   Variante per telefoni molto stretti.
*/
@media (max-width: 380px) {
    .tc-home__title h1 {
        font-size: 2.65rem;
    }

    .tc-home__actions .btn,
    .tc-home__actions a {
        width: 100% !important;
    }

    .tc-home-story__inner {
        padding-top: 210px;
    }
}
/* =========================================================
   FORZA HERO MOBILE DEDICATA
   ========================================================= */

@media screen and (max-width: 768px) {
    section.tc-home {
        background-image:
            linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.92) 100%),
            url("../img/ui/home-hero-mobile.jpg") !important;

      background-position:
    center top,
    center 18% !important;

        background-size:
            cover,
            cover !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }
}