/* static/main/css/index.css */

/* Предотвращаем горизонтальный скролл */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Баннеры */
.hero-banner {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.responsive-title {
    font-size: clamp(1rem, 4vw, 2.5rem);
}

.responsive-btn-text {
    font-size: clamp(0.75rem, 3.5vw, 1.25rem);
}

/* Убираем лишние отступы на мобильных */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Узкие баннеры */
    .hero-banner {
        padding: 12px !important;
    }
    
    /* Переключатель ролей */
    .btn-group .btn {
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
    }
    
    /* Карточки преимуществ */
    .feature-card {
        padding: 10px !important;
    }
    
    .feature-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .feature-icon i {
        font-size: 0.9rem !important;
    }
    
    /* Заголовки */
    h1 {
        font-size: 1.1rem !important;
    }
    
    h2 {
        font-size: 1rem !important;
    }
    
    /* Кнопки */
    .btn-lg-md {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Планшеты */
@media (min-width: 577px) and (max-width: 992px) {
    .hero-banner {
        padding: 18px !important;
    }
    
    .feature-card {
        padding: 14px !important;
    }
}

/* Десктоп */
@media (min-width: 993px) {
    .hero-banner {
        padding: 2.5rem !important;
    }
}