/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .nav {
        display: none;
    }

    .nav-booking {
        display: none;
    }

    .menu-toggle {
        display: block;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding:
            140px 0 70px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero h1 {
        font-size: clamp(4.5rem, 12vw, 7rem);
    }

    .hero-visual {
        max-width: 700px;
    }

    .hero-image {
        min-height: 650px;
    }

    .manifesto {
        padding: 7rem 0;
    }

    .manifesto-grid {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .manifesto-content h2 {
        font-size: clamp(4rem, 11vw, 6rem);
    }

    .section-heading {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

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

    .pizza-card:last-child {
        grid-column: span 2;

        width: calc(50% - 0.75rem);
    }

    .story {
        padding: 7rem 0;
    }

    .story-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .story-image {
        min-height: 600px;
    }

    .story-content {
        max-width: 650px;
    }


    .gallery-preview {
        padding: 7rem 0;
    }

    .gallery-header {
        align-items: flex-start;
    }

    .gallery-grid {
        grid-auto-rows: 240px;
    }

    .visit {
        padding: 7rem 0;
    }

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

    .visit-card {
        min-height: 360px;
    }

    .visit-card:nth-child(2) {
        border-right: 0;
    }

    .visit-card-accent {
        grid-column: span 2;

        min-height: 300px;

        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .final-cta {
        padding: 7rem 0;
    }

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

        gap: 4rem;
    }

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

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

    .footer-bottom>p:last-child {
        grid-column: span 2;

        text-align: left;
    }

    .menu-hero {
        padding: 10rem 0 5rem;
    }

    .menu-category {
        grid-template-columns: 1fr;

        gap: 3rem;

        padding-top: 6rem;
    }

    .about-page-hero {
        padding: 10rem 0 5rem;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

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

    .about-value:last-child {
        grid-column: span 2;

        border-top: 1px solid var(--color-border);
    }

    .craft-cta {
        padding: 7rem 0;
    }

    .craft-cta-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .craft-cta-image {
        height: 500px;
    }

    .gallery-page-hero {
        padding: 10rem 0 5rem;
    }

    .gallery-page-grid {
        grid-auto-rows: 260px;
    }

    .contact-page-hero {
        padding: 10rem 0 5rem;
    }

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

    .contact-info-block:last-child {
        grid-column: span 2;

        border-top: 1px solid var(--color-border);
    }

    .reservation-grid {
        grid-template-columns: 1fr;

        gap: 5rem;
    }

    .legal-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .legal-sidebar {
        position: static;

        padding-bottom: 3rem;

        border-bottom: 1px solid var(--color-border);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .container {
        width: 90%;
    }


    /* HEADER */

    .navbar {
        min-height: 76px;
    }

    .logo {
        font-size: 1.6rem;
    }


    /* HERO */

    .hero {
        padding:
            120px 0 50px;
    }

    .hero-grid {
        gap: 3rem;
    }

    .hero-eyebrow {
        margin-bottom: 1.3rem;

        font-size: 0.6rem;
    }

    .hero h1 {
        font-size: clamp(3.8rem, 18vw, 5.5rem);

        line-height: 0.82;
    }

    .hero-description {
        margin-top: 2rem;

        font-size: 0.92rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .hero-image {
        min-height: 480px;
    }

    .hero-image::after {
        bottom: -20px;

        font-size: 5rem;
    }

    .hero-info>div {
        padding: 1.1rem;
    }

    .manifesto {
        padding: 6rem 0;
    }

    .manifesto-content h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

    .manifesto-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 2rem;

        margin-top: 3rem;
    }

    .featured-menu {
        padding: 6rem 0;
    }

    .section-heading {
        margin-bottom: 3rem;
    }

    .section-heading h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

    .pizza-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .pizza-card:last-child {
        grid-column: auto;

        width: 100%;
    }

    .pizza-image {
        aspect-ratio: 4 / 4.7;
    }

    .story {
        padding: 6rem 0;
    }

    .story-image {
        min-height: 500px;
    }

    .story-badge {
        width: 110px;
        height: 110px;
    }

    .story-badge strong {
        font-size: 2.2rem;
    }

    .story-content h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }


    .gallery-preview {
        padding: 6rem 0;
    }

    .gallery-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 2rem;

        margin-bottom: 3rem;
    }

    .gallery-header h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

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

        gap: 0.6rem;
    }

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

    .gallery-item-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item-wide {
        grid-column: span 2;
    }

    .visit {
        padding: 6rem 0;
    }

    .visit-header {
        margin-bottom: 3rem;
    }

    .visit-header h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

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

    .visit-card {
        min-height: 330px;

        padding: 1.5rem;

        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .visit-card-accent {
        grid-column: auto;

        min-height: 330px;
    }

    .hours>div {
        flex-wrap: wrap;
    }

    .final-cta {
        padding: 6rem 0;
    }

    .final-cta-box {
        padding: 3rem 1.5rem;
    }

    .final-cta-box h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

    .final-cta-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    /* FOOTER */

    .footer {
        padding-top: 5rem;

        padding-bottom: calc(2rem + env(safe-area-inset-bottom));

        margin-bottom: 0;
    }

    .footer-top {
        padding-bottom: 4rem;
    }

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

        gap: 3rem;
    }

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

        gap: 0.7rem;
    }

    .footer-bottom>p:last-child {
        grid-column: auto;

        text-align: left;
    }

    .footer-legal {
        margin: 0.5rem 0;
    }

    .menu-hero {
        padding: 9rem 0 4rem;
    }

    .menu-hero h1 {
        font-size: clamp(5rem, 25vw, 8rem);
    }

    .menu-hero-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 2rem;

        margin-top: 3rem;
    }


    /* CATEGORY NAV */

    .menu-categories {
        gap: 1.5rem;

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: none;
    }

    .menu-categories::-webkit-scrollbar {
        display: none;
    }


    /* MENU */

    .menu-category {
        padding-top: 5rem;
    }

    .menu-category+.menu-category {
        margin-top: 3rem;
    }

    .menu-category-heading {
        gap: 1rem;
    }

    .menu-category-heading h2 {
        font-size: clamp(3.5rem, 17vw, 5rem);
    }

    .menu-item {
        gap: 1.5rem;

        padding: 1.7rem 0;
    }

    .menu-item:hover {
        padding-left: 0;
    }

    .menu-item h3 {
        font-size: 1.5rem;
    }

    .menu-item p {
        font-size: 0.78rem;
    }

    .menu-item strong {
        font-size: 1.5rem;
    }

    .about-page-hero {
        padding: 9rem 0 4rem;
    }

    .about-page-hero h1 {
        font-size: clamp(5rem, 24vw, 8rem);
    }

    .about-page-intro {
        grid-template-columns: 1fr;

        gap: 1.5rem;

        margin-top: 3rem;
    }


    /* IMAGE */

    .about-page-image {
        padding-bottom: 6rem;
    }

    .about-page-image-wrapper {
        height: 520px;
    }


    /* PHILOSOPHY */

    .philosophy {
        padding: 6rem 0;
    }

    .philosophy-heading h2 {
        font-size: clamp(3.5rem, 17vw, 5rem);
    }

    .philosophy-content {
        padding-top: 0;
    }


    /* VALUES */

    .about-values {
        padding: 6rem 0;
    }

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

    .about-value {
        min-height: 330px;

        padding: 1.5rem;

        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .about-value:last-child {
        grid-column: auto;

        border-bottom: 0;
    }

    .craft-cta {
        padding: 6rem 0;
    }

    .craft-cta-image {
        height: 420px;
    }

    .craft-cta-content h2 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

    .craft-cta-actions {
        flex-direction: column;
    }

    .craft-cta-actions .btn {
        width: 100%;
    }

    .gallery-page-hero {
        padding: 9rem 0 4rem;
    }

    .gallery-page-hero h1 {
        font-size: clamp(5rem, 24vw, 8rem);
    }

    .gallery-page-intro {
        margin-top: 3rem;
    }

    .gallery-page-intro p {
        margin-left: 0;
    }


    /* GRID */

    .gallery-page {
        padding-bottom: 6rem;
    }

    .gallery-page-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 220px;

        gap: 0.6rem;
    }

    .gallery-page-item {
        grid-column: span 1;
    }

    .gallery-page-item-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-page-item-wide {
        grid-column: span 2;
    }

    .contact-page-hero {
        padding: 9rem 0 4rem;
    }

    .contact-page-hero h1 {
        font-size: clamp(5rem, 24vw, 8rem);
    }

    .contact-page-intro {
        grid-template-columns: 1fr;

        gap: 1.5rem;

        margin-top: 3rem;
    }


    /* INFO */

    .contact-page-info {
        padding: 2rem 0 6rem;
    }

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

    .contact-info-block {
        min-height: auto;

        padding: 2rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .contact-info-block:last-child {
        grid-column: auto;

        border-top: 0;
    }

    .contact-info-number {
        margin-bottom: 3rem;
    }


    /* RESERVATION */

    .reservation {
        padding: 6rem 0;
    }

    .reservation-heading h2 {
        font-size: clamp(3.5rem, 17vw, 5rem);
    }

    .reservation-form {
        grid-template-columns: 1fr;
    }

    .form-full {
        grid-column: auto;
    }

    .form-submit {
        flex-direction: column;

        align-items: flex-start;
    }

    .form-submit .btn {
        width: 100%;
    }


    /* MAP */

    .contact-map {
        padding: 6rem 0;
    }

    .contact-map-placeholder {
        min-height: 380px;

        padding: 2rem;
    }

    /* =========================
   THANK YOU
========================= */

    .thank-you {
        min-height: auto;

        padding: 9rem 0 6rem;
    }

    .thank-you h1 {
        font-size: clamp(4.5rem, 21vw, 7rem);
    }

    .thank-you-description {
        margin-top: 2rem;
    }

    .thank-you-notice {
        grid-template-columns: 35px 1fr;

        gap: 1rem;
    }

    .thank-you-actions {
        flex-direction: column;
    }

    .thank-you-actions .btn {
        width: 100%;
    }

    .legal-hero {
        padding: 9rem 0 4rem;
    }

    .legal-hero h1 {
        font-size: clamp(5rem, 24vw, 8rem);
    }

    .legal-content {
        padding: 6rem 0;
    }

    .legal-section {
        padding-bottom: 3rem;
    }

    .legal-section+.legal-section {
        padding-top: 3rem;
    }

    .legal-data-box,
    .legal-note {
        padding: 1.5rem;
    }
}