/* ============================================================
   THANE HOME — Responsive / Mobile Fixes (Android & iOS)
   Loaded LAST, after style.css and premium.css.
   Fixes multi-column grids squeezing into mobile, header,
   hero, cards, footer and image overflow.
   Breakpoints:
     Mobile  : max-width 767px
     Tablet  : 768px - 1023px
     Desktop : 1024px+
   ============================================================ */

/* ---------- . Global overflow guard (backup only) ---------- */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* Prevent any element from forcing horizontal scroll */
img, video, iframe, table, pre { max-width: 100%; }

/* Consistent responsive container */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .container { padding-inline: 16px; }
}

/* ---------- 1. Top bar (mobile) ---------- */
/* On small screens the top bar crams phone+email+address+socials.
   Hide it; those actions live inside the mobile menu + sticky bar. */
@media (max-width: 767px) {
    .top-bar { display: none !important; }
}

/* ---------- 2. Header / Navigation (off-canvas mobile menu) ---------- */
.site-header #navToggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--primary);
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
}
.site-header .header-inner { gap: 10px; }
.site-header .brand { min-width: 0; }
.site-header .brand span,
.site-header .brand small { white-space: nowrap; }

@media (max-width: 900px) {
    .site-header #navToggle { display: inline-flex; }
    .site-header .header-actions .btn { display: none; }

    /* Off-canvas panel from the right */
    #mainNav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(84vw, 330px);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        padding: 84px 20px 28px;
        box-shadow: -12px 0 48px rgba(8, 21, 36, 0.28);
        border-top: none;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mainNav.open { transform: translateX(0); }
    #mainNav a {
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        color: var(--text) !important;
        background: transparent !important;
        display: flex !important;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--border);
    }
    #mainNav a:hover, #mainNav a.active {
        background: rgba(201, 168, 76, 0.1) !important;
        color: var(--primary) !important;
    }
    #mainNav a i { color: var(--accent); width: 20px; text-align: center; }

    /* Mobile menu action buttons (Call / WhatsApp) */
    .nav-mobile-actions {
        display: flex !important;
        gap: 10px;
        margin-top: 18px;
    }
    .nav-mobile-actions a {
        flex: 1;
        justify-content: center;
        border: none !important;
        border-radius: 12px !important;
        padding: 14px !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        text-decoration: none;
        color: #fff !important;
    }
    .nav-mobile-actions .m-call { background: var(--primary) !important; }
    .nav-mobile-actions .m-wa { background: #25d366 !important; }
}

/* Backdrop behind off-canvas menu */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 21, 36, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* Close button inside menu */
.nav-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
@media (max-width: 900px) { .nav-close { display: inline-flex; } }

/* ---------- 3. Sticky mobile Call / WhatsApp bar (Android & iOS) ---------- */
.mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    box-shadow: 0 -6px 24px rgba(8, 21, 36, 0.12);
}
.mobile-action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: #fff;
}
.mobile-action-bar .m-call { background: var(--primary); }
.mobile-action-bar .m-wa { background: #25d366; }
@media (max-width: 767px) {
    .mobile-action-bar { display: grid; }
    body { padding-bottom: 64px; }
}

/* ---------- 4. Hero ---------- */
#home-hero h1 {
    font-size: clamp(30px, 8vw, 64px) !important;
    line-height: 1.12 !important;
    word-break: normal;
    overflow-wrap: break-word;
}
#home-hero .hero-sub {
    font-size: clamp(15px, 4vw, 19px) !important;
}
#home-hero .hero-kicker {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    gap: 10px !important;
}
#home-hero .hero-kicker::before, #home-hero .hero-kicker::after { width: 24px !important; }

/* Hero tabs wrap nicely */
.hero-tabs { gap: 8px !important; }
.hero-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap;
}

/* Hero search */
.hero-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.hero-search input { min-width: 0; }

@media (max-width: 767px) {
    #home-hero { padding: 96px 0 88px !important; }
    .hero-search { flex-direction: column !important; border-radius: 20px !important; padding: 12px !important; }
    .hero-search input { width: 100%; }
    .hero-search button { width: 100%; border-radius: 14px !important; }
}

/* ---------- 5. Generic responsive card grids ---------- */
/* Added classes on the homepage grids so we can control them here.
   Using minmax(0,1fr) prevents content from forcing overflow. */
