/* static/main/css/mobile-fixes.css */

/* Исправления для мобильных устройств */
@media (max-width: 768px) {
    /* Уменьшаем hero секцию */
    .hero-section {
        height: 70vh !important; /* Уменьшаем высоту */
    }

    /* Уменьшаем заголовок */
    .hero-section h1 {
        font-size: 2.5rem !important; /* Было display-1 (примерно 3.5rem) */
    }

    /* Уменьшаем подзаголовок */
    .hero-section .lead {
        font-size: 1.2rem !important; /* Было fs-3 (примерно 1.75rem) */
        margin-bottom: 1.5rem !important;
    }

    /* УПРОЩАЕМ КНОПКИ - делаем их вертикальными */
    .hero-section .d-flex {
        flex-direction: column !important; /* Кнопки друг под другом */
        gap: 0.75rem !important;
        align-items: center !important;
        width: 100%;
        padding: 0 1rem;
    }

    /* Уменьшаем кнопки */
    .hero-section .btn {
        width: 100%; /* Кнопки на всю ширину */
        max-width: 280px; /* Но не слишком широкие */
        font-size: 1rem !important; /* Уменьшаем текст */
        padding: 0.6rem 1rem !important; /* Уменьшаем отступы */
        margin: 0 auto !important;
    }

    /* Убираем лишние отступы */
    .hero-section .btn i {
        margin-right: 0.5rem !important;
    }

    /* Исправляем позиционирование */
    .hero-section .position-absolute {
        width: 100%;
        padding: 0 1rem;
    }
}

/* Для очень маленьких телефонов */
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 2rem !important;
    }

    .hero-section .lead {
        font-size: 1rem !important;
    }

    .hero-section .btn {
        max-width: 240px;
        font-size: 0.9rem !important;
    }
}