/* ==========================================
   MOBILE.CSS — Все мобильные стили сайта
   Собрано из: template.css, main.css,
   feedback.css, hdfix.css, table-responsive.css
   
   ПОДКЛЮЧЕНИЕ: как отдельный файл через
   <link media="(max-width: 991px)"> или
   через preload для критических стилей.
   
   Версия: 2026
   ========================================== */

/* ════════════════════════════════════════════
   ≤1199px — планшеты (landscape)
   ════════════════════════════════════════════ */
@media (width <= 1199px) {
    #header .header-slider__offer {
        padding-inline-start: 0;
    }

    #header .header-form__inner {
        inset-inline-end: 0;
    }

    #sidebar {
        width: 240px;
        min-width: 240px;
        margin-inline-end: var(--space-s, 20px);
    }
}

/* ════════════════════════════════════════════
   ≤992px — планшеты (portrait): сайдбар снизу
   ════════════════════════════════════════════ */
@media (width <= 992px) {
    .wrapper-inner {
        flex-direction: column;
        gap: var(--space-m, 30px);
    }

    #sidebar {
        width: 100%;
        min-width: auto;
        order: 2;
    }

    .content-box {
        order: 1;
    }

    /* Каталог */
    .catalog-detail__status-box {
        margin-top: var(--spacing-medium, 20px);
    }

    /* Новости: вертикальный стек */
    .news-list__item .row {
        display: flex;
        flex-direction: column;
    }

    .news-list__img {
        margin-top: 20px;
    }

    .news-list__img-img {
        aspect-ratio: 16 / 9;
    }

    /* Таблицы */
    .table-responsive > table {
        min-width: 700px;
    }
}

/* ════════════════════════════════════════════
   ≤991px — мобильная шапка
   ════════════════════════════════════════════ */
@media (width <= 991px) {

    /* Центрирование шапки */
    #header .header-top,
    #header .header-phone,
    #header .header-slider {
        text-align: center;
    }

    /* Логотип по центру */
    .head-logo {
        justify-content: center;
    }

    /* Скрываем элементы шапки */
    #header .header-logo {
        margin-block-end: var(--space-m, 30px);
    }

    #header .header-address,
    #header .header-address__mail,
    #header .header-btn-callback,
    #header .header-form__inner,
    #header .header-slider__btn,
    #header .header-slider__offer,
    #sidebar {
        display: none;
    }

    /* Телефон */
    #header .header-phone {
        margin-block: 0.9375rem var(--space-m, 30px);
    }

    #header .header-phone > svg {
        display: none;
    }

    #header .header-phone__main-phone:is(:hover, :focus-within) .header-phone__popup {
        display: none;
    }

    /* Слайдер */
    #header .header-slider__inner {
        max-height: 300px;
        min-height: 0;
    }

    /* Футер на планшете */
    #footer .footer__item1 {
        display: flex;
        justify-content: space-between;
        padding-block-start: var(--space-s, 20px);
        border-block-start: 2px solid var(--border-dark, #3e4c5a);
        margin-block-end: var(--space-m, 30px);
    }

    #footer .footer__hr {
        display: none;
    }

    #footer .footer__btn-callback-link {
        display: inline-block;
    }

    /* Скрываем блок с фото компании */
    .section-company__col-img {
        display: none;
    }

    /* Sticky header: на мобильных не прячем при скролле */
    .main-nav-container.fixed-hidden {
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════
   ≤768px — мобильные устройства
   ════════════════════════════════════════════ */
@media (width <= 768px) {

    /* Контейнеры */
    .container,
    .wrap {
        padding-inline: 0.9375rem;
    }

    /* Шапка */
    #header .header-top {
        padding-block-start: 1.25rem;
        margin-block-end: 1.25rem;
    }

    #header .header-inner {
        padding-bottom: 16px;
    }

    /* Логотип меньше */
    .head-logo-sp {
        width: 200px;
        height: 42px;
    }

    /* Убираем верхний отступ обёртки */
    .wrapper {
        padding-block-start: 0 !important;
    }

    /* Контент: текст по левому краю */
    .content-box p {
        text-align: left;
    }

    /* Таблицы */
    .content-box table {
        font-size: 0.8em;
    }

    .content-box td,
    .content-box th {
        padding: 0.5rem 0.2rem;
    }
}

