/* css/responsive.css */

/* Планшеты (768px - 992px) */
@media (max-width: 992px) {
    .container {
        padding: 0 25px;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-contacts .phone a {
        font-size: 1.2em;
    }
    
    .hero-slider {
        height: 500px;
    }
    
    .slide-content {
        max-width: 80%;
        margin: 0 auto;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    .header-top {
        padding: 10px 0;
    }
    
    .logo img {
        max-height: 45px;
    }
    
    .header-contacts {
        display: none;
    }
    
    .hero-slider {
        height: 450px;
    }
    
    .slide-content {
        max-width: 90%;
        padding: 25px;
    }
    
    .slide-content h1 {
        font-size: 1.8em;
    }
    
    .slide-content p {
        font-size: 1em;
    }
    
    h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    
    .categories-grid,
    .preim-grid,
    .products-grid,
    .articles-grid {
        gap: 20px;
    }
    
    .category-card,
    .product-card,
    .article-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
    
    .footer-grid {
        gap: 30px;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col h3:after {
        margin: 10px auto 0;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-contacts li {
        justify-content: center;
    }
    
    .popup-form {
        padding: 30px 20px;
        width: 95%;
    }
    
    .popup-form h3 {
        font-size: 1.4em;
    }
}

/* Маленькие мобильные (до 480px) */
@media (max-width: 480px) {
    .hero-slider {
        height: 400px;
    }
    
    .slide-content {
        padding: 20px;
    }
    
    .slide-content h1 {
        font-size: 1.5em;
    }
    
    .btn {
        padding: 10px 25px;
        font-size: 14px;
    }
    
    .category-image,
    .product-image,
    .article-image {
        height: 200px;
    }
    
    .popup-form {
        padding: 20px 15px;
    }
    
    .popup-form input,
    .popup-form textarea {
        padding: 12px;
    }
}

/* Горизонтальная ориентация на мобильных */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-slider {
        height: 300px;
    }
    
    .popup-form {
        max-height: 95vh;
    }
    
    .popup-form textarea {
        height: 80px;
    }
}