/* ==========================================================
   21 REALTORS — RESPONSIVE OVERRIDES
   Mobile-first fixes layered on top of style.css.
   Breakpoints: 1400 / 1199 / 991 / 767 / 575 / 400
   ========================================================== */

/* ---------- Global safety net ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, iframe, video { max-width: 100%; height: auto; }

/* ---------- Large desktop / laptop (<=1400px) ---------- */
@media (max-width: 1400px) {
    .hero h1 { font-size: clamp(38px, 5.6vw, 72px); }
}

/* ---------- Small desktop / laptop (<=1199px) ---------- */
@media (max-width: 1199px) {
    .section { padding: 100px 0; }
    .cta-banner { padding: 60px; }
    .main-nav ul { gap: 22px; }
    .main-nav a { font-size: 13px; }
    .navbar-actions { gap: 16px; }
    .floating-badge.badge-2 { display: none; }
    .property-body { padding: 22px; }
}

/* ---------- Tablet (<=991px) ---------- */
@media (max-width: 991px) {
    .nav-toggle { display: flex; z-index: 1100; }
    .main-nav, .navbar-actions .btn-luxury, .navbar-actions .nav-phone { display: none !important; }
    .navbar-actions { gap: 14px; }
    .section { padding: 80px 0; }
    .section-sm { padding: 60px 0; }

    .hero { min-height: 92vh; padding-top: 40px; padding-bottom: 40px; }
    .hero-content { padding-top: 60px; }
    .hero h1 { font-size: clamp(34px, 5.2vw, 56px); max-width: 100%; }
    .hero p.lead { max-width: 100%; }
    .hero-stats { gap: 30px 34px; margin-top: 50px; }
    .floating-badge { display: none; }

    .overview-media { margin-bottom: 50px; }
    .overview-media .exp-badge { left: 14px; bottom: -20px; padding: 16px 18px; }
    .overview-media .exp-badge strong { font-size: 30px; }

    .why-media { min-height: 360px; margin-bottom: 40px; }

    .cta-banner { padding: 50px 34px; text-align: center; }
    .cta-banner::before { display: none; }
    .cta-banner h2 { max-width: 100%; margin-left: auto; margin-right: auto; }
    .cta-banner p { max-width: 100%; margin-left: auto; margin-right: auto; }
    .cta-actions { justify-content: center; }

    .timeline-item::before, .timeline-dot { display: none; }
    .timeline-item { flex-direction: column; gap: 6px; padding-bottom: 32px; }
    .timeline-year { min-width: auto; font-size: 14px; }

    .pd-hero { height: 46vh; min-height: 340px; }
    .pd-info-strip { margin-top: 20px; flex-wrap: wrap; }
    .pd-info-item { min-width: 33.33%; border-bottom: 1px solid var(--c-border); }
    .enquiry-sticky { position: static; margin-top: 40px; }

    .contact-form-wrap { padding: 34px 26px; }
    .map-frame { min-height: 320px; margin-bottom: 30px; }

    .section-head { margin-bottom: 46px; }

    .footer-top { padding: 70px 0 44px; }
}

