/* Responsive Styles */

/* Small desktop and tablet landscape */
@media (max-width: 1024px) {
    .values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .value-card,
    .value-card:nth-child(4):nth-last-child(2) {
        grid-column: auto;
    }
}

/* Tablet and below (768px) */
@media (max-width: 768px) {
    /* Typography */
    h1, .hero__title {
        font-size: var(--fs-4xl);
    }
    
    h2, .section__title {
        font-size: var(--fs-3xl);
    }
    
    h3 {
        font-size: var(--fs-2xl);
    }
    
    .page-hero__title {
        font-size: var(--fs-4xl);
    }
    
    /* Navigation */
    .nav__toggle {
        display: flex;
    }
    
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(82%, 340px);
        height: 100dvh;
        background-color: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 6rem 2rem 2rem;
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-base);
        z-index: var(--z-dropdown);
    }
    
    .nav__menu.active {
        right: 0;
    }
    
    .nav__item {
        width: 100%;
    }
    
    .nav__link {
        display: block;
        padding: 1rem 0;
        font-size: var(--fs-lg);
    }
    
    .nav__cta {
        display: none;
    }

    .nav__item--cta {
        display: block;
        margin-top: var(--space-lg);
    }

    .nav__item--cta .btn {
        width: 100%;
    }
    
    /* Hero */
    .hero {
        min-height: auto;
        padding: var(--space-3xl) 0;
    }
    
    .hero__title {
        font-size: var(--fs-4xl);
    }
    
    .hero__description {
        font-size: var(--fs-base);
    }
    
    .hero__cta {
        font-size: var(--fs-base);
        padding: 0.875rem 2rem;
    }
    
    /* Stats */
    .stats__container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .stats__value {
        font-size: var(--fs-5xl);
    }
    
    /* Values Grid */
    .values__grid {
        grid-template-columns: 1fr;
    }

    .value-card,
    .value-card:nth-child(4):nth-last-child(2) {
        grid-column: auto;
    }
    
    /* Games Grid */
    .games__grid {
        grid-template-columns: 1fr;
    }
    
    .games__grid--full {
        grid-template-columns: 1fr;
    }
    
    /* Contact */
    .contact__container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .application__container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .application__copy {
        position: static;
    }

    .gallery-row__grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .contact__form-wrapper {
        padding: var(--space-lg);
    }
    
    /* Footer */
    .footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .footer__brand,
    .footer__nav,
    .footer__contact,
    .footer__social {
        grid-column: span 1;
    }
    
    /* Spacing */
    section {
        padding: var(--space-2xl) 0;
    }
    
    .page-hero {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
    }
    
    /* Typography */
    h1, .hero__title {
        font-size: var(--fs-3xl);
    }
    
    h2, .section__title {
        font-size: var(--fs-2xl);
    }
    
    .page-hero__title {
        font-size: var(--fs-3xl);
    }
    
    /* Navigation */
    .nav__menu {
        width: min(86%, 320px);
    }
    
    .nav__logo-img {
        height: 32px;
    }
    
    /* Buttons */
    .btn {
        min-height: 48px;
        padding: 0.75rem 1.25rem;
        font-size: var(--fs-sm);
        white-space: normal;
    }
    
    /* Stats */
    .stats {
        padding: var(--space-xl) 0;
    }
    
    .stats__value {
        font-size: var(--fs-4xl);
    }
    
    .stats__label {
        font-size: var(--fs-sm);
    }
    
    /* Game Cards */
    .game-card__content {
        padding: var(--space-lg);
    }

    .game-card__media,
    .game-card__image {
        height: 220px;
        min-height: 220px;
    }

    .game-card__icon {
        width: 68px;
        height: 68px;
        left: var(--space-md);
        bottom: var(--space-md);
        border-radius: 16px;
    }
    
    .game-card__stats {
        grid-template-columns: 1fr;
    }
    
    .game-card__links {
        flex-direction: column;
    }
    
    .game-card__link {
        width: 100%;
    }
    
    /* Value Cards */
    .value-card {
        padding: var(--space-lg);
    }
    
    /* Contact Form */
    .contact__form-wrapper {
        padding: var(--space-md);
    }

    .application-form {
        padding: var(--space-lg);
    }
    
    .contact__form-title {
        font-size: var(--fs-2xl);
    }

    .gallery-row__grid {
        grid-template-columns: 1fr;
    }

    .members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }
    
    /* Spacing */
    section {
        padding: var(--space-xl) 0;
    }
}

/* Large screens (1440px and above) */
@media (min-width: 1440px) {
    :root {
        --container-max-width: 1400px;
    }
    
    .hero__title {
        font-size: var(--fs-7xl);
    }
    
    .section__title {
        font-size: var(--fs-5xl);
    }
}