/* ============================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ
   Touch-friendly элементы и улучшения
   ============================================ */

/* Увеличиваем размер кликабельных элементов на мобильных */
@media (max-width: 768px) {
    /* Минимальный размер для touch элементов - 44x44px */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-banner,
    .header-icon-btn,
    .mode-btn,
    .tab,
    .view-btn,
    .pagination-btn,
    .page-number,
    .radio-play-btn,
    .catalog-link,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Увеличиваем отступы между интерактивными элементами */
    .stats-grid {
        gap: 12px;
    }

    .header-actions {
        gap: 12px;
    }

    .nav-menu li {
        margin: 0 8px;
    }

    /* Улучшаем touch-взаимодействие для карточек */
    .freelancer-card,
    .employer-card,
    .project-card {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
        touch-action: manipulation;
    }

    /* Улучшаем скролл на мобильных */
    .freelancers-grid,
    .employers-grid,
    .projects-grid {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Оптимизация для форм */
    input,
    textarea,
    select {
        font-size: 16px; /* Предотвращает зум на iOS */
        min-height: 44px;
    }

    /* Улучшаем видимость фокуса на мобильных */
    button:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    /* Увеличиваем размер иконок на мобильных */
    .header-icon-btn i,
    .mode-btn i,
    .tab i {
        font-size: 18px;
    }

    /* Улучшаем доступность для touch */
    .pagination-btn,
    .page-number {
        padding: 12px 16px;
        margin: 4px;
    }

    /* Оптимизация для сайдбара на мобильных */
    .sidebar {
        padding: var(--space-4);
    }

    .sidebar-title {
        font-size: 18px;
        margin-bottom: var(--space-4);
    }

    /* Улучшаем фильтры на мобильных */
    .filter-group {
        margin-bottom: var(--space-4);
    }

    .filter-options {
        gap: 12px;
    }

    .checkbox-option,
    .radio-option {
        min-height: 44px;
        padding: 12px;
    }

    /* Оптимизация баннера на мобильных */
    .banner-title {
        line-height: 1.2;
        margin-bottom: var(--space-4);
    }

    .banner-text {
        line-height: 1.5;
        margin-bottom: var(--space-5);
    }

    .btn-banner {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
    }

    /* Улучшаем навигацию на мобильных */
    .main-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-menu {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .nav-link {
        white-space: nowrap;
        padding: 12px 16px;
    }
}

/* Дополнительные улучшения для маленьких экранов */
@media (max-width: 480px) {
    /* Еще больше увеличиваем размеры на очень маленьких экранах */
    .btn,
    .btn-primary,
    .btn-secondary {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 16px;
    }

    /* Улучшаем отступы */
    .container {
        padding: 0 var(--space-3);
    }

    /* Оптимизация карточек */
    .freelancer-card,
    .employer-card {
        padding: var(--space-4);
    }

    /* Улучшаем формы */
    .form-input,
    .form-textarea,
    .form-select {
        padding: 14px 16px;
        font-size: 16px;
    }

    /* Улучшаем кнопки в формах */
    .form-group button,
    .form-group .btn {
        width: 100%;
        margin-top: var(--space-3);
    }
}

/* Оптимизация производительности для мобильных */
@media (max-width: 768px) {
    /* Отключаем сложные анимации на слабых устройствах */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Оптимизация для слабых устройств */
    @media (prefers-reduced-motion: no-preference) {
        .freelancer-card,
        .employer-card,
        .project-card {
            will-change: transform;
        }
    }
}

/* Lazy loading стили */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
    background: var(--bg-secondary);
}

img.lazy-loaded {
    opacity: 1;
}

.lazy-bg {
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
}

.lazy-bg-loaded {
    transition: opacity 0.3s;
}

/* Placeholder для lazy loading */
.lazy-placeholder {
    background: linear-gradient(90deg, 
        var(--bg-secondary) 0%, 
        var(--gray-200) 50%, 
        var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}