@media (min-width: 320px) {

    h1,h2{
        line-height: 27px;
    }


    .page-box .page-box--layout {
        grid-template-columns: 1fr;
    }
    aside {
        flex-direction: column-reverse;
    }

    header{
        height: 65px;
    }
    /* header .main-menu{
        display: none;
    } */
    header .burger-menu{
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }
    header .burger-menu span{
        content: '';
        width: 20px;
        height: 2px;
        display: block;
        background-color: var(--burger-menu);
    }



    .container, .container-lg, .container-md, .container-sm {
        max-width: 100%;
    }


    .offer .offer-code {
        display: none;
    }

    .card-post-item {
        flex-direction: column;
        width: 100%;
        position: relative;
    }
    .card-post-item .card-post-item--image-link a {
        width: 100%;
        /* height: 200px; */
        position: relative;
        color: #fff;
    }
     .card-post-item .card-post-item--image-link a picture{
        height: 200px;
     }
    /* .card-post-item .card-post-item--image-link a::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #000000bf;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        backdrop-filter: blur(1px);

    } */

    .card-post-item .card-post-item--content {
        padding: 10px 10px;
    }
    .card-post-item .card-post-item--image-link img {
        width: 100%;
    }
    .card-post-item .card-post-item--content .card-post-item--meta {
        align-items: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
        row-gap: 5px;
    }
    .card-post-item .card-post-item--content .card-post-item--title a {
        font-size: 16px;
        line-height: 1.2;
        color: #000;
    }

    header .logo-box a .logo-box--title {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    header .logo-box a .logo-box--title span {
        font-size: 14px;
        font-weight: 700;
        line-height: 14px;
        display: block;
    }



    .offer .offer-box .offer-box--button-group {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
    .offer .offer-box .offer-box--button-group button, .offer .offer-box .offer-box--button-group a{
        text-align: center;
    }
    .offer .offer-box .offer-box--button-group .button-full {
        justify-content: center;
    }


    footer .footer-links {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }
    footer .deep-footer {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        margin-top: 20px;
        flex-direction: column-reverse;
        /* margin-bottom: 20px; */
        padding: 20px 0;
    }
    .about-box .about-box--desc {
        display: flex;
        flex-direction: column;
        padding: 0 15px;
        row-gap: 15px;
        align-items: center;
        text-align: center;
    }
    .card-box .card-box--buttons {
        padding: 20px 15px;
        width: 100%;
    }
    .card-box .card-box--buttons button, .card-box .card-box--buttons a{
        display: block;
        width: 100%;
        text-align: center;
    }

}

@media (max-width: 575px) {
    .card-post-item .card-post-item--content .card-post-item--parent {
        font-weight: 700;
        position: absolute;
        top: 5px;
        color: #fff;
    }
    .card-post-item .card-post-item--content .card-post-item--author {
        display: flex;
        align-items: center;
        gap: 5px;
        position: absolute;
        top: 164px;
        color: #fff;
    }
    .card-post-item .card-post-item--content .card-post-item--author span {
        color: #fff;
    }
    /* .card-post-item .card-post-item--content .card-post-item--title{
        position: absolute;
        top: 20px;
        height: 140px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    } */
    .contactMe form .contactMeForm-contact-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0px;
        flex-direction: column;
    }
    .contactMe form  button {
        width: 100%;
        justify-content: center;
    }
    .contactMe-box-list {
        display: flex;
        gap: 20px;
        justify-content: space-around;
        flex-direction: column;
    }


    .mini-cards .mini-card-item .card-post-item--meta .card-post-item--author {
        margin-top: 0px;
    }

    .card-fixed h3{
        position: relative!important;
        top: 0!important;
        height: 100%!important;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }
    .card-fixed h3 a{
        line-height: 27px;
        padding-top: 0!important;
        color: #000!important;
    }
}
@media (min-width: 576px) {
    h1{
        line-height: 40px;
    }



    .offer .offer-box .offer-box--button-group {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    .offer .offer-box .offer-box--button-group .button-full {
        justify-content: start;
    }

    .about-box .about-box--desc {
        display: flex;
        flex-direction: row;
        padding: 0;
        text-align: left;
        align-items:  center;
        row-gap: 0;
    }

    .card-box .card-box--buttons button, .card-box .card-box--buttons a{
        display: inline-block;
        width: initial;
        text-align: left;
    }

    .card-post-item {
        flex-direction: column;
        width: 100%;
    }
    .post-list-box .post-list-box--list {
        display: grid;
        flex-direction: row;
        flex-wrap: wrap;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .card-post-item .card-post-item--image-link a::after{
        content: none;
    }
    .card-post-item .card-post-item--content .card-post-item--title{
        position: unset;
    }
    .card-post-item .card-post-item--content .card-post-item--title a {
        color: #000;
    }
    .card-post-item .card-post-item--image-link a {
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 768px) {

}


@media (max-width: 991px) {

    /* Бургер-кнопка */
    .burger-menu {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        cursor: pointer;
        padding: 5px;
        z-index: 1001;
        position: relative;
    }
    .burger-menu span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #333;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform-origin: center;
    }
    .burger-menu.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .burger-menu.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .burger-menu.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Меню – теперь без display, только transform + opacity */
    .main-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        border-radius: 24px 24px 0 0;
        padding: 24px 20px 30px;
        z-index: 1000;
        /* Скрыто */
        transform: translate3d(0, 100%, 0);
        opacity: 0;
        pointer-events: none;
        /* Плавность */
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        max-height: 80vh;
        overflow-y: auto;
        /* Убираем всякие display, которые могут мешать */
        display: block !important;
    }
    .main-menu.active {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }



    header nav.main-menu ul {
        display: flex;
        position: relative;
        padding: 20px 0;
        flex-direction: column;
        row-gap: 15px;
    }

    .page-box{
        position: relative;
    }

    .card-post-item .card-post-item--image-link img {
        width: 100%;
        object-fit: cover;
    }


    /* Оверлей (затемнение) */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Блокировка прокрутки */
    body.no-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    header nav ul.magic-nav .underline{
        display: none!important;
    }



    footer .footer-main-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }
    footer .footer-main-content .footer-links {
        grid-template-columns: 1fr;
    }


    footer .footer-main-content .footer-links ul.lawdocs {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 22px;
    }
    footer .footer-main-content .footer-links ul.lawdocs li{
        line-height: 12px;
        list-style: disc;
    }



    /* Стилизация хлебных крошек */
    /* Горизонтальный скролл для хлебных крошек */
    /* 1. Выносим блок за пределы padding контейнера (.container / .page-box) */
    .crumbs-box {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important; /* Растягивает блок ровно от левого до правого края экрана */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Плавная инерционная прокрутка на iOS */
        padding-left: 1.5rem !important; /* Визуальный отступ внутри, чтобы текст не прилипал к краю экрана */
        padding-right: 1.5rem !important;
        box-sizing: border-box !important;
    }

    /* 2. Заставляем саму цепочку breadcrumb занимать место по ширине контента */
    .crumbs-box .breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important; /* Категорически запрещаем перенос на новую строку */
        width: max-content !important; /* Ширина равна сумме всех элементов, что и активирует скролл */
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }

    /* 3. Запрещаем сжатие отдельных элементов хлебных крошек */
    .crumbs-box .breadcrumb-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* 4. (Опционально) Делаем скроллбар тонким и аккуратным */
    .crumbs-box::-webkit-scrollbar {
        height: 4px;
    }
    .crumbs-box::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    .crumbs-box::-webkit-scrollbar-track {
        background-color: transparent;
    }
    /* ------------------------- */


    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        padding-right: calc(var(--bs-gutter-x) * .2);
        padding-left: calc(var(--bs-gutter-x) * .2);
    }

    .container.page-box,
    .page-box--layout {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; 
    }

    .page-box--layout main,
    .page-box--layout aside {
        min-width: 0 !important; 
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .page-box--layout table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    /* .post-list-box .post-list-box--list {
        display: grid;
        flex-direction: row;
        flex-wrap: wrap;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    } */

}


