/* ========================================================
   PRODEVLOPER PREMIUM RESPONSIVE ENGINE
   Comprehensive Fixes for All Mobile Layout Issues
======================================================== */

/* 1. GLOBAL RESET & OVERFLOW PREVENT */
html, body {
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
}


* {
    box-sizing: border-box;
}

/* 2. NAVIGATION & HEADER RESPONSIVE */
@media (max-width: 991px) {
    .pro-nav {
        display: none !important;
        position: absolute !important;
        top: 85px !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
        z-index: 1000 !important;
        max-height: calc(100vh - 85px) !important;
        overflow-y: auto !important;
    }

    .pro-nav.is-open {
        display: block !important;
    }

    .pro-nav-list {
        flex-direction: column !important;
        padding: 10px 0 !important;
        gap: 0 !important;
    }

    .pro-nav-item {
        width: 100% !important;
        height: auto !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .pro-nav-link {
        padding: 15px 25px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .pro-dropdown {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        padding: 5px 0 !important;
        border-top: none !important;
    }

    .pro-nav-item--dropdown.is-open .pro-dropdown {
        display: block !important;
    }

    .pro-dropdown-link {
        padding: 12px 40px !important;
    }

    /* Topbar Stack */
    .pro-topbar-inner {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
}

/* 3. HERO SECTION RESPONSIVE FIXES */
.hero-section {
    margin-top: 0 !important; 
    height: 600px !important;
}

@media (max-width: 991px) {
    .hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        color: #000000 !important; /* Ensure black text on mobile */
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        color: #333333 !important; /* Ensure dark gray text on mobile */
    }

    .hero-overlay {
        top: 0 !important; /* Align to top */
        left: 0 !important; /* Align to left */
        transform: none !important; /* Remove centering transform */
        padding: 100px 20px !important; /* Adjust padding for mobile */
        display: block !important; /* Ensure block display for left alignment */
        text-align: left !important; /* Left align text */
    }
    
    .hero-section, .hero-img {
        min-height: 400px !important;
        height: 400px !important;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 26px !important;
    }
    
    .hero-overlay {
        padding: 80px 20px !important; /* Further adjust padding for smaller screens */
    }

    .hero-section, .hero-img {
        min-height: 300px !important;
        height: 300px !important;
    }
}

/* 4. GRID SYSTEM & CARDS */
@media (max-width: 991px) {
    .services-grid, 
    .why-grid, 
    .footer-grid, 
    .grid, 
    .grid--2, 
    .grid--3, 
    .grid--4,
    .stats-grid,
    .team-grid,
    .gallery-grid,
    .about-grid,
    .mission-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) { /* Increased from 600px for safety */
    .services-grid, 
    .why-grid, 
    .footer-grid, 
    .grid, 
    .grid--2, 
    .grid--3, 
    .grid--4,
    .stats-grid,
    .team-grid,
    .gallery-grid,
    .mission-grid,
    .vision-grid,
    .about-grid,
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
}

/* 5. SPACING & SECTION ADJUSTMENTS */
@media (max-width: 900px) { /* Increased from 768px for safety */
    section, .py-5 {
        padding: 40px 0 !important;
    }

    .section-heading, .services-heading, .why-heading, .review-title {
        font-size: 28px !important;
        margin-bottom: 30px !important;
    }

    .about-main-title {
        font-size: 22px !important;
    }

    /* CTA Section Fix */
    .pro-cta-inner {
        flex-direction: column !important;
    }

    .pro-cta-left {
        width: 100% !important;
        padding: 40px 20px !important;
        clip-path: none !important;
        text-align: center !important;
    }

    .pro-cta-right {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .pro-cta-heading {
        font-size: 24px !important;
    }

    .pro-cta-buttons {
        justify-content: center !important;
    }
}

/* 6. OVERFLOW & ELEMENT FIXES */
.shape, .about-visual::after, .site-footer::before, .site-footer::after {
    max-width: 100vw !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix CTA section overlap */
@media (max-width: 900px) {
    .cta-modern .shape {
        display: none !important; /* Hide shapes that overlap buttons on mobile */
    }
    .cta-right {
        height: auto !important;
        min-height: 0 !important;
        display: none !important; /* Hide the right side entirely on mobile if it only contains shapes */
    }
    .cta-left {
        padding: 40px 0 !important;
        text-align: center !important;
    }
}


/* Fix review section - Reverting vertical stack to keep horizontal slider working */
@media (max-width: 768px) {
    .review-track {
        flex-direction: row !important; /* Keep horizontal for slider JS */
        gap: 20px !important;
    }
    
    .review-card {
        min-width: 85vw !important; /* Slightly narrower to show next card peek */
        width: auto !important;
        padding: 25px !important;
    }
}

/* Footer bottom alignment */
@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .footer-bottom p {
        text-align: center !important;
    }
}

/* EXTRA SMALL PHONES (under 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px !important;
        width: 100% !important;
    }

    section {
        padding: 30px 0 !important;
    }

    h1, h2, h3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Ensure all text content doesn't overflow */
    .service-title, .section-heading, .services-heading,
    p, span, a {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Card spacing on very small phones */
    .service-card, .flat-card, .team-card, .review-card {
        margin-bottom: 12px !important;
        padding: 10px !important;
    }

    .service-img img, .flat-card img {
        height: 150px !important;
    }
}

/* FLAT CARDS GRID RESPONSIVE */
@media (max-width: 1024px) {
    .flat-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .flat-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .flat-card {
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    .flat-card img {
        height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .flat-card h3 {
        font-size: 1.1rem !important;
        margin: 12px !important;
    }

    .flat-card p {
        margin: 6px 12px !important;
        font-size: 0.9rem !important;
    }

    .flat-card .view-btn {
        margin: 12px !important;
        padding: 10px 20px !important;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .flat-cards-grid {
        gap: 12px !important;
    }

    .flat-card {
        margin-bottom: 10px !important;
    }

    .flat-card img {
        height: 150px !important;
    }

    .flat-card h3 {
        font-size: 1rem !important;
        margin: 10px !important;
    }

    .flat-card p {
        margin: 5px 10px !important;
        font-size: 0.85rem !important;
    }

    .flat-card .view-btn {
        margin: 10px !important;
        padding: 8px 15px !important;
        font-size: 0.9rem !important;
    }
}

/* Standardized Hero Pages Fix */
@media (max-width: 768px) {
    .about-hero, .director-hero, .testimonials-hero, .flat-hero, 
    .apartment-hero, .construction-hero, .team-hero, .gallery-hero, 
    .career-hero, .contact-hero, .pd-property-hero, .services-page .about-hero {
        padding: 60px 20px !important;
        min-height: 250px !important;
    }

    .about-hero h1, .about-hero .hero-title {
        font-size: 32px !important;
    }

    /* SERVICE CARD MOBILE FIX */
    .services-grid, .service-card {
        width: 100% !important;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
    }

    .service-img {
        width: 100% !important;
    }

    .service-img img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .service-content {
        padding: 15px !important;
    }

    .service-title, .card-accordion-btn {
        font-size: 1rem !important;
    }

    /* FLAT/APARTMENT CARD FIX */
    .flat-card, .apartment-card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* ENSURE IMAGES DISPLAY */
    img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* Home hero mobile sizing: keep after generic image rules. */
@media (max-width: 991px) {
    .hero-section {
        height: clamp(400px, 62vh, 560px) !important;
        min-height: 400px !important;
        padding: 0 !important;
    }

    .hero-section .hero-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 400px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .hero-overlay {
        padding: 0 !important;
    }

    .hero-text {
        top: 16% !important;
        left: 6% !important;
        max-width: min(86%, 520px) !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 600px) {
    .hero-section {
        height: clamp(360px, 58vh, 500px) !important;
        min-height: 360px !important;
    }

    .hero-section .hero-img {
        height: 100% !important;
        min-height: 360px !important;
    }

    .hero-title {
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    .slider-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 380px) {
    .hero-section {
        height: 380px !important;
        min-height: 380px !important;
    }

    .hero-section .hero-img {
        min-height: 380px !important;
    }
}