/*
=========================================
RESPONSIVE
Адаптивная система MODX Starter.

Breakpoints:
Desktop: > 1024px
Tablet: 769–1024px
Mobile: <= 768px

Этот файл является частью CORE.
Для конкретного сайта его не редактируем.
=========================================
*/


/* =========================
   TABLET
   <= 1024px
========================= */

@media (max-width: 1024px) {

    :root {
        --container-padding: 20px;
        --section-padding: 48px;

        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 24px;
    }


    /* GRID */

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

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

}


/* =========================
   MOBILE
   <= 768px
========================= */

@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
        --section-padding: 40px;

        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;
    }
.menu__toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.menu__item--parent.open>.menu__item-head .menu__arrow{

    transform:rotate(225deg);

}


    /* GRID */

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


    /* FLEX */

    .flex--mobile-column {
        flex-direction: column;
    }

}


/* =========================
   SMALL MOBILE
   <= 480px
========================= */

@media (max-width: 480px) {

    :root {
        --container-padding: 12px;
        --section-padding: 32px;

        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
    }

}
/* =====================================================
   HEADER TABLET
===================================================== */

@media (max-width:1024px){

    .site-header__inner{
        gap:20px;
    }

    .header-logo img{
        max-width:150px;
    }

    .menu__list{
        gap:20px;
    }

}


/* =====================================================
   HEADER MOBILE
===================================================== */

@media (max-width:768px){

.hero{

    padding:32px 0;

}

.hero--columns .hero__body{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.hero__title{

    margin-bottom:24px;

}    

.site-header__inner{

        min-height:64px;

        gap:12px;

    }

    .header-logo img{

        max-width:120px;
        max-height:40px;

    }

    .site-header__right{

    margin-left:auto;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:8px;

    flex-shrink:0;

}

    .header-actions{

        gap:8px;

    }

    .header-actions .btn{

        min-height:34px;

        padding:0 12px;

        font-size:12px;

    }

    .header-search{

        display:none;

    }

    .burger{

        display:block;

    }


    /* ======================================
       Drawer
    ====================================== */

    .header-menu{

        position:fixed;

        inset:0;

        z-index:1000;

        pointer-events:none;

    }

    .header-menu.active{

        pointer-events:auto;

    }

    .header-menu__overlay{

        display:block;

        position:absolute;

        inset:0;

        background:rgba(0,0,0,.45);

        opacity:0;

        transition:.25s;

    }

    .header-menu.active .header-menu__overlay{

        opacity:1;

    }

    .header-menu__panel{

        position:absolute;

        top:0;
        left:-320px;

        width:300px;

        max-width:85vw;

        height:100%;

        background:#fff;

        transition:left .25s;

        overflow-y:auto;

        padding:24px;

    }

    .header-menu.active .header-menu__panel{

        left:0;

    }

    .header-menu__top{

        display:flex;

        align-items:center;

        margin-bottom:24px;

        padding-bottom:16px;

        border-bottom:1px solid var(--color-border);

    }


    /* ======================================
       Menu
    ====================================== */

    .menu__list{

        display:block;

    }

    .menu__item{

        width:100%;

    }

    .menu__link{

        min-height:48px;

        justify-content:space-between;

    }

    .menu__dropdown{

    display:none;

    position:static;

    min-width:0;

    margin:0;

    border:none;

    border-radius:0;

    box-shadow:none;

    padding:0 0 0 18px;

}

.menu__item--parent.open>.menu__dropdown{

    display:block;

}

}


@media (max-width:480px){

    .header-logo img{

        max-width:100px;

    }

    .header-actions .btn{

        padding:0 10px;

        font-size:11px;

    }

}