/* =============================================================================
   МОБИЛЬНЫЕ СТИЛИ - ДЕСКТОПНАЯ ВЕРСИЯ НА МОБИЛЬНЫХ УСТРОЙСТВАХ
   Этот файл переопределяет адаптивность, сохраняя десктопную компоновку
   ============================================================================= */

/* Общие настройки для мобильных устройств */
@media (max-width: 991px) {
    /* Сохраняем десктопную компоновку сеток */
    
    /* Сетки создания дебаффов */
    .create-methods-interactive {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 2rem !important;
    }
    
    /* VS разделитель */
    .vs-divider {
        order: 0 !important;
    }
    
    /* Подписки */
    .subscription-tiers-interactive {
        grid-template-columns: 1fr 1.2fr 1fr !important;
        gap: 2rem !important;
    }
    
    .tier-card-modern.recommended {
        transform: scale(1.05) !important;
        order: 0 !important;
    }
    
    /* Процесс работы - сохраняем горизонтальное расположение */
    .how-it-works-process-visual {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .process-step-visual {
        max-width: 280px !important;
        min-width: 250px !important;
        flex-shrink: 0 !important;
    }
    
    /* Действия - сохраняем горизонтальную компоновку */
    .how-it-works-actions {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .action-item {
        width: 120px !important;
        flex-shrink: 0 !important;
    }
    
    /* Сетки возможностей - сохраняем колонки */
    .additional-capabilities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
    }
    
    .additional-ideas-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .ideas-showcase-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
    
    .ideas-showcase-grid-four-columns {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .premium-benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
    
    /* Категории стилей */
    .styles-categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Конструктор - сохраняем колонки */
    .basic-actions,
    .logic-blocks {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
    
    /* Комбинации - горизонтальное расположение */
    .combo-chain {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }
    
    .combo-arrow {
        transform: rotate(0deg) !important;
    }
    
    /* Убираем скрытие боковых элементов */
    .navbar-right-buttons {
        display: flex !important;
    }
    
    /* Сохраняем размеры шрифтов */
    h1.screen-1-huge-text {
        font-size: 3rem !important;
    }
    
    h2.section-title {
        font-size: 2.2rem !important;
    }
    
    .section-description {
        font-size: 1rem !important;
    }
    
    /* Размеры кнопок */
    .button-download-cyber {
        width: auto !important;
        max-width: none !important;
        font-size: 1rem !important;
    }
    
    /* Отступы секций */
    .screen {
        padding-top: calc(var(--header-height) + 30px) !important;
    }
    
    /* Убираем изменения фона */
    .screen-1 {
        background-attachment: fixed !important;
    }
}

@media (max-width: 767px) {
    /* Более строгие правила для маленьких экранов */
    
    /* Навигация - сохраняем десктопную версию */
    .navbar-menu-container {
        background-color: transparent !important;
        padding-top: 0 !important;
    }
    
    .navbar-menu .menu-list {
        flex-direction: row !important;
        gap: 20px !important;
        width: auto !important;
    }
    
    .navbar-menu .menu-link {
        display: inline !important;
        width: auto !important;
        text-align: left !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        border-bottom: none !important;
    }
    
    .menu-item-mobile-login {
        display: none !important;
    }
    
    .button-login-mobile {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
    
    .navbar-right-buttons {
        display: flex !important;
    }
    
    .burger-menu {
        display: none !important;
    }
    
    /* Все сетки сохраняют десктопную компоновку */
    .create-methods-interactive {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 2rem !important;
    }
    
    .subscription-tiers-interactive {
        grid-template-columns: 1fr 1.2fr 1fr !important;
        gap: 2rem !important;
    }
    
    .how-it-works-process-visual {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    
    .process-step-visual {
        max-width: 200px !important;
        min-width: 180px !important;
        flex-shrink: 0 !important;
    }
    
    .how-it-works-actions {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    
    .action-item {
        width: 100px !important;
        flex-shrink: 0 !important;
    }
    
    .additional-capabilities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
    }
    
    .additional-ideas-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .ideas-showcase-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }
    
    .ideas-showcase-grid-four-columns {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .premium-benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
    
    .styles-categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .basic-actions,
    .logic-blocks {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
    
    /* Размеры шрифтов - сохраняем десктопные */
    h1.screen-1-huge-text {
        font-size: 2.5rem !important;
    }
    
    h2.section-title {
        font-size: 2rem !important;
    }
    
    .section-description {
        font-size: 0.95rem !important;
    }
    
    /* Размеры кнопок */
    .button-download-cyber {
        font-size: 0.95rem !important;
    }
    
    .button-download-cyber .button-download-cyber-icon {
        padding: 11px 14px !important;
    }
    
    .button-download-cyber .button-download-cyber-text {
        padding: 11px 18px 11px 14px !important;
    }
    
    /* Отступы */
    .screen {
        padding: 50px var(--container-padding) !important;
        padding-top: calc(var(--header-height) + 30px) !important;
    }
    
    /* Фон */
    .screen-1 {
        background-attachment: fixed !important;
    }
}

@media (max-width: 576px) {
    /* Самые маленькие экраны - минимальные корректировки */
    
    /* Сетки с уменьшенными зазорами, но той же структурой */
    .create-methods-interactive {
        gap: 1.5rem !important;
    }
    
    .subscription-tiers-interactive {
        gap: 1.5rem !important;
    }
    
    .how-it-works-process-visual {
        gap: 10px !important;
    }
    
    .process-step-visual {
        max-width: 160px !important;
        min-width: 140px !important;
    }
    
    .how-it-works-actions {
        gap: 10px !important;
    }
    
    .action-item {
        width: 90px !important;
    }
    
    .additional-capabilities-grid {
        gap: 1rem !important;
    }
    
    .additional-ideas-grid {
        gap: 1.5rem !important;
    }
    
    .ideas-showcase-grid-four-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .basic-actions,
    .logic-blocks {
        gap: 1rem !important;
    }
    
    /* Размеры шрифтов */
    h1.screen-1-huge-text {
        font-size: 2.2rem !important;
    }
    
    h2.section-title {
        font-size: 1.8rem !important;
    }
    
    .section-description {
        font-size: 0.9rem !important;
    }
    
    /* Кнопки */
    .button-download-cyber {
        font-size: 0.9rem !important;
    }
    
    .button-download-cyber .button-download-cyber-icon {
        padding: 10px 12px !important;
    }
    
    .button-download-cyber .button-download-cyber-text {
        padding: 10px 16px 10px 12px !important;
    }
    
    /* Отступы */
    .screen {
        padding: 45px var(--container-padding) !important;
    }
}

@media (max-width: 480px) {
    /* Критически маленькие экраны */
    
    /* Минимальные зазоры, но сохранение структуры */
    .create-methods-interactive {
        gap: 1rem !important;
    }
    
    .subscription-tiers-interactive {
        gap: 1rem !important;
    }
    
    .how-it-works-process-visual {
        gap: 8px !important;
    }
    
    .process-step-visual {
        max-width: 140px !important;
        min-width: 120px !important;
    }
    
    .how-it-works-actions {
        gap: 8px !important;
    }
    
    .action-item {
        width: 80px !important;
    }
    
    .additional-capabilities-grid {
        gap: 0.8rem !important;
    }
    
    .additional-ideas-grid {
        gap: 1rem !important;
    }
    
    .ideas-showcase-grid-four-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .basic-actions,
    .logic-blocks {
        gap: 0.8rem !important;
    }
    
    /* Размеры шрифтов */
    h1.screen-1-huge-text {
        font-size: 2rem !important;
    }
    
    h2.section-title {
        font-size: 1.6rem !important;
    }
    
    .section-description {
        font-size: 0.85rem !important;
    }
    
    /* Кнопки */
    .button-download-cyber {
        font-size: 0.85rem !important;
    }
    
    .button-download-cyber .button-download-cyber-icon {
        padding: 9px 11px !important;
    }
    
    .button-download-cyber .button-download-cyber-text {
        padding: 9px 14px 9px 11px !important;
    }
    
    /* Отступы */
    .screen {
        padding: 40px var(--container-padding) !important;
    }
}

/* =============================================================================
   СПЕЦИАЛЬНЫЕ ЭЛЕМЕНТЫ
   ============================================================================= */

/* Чат дебаффы - сохраняем компоновку */
@media (max-width: 991px) {
    .chat-main {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
    
    .chat-panel,
    .preview-panel {
        min-height: 400px !important;
    }
    
    .debuffs-panel-bottom {
        width: 100% !important;
    }
}

/* Подвал - сохраняем горизонтальное расположение */
@media (max-width: 991px) {
    .footer-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }
    
    .footer-copy {
        width: auto !important;
        margin-top: 0 !important;
        text-align: right !important;
    }
}

/* Убираем все hover эффекты на мобильных для лучшей производительности */
@media (max-width: 767px) {
    .create-method-card:hover,
    .tier-card-modern:hover,
    .process-step-visual:hover,
    .action-item:hover,
    .capability-item:hover,
    .combo-example:hover {
        transform: none !important;
    }
}

/* Сохраняем анимации, но упрощаем их */
@media (max-width: 767px) {
    .premium-sparkles::before,
    .premium-sparkles::after {
        display: none !important;
    }
    
    .neon-glow-effect,
    .cyber-border {
        animation: none !important;
    }
}