/*
 * travyanistaya-klubnika.com - Responsive Styles
 * Responsive adjustments for different screen sizes
 */

/* =====================
   Table of Contents:
   1. Large Desktops (1200px and up)
   2. Desktops (992px - 1199px)
   3. Tablets (768px - 991px)
   4. Large Phones (576px - 767px)
   5. Small Phones (575px and below)
   ===================== */

/* =====================
   1. Large Desktops (1200px and up)
   ===================== */
@media (min-width: 1200px) {
    /* Base styles are already optimized for large screens, no adjustments needed */
}

/* =====================
   2. Desktops (992px - 1199px)
   ===================== */
@media (max-width: 1199px) {
    /* Slight adjustments to maintain proportions */
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* =====================
   3. Tablets (768px - 991px)
   ===================== */
@media (max-width: 991px) {
    /* Header & Navigation */
    .nav-menu {
        gap: var(--spacing-md);
    }
    
    .nav-menu li {
        margin-left: var(--spacing-md);
    }
    
    /* Hero Section */
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content, .hero-image {
        flex: none;
        width: 100%;
        text-align: center;
    }
    
    .hero-image img {
        max-width: 70%;
        margin: var(--spacing-lg) auto 0;
    }
    
    /* Destination Section */
    .destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Culture & Cuisine Sections */
    .culture-grid, .cuisine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Blog Preview Section */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* About Us Section */
    .about-us .container {
        flex-direction: column;
    }
    
    .about-content, .about-image {
        flex: none;
        width: 100%;
        text-align: center;
    }
    
    .about-image img {
        max-width: 70%;
        margin: var(--spacing-lg) auto 0;
    }
    
    /* Footer */
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================
   4. Large Phones (576px - 767px)
   ===================== */
@media (max-width: 767px) {
    /* Header & Navigation */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-md);
        transition: transform var(--transition-normal);
        transform: translateY(-100%);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-menu li {
        margin: 0 0 var(--spacing-md) 0;
    }
    
    .nav-menu a {
        display: block;
        padding: var(--spacing-sm);
    }
    
    /* Hero Section */
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    /* Destination Section */
    .destination-grid {
        grid-template-columns: 1fr;
    }
    
    /* Related Posts */
    .related-posts {
        grid-template-columns: 1fr;
    }
    
    /* Thank You Page */
    .recommended-grid {
        grid-template-columns: 1fr;
    }
    
    /* Cookie Banner */
    .cookie-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cookie-buttons button {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
}

/* =====================
   5. Small Phones (575px and below)
   ===================== */
@media (max-width: 575px) {
    /* Typography */
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Layout */
    .container {
        padding: 0 var(--spacing-md);
    }
    
    section {
        padding: var(--spacing-xl) 0;
    }
    
    /* Blog Cards */
    .blog-card {
        flex-direction: column;
    }
    
    .blog-image {
        flex: none;
        height: 200px;
    }
    
    /* Culture & Cuisine Sections */
    .culture-grid, .cuisine-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
    }
    
    /* Form Elements */
    .action-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .action-buttons .btn {
        width: 100%;
    }
}

/* Mobile Menu Animation */
@media (max-width: 767px) {
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}