/**
 * Стили форм и адаптивность сайта K-500
 */

/* ============================================ */
/* АДАПТИВНОСТЬ: ПЛАНШЕТЫ (до 1024px)          */
/* ============================================ */
@media (max-width: 1024px) {
    /* Статистика: 4 колонки → 2 колонки */
    .stats .container > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 5 шагов: 5 колонок → 3 + 2 */
    .steps .container > div {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Проблема/Решение: 2 колонки → 1 колонка */
    .problem-solution .container > div {
        grid-template-columns: 1fr !important;
    }

    /* Энергосервисный контракт: 2 колонки → 1 колонка */
    .energy-contract .container > div {
        grid-template-columns: 1fr !important;
    }

    /* Этапы работы: 4 колонки → 2 колонки */
    .work-stages .container > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Кейс: 4 колонки → 2 колонки */
    .case-study .container > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* О компании: 4 колонки → 2 колонки */
    .about .container > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Калькулятор: результаты 4 → 2 колонки */
    .calculator .container > div:nth-child(3) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero: меньше отступов */
    .hero {
        min-height: 60vh !important;
        padding: 60px 20px !important;
    }
}

/* ============================================ */
/* АДАПТИВНОСТЬ: ТЕЛЕФОНЫ (до 768px)           */
/* ============================================ */
@media (max-width: 768px) {
    /* Статистика: 2 колонки → 1 колонка */
    .stats .container > div {
        grid-template-columns: 1fr !important;
    }

    /* 5 шагов: 3 колонки → 1 колонка */
    .steps .container > div {
        grid-template-columns: 1fr !important;
    }

    /* Этапы: 2 колонки → 1 колонка */
    .work-stages .container > div {
        grid-template-columns: 1fr !important;
    }

    /* Кейс: 2 колонки → 1 колонка */
    .case-study .container > div {
        grid-template-columns: 1fr !important;
    }

    /* О компании: 2 колонки → 1 колонка */
    .about .container > div {
        grid-template-columns: 1fr !important;
    }

    /* Калькулятор: результаты 2 → 1 колонка */
    .calculator .container > div:nth-child(3) {
        grid-template-columns: 1fr !important;
    }

    /* Hero: ещё компактнее */
    .hero {
        min-height: 50vh !important;
        padding: 40px 15px !important;
    }

    .hero h1 {
        font-size: 28px !important;
    }

    .hero p {
        font-size: 16px !important;
    }

    /* Кнопки Hero: в столбик */
    .hero .container > div:last-child a {
        display: block !important;
        margin: 10px 0 !important;
    }

    /* Заголовки секций */
    section h2 {
        font-size: 24px !important;
    }

    /* Отступы секций */
    section {
        padding: 40px 15px !important;
    }

    /* Форма: меньше padding */
    .cta-form {
        padding: 20px !important;
    }
}

/* ============================================ */
/* АДАПТИВНОСТЬ: МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 480px) */
/* ============================================ */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px !important;
    }

    .hero .container > div:last-child a {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    input, select, textarea, button {
        font-size: 16px !important; /* чтобы не zoom-ило на iOS */
    }
}

/* ============================================ */
/* СООБЩЕНИЕ ОБ УСПЕШНОЙ ОТПРАВКЕ              */
/* ============================================ */
.cta-form .success-message {
    color: var(--accent);
    font-size: 18px;
    padding: 20px;
    text-align: center;
}
/* ============================================ */
/* ИСПРАВЛЕНИЕ КАЛЬКУЛЯТОРА НА МОБИЛЬНЫХ       */
/* ============================================ */
@media (max-width: 768px) {
    /* Калькулятор — убираем лишнюю ширину */
    .calculator .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Внутренний блок калькулятора */
    .calculator .container > div:first-of-type {
        padding: 15px !important;
    }

    /* Поля ввода — на всю ширину */
    .calculator input[type="number"],
    .calculator input[type="range"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Карточки результатов — в 2 колонки */
    .calculator .container > div:nth-of-type(2) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Текст в карточках поменьше */
    .calculator .container > div:nth-of-type(2) .font-size-24 {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    /* Карточки результатов — в 1 колонку */
    .calculator .container > div:nth-of-type(2) {
        grid-template-columns: 1fr !important;
    }

    /* Поля и кнопки — без скролла */
    .calculator input,
    .calculator select,
    .calculator button {
        max-width: 100% !important;
    }
}