/**
 * Mobile Critical CSS - оптимизация для мобильных устройств
 * Загружается синхронно для предотвращения FOUC и CLS
 * Дата создания: 16.11.2025
 */

/* Mobile-First: базовые стили для мобильных */
@media (max-width: 768px) {
    /* Header оптимизация */
    header {
        min-height: 60px;
        position: relative;
    }
    
    /* Container padding для мобильных */
    .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    
    /* Breadcrumbs - компактные на мобильных */
    .breadcrumbs-nav {
        min-height: 40px;
        padding: 10px 0;
    }
    
    .breadcrumbs-list {
        font-size: 12px;
    }
    
    /* Hero Slider - мобильные размеры */
    .promotion,
    .main__background {
        min-height: 400px;
    }
    
    .promotion-slider__item {
        min-height: 400px;
    }
    
    .promotion__content {
        height: 400px;
        padding: 20px;
    }
    
    .promotion__content-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 12px;
    }
    
    .promotion__content-text {
        font-size: 16px;
        line-height: 1.5;
        max-width: 100%;
        margin-bottom: 16px;
    }
    
    .promotion__content-btn {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 600;
    }
    
    /* H1 Section - мобильные размеры */
    .main-hero-title h1 {
        font-size: 24px;
        line-height: 1.3;
        padding: 20px 0;
    }
    
    /* Mobile CTA button - фиксированная позиция */
    .mobile-fixed-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        padding: 12px 15px;
    }
    
    /* Body padding для мобильной CTA */
    body {
        padding-bottom: 80px;
    }
    
    /* Touch-friendly элементы - расширенная оптимизация (16.11.2025) */
    /* Минимальные размеры для touch targets (WCAG 2.5.5) */
    button,
    .btn,
    a.button,
    .promotion__content-btn,
    .button-pink-neon,
    .offer-btn-m,
    .button-secondary,
    .rate-btn-m,
    input[type="submit"],
    input[type="button"],
    .gigabit-order-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Основные CTA кнопки - увеличенные размеры */
    .button-pink-neon,
    .offer-btn-m {
        min-height: 48px;
        min-width: 150px;
        padding: 12px 24px;
    }
    
    /* Формы - увеличенные поля ввода */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px; /* Предотвращает zoom на iOS */
    }
    
    /* Ссылки в навигации */
    .right-menu__list-item a,
    .right-menu__category .category__item a,
    nav a,
    .breadcrumbs-link {
        min-height: 44px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }
    
    /* Burger menu - увеличенная область клика */
    .burger {
        min-width: 48px;
        min-height: 48px;
        padding: 12px;
    }
    
    /* Иконки и кнопки действий */
    .btn-call,
    .chat-button,
    .social-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .promotion,
    .main__background {
        min-height: 350px;
    }
    
    .promotion-slider__item {
        min-height: 350px;
    }
    
    .promotion__content {
        height: 350px;
        padding: 15px;
    }
    
    .promotion__content-title {
        font-size: 24px;
    }
    
    .promotion__content-text {
        font-size: 14px;
    }
    
    .main-hero-title h1 {
        font-size: 20px;
        padding: 15px 0;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}