/* ПЛАНШЕТЫ И МОБИЛЬНЫЕ (до 992px) */
@media (max-width: 992px) {
    
    /* Контейнер навигации */
    .nav-container {
        height: 60px;
        width: 96%;
        padding: 0 12px;
        top: 8px;
    }

    /* Логотип */
    .logo-wrap .logo {
        height: 40px;
    }

    /* Правая часть (Инструменты) */
    .nav-right {
        gap: 8px;
    }

    .nav-tools {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Языковой блок */
    .lang-current {
        padding: 10px 5px !important;
        font-size: 15px !important;
    }

    .lang-current .flag-icon {
        width: 18px;
        height: 12px;
        margin-left: 5px;
    }

    /* Переключатель темы */
    .theme-switch {
        width: 50px;
        height: 26px;
    }

    .slider-toggle:before {
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
    }

    input:checked + .slider-toggle:before {
        transform: translateX(24px);
    }

    /* Кнопка Бургер */
    .burger {
        display: flex !important;
        font-size: 24px;
        color: var(--primary-color);
        cursor: pointer;
        padding-left: 5px;
        z-index: 1100;
    }

    /* Выезжающее основное меню */
    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--nav-bg);
        display: flex !important;
        flex-direction: column;
        padding: 80px 20px 20px 20px;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.1);
        list-style: none;
        overflow-y: auto;
    }

    .menu.active {
        right: 0;
    }

    .menu li {
        width: 100%;
        margin-bottom: 5px;
    }

    .menu li a {
        padding: 15px 10px !important;
        font-size: 18px;
        font-weight: 500;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--text-main);
        text-decoration: none;
    }

    /* МОБИЛЬНОЕ ПОДМЕНЮ (Аккордеон) */
    .menu .submenu {
        display: none;
        position: static;
        
        /* СБРОС СДВИГОВ ПК-ВЕРСИИ (чтобы не убегало вправо) */
        transform: none !important; 
        left: 0 !important;
        opacity: 1;
        visibility: visible;
        
        box-shadow: none;
        padding-left: 15px;
        width: 100%;
        background: rgba(0, 0, 0, 0.03); 
        list-style: none;
    }

    /* пункт "Продукция" нажат (класс .open JS) */
    .menu li.open .submenu {
        display: block !important;
    }

    .menu li.open > a .menu-arrow {
        transform: rotate(180deg);
    }

    .submenu li a {
        font-size: 16px;
        padding: 12px 10px !important;
        border-bottom: none;
        justify-content: flex-start;
        gap: 10px;
    }
}

/* МАЛЕНЬКИЕ ЭКРАНЫ (iPhone 14 и др. до 400px) */
@media (max-width: 400px) {
    .nav-container {
        padding: 0 8px;
    }

    .logo-wrap .logo {
        height: 35px;
    }

    .nav-tools {
        gap: 8px;
    }

    .lang-current {
        font-size: 14px !important;
    }

    .theme-switch {
        width: 46px;
    }

    input:checked + .slider-toggle:before {
        transform: translateX(20px);
    }
}


/* ======================== ИНФО ======================== */
@media (max-width: 992px) {
    .info {
        padding: 90px 0 30px 0;
    }

    .info-container {
        flex-direction: column;
        align-items: flex-start; 
        width: fit-content; 
        margin: 0 auto;
        gap: 25px;
    }

    .info-item {
        flex-direction: row;
        gap: 15px;
        width: 100%;
        justify-content: flex-start;
    }

    .info-item.logo-box,
    .info-item.info-contact:nth-child(2) {
        margin-right: 0;
    }

    .info-img-icon {
        width: 45px;
        height: 45px;
    }

    .logo-box h1, 
    .logo-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .logo-text {
        font-size: 16px;
        opacity: 0.9;
    }

    .info-address {
        font-size: 15px;
        line-height: 1.3;
    }

    .phone-number {
        font-size: 19px;
    }
}

