/* Responsive Styles */

/* Large Screens (Desktop) */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .section-header h2 {
        font-size: 2.5rem;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .vip-tiers, .community-features {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing) * 3);
    }
    
    .tier, .feature {
        margin-bottom: calc(var(--spacing) * 2);
    }
}

/* Medium Screens (Tablets) */
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .menu li {
        margin-left: calc(var(--spacing) * 2);
    }
    
    .about-content, 
    .community-content, 
    .vip-content, 
    .upcoming-content {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 4);
    }
    
    .about-image, 
    .community-image, 
    .vip-image, 
    .upcoming-image {
        order: -1;
    }
    
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 4);
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Screens (Mobile) */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    #header .container {
        flex-wrap: wrap;
    }
    
    .logo {
        flex: 1;
    }
    
    nav {
        position: fixed;
        top: 0;
        right: -300px;
        width: 250px;
        height: 100vh;
        background-color: var(--primary);
        z-index: 1001;
        transition: right 0.3s ease;
        padding: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    }
    
    nav.active {
        right: 0;
    }
    
    .menu {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .menu li {
        margin: 0 0 calc(var(--spacing) * 2);
        width: 100%;
    }
    
    .menu li a {
        display: block;
        padding: calc(var(--spacing) * 1);
    }
    
    .menu-toggle {
        display: block;
        z-index: 1002;
    }
    
    .cta-button {
        margin: calc(var(--spacing) * 2) 0 0;
        width: 100%;
        order: 3;
    }
    
    .cta-button .btn {
        width: 100%;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: calc(var(--spacing) * 2);
    }
    
    .about-features,
    .community-features {
        grid-template-columns: 1fr;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
    
    .vip-tiers {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: calc(var(--spacing) * 2);
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .disclaimer-buttons {
        flex-direction: column;
        gap: calc(var(--spacing) * 2);
    }
}

/* Extra Small Screens */
@media (max-width: 576px) {
    .container {
        padding: 0 calc(var(--spacing) * 1.5);
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .feature, .tier {
        padding: calc(var(--spacing) * 1.5);
    }
}