/*======================================
    MASTERTOP
    mobile.css
======================================*/

/* ======================================
   НОУТБУКИ И НЕБОЛЬШИЕ ЭКРАНЫ
====================================== */

@media (max-width:1200px){

    .hero h1{
        font-size:44px;
    }

    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .advantages-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}


/* ======================================
   ПЛАНШЕТЫ
====================================== */

@media (max-width:992px){

    .hero{
        min-height:650px;
        padding-top:100px;
        background-position:64% center;
    }

    .hero-wrapper{
        min-height:530px;
        display:flex;
        align-items:center;
    }

    .hero-text{
        max-width:570px;
        padding:28px;
        border-radius:24px;
        background:rgba(247,249,252,.72);
        backdrop-filter:blur(6px);
    }

    .hero-info{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hero-buttons{
        justify-content:flex-start;
    }

    .contacts-wrapper,
    .reviews-grid{
        grid-template-columns:1fr;
    }

}


/* ======================================
   ТЕЛЕФОНЫ
====================================== */

@media (max-width:768px){

    .header .container{
        height:65px;
    }

    .logo{
        font-size:24px;
    }

    .header-right{
        gap:12px;
    }

    .phone{
        display:none;
    }

    .lang-switch{
        margin-right:0;
        gap:6px;
    }

    .lang-link{
        font-size:18px;
    }

    .burger{
        width:40px;
        height:40px;
    }

    .burger span{
        width:25px;
    }

    .mobile-menu{
        top:65px;
        width:min(82vw, 290px);
        height:calc(100vh - 65px);
        padding:28px;
    }

    .hero{
        min-height:auto;
        padding-top:92px;
        padding-bottom:48px;
        overflow:hidden;

        background:
            linear-gradient(
                180deg,
                rgba(247,249,252,.98) 0%,
        rgba(247,249,252,.95) 52%,
        rgba(247,249,252,.82) 100%
            ),
            image-set(url("../img/hero/mastertop-hero.webp") type("image/webp"), url("../img/hero/mastertop-hero.png") type("image/png"));

        background-size:cover;
        background-position:72% center;
        background-repeat:no-repeat;
    }

    .hero-wrapper{
        min-height:auto;
        display:block;
    }

    .hero-text{
        max-width:100%;
        padding:22px 18px;
        border-radius:20px;
        background:rgba(247,249,252,.78);
        backdrop-filter:blur(6px);
    }

    .hero h1{
        font-size:34px;
        line-height:1.18;
        margin-bottom:20px;
    }

    .hero p{
        font-size:17px;
        margin-bottom:22px;
    }

    .hero-info{
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:28px;
    }

    .hero-info div{
        min-height:56px;
        padding:12px 14px;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(4px);
    }

    .hero-buttons{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .btn{
        width:100%;
        min-width:0;
        height:54px;
    }

    .services{
        padding:58px 0 64px;
    }

    .services h2{
        margin-bottom:32px;
        font-size:30px;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .service-card{
        border-radius:18px;
    }

    .service-card > img{
        height:auto;
        aspect-ratio:4 / 3;
    }

    .service-content{
        padding:18px;
    }

    .service-content h3{
        min-height:auto;
        margin-bottom:10px;
        font-size:20px;
    }

    .price{
    min-width:auto;
    min-height:auto;
    margin-bottom:16px;
    padding:0;

    font-size:20px;
    font-weight:600;
}

    .service-buttons{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .call-btn,
    .tg-btn{
        height:50px;
        font-size:14px;
    }

    .call-icon,
    .tg-icon{
        width:18px !important;
        height:18px !important;
    }

   
    .service-description{
        margin-bottom:12px;
        font-size:14px;
    }

    .service-benefits{
        gap:7px;
        margin-bottom:16px;
    }

    .service-benefits li{
        font-size:13px;
    }


    .service-content{
        min-height:auto;
    }

    .service-description,
    .service-benefits{
        min-height:auto;
    }

    .price{
        min-width:0;
        width:auto;
        justify-content:flex-start;
    }

    .advantages,
    .reviews,
    .contacts{
        padding:58px 0;
    }

    .advantages h2,
    .reviews h2{
        font-size:30px;
        margin-bottom:34px;
    }

    .advantages-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .advantage{
        padding:25px 20px;
    }

    .review{
        padding:24px;
    }

    .contacts-wrapper{
        gap:20px;
    }

    .contact-card{
        padding:24px;
    }

    .contact-card h3{
        font-size:24px;
    }

    .contact-item{
        font-size:16px;
    }

    .footer-content{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

.hero-mobile-phone{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;

    width:100%;
    margin-top:16px;

    color:var(--blue);
    font-size:18px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
}

.hero-mobile-phone img{
    width:21px !important;
    height:21px !important;
    object-fit:contain;
    flex-shrink:0;
}

}


/* ======================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
====================================== */

@media (max-width:480px){

    .container{
        padding:0 15px;
    }

    .logo{
        font-size:21px;
        letter-spacing:.4px;
    }

    .lang-switch{
        gap:4px;
    }

    .lang-link{
        font-size:17px;
    }

    .lang-divider{
        font-size:14px;
    }

    .hero{
        padding-top:86px;
        padding-bottom:42px;
        background-position:74% center;
    }

    .hero h1{
        font-size:29px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-info div{
        font-size:14px;
        padding:14px;
    }

    .info-icon{
        width:23px !important;
        height:23px !important;
    }

    .btn{
        height:52px;
        font-size:16px;
    }


    .service-description{
        font-size:13px;
    }

    .service-benefits li{
        font-size:12px;
    }

    .services h2,
    .advantages h2,
    .reviews h2{
        font-size:28px;
    }

    .price{
    font-size:19px;
}

.service-buttons{
        grid-template-columns:1fr;
    }

    .call-btn,
    .tg-btn{
        height:50px;
        font-size:15px;
    }

}



/* ======================================
   ADVANTAGES: MOBILE
====================================== */

@media (max-width:768px){
    .advantages{padding:58px 0 64px;}
    .advantages-heading{margin-bottom:30px;}
    .advantages-kicker{margin-bottom:8px;font-size:12px;}
    .advantages h2{margin-bottom:12px;font-size:30px;}
    .advantages-heading > p{font-size:15px;line-height:1.6;}
    .advantages-grid{grid-template-columns:1fr;gap:15px;}
    .advantage{gap:15px;padding:21px 18px 21px 22px;border-radius:18px;}
    .advantage .icon{width:52px;height:52px;flex-basis:52px;border-radius:15px;}
    .advantage .icon img{width:25px !important;height:25px !important;}
    .advantage h3{margin-bottom:6px;font-size:18px;}
    .advantage p{font-size:14px;line-height:1.55;}
}

@media (max-width:480px){
    .advantages h2{font-size:27px;}
    .advantages-heading > p{font-size:14px;}
    .advantage{gap:13px;padding:19px 15px 19px 19px;}
    .advantage .icon{width:48px;height:48px;flex-basis:48px;}
    .advantage h3{font-size:17px;}
    .advantage p{font-size:13px;}
}


/* FINAL MOBILE HARDENING */
@media (max-width:768px){
    .header-right{min-width:0;}
    .hero-mobile-phone{min-height:44px;}
    .contact-item a{overflow-wrap:anywhere;}
}

@media (max-width:360px){
    .logo{font-size:19px;}
    .header-right{gap:8px;}
    .lang-switch{display:none;}
}