/* Для совсем маленьких экранов (iPhone SE и др.) */
@media (max-width: 400px) {
    .info-container {
        padding: 0 15px;
    }
    
    .logo-title {
        font-size: 18px;
    }
}

/* ======================== АДАПТИВ СЛАЙДЕРА (ПОЛНЫЙ КОД) ======================== */
/* ПЛАНШЕТЫ И МОБИЛЬНЫЕ (до 992px) */
@media (max-width: 992px) {
    /* 1. Контейнер: сбрасываем фиксированную высоту 698px */
    .article .article-container {
        height: auto;
        min-height: auto;
        max-width: 100%;
        padding-bottom: 25px;
        overflow: visible; /* Чтобы тени или элементы не обрезались, если нужно */
    }

    /* 2. Слайд: переводим из absolute в обычный поток (один под другим) */
    .article .slide {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        display: none; 
        flex-direction: column;
        align-items: center;
        padding: 35px 20px 10px 20px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
    }

    /* Показываем только активный слайд */
    .article .slide.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* 3. Контент: центрируем текст и убираем десктопные отступы */
    .article .article-content {
        max-width: 100%;
        height: auto;
        padding: 0;
        margin-bottom: 15px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .article .article-title {
        font-size: 26px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .article .article-badge {
        gap: 5px;
        margin-bottom: 10px;
        align-items: center;
    }

    .article .article-badge .info-label {
        font-size: 16px;
        margin-bottom: -5px;
    }

    .article .article-badge .info-value {
        font-size: 22px;
    }

    .article .article-text {
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .article .article-text br {
        display: none; /* Убираем <br> из десктопной версии */
    }

    /* 4. ФОТО: Сброс координат left: 617px и настройка скругления */
    .article .article-image-wrap {
        position: static; 
        width: 100%;
        max-width: 500px;
        height: auto;
        margin: 0 auto 20px auto;
        display: flex;
        justify-content: center;
        /* Гарантируем скругление углов на планшетах */
        border-radius: 15px;
        overflow: hidden; 
    }

    .article .article-img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: contain; 
        border-radius: 15px; /* Скругление самой картинки */
        display: block;
    }

    /* 5. КНОПКА: Сброс margin-top: auto и фиксированной высоты */
    .article .btn-consult {
        position: relative;
        margin: 10px auto 0 auto;
        width: 100%;
        max-width: 250px;
        height: 50px;
        font-size: 16px;
        bottom: auto; /* Сброс десктопного позиционирования */
    }

    .article .btn-consult span {
        font-size: 16px;
    }

    /* 6. СТРЕЛКИ: Поднимаем к заголовку, чтобы не мешали фото */
    .article .slider-btn {
        width: 38px;
        height: 38px;
        top: 20%; 
        background: rgba(255, 255, 255, 0.2);
    }
    
    .article .prev-btn { left: 10px; }
    .article .next-btn { right: 10px; }
}

/* МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 480px) */
@media (max-width: 480px) {
    .article .article-title {
        font-size: 22px;
    }
    
    .article .article-badge .info-value {
        font-size: 20px;
    }

    .article .btn-consult {
        height: 48px;
        max-width: 100%;
    }

    .article .slider-btn {
        top: 15%; /* Еще выше на узких экранах */
    }

    .article .article-container {
        padding-bottom: 15px;
    }
}


/* ======================== АДАПТИВ ДЛЯ СЕКЦИИ ПОПУЛЯРНЫЕ ======================== */
/* ПЛАНШЕТЫ (до 1024px) */
@media (max-width: 1024px) {
    .popular-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px; /* Уменьшение расстояния между карточками */
    }
}

/* МАЛЕНЬКИЕ ПЛАНШЕТЫ И ТЕЛЕФОНЫ (до 768px) */
@media (max-width: 768px) {
    .popular-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Компактный зазор между колонками */
    }
    
    .popular-case { 
        height: auto;           /* Разрешаем карточке расти под контент */
        min-height: 420px;      /* Минимальная высота для выравнивания */
        padding: 12px;          /* ПРОПОРЦИЯ: Уменьшение внутреннего отступа до 12px */
    }

    .popular-inner {
        gap: 12px;              /* ПРОПОРЦИЯ: Уменьшение промежутков между фото и текстом */
    }
    
    .popular-img { 
        height: 200px;          /* Уменьшение высоты фото под размер экрана */
    }
}

