/*==================================================
1400px
==================================================*/

@media (max-width:1400px){

:root{

    --container:1200px;

}

.hero-container{

    grid-template-columns:1fr 300px;

    gap:60px;

}

.architecture{

    grid-template-columns:55% 45%;

}

.architecture-content{

    padding:80px;

}

.collection-card{

    height:520px;

}

.collection-large{

    height:680px;

}

.material-card{

    height:520px;

}

.project{

    height:520px;

}

.project.large{

    height:620px;

}

.cta{

    height:760px;

}

}



/*==================================================
1024px
==================================================*/

@media (max-width:1024px){

.menu{

    display:none;

}

.header-btn{

    display:none;

}

.hero-container{

    grid-template-columns:1fr;

}

.hero-cards{

    flex-direction:row;

    margin-top:70px;

}

.hero-card{

    flex:1;

}

.advantages .container{

    grid-template-columns:repeat(2,1fr);

}

.architecture{

    grid-template-columns:1fr;

}

.architecture-photo{

    height:620px;

}

.architecture-content{

    padding:80px 8%;

}

.collection-grid{

    grid-template-columns:1fr;

}

.collection-large{

    grid-column:auto;

}

.engineering-wrapper{
    grid-template-columns:1fr;
}

.engineering-image{
    min-height:650px;
}

.engineering-list{
    padding:70px 8%;
}

.materials-grid{

    grid-template-columns:1fr;

}

.smart .container{
    grid-template-columns:1fr;
}

.smart-phone{
    min-height:650px;
}

.smart-content{
    padding:80px 8%;
}

.projects-grid{

    grid-template-columns:1fr;

}

.project.large{

    height:560px;

}

.process-grid{

    grid-template-columns:repeat(2,1fr);

}

.contacts-grid{

    grid-template-columns:1fr;

}

.footer-top{

    flex-direction:column;

    gap:40px;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

}

}

/*==================================================
768px
==================================================*/

@media (max-width:768px){

.header .container{

    height:80px;

}

.logo-text span{

    display:none;

}

.logo-icon{

    width:48px;

    height:48px;

}

.hero{

    min-height:100svh;

}

.hero h1{

    font-size:46px;

}

.hero-buttons{

    flex-direction:column;

}

.btn{

    width:100%;

}

.hero-cards{

    flex-direction:column;

}

.advantages{

    padding:60px 0;

}

.advantages .container{

    grid-template-columns:1fr;

}

.architecture-content{

    padding:60px 30px;

}

.architecture-list{

    grid-template-columns:1fr;

}

.collections{

    padding:100px 0;

}

.collection-card{

    height:420px;

}

.collection-content{

    left:30px;

    bottom:30px;

}

.collection-content h3{

    font-size:34px;

}

.engineering{
    padding:0;
}

.engineering .section-heading{
    padding:90px 30px 60px;
}

.engineering-image{
    min-height:500px;
}

.engineering-image img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
}

.engineering-list{
    padding:60px 30px;
}

.engineering-item{

    padding:24px;

}

.material-card{

    height:420px;

}

.material-info{

    left:30px;

    bottom:30px;

}

.material-info h3{

    font-size:34px;

}

.smart{
    padding:0;
}

.smart-phone{
    min-height:500px;
}

.smart-phone img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
}

.smart-content{
    padding:70px 30px;
}

.smart-list{

    grid-template-columns:1fr;

}

.projects{

    padding:100px 0;

}

.project{

    height:360px;

}

.process-grid{

    grid-template-columns:1fr;

}

.step{

    padding:35px 25px;

}

.cta{

    height:620px;

}

.cta-content h2{

    font-size:42px;

}

.contact-form button{

    width:100%;

}

.footer nav{

    flex-direction:column;

    gap:20px;

}

.social{

    justify-content:center;

}

}

/*==================================================
480px
==================================================*/

