/* =============================================================================
   responsive.css — адаптив (медиазапросы)
   Подключается ПОСЛЕ style.css и переопределяет раскладку на узких экранах.
   ========================================================================== */

/* --- Планшеты и меньше (<= 900px) --- */
@media (max-width: 900px) {

    /* Прячем обычное меню, показываем бургер */
    .nav-toggle { display: flex; }

    .nav {
        position: fixed;
        top: 68px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 8px 24px 20px;
        /* По умолчанию меню скрыто (сдвинуто вверх и прозрачно) */
        transform: translateY(-140%);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s ease, opacity .3s ease;
        box-shadow: 0 20px 40px rgba(14, 19, 48, 0.08);
    }
    /* Класс .is-open добавляет JS при клике на бургер */
    .nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .nav .nav-cta { text-align: center; margin-top: 12px; border-bottom: none; }

    /* Бургер превращается в «крестик», когда меню открыто */
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Hero в одну колонку, визуал под текстом */
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .orbit { width: 260px; height: 260px; transform: scale(0.85); }

    /* Сетки перестраиваем в 2 и 1 колонку */
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Телефоны (<= 600px) --- */
@media (max-width: 600px) {

    .valuebar-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .cat-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }

    .footer-bottom { flex-direction: column; text-align: center; }

    /* Cookie-баннер в столбик на маленьком экране */
    .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-actions { justify-content: center; }

    .contact-form-wrap { padding: 22px; }
}