/* ════════════════════════════════════════════
   ≤767px — смартфоны
   ════════════════════════════════════════════ */
@media (width <= 767px) {

    /* Секции главной */
    .section-advantage,
    .section-company,
    .section-news,
    .section-partners,
    .section-projects-list,
    .section-services,
    .wrapper-main-page {
        margin-block-end: var(--space-l, 50px);
    }

    .wrapper {
        margin-block-end: 0 !important;
    }

    /* Отзывы */
    .section-review {
        margin-block-end: 15px;
    }

    .section-review__row {
        margin-bottom: 0;
    }

    .section-review__desc {
        margin-block-end: 10px;
    }

    /* Портфолио */
    .portfolio-projects-list__img {
        margin-bottom: var(--spacing-medium, 20px);
    }

    /* Футер */
    #footer .footer {
        text-align: center;
    }

    #footer .footer__item1 {
        display: block;
        padding-block-start: 0;
        border-block-start: none;
        margin-block-end: 0;
    }

    #footer .footer__hr {
        display: block;
    }

    #footer .footer__btn-callback-link {
        display: inline-block;
    }

    #footer .footer__menu-title::after {
        margin-inline: auto;
    }

    #footer .footer__copyright {
        margin-block-end: var(--space-s, 20px);
    }

    #footer .footer__social ul {
        justify-content: center;
    }

    #footer .footer__metrics {
        margin-block-end: 0.625rem;
    }

    /* Формы */
    .form-popup-callback__title,
    .form-popup-request__title,
    .form-manager__title {
        font-size: 1.5em;
    }

    .form-popup-callback__manager,
    .form-popup-request__manager,
    .form-manager__manager {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .form-contacts__input,
    .form-contacts__textarea {
        width: 100%;
    }
}

/* ════════════════════════════════════════════
   ≤575px — маленькие смартфоны
   ════════════════════════════════════════════ */
@media (width <= 575px) {

    /* Убираем отступ полностью */
    .wrapper {
        padding-block: 0 !important;
    }

    /* Панель действий — вертикально */
    .action-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-order-main {
        width: 100%;
        justify-content: center;
    }

    /* Таблицы */
    .content-box td,
    .content-box th {
        font-size: small;
    }

    .catalog-links__text {
        margin-bottom: var(--spacing-medium, 20px);
    }

    /* table-responsive */
    .table-responsive > table {
        min-width: 500px;
    }

    .table-responsive > table td,
    .table-responsive > table th {
        white-space: nowrap;
        font-size: 0.8em;
        padding: 0.4rem 0.3rem;
    }

    /* Стековые таблицы */
    .table-responsive--stack > table,
    .table-responsive--stack > table thead,
    .table-responsive--stack > table tbody,
    .table-responsive--stack > table tr,
    .table-responsive--stack > table td,
    .table-responsive--stack > table th {
        display: block;
        width: 100%;
    }

    .table-responsive--stack > table thead {
        display: none;
    }

    .table-responsive--stack > table tr {
        margin-bottom: 12px;
        border: 1px solid var(--color-border, #e3e8ef);
        border-radius: 8px;
        overflow: hidden;
    }

    .table-responsive--stack > table td {
        text-align: left;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid var(--border-lighter, #eef2f7);
    }

    .table-responsive--stack > table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.75em;
        color: var(--color-text-muted, #6b778c);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table-responsive--stack > table td:last-child {
        border-bottom: none;
    }
}

/* ════════════════════════════════════════════
   Системные media-запросы (не размерные)
   ════════════════════════════════════════════ */

/* Уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .main-nav-container.fixed {
        animation: none;
        transition: none;
    }
}

/* Тёмная тема — placeholder для будущих стилей */
@media (prefers-color-scheme: dark) {
    /* .main-nav-container.fixed {
        background: #1a1a1a;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    } */
}