.hp-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card, .project-card, .builder-card, .testimonial-card, .blog-card, .service-card, .deal-card, .home-deal {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile: 1 column (builders & localities 2) */
@media (max-width: 767px) {
    .hp-grid, .hp-grid-3, .hp-grid-2, .hp-grid-5 {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .hp-grid-builders { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
    .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .deal-grid { grid-template-columns: 1fr !important; }
}

/* Tablet: 2 columns for most, 3 for stats */
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hp-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .hp-grid-builders { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 6. Project cards (featured) ---------- */
.project-card .card-body { min-width: 0; }
.project-card h3 { word-break: normal; overflow-wrap: break-word; }
@media (max-width: 767px) {
    .card-img { height: 200px !important; }
    .project-card .card-price { font-size: 18px !important; }
}

/* ---------- 7. Hot deals (home horizontal card) ---------- */
.home-deal { width: 100%; box-sizing: border-box; }
.home-deal .hd-main { min-width: 0; }
.home-deal .hd-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
}
@media (max-width: 767px) {
    .home-deal { flex-direction: column; }
    .home-deal .hd-side {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
    }
    .home-deal .hd-config { font-size: 18px !important; text-align: left; }
    .home-deal .hd-main { padding: 14px 16px !important; }
    .home-deal .hd-row { gap: 6px !important; }
    .home-deal .hd-chip { padding: 4px 7px !important; font-size: 10px !important; }
}

/* ---------- 8. Experience / steps cards ---------- */
.service-card { min-width: 0; word-break: normal; overflow-wrap: break-word; }
@media (max-width: 767px) {
    .service-card { padding: 28px 20px !important; }
}

/* How we operate — 5 columns inline; make responsive */
.hp-grid-steps { gap: 14px !important; }
.hp-grid-steps > div { min-width: 0; }
.hp-grid-steps h4 { word-break: normal; overflow-wrap: break-word; font-size: 14px !important; }
.hp-grid-steps p { font-size: 12px !important; }

@media (max-width: 767px) {
    .hp-grid-steps { grid-template-columns: 1fr !important; gap: 12px !important; }
    .hp-grid-steps > div { padding: 20px 16px !important; }
    /* connecting arrow hint on mobile (vertical flow) */
    .hp-grid-steps > div:not(:last-child)::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        display: block;
        text-align: center;
        color: var(--accent);
        margin-top: 8px;
        font-size: 14px;
    }
}

/* ---------- 9. Builders grid (home) ---------- */
.builder-card { min-width: 0; }
.builder-card h4 { word-break: normal; overflow-wrap: break-word; font-size: 14px !important; }
@media (max-width: 767px) {
    .builder-card { padding: 22px 12px !important; }
    .builder-card .monogram { width: 48px !important; height: 48px !important; font-size: 18px !important; }
}

/* ---------- 10. Popular localities (chips) ---------- */
.locality-chip {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-align: left;
}
@media (max-width: 767px) {
    .locality-chip { font-size: 12.5px !important; padding: 10px 14px !important; }
}

/* ---------- 11. Testimonials ---------- */
.testimonial-card { min-width: 0; }
.testimonial-card .t-quote { word-break: normal; overflow-wrap: break-word; }

/* ---------- 12. Blog cards ---------- */
.blog-card { min-width: 0; }
.blog-card h3 { word-break: normal; overflow-wrap: break-word; }
/* Card images keep aspect ratio, never break layout */
.blog-card .blog-img,
.blog-card .card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.blog-card .blog-img img,
.blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    .blog-card .blog-img img, .blog-card img { height: 200px !important; }
}

/* ---------- 13. Stats strip (5 cols) ---------- */
.hp-grid-stats { gap: 16px !important; }
.hp-grid-stats > div { min-width: 0; }
@media (max-width: 767px) {
    .hp-grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
    .stats-number { font-size: 30px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- 14. Inner page heroes ---------- */
.page-hero, .detail-hero { padding: 44px 0 !important; }
.page-hero h1, .detail-hero h1 { font-size: clamp(26px, 7vw, 34px) !important; word-break: normal; overflow-wrap: break-word; }
.detail-hero .sub { gap: 12px !important; font-size: 13px !important; }
@media (max-width: 767px) {
    .detail-hero .sub { flex-direction: column; align-items: flex-start; }
    .detail-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
    .enquiry-box { position: static !important; top: auto !important; }
}

/* ---------- 15. Filters bar (projects/builders) ---------- */
.filters-bar { gap: 10px !important; }
.filters-bar .form-control { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
.filters-bar .btn { width: 100% !important; margin-left: 0 !important; justify-content: center; }
@media (min-width: 768px) {
    .filters-bar .form-control { flex: 1 1 160px !important; width: auto !important; }
    .filters-bar .btn { width: auto !important; }
}

/* ---------- 16. About / contact grids ---------- */
.about-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.spec-grid { grid-template-columns: 1fr !important; }
.form-row { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
    .about-grid { grid-template-columns: 1fr 1fr !important; }
    .contact-grid { grid-template-columns: 1fr 1fr !important; }
    .spec-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .form-row { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- 17. Gallery ---------- */
.gallery-thumbs { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
@media (max-width: 480px) { .gallery-thumbs { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---------- 18. Footer ---------- */
.site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}
.site-footer .app-badges { flex-direction: column !important; }
.site-footer .container { padding-inline: 16px !important; }
@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
    .site-footer .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; }
}
/* Newsletter form */
.site-footer .newsletter-form { flex-direction: column !important; align-items: stretch !important; }
.site-footer .newsletter-form input { min-width: 0 !important; width: 100% !important; }

/* ---------- 19. Image fallback (no broken icons) ---------- */
img { background-color: #eef2f7; }

/* ---------- 20b. Footer inline grid + safe areas ---------- */
/* The footer main grid is set via inline style; collapse it on mobile */
@media (max-width: 767px) {
    .site-footer .container > div[style*="grid-template-columns:1.5fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Respect iOS safe-area insets (notch / home indicator) */
.site-header {
    padding-top: env(safe-area-inset-top, 0px);
}
.mobile-action-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 20d. Inline grids (index.php / list-property.php) ---------- */
/* Several page grids are set via inline style (grid-template-columns).
   Inline styles beat stylesheet rules, so collapse them on small screens
   with attribute selectors + !important (contained, reversible). */
@media (max-width: 767px) {
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns:repeat(2"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* 5-column stat strips -> 2 columns for breathing room */
    div[style*="grid-template-columns:repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---------- 20c. Misc ---------- */
.sec-head h2 { word-break: normal; overflow-wrap: break-word; }
.section-header h2 { word-break: normal; overflow-wrap: break-word; }

/* Larger, touch-friendly tap targets on mobile */
@media (max-width: 767px) {
    .btn { min-height: 44px; }
    a, button { -webkit-tap-highlight-color: rgba(201, 168, 76, 0.25); }
}

/* Respect reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}