/* ==========================================================================
   ZION CREST SUITES — MOBILE RESPONSIVE STYLESHEET
   Targets all page-specific classes across the full site.
   Loaded by every page. Edit here to update mobile styles site-wide.
   ========================================================================== */

/* ── HAMBURGER NAV BUTTON ──────────────────────────────────────────────── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}
.hero-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.90);
    transition: all 0.3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── MOBILE MENU DRAWER ────────────────────────────────────────────────── */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #FDFBF7;
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 80px 40px 40px;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0A2540;
    text-decoration: none;
    font-weight: 500;
}
.mobile-nav-drawer a:hover { color: #0A2540; opacity: 0.6; }
.mobile-nav-drawer .drawer-close {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    color: #0A2540;
    line-height: 1;
}
.mobile-nav-drawer .drawer-logo {
    position: absolute;
    top: 20px;
    left: 28px;
}
.mobile-nav-drawer .drawer-logo img { height: 44px; width: auto; }

/* ── WIDGET STACKING (WhatsApp above Tidio, same right side) ──────────── */
#whatsapp-fab {
    bottom: 90px !important;
    right: 20px !important;
}
#tidio-chat,
#tidio-chat-iframe {
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
}

/* ==========================================================================
   TABLET BREAKPOINT (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .editorial-frame { padding: 0 30px; }
    .container-fluid { padding: 0 30px; }

    /* Homepage */
    .about-section           { gap: 50px; }
    .living-spaces-section   { gap: 40px; }
    .gallery-art-matrix      { gap: 10px; }
    .location-editorial-grid { gap: 40px; }

    /* About */
    .manifesto-section { gap: 50px; }
    .trust-grid        { gap: 30px; }
}