@media (max-width:480px){

.smart-phone{
    min-height:420px;
}

.smart-content{
    padding:60px 24px;
}

.engineering .section-heading{
    padding:70px 24px 50px;
}

.engineering-image{
    min-height:420px;
}

.engineering-list{
    padding:50px 24px;
}


.container{

    width:calc(100% - 32px);

}

.hero h1{

    font-size:38px;

}

h2{

    font-size:34px;

}

.section-heading{

    margin-bottom:60px;

}

.hero p,

.architecture p,

.section-heading p{

    font-size:16px;

}

.collection-card{

    height:340px;

}

.material-card{

    height:340px;

}

.project{

    height:300px;

}

.cta{

    height:520px;

}

.cta-content h2{

    font-size:34px;

}

.contacts{

    padding:100px 0;

}

}

@media(max-width:1024px){

    .burger{

        display:flex;

    }

    .menu{

        display:none;

    }

    .header-right{

        display:none;

    }

}

/*==================================================
MOBILE HEADER FIX
==================================================*/
@media (max-width:768px){

    .header .container{
        width:calc(100% - 32px);
        height:72px;
        gap:12px;
    }

    .logo{
        min-width:0;
        gap:10px;
    }

    .logo-icon{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
    }

    .logo-icon img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .logo-text{
        min-width:0;
    }

    .logo-text h2{
        font-size:18px;
        line-height:1;
        letter-spacing:2px;
        white-space:nowrap;
    }

    .logo-text span{
        display:none;
    }

    .burger{
        display:flex;
        flex:0 0 48px;
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
        margin-left:auto;
    }

    .burger span{
        width:26px;
    }

    .mobile-menu{
        padding:20px 24px 28px;
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .mobile-menu-top{
        min-height:56px;
    }

    .mobile-logo{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
    }

    .mobile-logo .logo-icon{
        width:42px;
        height:42px;
        min-width:42px;
    }

    .mobile-logo .logo-text h2{
        font-size:18px;
        letter-spacing:2px;
    }

    .mobile-close{
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
    }

    .mobile-nav{
        gap:18px;
        margin:32px 0;
    }

    .mobile-nav a{
        font-size:30px;
        line-height:1.15;
        padding:6px 0;
    }

    .mobile-bottom{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .mobile-bottom .btn,
    .mobile-bottom a.btn{
        width:100%;
    }

    .hero{
        padding-top:72px;
    }

    .hero-container{
        width:calc(100% - 32px);
        padding-top:40px;
        padding-bottom:40px;
    }

    .hero h1{
        font-size:clamp(38px,11vw,46px);
        line-height:1.02;
    }

    .hero-content > p{
        font-size:16px;
        line-height:1.65;
    }

    .hero-cards{
        margin-top:36px;
        gap:10px;
    }

    .hero-card{
        padding:18px;
    }

    .scroll-down{
        display:none;
    }
}

@media (max-width:480px){

    .header .container{
        width:calc(100% - 24px);
    }

    .logo-icon{
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
    }

    .logo-text h2{
        font-size:16px;
        letter-spacing:1.6px;
    }

    .burger{
        width:46px;
        height:46px;
        min-width:46px;
        min-height:46px;
    }

    .mobile-menu{
        padding:16px 18px 24px;
    }

    .mobile-nav a{
        font-size:27px;
    }

    .hero-container{
        width:calc(100% - 24px);
    }

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

    .hero-buttons{
        gap:12px;
    }
}


/*==================================================
FOOTER — TABLET / MOBILE
==================================================*/
@media (max-width:1024px){

    .footer{
        padding-top:80px;
    }

    .footer-grid{
        grid-template-columns:1.4fr 1fr 1fr;
        gap:50px 36px;
        padding-bottom:60px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

    .footer-brand p{
        max-width:520px;
    }

    .footer-bottom{
        height:auto;
        min-height:90px;
        padding:28px 0;
    }
}

@media (max-width:768px){

    .footer{
        padding-top:64px;
    }

    .footer .container{
        width:calc(100% - 40px);
    }

    .footer-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:42px 24px;
        padding-bottom:48px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

    .footer-logo{
        gap:12px;
        align-items:center;
    }

    .footer-logo .logo-icon{
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
    }

    .footer-logo h3{
        font-size:22px;
        line-height:1;
        letter-spacing:2px;
    }

    .footer-logo span{
        display:block;
        margin-top:6px;
        font-size:11px;
        line-height:1.35;
    }

    .footer-brand p{
        margin-top:22px;
        max-width:none;
        font-size:14px;
        line-height:1.7;
    }

    .footer-column{
        min-width:0;
    }

    .footer-column h4{
        margin-bottom:16px;
        font-size:15px;
    }

    .footer-column a,
    .footer-column span{
        margin-bottom:12px;
        font-size:14px;
        line-height:1.45;
    }

    .footer-bottom{
        min-height:0;
        height:auto;
        padding:28px 0 34px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .footer-bottom p{
        font-size:13px;
    }

    .social{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:12px 22px;
    }

    .social a{
        font-size:14px;
    }

    .footer-divider .container{
        width:calc(100% - 40px);
    }
}

@media (max-width:480px){

    .footer{
        padding-top:52px;
    }

    .footer .container{
        width:calc(100% - 32px);
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:34px;
        padding-bottom:40px;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-logo{
        align-items:flex-start;
    }

    .footer-logo .logo-icon{
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
    }

    .footer-logo h3{
        font-size:20px;
    }

    .footer-logo span{
        max-width:210px;
        font-size:10px;
    }

    .footer-brand p{
        margin-top:18px;
        font-size:13px;
    }

    .footer-column{
        padding-top:0;
        border-top:1px solid rgba(255,255,255,.06);
        padding-top:24px;
    }

    .footer-column h4{
        margin-bottom:14px;
    }

    .footer-bottom{
        padding:24px 0 30px;
    }

    .social{
        gap:10px 18px;
    }

    .footer-divider .container{
        width:calc(100% - 32px);
    }
}


/*==================================================
SAMSUNG GALAXY Z FOLD — РАСКРЫТЫЙ ЭКРАН
Типичный CSS viewport раскрытого Fold ≈ 690–720px.
Этот диапазон отделён от обычной мобильной версии.
==================================================*/
@media (min-width: 650px) and (max-width: 760px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .container,
    .header .container,
    .hero-container,
    .footer .container,
    .footer-divider .container{
        width:calc(100% - 48px);
        max-width:none;
    }

    /* Шапка */
    .header .container{
        height:76px;
    }

    .logo-icon{
        width:42px;
        height:42px;
    }

    .logo-text h2{
        font-size:17px;
    }

    /* Hero — раскрытый Fold уже достаточно широкий,
       поэтому не превращаем его в слишком узкий телефон */
    .hero{
        min-height:760px;
        padding-top:76px;
    }

    .hero-container{
        padding-top:54px;
        padding-bottom:42px;
    }

    .hero-content{
        max-width:610px;
    }

    .hero h1{
        font-size:46px;
        line-height:1.02;
        max-width:620px;
    }

    .hero-content > p{
        max-width:570px;
        font-size:16px;
        line-height:1.6;
    }

    .hero-buttons{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:12px;
    }

    .hero-cards{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-top:38px;
    }

    .hero-card{
        min-width:0;
        padding:20px;
    }

    /* Общая типографика */
    h2{
        font-size:40px;
        line-height:1.08;
    }

    .section-heading{
        max-width:620px;
        margin-bottom:52px;
    }

    /* Карточки — две колонки вместо неаккуратной
       одно-колоночной телефонной раскладки */
    .advantages-grid,
    .collections-grid,
    .materials-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .collection-card,
    .material-card{
        min-width:0;
        height:410px;
    }

    .collection-content,
    .material-info{
        left:24px;
        right:24px;
        bottom:26px;
    }

    /* Архитектура / инженерия / SMART:
       сохраняем красивую планшетную композицию */
    .architecture-grid,
    .engineering-grid,
    .smart-grid{
        grid-template-columns:1fr;
    }

    .architecture-photo,
    .engineering-image,
    .smart-phone{
        width:100%;
        height:500px;
        min-height:500px;
    }

    .architecture-content,
    .engineering-list,
    .smart-content{
        padding:52px 36px;
    }

    .engineering .section-heading{
        padding-left:36px;
        padding-right:36px;
    }

    .engineering-item{
        padding:22px 20px;
    }

    /* Проекты */
    .projects-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .projects-grid .project,
    .projects-grid .project.large{
        height:390px !important;
        min-width:0;
    }

    .projects-grid .project:last-child:nth-child(odd){
        grid-column:1 / -1;
        height:430px !important;
    }

    /* Этапы / контакты */
    .steps-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .contacts-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:36px 28px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

    /* AJAX lightbox для раскрытого Fold */
    .ajax-lightbox{
        padding:20px;
    }

    .ajax-lightbox-dialog{
        width:min(660px, calc(100vw - 40px));
        max-width:660px;
        max-height:92dvh;
    }

    .ajax-lightbox-scroll{
        max-height:92dvh;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .ajax-detail-hero{
        min-height:390px;
        padding:70px 38px 38px;
    }

    .ajax-detail-heading h2{
        font-size:42px;
    }

    .ajax-detail-body{
        padding:44px 38px 54px;
    }
}


/* Fold open — HERO refinement */
@media (min-width:650px) and (max-width:760px){
    .hero h1{
        font-size:38px;
        line-height:1.05;
        max-width:570px;
    }

    .hero-cards{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
    }

    .hero-card{
        width:auto !important;
        min-width:0 !important;
    }
}


/*==================================================
IPAD AIR / LARGE TABLET — LANDSCAPE HEADER FIX
Prevents desktop navigation, phone and logo from
colliding around 1025–1200px wide viewports.
==================================================*/
@media (min-width:769px) and (max-width:1200px){

    .header .container{
        width:calc(100% - 48px);
        height:82px;
        gap:18px;
    }

    .logo{
        flex:0 1 auto;
        min-width:0;
        gap:12px;
    }

    .logo-icon{
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
    }

    .logo-text{
        min-width:0;
    }

    .logo-text h2{
        font-size:19px;
        line-height:1;
        letter-spacing:2.4px;
        white-space:nowrap;
    }

    .logo-text span{
        display:block;
        margin-top:5px;
        font-size:10px;
        line-height:1.15;
        letter-spacing:1.2px;
        white-space:nowrap;
    }

    /* On iPad landscape the full desktop header is too crowded */
    .menu,
    .header-right{
        display:none !important;
    }

    .burger{
        display:flex !important;
        flex:0 0 48px;
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
        margin-left:auto;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:6px;
    }

    .burger span{
        display:block;
        width:26px;
        height:2px;
    }

    /* Keep hero copy below the fixed header */
    .hero{
        padding-top:82px;
    }

    .hero-container{
        padding-top:34px;
    }

    .hero h1{
        font-size:clamp(52px,6.2vw,68px);
        line-height:.98;
        max-width:760px;
        margin-top:20px;
    }

    .hero-content > span{
        display:block;
        max-width:100%;
        font-size:12px;
        line-height:1.3;
        letter-spacing:3px;
        margin-bottom:8px;
    }
}


/* iPad Air / large tablet — HERO cards in 2 rows */
@media (min-width:769px) and (max-width:1200px){
    .hero-cards{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:14px !important;
        align-items:stretch;
    }

    .hero-card{
        width:auto !important;
        min-width:0 !important;
        height:auto !important;
    }
}


/* iPad Air / large tablet — remove overlapping "ДАЛЕЕ" from HERO */
@media (min-width:769px) and (max-width:1200px){
    .hero .scroll-down{
        display:none !important;
    }

    .hero{
        height:auto !important;
        min-height:100svh;
    }

    .hero-container{
        padding-bottom:56px !important;
    }
}