/* МОБИЛЬНЫЕ (до 576px) */
@media (max-width: 576px) {
    .popular-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px;               /* Минимальный зазор в сетке */
    }
    
    .popular-case { 
        min-height: 380px;      /* Еще более компактная высота */
        padding: 10px;          /* ПРОПОРЦИЯ: Уменьшение внутреннего отступа до 10px */
    }

    .popular-inner {
        gap: 10px;              /* ПРОПОРЦИЯ: Промежутки между элементами теперь тоже 10px */
    }
    
    .popular-img { 
        height: 160px;          /* Компактный размер фото для телефонов */
    }

    .popular-title { 
        font-size: 16px;        /* Уменьшение размера шрифта названия */
    }

    .popular-label { 
        font-size: 13px;        /* Уменьшение текста характеристик */
    }

    .btn-popular {
        height: 40px;           /* Чуть более узкая кнопка для мобилок */
        min-height: 40px;
    }

    .btn-popular span {
        font-size: 16px;        /* Уменьшение текста на кнопке */
    }
}

/* ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 380px) */
@media (max-width: 380px) {
    .popular-grid { 
        grid-template-columns: 1fr; /* Переход в одну колонку, чтобы не было тесно */
    }
    
    .popular-case {
        padding: 15px;          /* Возвращаем 15px, так как места теперь много (одна колонка) */
    }
}

/* Адаптив для модального окна */
@media (max-width: 768px) {
    /* 1. Уменьшаем отступы самого окна */
    .modal-content {
        padding: 15px;
        width: 95%;
    }

    .modal-body {
        flex-direction: column; 
        gap: 15px; /* Меньше расстояние между фото и текстом */
    }

    /* 2. Уменьшаем ФОТО */
    .modal-img-wrap {
        max-height: 200px; /* Было крупно, теперь компактно */
    }

    .modal-img-wrap img {
        max-height: 180px; 
    }

    /* 3. Возвращаем текст СВЕРХУ ВНИЗ (по левому краю) и УМЕНЬШАЕМ РАЗМЕР */
    .modal-info {
        display: block;      /* Отключаем центрирование, возвращаем обычный поток */
        text-align: left;    /* Выравнивание по левому краю */
    }

    .modal-info h2 {
        font-size: 18px;     /* Уменьшенный заголовок */
        margin-bottom: 8px;
    }

    .modal-text {
        font-size: 13px;     /* Уменьшенный текст описания */
        line-height: 1.4;
        margin-bottom: 15px;
    }

    /* 4. Кнопка тоже СВЕРХУ ВНИЗ и чуть меньше */
    .btn-modal-order {
        margin: 0;           /* Убираем центрирование (auto) */
        width: 100%;         /* На мобилках кнопка на всю ширину удобнее */
        max-width: 100%;     
        height: 46px;        /* Чуть ниже высота */
    }

    .btn-modal-order span {
        font-size: 14px;     /* Текст в кнопке чуть меньше */
    }
}

/* ------------   Каталог   ----------------- */
/* Планшеты (до 1024px или 992px, смотря какой порог у вас основной) */
@media (max-width: 1024px) {
    .catalog-nav-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки */
        gap: 15px;
    }
}

/* Мобильные телефоны (до 600px или 768px) */
@media (max-width: 600px) {
    .catalog-nav-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки — это идеал для мобилок */
        gap: 10px;
    }

    .catalog-nav-img-wrapper {
        height: 150px; /* Уменьшаем высоту, чтобы карточки были компактнее */
        padding: 10px;
    }

    .catalog-nav-label {
        font-size: 14px;
    }

    .catalog-page-section {
        padding-top: 100px; /* Чтобы заголовок не прилипал к меню */
    }
}

