/* 
   Практика 5: Мобильные стили
   Подключается автоматически через media query в HTML
*/

/* ===== Планшет (1024px и меньше) ===== */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .header__inner {
        padding: 15px 0;
    }
    
    .nav__list {
        gap: 20px;
    }
    
    .header__cta {
        display: none; /* Скрываем CTA на планшетах */
    }
    
    .hero__title {
        font-size: 2.25rem;
    }
    
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Планшет и мобильные (768px и меньше) - ГАМБУРГЕР МЕНЮ ===== */
@media (max-width: 768px) {
    /* Показываем гамбургер-кнопку */
    .menu-toggle {
        display: flex !important;
    }
    
    /* Основная навигация (скрыта по умолчанию) */
    .nav {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: 80px 30px 30px !important;
        transition: right 0.4s ease !important;
        z-index: 1000 !important;
        overflow-y: auto;
    }
    
    .nav.active {
        right: 0 !important;
    }
    
    .nav__list {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .nav__item {
        width: 100% !important;
    }
    
    .nav__link {
        display: block !important;
        width: 100% !important;
        padding: 15px 0 !important;
        font-size: 18px !important; /* Увеличиваем для мобильных */
        border-bottom: 1px solid #eee !important;
        border-radius: 0 !important;
        text-align: left !important;
        min-height: 50px !important;
    }
    
    .nav__link:hover,
    .nav__link.nav__link--active {
        background: transparent !important;
        color: var(--primary-color) !important;
        padding-left: 10px !important;
    }
    
    /* Затемнение фона при открытом меню */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    .nav-overlay.active {
        display: block;
    }
    
    /* Адаптация контента */
    .hero__container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .hero__title {
        font-size: 2rem !important;
    }
    
    .hero__image {
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    .features__grid {
        grid-template-columns: 1fr !important;
    }
    
    .products__grid {
        grid-template-columns: 1fr !important;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .popular-products__grid {
        grid-template-columns: 1fr !important;
    }
    
    .popular-products__grid .product-card--large {
        grid-column: span 1 !important;
    }
    
    .about__container {
        flex-direction: column !important;
    }
    
    .masonry-grid {
        column-count: 1 !important;
    }
    
    .demo-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer__grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    /* Кнопка "Наверх" для мобильных */
    .scroll-top {
        width: 52px !important;
        height: 52px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 22px !important;
    }
    
    /* Скрываем якорную навигацию на мобильных */
    .anchor-nav {
        display: none !important;
    }
    
    /* Практика 5 демо секция */
    .practice5-features {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Мобильные (480px и меньше) ===== */
@media (max-width: 480px) {
    .nav {
        width: 100% !important;
    }
    
    .logo img {
        width: 100px !important;
        height: auto !important;
    }
    
    body {
        font-size: 17px !important; /* iOS рекомендация */
    }
    
    .hero__title {
        font-size: 1.75rem !important;
    }
    
    .hero__button {
        width: 100% !important;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .features__title,
    .products__title,
    .masonry-section__title,
    .popular-products__title,
    .club__title,
    .about__title,
    .practice5-title {
        font-size: 1.75rem !important;
    }
    
    .feature,
    .product-card,
    .masonry-item {
        max-width: 100% !important;
    }
    
    /* Увеличиваем touch-зоны для очень маленьких экранов */
    .button {
        min-width: 120px !important;
        padding: 12px 24px !important;
    }
    
    .form__input {
        padding: 15px !important;
        font-size: 16px !important;
    }
}

/* ===== Очень маленькие мобильные (меньше 360px) ===== */
@media (max-width: 360px) {
    .container {
        padding: 0 10px !important;
    }
    
    .hero__title {
        font-size: 1.5rem !important;
    }
    
    .hero__text {
        font-size: 1rem !important;
    }
    
    .practice5-title {
        font-size: 1.5rem !important;
    }
    
    .practice5-subtitle {
        font-size: 1rem !important;
    }
    
    .scroll-top {
        width: 48px !important;
        height: 48px !important;
        bottom: 15px !important;
        right: 15px !important;
        font-size: 20px !important;
    }
}

/* ===== Для устройств с touch-экраном ===== */
@media (hover: none) and (pointer: coarse) {
    .nav__link {
        padding: 20px 0 !important; /* Увеличиваем touch-зоны */
        min-height: 60px !important;
    }
    
    .button {
        min-height: 50px !important;
        min-width: 120px !important;
    }
    
    .header-icons__link {
        width: 50px !important;
        height: 50px !important;
    }
}