/* ==========================================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* ── SHARED NAV ────────────────────────────────────────────── */
    .navbar-constrained {
        padding: 16px 20px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .nav-links-left,
    .nav-links-right { display: none !important; }
    .nav-hamburger   { display: flex !important; }
    .hero-hamburger  { display: flex !important; }

    /* Logo sizes on mobile */
    .nav-header-static img[alt="Zion Crest Suites"] {
        height: 58px !important;
    }
    .hero-viewport img[alt="Zion Crest Suites"],
    .nav-brand-center img[alt="Zion Crest Suites"] {
        height: 64px !important;
    }
    .mobile-nav-drawer img[alt="Zion Crest Suites"] {
        height: 50px !important;
    }

    /* Footer override from shared-nav-footer.css */
    .footer-matrix-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .footer-bottom-meta {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .footer-legal-links a { margin-left: 10px; }

    /* ── GLOBAL FRAME / CONTAINER ───────────────────────────────── */
    .editorial-frame { padding: 0 18px; }
    .container-fluid { padding: 0 18px; }

    /* ── INDEX / HOMEPAGE ───────────────────────────────────────── */

    /* Hero */
    .hero-title-main {
        font-size: 2.4rem !important;
        letter-spacing: 6px !important;
    }
    .hero-title-sub {
        font-size: 3.8rem !important;
        margin-top: -10px !important;
    }
    .hero-center-typography {
        padding: 0 20px;
        padding-top: 40px;
    }

    /* About section */
    .about-section {
        grid-template-columns: 1fr !important;
        padding: 70px 0 !important;
        gap: 40px;
    }
    .about-main-title { font-size: 2rem !important; }
    .image-asymmetrical-frame { padding-bottom: 0 !important; }
    .main-sculpture-img { width: 100% !important; height: 300px !important; }
    .floating-inset-img {
        position: static !important;
        width: 100% !important;
        height: 220px !important;
        border: 6px solid var(--bg-base) !important;
        margin-top: 10px;
    }

    /* Star amenities banner */
    .star-banner-minimal { padding: 60px 0 !important; }
    .star-editorial-display { font-size: 1.2rem !important; }

    /* Living / Accommodations */
    .living-spaces-section {
        grid-template-columns: 1fr !important;
        padding: 60px 0 !important;
        gap: 30px;
    }
    .living-image-canvas { height: 280px !important; }
    .living-display-title { font-size: 2.4rem !important; }

    /* Dining showcase */
    .dining-showcase-section { padding: 60px 0 !important; }
    .dining-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .dining-stage-canvas  { height: 260px !important; }
    .dining-menu-pane     { padding: 30px 0 !important; }
    .dining-floating-description { display: none; }

    /* Gallery */
    .gallery-art-matrix {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .matrix-tall-image  { grid-row: span 1 !important; height: 160px !important; }
    .matrix-short-image { height: 160px !important; }
    .matrix-square-image{ height: 160px !important; }

    /* Testimonial */
    .testimonial-curated { padding: 60px 0 !important; }
    .testimonial-quote-serif { font-size: 1.4rem !important; }

    /* Correspondence / Contact strip on homepage */
    .correspondence-section {
        grid-template-columns: 1fr !important;
        gap: 40px;
        padding: 60px 0 !important;
    }

    /* Salon / Escapes */
    .salon-gatherings-row { flex-direction: column !important; gap: 0 !important; }
    .salon-card-link      { padding: 28px 20px !important; }

    /* Location */
    .location-editorial-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 60px 0 !important;
    }
    .map-minimal-embed { height: 260px !important; }

    /* ── ABOUT PAGE ─────────────────────────────────────────────── */
    .tagline-hero  { padding: 80px 0 50px 0 !important; }
    .tagline-title { font-size: 2rem !important; letter-spacing: 1px !important; }
    .tagline-script{ font-size: 3.2rem !important; }

    .manifesto-section {
        grid-template-columns: 1fr !important;
        padding: 60px 0 !important;
        gap: 30px;
    }
    .manifesto-title    { font-size: 2rem !important; }
    .manifesto-image-wrapper img { width: 100% !important; height: 320px !important; object-fit: cover; }

    .trust-pitch-section { padding: 60px 0 !important; }
    .trust-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px;
    }
    .trust-number { font-size: 2.4rem !important; }

    .call-to-caliber { padding: 60px 0 !important; }
    .pitch-large-serif { font-size: 1.8rem !important; }

    /* ── ROOMS PAGE ─────────────────────────────────────────────── */
    .page-hero   { padding: 70px 0 40px 0 !important; }
    .page-title  { font-size: 2rem !important; letter-spacing: 2px !important; }
    .page-script-subtitle { font-size: 3rem !important; }

    .suite-showcase-section { padding: 50px 0 !important; }
    .suite-row-block {
        grid-template-columns: 1fr !important;
        gap: 0;
        margin-bottom: 60px !important;
    }
    .suite-row-block.reversed { direction: ltr !important; }
    .suite-image-frame { height: 280px !important; }
    .suite-text-frame  { padding: 30px 0 !important; }
    .suite-headline    { font-size: 1.8rem !important; }
    .suite-spec-list   { flex-wrap: wrap; gap: 12px; }

    /* ── DINING PAGE ────────────────────────────────────────────── */
    .dining-intro-split {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 50px 0 !important;
    }
    .dining-main-image { height: 260px !important; }
    .dining-narrative-box { padding: 0 !important; }

    .menu-lookbook-section { padding: 50px 0 !important; }
    .menu-grid-framework {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .dining-reservation-pitch { padding: 60px 0 !important; }

    /* ── EXPERIENCES PAGE ───────────────────────────────────────── */
    .experience-matrix {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .experience-img-wrapper { height: 220px !important; }
    .experience-heading { font-size: 2rem !important; }
    .concierge-strip    { padding: 40px 20px !important; }
    .concierge-wrap     { flex-direction: column; gap: 20px; text-align: center; }

    /* ── SUITE DETAIL PAGES ─────────────────────────────────────── */
    .suite-intro-header { padding: 70px 0 40px !important; }
    .suite-main-title   { font-size: 2rem !important; }
    .suite-script-subtitle { font-size: 3rem !important; }
    .suite-main-image   { height: 280px !important; }

    .suite-gallery-split {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 50px 0 !important;
    }
    .suite-narrative-box { padding: 0 !important; }

    .spec-grid-layout {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
        padding: 50px 0 !important;
    }
    .spec-card { padding: 24px 16px !important; }
    .reservation-pitch { padding: 60px 0 !important; }

    /* ── PROPERTIES PAGE ────────────────────────────────────────── */
    .comparison-hero   { padding: 70px 0 40px !important; }
    .comparison-main-title { font-size: 2rem !important; }
    .dual-property-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 40px 0 !important;
    }
    .property-column-card { padding: 30px 20px !important; }
    .property-visual-frame { height: 240px !important; }
    .matrix-section  { padding: 40px 0 !important; overflow-x: auto; }
    .matrix-table    { font-size: 12px; }

    /* ── CONTACT PAGE ───────────────────────────────────────────── */
    .contact-main-title   { font-size: 2.2rem !important; }
    .contact-subtitle-script { font-size: 3rem !important; }
    .desk-split-section {
        grid-template-columns: 1fr !important;
        gap: 40px;
        padding: 50px 0 !important;
    }
    .directory-column     { padding: 30px 0 !important; }
    .registry-form-pane   { padding: 30px 20px !important; }
    .form-row-dual {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* ── KILIMANJARO PAGE ───────────────────────────────────────── */
    .estate-hero          { padding: 50px 0 70px !important; }
    .hero-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .estate-title-main  { font-size: 2.2rem !important; }
    .estate-title-script{ font-size: 3.5rem !important; }
    .hero-meta-box      { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(30,34,33,0.1); padding-top: 20px; }
    .landscape-canvas   { height: 260px !important; margin-bottom: 60px !important; }

    .narrative-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 60px !important;
    }

    .mood-inversion-section { padding: 70px 0 !important; }
    .inversion-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    .experience-footer-pitch { padding: 60px 0 100px !important; }

    /* ── PRIVACY & TERMS ────────────────────────────────────────── */
    .tagline-title  { font-size: 2rem !important; }
    .legal-body     { padding: 10px 0 80px !important; }
    .legal-intro    { font-size: 1.1rem !important; }

    /* ── GLOBAL SMALL FIXES ─────────────────────────────────────── */
    section { overflow-x: hidden; }
}

/* ==========================================================================
   SMALL MOBILE (max-width: 420px)
   ========================================================================== */
@media (max-width: 420px) {
    .hero-title-main   { font-size: 1.9rem !important; letter-spacing: 4px !important; }
    .hero-title-sub    { font-size: 3rem !important; }
    .gallery-art-matrix{ grid-template-columns: 1fr !important; }
    .trust-grid        { grid-template-columns: 1fr !important; }
    .spec-grid-layout  { grid-template-columns: 1fr !important; }
    .editorial-frame   { padding: 0 14px; }
    .container-fluid   { padding: 0 14px; }
}