/* =========================================================
   KAMAYAN BEACH RESTAURANT
   Responsive Styles
========================================================= */

@media (max-width: 1020px) {

    .menu-toggle {
        position: relative;
        z-index: 1002;

        display: block;
    }

    .nav-panel {
        position: fixed;
        inset: 0;

        flex-direction: column;
        justify-content: center;

        background:
            rgba(
                8,
                19,
                20,
                0.985
            );

        transform:
            translateX(100%);

        transition:
            transform 0.3s ease;
    }

    .nav-panel.open {
        transform:
            translateX(0);
    }

    .nav-links {
        flex-direction: column;
        align-items: center;

        gap: 20px;
    }

    .nav-links a {
        font-size: 1.25rem;
    }

    .menu-toggle.active span:nth-child(1) {
        transform:
            translateY(8px)
            rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform:
            translateY(-8px)
            rotate(-45deg);
    }

    .split-grid,
    .rooms-preview,
    .story-layout,
    .contact-grid,
    .social-cta {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .story-visuals {
        position: static;

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

    .story-visuals .story-quote {
        grid-column:
            1 / -1;
    }

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

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

    .guest-preview img:last-child {
        grid-column:
            1 / -1;
    }

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

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

    .menu-tools {
        position: static;

        grid-template-columns: 1fr;
    }

    .menu-photo-strip {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .menu-photo-strip img:nth-child(4),
    .menu-photo-strip img:nth-child(5) {
        display: none;
    }

    .room-contact,
    .map-card-body {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {

    .container {
        width: min(
            calc(100% - 28px),
            var(--container)
        );
    }

    .section {
        padding:
            76px 0;
    }

    .site-header {
        padding:
            7px 0;
    }

    .navbar {
        min-height: 66px;
    }

    .brand img {
        width: 68px;
        height: 68px;
    }

    .hero-content {
        padding:
            122px 0
            350px;
    }

    .hero-content h1 {
        margin-bottom: 18px;
    }

    .actions {
        flex-direction: column;
    }

    .actions .btn {
        width: 100%;
    }

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

    .info-grid article {
        padding:
            13px 18px;

        border-right: 0;

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

    .image-duo {
        padding:
            0 48px
            48px 0;
    }

    .image-duo-main {
        min-height: 420px;
    }

    .section-heading,
    .cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .feature-grid,
    .guest-preview,
    .gallery-grid,
    .room-gallery,
    .values-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .guest-preview img:last-child {
        grid-column: auto;
    }

    .rooms-preview-images {
        grid-template-columns: 1fr;
    }

    .rooms-preview-images img,
    .rooms-preview-images img:last-child {
        min-height: 300px;

        margin-top: 0;
    }

    .social-cta,
    .cta {
        padding: 34px 24px;
    }

    .page-hero {
        min-height: 52vh;

        padding:
            145px 0
            56px;
    }

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

    .story-visuals .story-quote {
        grid-column: auto;
    }

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

    .menu-photo-strip img:nth-child(3) {
        display: none;
    }

    .menu-filters,
    .gallery-filters {
        gap: 8px;
    }

    .menu-filter,
    .gallery-filter {
        padding:
            0 14px;

        font-size: 0.86rem;
    }

    .menu-price-item {
        grid-template-columns: 1fr;

        gap: 8px;

        padding:
            18px 20px;
    }

    .menu-price {
        justify-self: start;
    }

    .room-contact {
        padding:
            30px 24px;
    }

    .contact-card {
        padding:
            30px 24px;
    }

    .map-card iframe {
        height: 350px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }
}


/* =========================================================
   FINAL MAP RESPONSIVE POLISH
========================================================= */

@media (max-width: 1020px) {

    .map-card-body {
        grid-template-columns: 1fr;

        align-items: start;
    }

    .map-directions-btn {
        width: fit-content;
    }
}

@media (max-width: 680px) {

    .map-embed-wrap {
        height: 300px;
    }

    .map-card-body {
        gap: 20px;

        padding: 24px;
    }

    .map-copy h2 {
        font-size: 2rem;
    }

    .map-directions-btn {
        width: 100%;
    }

    .whatsapp-float {
        right: 16px;
        bottom: 16px;

        width: 48px;
        height: 48px;
    }
}


@media (max-width: 680px) {

    .location-card {
        padding: 30px 24px;
    }

    .location-card .btn {
        width: 100%;
    }
}