/* ============================================
   MOBILE & RESPONSIVE FIXES
   ============================================ */

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Footer logo */
.logo-small {
    max-width: 100px;
    height: auto;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

/* ============================================
   CONTACT SECTION LAYOUT (was missing everywhere)
   ============================================ */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-section .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-section .form-group.full-width {
    grid-column: 1 / -1;
}

/* Anchor-linked sections: clear the fixed header when jumping via nav */
section[id] {
    scroll-margin-top: 70px;
}

/* ============================================
   TABLET & MOBILE  ≤ 768 px
   ============================================ */

@media (max-width: 768px) {

    /* ─────────────────────────────────────────────────────────────
       HEADER  –  solid white, no blur, no transparency
       On desktop the header fades to transparent over the hero
       (hero-light class). On mobile this causes two problems:
         1. backdrop-filter:blur(10px) visually bleeds over the top
            half of the hero image → the "blurred half screen".
         2. White logo/hamburger become invisible on the white
            body background that sits above the hero image.
       Fix: force solid white + remove blur on all mobile states.
    ──────────────────────────────────────────────────────────────── */
    .site-header,
    .site-header.hero-light,
    .site-header.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
    }

    /* Logo & hamburger: always dark on the solid white mobile header */
    .site-header .logo,
    .site-header.hero-light .logo {
        color: var(--primary-dark, #1a3a1a) !important;
    }

    .site-header .menu-toggle,
    .site-header.hero-light .menu-toggle {
        color: var(--dark-gray, #3d3d3d) !important;
    }

    /* Compact header height */
    .header-inner {
        padding: 0.75rem 1rem;
    }

    /* ─────────────────────────────────────────────────────────────
       HERO  –  replace broken image background with green gradient
       background-attachment:fixed causes the image to render at
       ~50% of the element height on Android Chrome, leaving a large
       white/blurred void at the top. The cleanest mobile fix is to
       hide the image layer entirely and use a solid gradient (same
       style as the attractions & contact page heroes that already
       work perfectly on mobile). Desktop still shows the photo.
       !important is necessary here because hero-light + scrolled JS
       class combinations can re-introduce conflicting rules at
       runtime, and background-attachment:fixed in modern-design.css
       uses a plain 0-1-0 selector that source-order alone may not
       reliably beat when the browser rebuilds styles on scroll.
    ──────────────────────────────────────────────────────────────── */
    .hero {
        margin-top: 58px !important;
        min-height: calc(100vh - 58px) !important;
        min-height: calc(100svh - 58px) !important;
        align-items: center;
        /* Green gradient — same as attractions/contact pages */
        background: linear-gradient(135deg, #1a3a1a 0%, #2b7a2b 100%) !important;
    }

    /* Completely hide the background-image element on mobile */
    .hero .hero-bg,
    .hero-bg {
        display: none !important;
    }

    /* Hero content: naturally centered in the green hero */
    .hero-content {
        padding: 2.5rem 1.5rem;
    }

    /* Ensure text stays white on the green background */
    .hero-title,
    .hero .lead {
        color: #fff !important;
    }

    .hero-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
        margin-bottom: 0.75rem;
    }

    .hero .lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* ── SECTIONS ─────────────────────────────────────────────── */
    .section {
        padding: 2.5rem 0;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .wrap {
        padding: 0 0.875rem;
    }

    /* About */
    .about .grid.two {
        gap: 1.5rem;
    }

    /* Contact: stack vertically */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .contact-section .form-group.full-width {
        grid-column: auto;
    }

    .contact-form {
        max-width: 100%;
    }

    /* Apartment / Oil gallery */
    .main-image {
        height: 260px;
    }

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

    /* Territory cards: 2 columns */
    .territory-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Amenities: 2 columns */
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding: 1rem 0;
    }

    /* Single-column grids */
    .proximity-grid,
    .sustainability-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Gallery modal: stack vertically */
    .gallery-modal .modal-body {
        flex-direction: column;
        overflow-y: auto;
        max-height: 90vh;
    }

    .gallery-modal .modal-left {
        min-width: unset;
        width: 100%;
    }

    .gallery-modal .modal-right {
        width: 100%;
        max-width: 100%;
        padding: 0.5rem;
    }

    .gallery-modal .modal-main-img {
        max-height: 50vh;
    }

    /* Maps */
    .map-container {
        height: auto;
        margin: 1rem 0;
    }

    /* Pricing */
    .pricing-card {
        padding: 25px 15px;
    }

    /* Floating contact buttons */
    .floating-contacts {
        bottom: 20px;
        right: 15px;
        gap: 10px;
    }

    .contact-btn {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

/* ============================================
   SMALL PHONES  ≤ 480 px
   ============================================ */

@media (max-width: 480px) {

    .hero-title {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
    }

    /* Stack CTA buttons */
    .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    /* Sections */
    .section {
        padding: 2rem 0;
    }

    .section-title {
        font-size: 1.45rem;
    }

    .section-subtitle {
        font-size: 0.92rem;
    }

    .wrap {
        padding: 0 0.75rem;
    }

    /* About */
    .about-text,
    .about-philosophy {
        padding: 15px;
    }

    /* Territory: single column */
    .territory-grid {
        grid-template-columns: 1fr;
    }

    .territory-card img {
        height: 180px;
    }

    /* Apartment gallery */
    .main-image {
        height: 200px;
    }

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

    .gallery-thumbs img {
        height: 75px;
    }

    /* Amenities: single column */
    .amenities-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Maps */
    .map-item iframe {
        height: 175px;
    }

    /* Floating buttons */
    .floating-contacts {
        bottom: 12px;
        right: 12px;
        gap: 8px;
    }

    .contact-btn {
        width: 46px;
        height: 46px;
        font-size: 1.15rem;
    }

    /* Pricing */
    .pricing-card {
        padding: 20px 12px;
    }

    .price-display .amount,
    .capacity-display .amount {
        font-size: 1.8rem;
    }

    /* Footer */
    .site-footer {
        padding: 1.5rem 0;
    }

    /* Smart lock */
    #accessCode {
        font-size: 1.5rem;
        letter-spacing: 3px;
    }

    /* Guest area */
    .guest-login-container {
        margin: 1rem 0;
        padding: 1rem;
    }

    /* Nav touch targets */
    nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}