/* mobile.css */
.container-wide, .container-narrow { padding: 0 20px; }

.black-bg { height: auto; }
.nav-flex { height: 70px; padding: 0 15px; }

section { 
    height: auto !important; 
    padding: 60px 0 !important; 
    min-height: 100px !important; 
}

.section-flex, .section-flex.reverse { 
    flex-direction: column !important; 
    text-align: center; 
    gap: 30px; 
}

/* Reset containers for mobile centering */
.slideshow-container { 
    width: 280px !important; 
    margin: 0 auto !important; 
}

.placeholder-img, .first-image-style { 
    width: 280px !important; 
    height: auto !important; 
    margin: 0 auto !important; 
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}

/* Ensure the dots stay attached to the image width */
.slideshow-controls {
    width: 280px !important;
    margin: -2px auto 20px auto !important;
}

.text-box { text-align: center; padding: 0 10px; height: auto !important; }

.video-container { width: 100% !important; height: auto !important; }
.video-container video { height: auto !important; }

.footer-grid { grid-template-columns: 1fr; text-align: center; }

#pgBtn { 
    width: 90% !important; 
    max-width: 320px; 
    margin: 10px auto !important; 
    display: block !important; 
}

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

@media screen and (max-width: 768px) {
    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
        gap: 10px;
        width: 100%;
    }

    .gallery-item {
        width: 100% !important;
    }

    .gallery-item video, 
    .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; /* This makes sure they fill the square perfectly */
    }
}

@media screen and (max-width: 768px) {
    /* 1. Kill the 100px width and let links be as small as the text */
    .menu-link {
        width: auto !important; 
        min-width: 0 !important;
        padding: 0 6px !important; /* Tighten padding to fit more on one line */
        font-size: 11px !important; /* Keep text small but visible */
        white-space: nowrap !important; /* STOP "Us" from dropping to a second line */
    }

    /* 2. REMOVE the font-size: 0 rule you had here so the text returns */
    .menu-link[href="."], 
    .menu-link[href="/about/"] {
        font-size: 11px !important; 
    }

    /* 3. Bring back a tiny bit of space for the icon */
    .menu-icon {
        margin-right: 4px !important; 
        width: 14px !important; /* Shrink icons slightly to help fit text */
        height: 14px !important;
    }

    /* 4. Book Now Button Tweaks */
    #menuBook {
        padding: 0 8px !important;
        margin: auto 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        /* Ensure the ID matches your inline style or CSS */
        display: flex;
        align-items: center;
        height: 34px; 
    }
}