@media (min-width: 992px) {

    header .main-menu{
        display: flex;
    }
    header .burger-menu{
        display: none;
    }


    header .logo-box a .logo-box--title {
        gap: 18px;
    }
    header .logo-box a .logo-box--title span {
        line-height: 0;
        display: block;
    }

    .card-post-item .card-post-item--image-link img {
        width: 100%;
        object-fit: cover;
    }


    footer .footer-links {
        display: flex;
        flex-direction: row;
        row-gap: 0;
    }
    footer .deep-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        margin-top: 20px;
    }
    footer .deep-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        margin-top: 20px;
        flex-direction: row;
        padding: 0;
    }
}

@media (min-width: 1200px) {
    .page-box .page-box--layout {
        grid-template-columns: 1fr 350px;
    }
    aside {
        flex-direction: column;
    }

    .card-post-item {
        flex-direction: row;
        width: 100%;
    }
    .card-post-item .card-post-item--content .card-post-item--meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 0;
    }
    .card-post-item .card-post-item--content .card-post-item--title a {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
    }

    .post-list-box .post-list-box--list {
        row-gap: 20px;
        display: flex;
        flex-direction: column;
    }
    .card-post-item .card-post-item--image-link a picture {
        height: auto;
    }

    aside .sticky-box{
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
    .offer .offer-code {
        display: block;
    }
}