/* ========================================
   RESPONSIVE - Tablet (max-width: 1024px)
   ======================================== */

@media (max-width: 1024px) {
    :root {
        --space-section: 80px;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-2xl);
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .hero-image-wrapper {
        max-width: 400px;
    }

    .float-card-1 {
        left: -10px;
    }

    .float-card-2 {
        right: -10px;
    }

    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cats-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

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

    .menu-preview-visual {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .menu-preview-content .section-tag,
    .menu-preview-content .section-title,
    .menu-preview-content .section-desc {
        text-align: center;
    }

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

    .about-story-img {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-story-content .section-title {
        text-align: center;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .contact-info .section-title {
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-nav {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }
}

/* ========================================
   RESPONSIVE - Mobile (max-width: 640px)
   ======================================== */

@media (max-width: 640px) {
    :root {
        --space-section: 60px;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .nav-inner {
        padding: 0 var(--space-md);
        height: 64px;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .hero {
        min-height: auto;
        padding-top: 64px;
    }

    .hero-inner {
        padding: var(--space-2xl) 0;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-desc {
        font-size: 1rem;
    }

    .hero-image-wrapper {
        max-width: 320px;
    }

    .hero-float-card {
        display: none;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .hero-stats {
        gap: var(--space-lg);
    }

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .cats-grid,
    .cats-grid-full {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

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

    .cta-block {
        padding: var(--space-2xl) var(--space-lg);
    }

    .menu-full-item {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .page-hero {
        padding: 100px 0 40px;
    }

    .page-hero-title {
        font-size: 2rem;
    }

    .mobile-link {
        font-size: 1.6rem;
    }

    .event-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}