/* Совсем маленькие экраны (до 380px) */
@media (max-width: 380px) {
    .catalog-nav-grid {
        grid-template-columns: 1fr; /* 1 колонка, если экран очень узкий */
    }
}

/* ======================== Адаптация брендов ======================== */
@media (max-width: 576px) {
    .brand {
        padding: 15px 0;
    }
    
    .brand-track {
        gap: 30px;
    }
    
    .brand-track img {
        width: 100px;
        border-radius: 10px;
    }
    
    /* Пересчет анимации: (ширина фото 100px * 10шт) + (новый gap 30px * 10шт) */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { 
            transform: translateX(calc(-100px * 10 - 30px * 10)); 
        }
    }
}


/* ======================== Адаптация секции О Компании ======================== */
/* ПЛАНШЕТЫ (до 992px) */
@media (max-width: 992px) {
    .company.page-first {
        padding-top: 90px; 
    }

    .company-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .company-image { order: -1; }
    .company-main-title { text-align: center; }
}

/* МОБИЛЬНЫЕ (до 576px) */
@media (max-width: 576px) {
    .company.page-first {
        padding-top: 80px; 
    }

    .company-main-title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .company-text p {
        font-size: 16px;
        line-height: 1.4;
    }

    .btn-company {
        width: 100%;
        max-width: 260px;
        height: 45px;
    }
}


/* ======================== Фото производство (Слайдер) ======================== */
@media (max-width: 992px) {
    #production-slider { 
        padding: 0 10px;
    }
    
    .production-title { 
        font-size: 32px; 
        text-align: center;
    }
    
    #production-slider .splide__arrows {
        display: none; 
    }
    
    .splide__slide img { 
        height: 230px;
    }
}

@media (max-width: 576px) {
    .production-title { 
        font-size: 26px;
    }
    
    .splide__slide img {
        height: 220px; }
}


/* ======================== Блок Услуги ======================== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .services-main-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-main-title {
        font-size: 26px;
    }

    .service-img-wrap {
        height: 200px;
    }

    .service-title {
        font-size: 16px;
    }
}


/* Адаптив контактов */
@media (max-width: 992px) {
    .contacts-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобильных */
    }
    
    .contacts-page {
        padding-top: 110px;
    }
}

@media (max-width: 480px) {
    .contacts-main-title {
        font-size: 24px;
    }
    
    .contact-info {
        padding: 20px;
    }
}



/* ======================== Адаптация футера ======================== */
@media (max-width: 992px) {
    
    .footer {
        padding: 25px 0 15px 0;
    }

    /* 1. Блок Логотип + Текст */
    .footer-logo-block {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* линия */
    }

    .footer-logo-img {
        max-width: 80px;
        margin-bottom: 0;
    }

    .footer-logo-text {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Сетка: Транспорт (слева) и Контакты (справа) */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 15px;
        margin-bottom: 15px;
    }

    .footer-column:first-child,
    .footer-column:last-child {
        grid-column: span 2;
    }

    .footer-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .footer-info-item {
        gap: 8px;
        font-size: 12px;
    }

    /* Социальные сети (Текст + Иконки в ряд) */
    .footer-column:last-child {
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 10px;
    }

    .footer-column:last-child .footer-title {
        margin-bottom: 0;
    }

    .footer-social-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: flex-start;
    }

    .footer-social-link img {
        width: 30px;
        height: 30px;
    }
}

/* Для самых маленьких экранов (до 480px) */
@media (max-width: 480px) {
    .footer-logo-block {
        gap: 10px;
    }

    .footer-logo-img {
        max-width: 65px;
    }

    .footer-grid {
        gap: 10px 10px;
    }

    /* Если на очень узком экране текст и 6 иконок не влезают в ряд */
    .footer-column:last-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-info-item span br {
        display: none;
    }

    /* Добавим небольшой отступ между номерами, чтобы они не слипались */
    .footer-info-item span {
        display: inline-block;
        line-height: 1.4;
    }
}