/* ---------- Mobile (<=767px) ---------- */
@media (max-width: 767px) {
    .section { padding: 60px 0; }
    .section-sm { padding: 46px 0; }
    .section-head { margin-bottom: 36px; }
    .section-head p { font-size: 15.5px; }

    /* Navbar */
    .site-navbar { padding: 16px 0; }
    .site-navbar.scrolled { padding: 12px 0; }
    .brand-num { width: 42px; height: 42px; font-size: 22px; }
    .brand-text strong { font-size: 16px; }
    .brand-text em { font-size: 9px; letter-spacing: 1.5px; }
    .mobile-nav-overlay { overflow-y: auto; padding: 60px 24px 40px; gap: 26px; }
    .mobile-nav-overlay ul { gap: 18px; }
    .mobile-nav-overlay a { font-size: 22px; }

    /* Hero */
    .hero { min-height: 88vh; }
    .hero-content { padding-top: 50px; }
    .hero h1 { font-size: 34px; letter-spacing: -0.5px; }
    .hero p.lead { font-size: 16px; margin-top: 18px; }
    .hero-eyebrow { font-size: 11.5px; letter-spacing: 2.5px; margin-bottom: 18px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
    .hero-actions .btn-luxury, .hero-actions .btn-outline-luxury { width: 100%; justify-content: center; }
    .hero-stats { flex-wrap: wrap; gap: 20px 32px; margin-top: 40px; }
    .hero-stats .stat strong { font-size: 26px; }
    .hero-stats .stat span { font-size: 11.5px; }
    .scroll-indicator { bottom: 20px; }

    /* Overview */
    .overview-media .exp-badge { position: static; margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 14px 18px; }
    .overview-media .exp-badge strong { font-size: 22px; }
    .overview-list { gap: 14px; }

    /* Property / service / category cards */
    .property-body { padding: 22px 18px; }
    .property-price { font-size: 18px; }
    .property-title { font-size: 18px; }
    .property-specs { gap: 12px; flex-wrap: wrap; }
    .service-card { padding: 30px 24px; }
    .category-card { aspect-ratio: 4/3; }

    /* Why choose */
    .why-media { min-height: 260px; }
    .why-media-caption { bottom: 20px; left: 20px; right: 20px; }
    .why-media-caption strong { font-size: 20px; }
    .why-card { padding: 22px 0; gap: 14px; }

    /* CTA */
    .cta-banner { padding: 40px 22px; }
    .cta-banner h2 { font-size: 24px; }
    .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .cta-actions .btn-luxury, .cta-actions .btn-outline-luxury { width: 100%; justify-content: center; }

    /* Contact / forms */
    .contact-form-wrap { padding: 28px 20px; }
    .form-control-luxury { padding: 13px 16px; font-size: 14px; }
    .contact-info-card { padding: 24px 20px; flex-direction: column; text-align: center; align-items: center; }

    /* Project details */
    .pd-hero { height: 38vh; min-height: 260px; border-radius: 0; }
    .pd-hero-content { bottom: 24px; }
    .pd-hero-content h1 { font-size: 26px; }
    .pd-info-item { min-width: 50%; padding: 20px 12px; }
    .pd-info-item strong { font-size: 17px; }
    .amenity-pill { font-size: 13px; padding: 14px 16px; }

    /* Page header */
    .page-header { padding: 150px 0 60px; }
    .page-header h1 { font-size: 32px; }

    /* Team / value cards */
    .team-photo { margin-bottom: 16px; }
    .value-card { padding: 30px 24px; }

    /* Footer */
    .footer-top { padding: 56px 0 36px; }
    .footer-heading { margin-top: 8px; }
    .newsletter-form { flex-wrap: nowrap; }
    .footer-bottom .container { flex-direction: column; text-align: center; gap: 10px; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; }

    /* Stats strip */
    .stat-block strong { font-size: 34px; }

    /* Testimonials */
    .testimonial-card { padding: 28px 24px; }

    /* Filter bar (projects page) */
    #filterBar { gap: 8px; }
    #filterBar .filter-btn { font-size: 12px; padding: 10px 16px; }
}

/* ---------- Small mobile (<=575px) ---------- */
@media (max-width: 575px) {
    .hero h1 { font-size: 30px; }
    .hero-stats { gap: 18px 26px; }
    .hero-stats .stat { min-width: 40%; }
    .section-head h2 { font-size: 26px; }
    .eyebrow { font-size: 12px; letter-spacing: 2px; }
    .cta-banner h2 { font-size: 21px; }
    .pd-info-item { min-width: 100%; }
    .float-btn { width: 48px; height: 48px; font-size: 18px; right: 14px; }
    .float-whatsapp { bottom: 14px; }
    .float-top { bottom: 78px; }
}

/* ---------- Extra small mobile (<=400px) ---------- */
@media (max-width: 400px) {
    .brand-text em { display: none; }
    .brand-mark { gap: 8px; }
    .hero h1 { font-size: 27px; }
    .hero-stats .stat strong { font-size: 22px; }
    .hero-stats .stat { min-width: 100%; }
    .btn-luxury, .btn-outline-luxury { padding: 13px 22px; font-size: 13px; }
    .category-info h5 { font-size: 15px; }
    .testimonial-text { font-size: 14.5px; }
    .contact-form-wrap { padding: 24px 16px; }
    .cta-banner { padding: 32px 16px; }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { min-height: 100vh; padding-top: 90px; padding-bottom: 30px; }
    .mobile-nav-overlay { justify-content: flex-start; padding-top: 90px; overflow-y: auto; }
}