/* ==========================================================================
   AABE DEVELOPERS - RESPONSIVE OVERRIDES (MOBILE TO 4K)
   ========================================================================== */

/* Desktop & Laptop Adjustments (max-width: 1200px) */
@media (max-width: 1200px) {
    :root {
        --section-padding: 90px 0;
    }
    
    .about-grid {
        grid-template-columns: 1fr auto 1.3fr;
        gap: 2rem;
    }
    .collage-item {
        width: 185px;
        height: 450px;
    }
    .projects-cards-grid {
        gap: 1.5rem;
    }
    .decision-matrix-card {
        padding: 2.5rem;
    }
    .matrix-grid {
        gap: 2.5rem;
    }
    .footer-grid {
        gap: 2.5rem;
    }
}

/* Tablet Landscape (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px 0;
    }

    /* About Section */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .about-collage-wrap {
        grid-template-columns: 1fr;
    }
    .about-vertical-brand {
        display: none;
    }
    .collage-container {
        gap: 1.2rem;
    }
    .collage-item {
        width: 180px;
        height: 440px;
    }

    /* Investment Grid (Plots) - Tablet: Exactly 2 Cards Per Row */
    .investment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
    .investment-grid .plot-card {
        grid-column: span 1 !important;
        width: 100% !important;
        display: flex;
    }
    .investment-grid .plot-card.project-card-hidden {
        display: none !important;
    }

    /* View All Projects button visible and centered on tablet */
    .view-all-projects-container {
        display: flex !important;
        justify-content: center;
        padding-top: 2rem;
    }
    .investment-grid .plot-content {
        padding: 1.4rem 1.15rem 1.35rem;
    }
    .investment-grid .plot-title {
        font-size: 1.35rem;
    }
    .investment-grid .plot-details {
        padding: 0.5rem 0.65rem;
        font-size: 0.775rem;
    }
    .investment-grid .plot-features {
        font-size: 0.775rem;
        gap: 0.35rem;
    }

    /* Benefits Grid (Why 3 Projects & Why AABE) */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .benefits-grid.why-aabe-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits-grid.why-aabe-grid .benefit-item:last-child {
        grid-column: span 2;
    }

    /* Location Advantage & Map */
    .growth-layout {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .growth-map-wrap,
    .growth-map {
        min-height: 480px;
        height: 480px;
    }
    .location-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .location-cards .loc-card:last-child {
        grid-column: span 2;
    }

    /* Project Highlights */
    .highlight-grid,
    .highlight-grid-reverse {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .highlight-grid-reverse .highlight-image {
        order: 1;
    }
    .highlight-grid-reverse .highlight-content {
        order: 2;
    }
    .highlight-image {
        height: 360px;
    }

    /* Property Detail Page */
    .detail-hero-grid,
    .property-intro-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .property-sidebar {
        width: 100%;
        max-width: 580px;
    }
    .corridor-checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .specs-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
    .spec-cell-wide {
        grid-column: span 2;
    }
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .amenities-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .area-statement-dual-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Compare CTA */
    .cta-inner-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    /* FAQ Section */
    .faq-accordion-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* CTA Section */
    .enquiry-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .enquiry-image-card {
        min-height: 480px;
    }
    .cta-form-card {
        padding: 2.25rem 2rem;
    }
    .enquiry-card {
        padding: 3rem 2.25rem;
    }
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
    .footer-brand {
        grid-column: span 2;
    }
}

/* Tablet Portrait & Mobile (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --section-padding: 70px 0;
    }

    /* Mobile Navbar Header Layout */
    :root {
        --nav-height: 64px;
    }
    /* Keep logo clear of banner text on mobile */
    .hero {
        height: auto;
        overflow: visible;
        padding-top: var(--nav-height);
        background-color: #0a1420;
        box-sizing: border-box;
    }
    .navbar.navbar-over-hero:not(.scrolled) {
        background-color: rgba(10, 20, 32, 0.78);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .logo {
        max-width: 128px;
        overflow: hidden;
    }
    .logo-brand-img,
    .logo-brand-img--light,
    .logo-brand-img--dark {
        height: 28px !important;
        max-height: 28px;
        max-width: 128px;
        width: auto;
        object-fit: contain;
    }
    .hero img,
    .hero-banner img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .hero-explore-wrap {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
        padding: 1.35rem 1.25rem 1.5rem;
        background-color: var(--ivory, #FFF9F1);
        box-sizing: border-box;
    }
    .hero-explore-line {
        display: block;
        width: 72px;
        height: 2px;
        margin: 0;
        background: linear-gradient(
            90deg,
            transparent,
            #9A6414 15%,
            #D4A72C 35%,
            #F0C048 50%,
            #D4A72C 65%,
            #9A6414 85%,
            transparent
        );
    }
    .hero-explore-btn {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        padding: 0.85rem 1.5rem;
        font-size: 0.75rem;
    }
    .navbar {
        min-height: 64px;
        padding: 0.65rem 0;
    }
    .navbar.scrolled {
        min-height: 60px;
        padding: 0.55rem 0;
    }
    .nav-container {
        padding: 0 16px;
    }
    .logo {
        gap: 8px;
        max-width: 128px;
        overflow: hidden;
    }
    .logo-brand-img,
    .logo-brand-img--light,
    .logo-brand-img--dark {
        height: 28px !important;
        max-height: 28px;
        max-width: 128px;
        width: auto;
        object-fit: contain;
    }
    .brand-intro-container {
        max-width: 320px;
        padding: 1.5rem;
    }
    .brand-intro-logo {
        max-width: 280px;
    }
    .logo-mark {
        font-size: 1.15rem;
    }
    .logo-en {
        font-size: 1.25rem;
    }
    .logo-sub {
        font-size: 0.45rem;
    }
    .nav-links,
    .nav-actions .btn,
    .nav-actions .btn-nav-enquire,
    .nav-actions .btn-consult {
        display: none !important;
    }
    .nav-actions {
        gap: 0;
    }
    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Property detail CTAs (shared .hero-cta-group) */
    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }
    .hero-cta-group .btn {
        width: 100%;
    }

    /* About Section & Angled Collage */
    .about-botanical-art {
        display: none;
    }
    .about-collage-wrap {
        grid-template-columns: 1fr;
    }
    .collage-container {
        justify-content: center;
        gap: 0.85rem;
        padding: 1.25rem 0.5rem;
    }
    .collage-item {
        width: 145px;
        height: 340px;
        border-radius: 16px;
        transform: skewX(-6deg);
    }
    .collage-item img {
        width: 135%;
        transform: skewX(6deg) translateX(-12%);
    }
    .collage-caption {
        width: 135%;
        transform: skewX(6deg) translateX(-12%);
        padding: 2.2rem 0.5rem 0.85rem;
    }
    .collage-caption span {
        font-size: 0.6875rem;
    }

    /* Wave Transitions */
    .about-wave-bottom,
    .developments-wave-bottom {
        height: 22px;
    }


    /* Benefits Grid (Why 3 Projects & Why AABE) */
    .benefits-grid,
    .benefits-grid.why-aabe-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .benefits-grid.why-aabe-grid .benefit-item:last-child {
        grid-column: span 1;
    }

    /* Location Advantage & Map */
    .growth-map-wrap,
    .growth-map {
        min-height: 400px;
        height: 400px;
        border-radius: 16px;
    }
    .aabe-marker-card {
        padding: 5px 10px;
        border-radius: 9px;
    }
    .aabe-marker-loc {
        font-size: 0.72rem;
    }
    .aabe-marker-proj {
        font-size: 0.92rem;
    }
    .location-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .location-cards .loc-card:last-child {
        grid-column: span 1;
    }

    /* Project Highlights & Detail Page */
    .highlight-image {
        height: 280px;
    }
    .corridor-checklist-grid,
    .specs-grid-layout,
    .amenities-grid,
    .amenities-grid-6,
    .area-statement-dual-grid,
    .project-details-breakdown-grid,
    .blogs-grid,
    .other-projects-grid {
        grid-template-columns: 1fr;
    }
    .spec-cell-wide {
        grid-column: span 1;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .gallery-item {
        height: 220px;
    }
    .gallery-item-large {
        grid-row: auto;
        height: 260px;
    }
    .hero-meta-strip {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .property-sidebar {
        width: 100%;
        max-width: 100%;
    }
    .sidebar-card {
        padding: 1.75rem 1.4rem;
        border-radius: 12px;
    }
    .sidebar-meta-list li {
        font-size: 0.8125rem;
        padding: 0.75rem 0;
    }

    /* Flex actions */
    .flex-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .flex-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* FAQ */
    .faq-accordion-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* CTA */
    .enquiry-cta-section {
        padding: 70px 0;
    }
    .enquiry-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .enquiry-image-card {
        min-height: 280px;
        height: 280px;
        border-radius: 16px;
    }
    .enquiry-img-badge {
        bottom: 14px;
        left: 14px;
        right: 14px;
        padding: 8px 14px;
    }
    .cta-form-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }
    .enquiry-card {
        padding: 2.25rem 1.5rem;
        border-radius: 16px;
    }
    .enquiry-card .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    .enquiry-card .form-row-2 .form-group {
        margin-bottom: 1.15rem;
    }
    .advisor-buttons-group {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }
    .advisor-btn {
        width: 100%;
        justify-content: center;
    }
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    .form-row-2 .form-group {
        margin-bottom: 1.15rem;
    }
    .form-group label {
        min-height: auto;
    }

    /* Footer */
    .footer {
        padding-top: 4.5rem;
        padding-bottom: 2.5rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .footer-brand {
        grid-column: span 1;
    }
    .footer-brand-img {
        height: 44px;
        max-width: 180px;
    }
    .footer-bottom-container {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* Mobile Screens (max-width: 599px) - Single Column Grid */
@media (max-width: 599px) {
    .investment-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }
    .investment-grid .plot-card {
        grid-column: span 1 !important;
        width: 100% !important;
        display: flex;
    }
    .view-all-projects-container {
        display: none !important;
    }
}

/* Mobile Small Devices (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --section-padding: 60px 0;
    }

    .section-heading {
        font-size: 2rem;
    }
    .enquiry-card {
        padding: 1.75rem 1.15rem;
        border-radius: 14px;
    }
    .enquiry-heading {
        font-size: 1.35rem;
    }
    .hero-explore-wrap {
        padding: 1.15rem 1rem 1.35rem;
        gap: 0.75rem;
    }
    .hero-explore-line {
        width: 60px;
    }
    .hero-explore-btn {
        left: auto;
        bottom: auto;
        padding: 0.75rem 1.25rem;
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
    }
    
    .reason-pill-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }
    .reason-icon-circle {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .why-pillars-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .collage-container {
        display: flex;
        gap: 0.6rem;
        justify-content: center;
        padding: 1rem 0;
    }
    .collage-item {
        width: 105px;
        height: 250px;
        border-radius: 12px;
        transform: skewX(-5deg);
    }
    .collage-item img {
        width: 130%;
        transform: skewX(5deg) translateX(-10%);
    }
    .collage-caption {
        width: 130%;
        transform: skewX(5deg) translateX(-10%);
        padding: 1.5rem 0.35rem 0.65rem;
    }
    .collage-caption span {
        font-size: 0.5625rem;
    }

    .table-responsive {
        font-size: 0.75rem;
    }
    .comparison-table th, 
    .comparison-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Floating Actions -> Mobile Action Bar */
    .desktop-only {
        display: none !important;
    }

    .mobile-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--ivory);
        display: flex;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.08);
        z-index: 1000;
        border-top: 1px solid #D4A72C;
    }
    .mobile-action-bar .action-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 0;
        font-size: 0.625rem;
        font-weight: 700;
        color: var(--brand-red);
        text-decoration: none;
        border-right: 1px solid var(--border-red);
    }
    .mobile-action-bar .action-item:last-child {
        border-right: none;
    }
    .mobile-action-bar .action-item svg {
        margin-bottom: 0.25rem;
    }
    .mobile-action-bar .wa-action {
        background-color: var(--brand-red);
        color: var(--ivory);
    }

    body {
        padding-bottom: 65px;
    }
}

@media (min-width: 481px) {
    .mobile-only {
        display: none !important;
    }
}