/* =========================================================
   19. TABLET — MAX 1000px
========================================================= */

@media (max-width: 1000px) {

    .about-section .section-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-image img {
        height: 450px;
    }

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

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-content {
        max-width: 900px;
        margin: auto;
    }

    .map-container {
        min-height: 450px;
    }

    .map-container iframe {
        min-height: 450px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   20. TABLET / MOBILE NAV — MAX 800px
========================================================= */

@media (max-width: 800px) {

    .site-header {
        min-height: 75px;
    }

    .nav-container {
        height: 75px;
        padding: 0 18px;
    }

    .logo img {
        width: 135px;
        max-height: 52px;
    }

    .menu-toggle {
        display: flex;
    }


    /* Mobile navigation */

    .main-nav {
        position: fixed;

        top: 75px;
        left: 0;

        width: 100%;
        height: calc(100vh - 75px);

        padding: 30px 25px;

        background: #0b0b0b;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        overflow-y: auto;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-15px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }

    .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav a {
        width: 100%;

        padding: 20px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        font-size: 25px;
    }

    .main-nav a:not(.nav-cta)::after {
        display: none;
    }

    .main-nav .nav-cta {
        margin-top: 25px;

        padding: 16px 20px;

        text-align: center;

        font-size: 12px;
    }


    /* Contact */

    .contact-section {
        padding: 80px 18px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .map-container {
        min-height: 400px;
    }

    .map-container iframe {
        min-height: 400px;
    }


    /* FAQ */

    .faq-section {
        padding: 80px 20px;
    }

    .faq-section .section-heading {
        margin-bottom: 40px;
    }

    .faq-container {
        max-width: 800px;
    }

    .faq-container summary {
        padding: 21px 24px;
        font-size: 16px;
    }

    .faq-container details p {
        padding: 0 24px 23px;
        font-size: 15px;
    }
}


/* =========================================================
   21. MOBILE — MAX 650px
========================================================= */

@media (max-width: 650px) {

    /* Header */

    .nav-container {
        height: 70px;
    }

    .site-header {
        min-height: 70px;
    }

    .main-nav {
        top: 70px;
        height: calc(100vh - 70px);
    }

    .logo img {
        width: 125px;
        max-height: 55px;
    }


    /* Hero */

    .hero-carousel {
        min-height: 700px;
        height: 100vh;
    }

    .hero-slide .hero-content {
        padding: 100px 25px 70px;
    }

    .hero-slide h1,
    .hero-slide h2 {
        font-size: 52px;
        letter-spacing: -2px;
    }

    .hero-slide .hero-subtitle {
        font-size: 21px;
    }

    .hero-slide .hero-text {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-slide .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;

        font-size: 17px;
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }

    .carousel-dots {
        bottom: 25px;
    }


    /* General sections */

    .section-container {
        padding: 70px 20px;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2,
    .about-content h2,
    .contact-content h2 {
        font-size: 42px;
    }


    /* About */

    .about-image img {
        height: 350px;
    }

    .experience-badge {
        width: 100px;
        height: 100px;

        right: 10px;
        bottom: 20px;
    }

    .experience-badge strong {
        font-size: 32px;
    }


    /* Food */

    .food-section {
        padding: 70px 18px;
    }

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

    .food-card-image {
        height: 250px;
    }


    /* Gallery */

    .gallery-section {
        padding: 70px 18px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
    }

    .gallery-large {
        grid-row: span 1;
    }

    .gallery-wide {
        grid-column: span 1;
    }


    /* Contact */

    .contact-content h2 {
        font-size: 48px;
    }

    .contact-details {
        grid-template-columns: 1fr;
    }

    .contact-detail-card {
        padding: 20px;
    }

    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-actions .button {
        width: 100%;
        text-align: center;
    }

    .map-container {
        min-height: 350px;
        border-radius: 10px;
    }

    .map-container iframe {
        min-height: 350px;
    }


    /* Footer */

    .footer-container {
        grid-template-columns: 1fr;

        padding-bottom: 40px;
    }

    .footer-bottom {
        flex-direction: column;

        text-align: center;
    }


    /* Popup */

    .offer-popup {
        padding: 15px;
    }

    .offer-popup-box {
        border-radius: 12px;
    }

    .offer-popup-content {
        padding: 50px 25px 30px;
    }

    .offer-popup-discount {
        font-size: 85px;
    }

    .offer-popup-content h2 {
        font-size: 34px;
    }

    .offer-popup-content p {
        font-size: 13px;
    }

    .offer-popup-close {
        top: 12px;
        right: 12px;
    }


    /* SEO */

    .seo-section {
        padding: 65px 18px;
    }

    .seo-section .section-container {
        padding: 0;
    }

    .seo-section .section-label {
        font-size: 11px;
        letter-spacing: 1.6px;
    }

    .seo-section h2 {
        margin-bottom: 25px;

        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }

    .seo-content p {
        margin-bottom: 18px;

        font-size: 15px;
        line-height: 1.7;
    }

    .seo-cta {
        margin-top: 28px;
    }

    .seo-cta .button {
        width: 100%;
        text-align: center;
    }


    /* FAQ */

    .faq-section {
        padding: 65px 18px;
    }

    .faq-section .section-label {
        margin-bottom: 12px;

        font-size: 11px;
        letter-spacing: 1.6px;
    }

    .faq-section .section-heading {
        margin-bottom: 30px;
    }

    .faq-section .section-heading h2 {
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }

    .faq-container details {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .faq-container summary {
        padding: 19px 17px;

        gap: 15px;

        font-size: 15px;
        line-height: 1.45;
    }

    .faq-container summary::after {
        width: 30px;
        height: 30px;

        font-size: 20px;
    }

    .faq-container details p {
        padding: 0 17px 20px;

        font-size: 14px;
        line-height: 1.7;
    }


    /* Map card */

    .map-location-card {
        left: 12px;
        bottom: 12px;
    }
}


/* =========================================================
   22. SMALL MOBILE — MAX 500px
========================================================= */

@media (max-width: 500px) {

    .contact-content h2 {
        font-size: 45px;
    }

    .map-container {
        min-height: 350px;
        border-radius: 10px;
    }

    .map-container iframe {
        min-height: 350px;
    }

    .address-card {
        padding: 18px;
    }

    .address-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .contact-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   23. VERY SMALL PHONES — MAX 400px
========================================================= */

@media (max-width: 400px) {

    .logo img {
        width: 120px;
    }

    .main-nav a {
        padding: 17px 0;
        font-size: 22px;
    }

    .contact-content h2 {
        font-size: 42px;
    }

    .offer-popup-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .map-location-card {
        left: 12px;
        bottom: 12px;
    }
}


/* =========================================================
   24. VERY SMALL PHONES — MAX 380px
========================================================= */

@media (max-width: 380px) {

    .hero-slide h1,
    .hero-slide h2 {
        font-size: 44px;
    }

    .hero-slide .hero-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-heading h2,
    .about-content h2,
    .contact-content h2 {
        font-size: 36px;
    }
}


/* =========================================================
   25. ACCESSIBILITY
========================================================= */

.seo-section a:focus-visible,
.faq-container summary:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(242, 8, 34, 0.35);
    outline-offset: 4px;
}


/* =========================================================
   26. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}