/**
 * Мобильные улучшения UX/UI
 * Оптимизация для сенсорных устройств и мобильных экранов
 */

/* ============================================
   1. ОСНОВНЫЕ НАСТРОЙКИ ДЛЯ МОБИЛЬНЫХ
   ============================================ */

/* Предотвращение горизонтального скролла */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Улучшение рендеринга на мобильных */
* {
    -webkit-tap-highlight-color: rgba(26, 43, 74, 0.1) !important;
    -webkit-touch-callout: none !important;
}

/* Отключение выделения текста при долгом нажатии на кнопки */
button, .button, a.button {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* ============================================
   2. УЛУЧШЕНИЕ TAP TARGETS (Минимум 44x44px)
   ============================================ */

/* Кнопки - минимальный размер для удобного нажатия */
@media (max-width: 991px) {
    .button,
    button[type="submit"],
    button[type="button"],
    input[type="submit"],
    input[type="button"],
    a.button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Бургер-меню */
    .header__burger,
    #js-burger {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
    
    /* Ссылки в меню */
    .menu-overlay__link,
    .menu a {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Фильтры */
    .filter__link {
        min-height: 44px !important;
        padding: 0.625rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}

/* ============================================
   3. УЛУЧШЕНИЕ ФОРМ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 991px) {
    /* Поля ввода - увеличенные размеры для удобства */
    .input-float__input,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    textarea {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        font-size: 16px !important; /* Предотвращает зум на iOS */
        line-height: 1.5 !important;
        border-radius: 8px !important;
    }
    
    /* Textarea */
    .input-float__input_textarea,
    textarea {
        min-height: 120px !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Лейблы */
    .input-float__label {
        font-size: 0.9375rem !important;
        padding: 0 0.625rem !important;
    }
    
    /* Фокус на полях - более заметный */
    .input-float__input:focus {
        border-width: 2px !important;
        box-shadow: 0 0 0 4px rgba(26, 43, 74, 0.15) !important;
    }
    
    /* Сообщения об ошибках */
    .form__error {
        font-size: 0.875rem !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    /* Сообщения формы */
    .form__message {
        padding: 1rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Колонки формы на мобильных - полная ширина */
    .form__col {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .form .row .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   4. УЛУЧШЕНИЕ МОБИЛЬНОГО МЕНЮ
   ============================================ */

@media (max-width: 991px) {
    /* Overlay меню - контейнер не занимает место когда закрыт */
    .header__overlay-menu,
    #js-overlay-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        /* z-index не нужен на контейнере, он управляется через wrapper */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Когда меню открыто - контейнер должен быть видимым */
    .header.opened .header__overlay-menu,
    .header.opened #js-overlay-menu,
    #page-header.opened .header__overlay-menu,
    #page-header.opened #js-overlay-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Overlay меню - должно начинаться сразу под кнопкой бургера */
    .header.opened .header__overlay-menu,
    .header.opened #js-overlay-menu,
    #page-header.opened .header__overlay-menu,
    #page-header.opened #js-overlay-menu {
        padding-top: 0 !important; /* Убираем padding-top */
    }
    
    /* Wrapper overlay menu - должен начинаться сразу под кнопкой бургера */
    .header.opened .header__wrapper-overlay-menu,
    #page-header.opened .header__wrapper-overlay-menu {
        top: 50px !important; /* Позиционируем сразу под кнопкой бургера */
        padding-top: 0 !important;
        height: calc(100vh - 50px) !important; /* Высота минус высота до кнопки бургера */
    }
    
    /* Увеличенный отступ сверху для wrapper-menu */
    .header.opened .header__wrapper-menu,
    #page-header.opened .header__wrapper-menu {
        margin-top: 30px !important; /* Увеличенный отступ сверху */
        margin-bottom: calc(var(--gutter-horizontal) * 2) !important;
    }
    
    /* Когда меню закрыто - wrapper скрыт через родительский контейнер */
    .header:not(.opened) .header__wrapper-overlay-menu,
    #page-header:not(.opened) .header__wrapper-overlay-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Когда меню открыто - wrapper должен быть видимым и иметь правильную высоту и фон */
    .header.opened .header__wrapper-overlay-menu,
    #page-header.opened .header__wrapper-overlay-menu {
        opacity: 1 !important;
        visibility: visible !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Фон для мобильных, если curtain не работает */
        background-color: #ffffff !important;
    }
    
    /* Curtain - фон меню должен быть видимым когда меню открыто */
    /* Переопределяем inline стили display: none для мобильных */
    .header-curtain,
    #js-header-curtain {
        /* По умолчанию скрыт, но не через display: none, чтобы не ломать анимации */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 100 !important; /* Ниже wrapper (501), но выше контента */
    }
    
    /* Когда меню открыто - curtain должен быть видимым */
    .header.opened .header-curtain,
    .header.opened #js-header-curtain,
    #page-header.opened .header-curtain,
    #page-header.opened #js-header-curtain {
        display: block !important; /* Переопределяем inline display: none */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 100 !important;
    }
    
    /* Список меню - как в десктопном */
    .menu-overlay__list {
        padding: 0 !important;
        margin: 0 !important;
        list-style-type: none !important;
    }
    
    /* Элементы меню - уменьшенные отступы */
    .menu-overlay__item {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Отступ между элементами меню - уменьшен */
    .menu-overlay__item:not(:last-child) {
        margin-bottom: 3px !important; /* Уменьшенный отступ между элементами */
    }
    
    /* Ссылки меню - увеличенный шрифт */
    .menu-overlay__link {
        display: inline-block !important;
        padding: 10px 15px !important;
        font-size: calc(14 * 1px + (18 - 14) * ((100vw - 320px) / 2240)) !important; /* Увеличенный адаптивный размер: от 14px до 18px */
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        line-height: 1.3 !important;
        text-transform: uppercase !important;
        transition: all 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
        color: inherit !important;
        text-decoration: none !important;
        position: relative !important; /* Для стрелки индикатора */
    }
    
    /* Индикатор стрелки для элементов с подменю */
    .menu-overlay__item.menu-item-has-children > .menu-overlay__link::after {
        content: '▼' !important; /* Стрелка вниз */
        display: inline-block !important;
        margin-left: 8px !important;
        font-size: 0.7em !important;
        transition: transform 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
        transform: rotate(0deg) !important;
    }
    
    /* Стрелка поворачивается когда подменю открыто */
    .menu-overlay__item.menu-item-has-children > .menu-overlay__link[aria-expanded="true"]::after,
    .menu-overlay__item.menu-item-has-children.active > .menu-overlay__link::after,
    .menu-overlay__item.menu-item-has-children.opened > .menu-overlay__link::after {
        transform: rotate(180deg) !important; /* Стрелка вверх когда открыто */
    }
    
    /* Hover эффект для ссылок меню */
    .menu-overlay__link:hover {
        color: var(--color-dark-2) !important;
    }
    
    /* Active эффект для ссылок меню */
    .menu-overlay__link:active {
        opacity: 0.8 !important;
    }
    
    /* Подменю - скрыто и не занимает место когда закрыто */
    .menu-overlay__item .sub-menu {
        position: relative !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        display: none !important; /* Скрыто и не занимает место когда закрыто */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(0px, 10px) !important; /* Начальная позиция для анимации */
        transition: opacity 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86), 
                    transform 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86), 
                    visibility 0.1s !important;
        pointer-events: none !important;
        background-color: #fff !important;
        border-radius: 2px !important;
        box-shadow: 0px 0px 30px 0px rgba(24, 24, 24, 0.04) !important;
    }
    
    /* Подменю открыто (через aria-expanded на ссылке или класс на элементе) */
    .menu-overlay__item.menu-item-has-children > a[aria-expanded="true"] ~ .sub-menu,
    .menu-overlay__item.menu-item-has-children > a[aria-expanded="true"] + .sub-menu,
    .menu-overlay__item.menu-item-has-children.active .sub-menu,
    .menu-overlay__item.menu-item-has-children.opened .sub-menu,
    .menu-overlay__item.menu-item-has-children .sub-menu.opened {
        display: block !important; /* Показываем когда открыто */
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(0px, 0px) !important; /* Финальная позиция */
        pointer-events: auto !important;
        margin-top: 5px !important; /* Небольшой отступ сверху когда открыто */
    }
    
    /* Элементы подменю */
    .menu-overlay__item .sub-menu > li {
        white-space: nowrap !important; /* Как в десктопном */
        display: block !important;
    }
    
    /* Ссылки подменю - стили как в десктопном */
    .menu-overlay__item .sub-menu > li > a {
        display: block !important;
        padding: 10px 15px !important; /* Как в десктопном */
        background-color: transparent !important;
        border-left: 2px solid transparent !important; /* Как в десктопном */
        width: 100% !important;
        color: inherit !important;
        text-decoration: none !important;
        transition: all 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important; /* Та же анимация */
    }
    
    /* Hover эффект для ссылок подменю - как в десктопном */
    .menu-overlay__item .sub-menu > li > a:hover,
    .menu-overlay__item .sub-menu > li > a:active {
        background-color: #fafafa !important; /* Как в десктопном */
        border-color: var(--color-dark-2) !important; /* Как в десктопном */
        color: var(--color-dark-2) !important; /* Как в десктопном */
    }
    
    /* Кнопка "Назад" в подменю */
    .header__overlay-menu-back {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* ============================================
   5. УЛУЧШЕНИЕ ТИПОГРАФИКИ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    /* Заголовки */
    h1, .h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    h2, .h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.875rem !important;
    }
    
    h3, .h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h4, .h4 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    /* Параграфы */
    p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
    }
    
    .lead {
        font-size: 1.0625rem !important;
        line-height: 1.6 !important;
    }
    
    /* Малый текст */
    .small,
    small {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   6. УЛУЧШЕНИЕ ОТСТУПОВ И SPACING
   ============================================ */

@media (max-width: 767px) {
    /* Секции */
    .section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .section.pt-large {
        padding-top: 2.5rem !important;
    }
    
    .section.pb-large {
        padding-bottom: 2.5rem !important;
    }
    
    .section.pt-medium {
        padding-top: 2rem !important;
    }
    
    .section.pb-medium {
        padding-bottom: 2rem !important;
    }
    
    .section.pt-small {
        padding-top: 1.5rem !important;
    }
    
    .section.pb-small {
        padding-bottom: 1.5rem !important;
    }
    
    /* Отступы для элементов */
    .section-grid__item {
        margin-bottom: 1.5rem !important;
    }
    
    .section-content__heading {
        margin-bottom: 1.25rem !important;
    }
    
    .section-content__text {
        margin-bottom: 1.25rem !important;
    }
    
    .section-content__button {
        margin-top: 1.5rem !important;
    }
}

/* ============================================
   7. УЛУЧШЕНИЕ ИЗОБРАЖЕНИЙ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 991px) {
    /* Все изображения адаптивные */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Изображения в проектах */
    .figure-project__image img {
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Изображения в секциях */
    .section-content__image img {
        width: 100% !important;
        border-radius: 8px !important;
    }
    
    /* Логотип в хедере */
    .logo__img-primary,
    .logo__img-secondary {
        max-height: 40px !important;
        width: auto !important;
    }
}

/* ============================================
   8. УЛУЧШЕНИЕ ГАЛЕРЕЙ И СЛАЙДЕРОВ
   ============================================ */

@media (max-width: 991px) {
    /* Слайдеры */
    .slider-images,
    .slider-services {
        padding: 0 !important;
    }
    
    /* Навигация слайдера */
    .slider-images__nav,
    .slider-services__nav {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
    
    /* Индикаторы слайдера */
    .slider-images__pagination,
    .slider-services__pagination {
        bottom: 1rem !important;
    }
    
    .slider-images__pagination .swiper-pagination-bullet,
    .slider-services__pagination .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 4px !important;
    }
}

/* ============================================
   9. УЛУЧШЕНИЕ ФУТЕРА НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    .footer {
        padding: 2rem 0 1.5rem !important;
        text-align: center !important;
    }
    
    .footer__col {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    .footer__col:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Центрирование логотипа */
    .footer__logo {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
    }
    
    .footer__logo a {
        display: inline-block !important;
        text-align: center !important;
    }
    
    .footer__logo img {
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Центрирование текста под логотипом */
    .footer__text {
        text-align: center !important;
    }
    
    /* Центрирование заголовков */
    .footer__title {
        font-size: 1.125rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    /* Центрирование меню */
    .footer__menu {
        text-align: center !important;
    }
    
    .footer__menu li {
        text-align: center !important;
    }
    
    /* Центрирование контактов */
    .footer__contacts {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer__contacts li {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .footer__link {
        font-size: 0.9375rem !important;
        padding: 0.5rem 0 !important;
        display: block !important;
        min-height: 44px !important;
    }
}

/* ============================================
   10. УЛУЧШЕНИЕ ХЕДЕРА НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 991px) {
    .header {
        padding: 0.75rem 0 !important;
    }
    
    .header__container {
        padding: 0 1rem !important;
    }
    
    /* Логотип */
    .header__col-left {
        flex: 0 0 auto !important;
    }
    
    /* Бургер */
    .header__col.d-lg-none {
        flex: 0 0 auto !important;
    }
}

/* ============================================
   11. УЛУЧШЕНИЕ ПОРТФОЛИО НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    /* Сетка портфолио */
    .portfolio-item {
        margin-bottom: 1.5rem !important;
    }
    
    .figure-project {
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .figure-project__content {
        padding: 1rem !important;
    }
    
    .figure-project__content h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .figure-project__content p {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   12. УЛУЧШЕНИЕ УСЛУГ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    .section-services .section-grid__item {
        margin-bottom: 2rem !important;
    }
    
    .service-item {
        padding: 1.5rem !important;
    }
    
    .service-item__title {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .service-item__price {
        font-size: 1.5rem !important;
        margin-top: 1rem !important;
    }
}

/* ============================================
   13. УЛУЧШЕНИЕ СЕРТИФИКАТОВ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    .certificates-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 1rem !important;
    }
    
    .certificate-gallery-item {
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .certificate-gallery-item__image {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   14. УЛУЧШЕНИЕ КОНТАКТНОЙ ИНФОРМАЦИИ
   ============================================ */

@media (max-width: 767px) {
    .contact-info {
        margin-bottom: 2rem !important;
    }
    
    .contact-info__item {
        padding: 1rem 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .contact-info__item:last-child {
        border-bottom: none !important;
    }
    
    .contact-info__label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .contact-info__value {
        font-size: 1rem !important;
    }
    
    .contact-info__value a {
        color: var(--color-primary, #1a2b4a) !important;
        text-decoration: none !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ============================================
   15. УЛУЧШЕНИЕ СКРОЛЛИНГА
   ============================================ */

@media (max-width: 991px) {
    /* Плавный скроллинг */
    html {
        scroll-behavior: smooth !important;
    }
    
    /* Улучшение скроллбара на мобильных (если виден) */
    ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 3px !important;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }
}

/* ============================================
   16. УЛУЧШЕНИЕ АНИМАЦИЙ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 991px) {
    /* Упрощенные анимации для лучшей производительности */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Отключение сложных анимаций на слабых устройствах */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   17. УЛУЧШЕНИЕ ОТОБРАЖЕНИЯ НА ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНАХ
   ============================================ */

@media (max-width: 576px) {
    /* Еще более компактные отступы */
    .section.pt-large {
        padding-top: 2rem !important;
    }
    
    .section.pb-large {
        padding-bottom: 2rem !important;
    }
    
    .section.pt-medium {
        padding-top: 1.5rem !important;
    }
    
    .section.pb-medium {
        padding-bottom: 1.5rem !important;
    }
    
    /* Заголовки */
    h1, .h1 {
        font-size: 1.5rem !important;
    }
    
    h2, .h2 {
        font-size: 1.25rem !important;
    }
    
    /* Кнопки */
    .button {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Фильтры - вертикально */
    .filter__list {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter__link {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================
   18. УЛУЧШЕНИЕ ДОСТУПНОСТИ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 991px) {
    /* Улучшение видимости фокуса */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 3px solid rgba(26, 43, 74, 0.5) !important;
        outline-offset: 2px !important;
    }
    
    /* Улучшение контраста для текста */
    body {
        color: #1a1a1a !important;
    }
    
    p, .lead {
        color: #333 !important;
    }
}

/* ============================================
   19. ИСПРАВЛЕНИЕ ПРОБЛЕМ С iOS SAFARI
   ============================================ */

@supports (-webkit-touch-callout: none) {
    /* Исправление для iOS Safari */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    textarea {
        font-size: 16px !important; /* Предотвращает зум при фокусе */
    }
    
    /* Исправление для viewport на iOS */
    .header {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
}

/* ============================================
   20. УЛУЧШЕНИЕ ПРОИЗВОДИТЕЛЬНОСТИ
   ============================================ */

@media (max-width: 991px) {
    /* Оптимизация рендеринга */
    .section-grid__item,
    .figure-project,
    .service-item {
        will-change: transform !important;
        transform: translateZ(0) !important;
    }
    
    /* Отключение hover эффектов на touch устройствах */
    @media (hover: none) {
        .button:hover,
        .filter__link:hover,
        .menu-overlay__link:hover {
            transform: none !important;
            box-shadow: none !important;
        }
    }
}

/* ============================================
   21. УЛУЧШЕНИЕ НАВИГАЦИИ МЕЖДУ ПРОЕКТАМИ
   ============================================ */

@media (max-width: 991px) {
    .section-nav-projects__wrapper {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem 0 !important;
    }
    
    .section-nav-projects__item {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    .section-nav-projects__item_center {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .section-nav-projects__item_prev {
        order: 1 !important;
    }
    
    .section-nav-projects__item_next {
        order: 3 !important;
    }
    
    .section-nav-projects__link {
        min-height: 60px !important;
        padding: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-radius: 8px !important;
        background-color: #f8f9fa !important;
        transition: all 0.2s ease !important;
    }
    
    .section-nav-projects__link:active {
        background-color: #e9ecef !important;
        transform: scale(0.98) !important;
    }
    
    .section-nav-projects__arrow {
        font-size: 1.5rem !important;
        min-width: 24px !important;
    }
    
    .section-nav-projects__content {
        flex: 1 !important;
        margin: 0 1rem !important;
    }
    
    .section-nav-projects__label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .section-nav-projects__title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    .section-nav-projects__item_center .section-nav-projects__link {
        justify-content: center !important;
        min-height: 48px !important;
    }
}

/* ============================================
   22. УЛУЧШЕНИЕ ГАЛЕРЕЙ ИЗОБРАЖЕНИЙ
   ============================================ */

@media (max-width: 991px) {
    .gallery-item {
        margin-bottom: 1rem !important;
    }
    
    .gallery-item__link {
        display: block !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .gallery-item__image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Галерея портфолио */
    .gallery-item {
        position: relative !important;
    }
    
    .gallery-item__link::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0) !important;
        transition: background 0.3s ease !important;
    }
    
    .gallery-item__link:active::after {
        background: rgba(0, 0, 0, 0.1) !important;
    }
}

/* ============================================
   23. УЛУЧШЕНИЕ ПРОЕКТНОЙ ИНФОРМАЦИИ
   ============================================ */

@media (max-width: 767px) {
    .project-info {
        margin-top: 2rem !important;
        padding: 1.5rem !important;
        background-color: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    .project-info__item {
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #e9ecef !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .project-info__item:last-child {
        border-bottom: none !important;
    }
    
    .project-info__label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
    }
    
    .project-info__value {
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #212529 !important;
    }
    
    .project-info__item_price .project-info__value {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--color-primary, #1a2b4a) !important;
    }
}

/* ============================================
   24. УЛУЧШЕНИЕ КОНТАКТНОЙ СТРАНИЦЫ
   ============================================ */

@media (max-width: 991px) {
    /* Контактная информация и форма - вертикально */
    .section-content .row .col-lg-4,
    .section-content .row .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    .contact-info {
        margin-bottom: 2rem !important;
    }
    
    .contact-info__item {
        padding: 1.25rem !important;
        background-color: #f8f9fa !important;
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
    }
    
    .contact-info__item:last-child {
        margin-bottom: 0 !important;
    }
    
    .contact-info__content h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .contact-info__content p {
        margin: 0 !important;
        font-size: 1rem !important;
    }
    
    .contact-info__content a {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        min-height: 44px !important;
        color: var(--color-primary, #1a2b4a) !important;
        text-decoration: none !important;
    }
    
    .contact-info__content a:active {
        opacity: 0.7 !important;
    }
    
    .contact-info__content .material-icons {
        font-size: 1.5rem !important;
    }
    
    /* Карта */
    .section-map {
        margin-top: 2rem !important;
    }
    
    .gmap {
        height: 300px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
}

/* ============================================
   25. УЛУЧШЕНИЕ СЕРТИФИКАТОВ НА МОБИЛЬНЫХ (ДОПОЛНИТЕЛЬНО)
   ============================================ */

@media (max-width: 767px) {
    .certificate-gallery-item {
        cursor: pointer !important;
        transition: transform 0.2s ease !important;
    }
    
    .certificate-gallery-item:active {
        transform: scale(0.98) !important;
    }
    
    .certificate-gallery-item__image-wrapper {
        position: relative !important;
        padding-top: 75% !important; /* 4:3 соотношение */
        overflow: hidden !important;
        border-radius: 8px !important;
    }
    
    .certificate-gallery-item__image,
    .certificate-gallery-item__placeholder,
    .certificate-pdf-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .certificate-gallery-item__overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }
    
    .certificate-gallery-item:active .certificate-gallery-item__overlay {
        opacity: 1 !important;
    }
    
    .certificate-gallery-item__title {
        margin-top: 0.75rem !important;
        font-size: 0.875rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
}

/* ============================================
   26. УЛУЧШЕНИЕ HERO СЕКЦИЙ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    .section-masthead {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
    }
    
    .section-masthead_image {
        min-height: 50vh !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    .section-masthead__heading h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
    
    .section-masthead__subheading p {
        font-size: 1rem !important;
        padding: 0 1rem !important;
    }
    
    .section-masthead__button {
        margin-top: 1.5rem !important;
    }
}

/* ============================================
   27. УЛУЧШЕНИЕ CTA СЕКЦИЙ
   ============================================ */

@media (max-width: 767px) {
    .section-cta {
        padding: 2rem 1rem !important;
    }
    
    .section-cta__heading {
        margin-bottom: 1.5rem !important;
    }
    
    .section-cta__heading h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .section-cta__heading .lead {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================
   28. УЛУЧШЕНИЕ СТАТИСТИКИ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 767px) {
    .aside-counters {
        padding: 1rem 0.5rem !important;
    }
    
    .aside-counters__wrapper-item {
        margin-bottom: 1rem !important;
    }
    
    .counter__number {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .counter__label {
        font-size: 0.875rem !important;
    }
    
    /* Форма обратной связи - одинаковые отступы со статистикой */
    .contact-form-wrapper,
    .form-contacts {
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Уменьшаем вертикальные отступы секций с формой */
    .section-content.pt-medium,
    .section-cta.pt-medium {
        padding-top: 1rem !important; /* Одинаковый отступ сверху */
    }
    
    .section-content.pb-medium,
    .section-cta.pb-medium {
        padding-bottom: 1rem !important; /* Одинаковый отступ снизу */
    }
    
    /* Уменьшаем отступ у заголовка формы */
    .section-content__heading.mb-4,
    .section-cta__heading.mb-4,
    .section-content__heading,
    .section-cta__heading {
        margin-bottom: 1rem !important; /* Одинаковый отступ снизу */
    }
    
    /* Исправление структуры формы - убираем наложения отступов */
    .form-contacts .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Колонки формы - единые отступы, без наложений */
    .form-contacts .form__col {
        margin-top: 0 !important; /* Убираем margin-top из main.css */
        margin-bottom: 1rem !important; /* Одинаковый отступ между полями */
        padding-left: 0 !important; /* Убираем padding, так как нет отрицательного margin у row */
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Последний элемент в row не должен иметь margin-bottom */
    .form-contacts .row:last-child .form__col:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Уменьшаем отступ у кнопки отправки */
    .form-contacts .form__col_submit {
        margin-top: 0.5rem !important; /* Уменьшенный отступ сверху */
        margin-bottom: 0 !important;
    }
    
    /* Уменьшаем отступ у последнего поля перед кнопкой (textarea) */
    .form-contacts .row:not(:last-child) .form__col:last-child {
        margin-bottom: 0.5rem !important; /* Уменьшенный отступ снизу для последнего поля перед кнопкой */
    }
    
    /* Убираем отступы у input-float, чтобы не было двойных отступов */
    .form-contacts .input-float {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================
   29. УЛУЧШЕНИЕ МАТЕРИАЛЬНЫХ ИКОНОК
   ============================================ */

@media (max-width: 991px) {
    .material-icons {
        font-size: 1.5rem !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================
   30. ИСПРАВЛЕНИЕ ПРОБЛЕМ С ПЕРЕПОЛНЕНИЕМ
   ============================================ */

@media (max-width: 991px) {
    /* Предотвращение переполнения текста */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Предотвращение переполнения контейнеров */
    .container-fluid,
    .container {
        overflow-x: hidden !important;
    }
    
    /* Исправление для длинных URL */
    a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}