/* ============================================================
   /realestate/assets/css/re-mobile.css
   Mobile-first responsive overrides
   Loaded on every RE page
   ============================================================ */

/* ── BASE RESETS ─────────────────────────────────────────── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }

.re-module { width: 100%; overflow-x: hidden; }

/* ── CONTAINER ───────────────────────────────────────────── */
.re-container,
.re-container-wide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── HERO ────────────────────────────────────────────────── */
.re-hero { min-height: 420px; }
.re-hero__title { font-size: clamp(1.6rem, 5vw, 3.2rem); }
.re-hero__subtitle { font-size: clamp(.88rem, 2vw, 1.05rem); }

/* ── SEARCH BOX ──────────────────────────────────────────── */
.re-searchbox { border-radius: 8px; overflow: hidden; }
.re-searchbox__tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.re-searchbox__tabs::-webkit-scrollbar { display: none; }
.re-searchbox__tab { flex-shrink: 0; }

/* ── PROPERTY GRID ───────────────────────────────────────── */
.re-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ── PROPERTY CARD ───────────────────────────────────────── */
.re-card { border-radius: 8px; overflow: hidden; }
.re-card__img { aspect-ratio: 16/10; }
.re-card__img img { width: 100%; height: 100%; object-fit: cover; }

/* ── DEVELOPER GRID ──────────────────────────────────────── */
.re-dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* ── DETAIL LAYOUT ───────────────────────────────────────── */
.re-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* ── LISTING LAYOUT (with filter sidebar) ────────────────── */
.re-listing-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── TRUST BAND ──────────────────────────────────────────── */
.re-trust-band__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 40px;
}

/* ── LOCAL CONTENT GRID ──────────────────────────────────── */
.re-local-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

/* ── SPECS BAR ───────────────────────────────────────────── */
.re-specs-bar { display: flex; flex-wrap: wrap; }
.re-specs-bar__item { flex: 1 1 auto; min-width: 100px; }

/* ── FIELD GROUPS ────────────────────────────────────────── */
.re-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.re-field-group.single { grid-template-columns: 1fr; }
.re-field-group.triple { grid-template-columns: 1fr 1fr 1fr; }

/* ══════════════════════════════════════════════════════════
   TABLET — max 900px
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .re-detail-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .re-listing-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Filter sidebar becomes hidden on mobile (drawer handles it) */
    .re-filter-sidebar {
        display: none;
    }

    .re-local-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Inquiry box — fixed to bottom on mobile */
    .re-inquiry-box {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.18);
        z-index: 400;
        transform: translateY(calc(100% - 58px));
        transition: transform .3s ease;
        max-height: 90vh;
        overflow-y: auto;
    }
    .re-inquiry-box.is-open { transform: translateY(0); }
    .re-inquiry-box__toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        background: #1a3a42;
        cursor: pointer;
        border-radius: 14px 14px 0 0;
    }
    .re-inquiry-box__toggle strong {
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: .9rem;
        font-weight: 600;
        color: #fff;
    }
    .re-inquiry-box__toggle .re-toggle-arrow {
        width: 18px; height: 18px;
        border-left: 2px solid rgba(255,255,255,.6);
        border-top: 2px solid rgba(255,255,255,.6);
        transform: rotate(225deg);
        transition: transform .28s;
        flex-shrink: 0;
    }
    .re-inquiry-box.is-open .re-toggle-arrow {
        transform: rotate(45deg);
    }
    /* Main content gets bottom padding so card doesn't cover it */
    .re-detail-layout main {
        padding-bottom: 80px;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — max 640px
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    .re-container,
    .re-container-wide { padding: 0 16px; }

    .re-section     { padding: 40px 0; }
    .re-section-sm  { padding: 28px 0; }

    /* Hero */
    .re-hero { min-height: 340px; }
    .re-hero__content { padding: 40px 0 60px; }
    .re-hero__stat { gap: 16px; flex-wrap: wrap; }
    .re-hero__stat-item strong { font-size: 1.2rem; }
    .re-hero__stat-item span { font-size: .65rem; }

    /* Search box */
    .re-searchbox { margin-top: -20px; border-radius: 6px; }
    .re-searchbox__body {
        flex-direction: column;
        padding: 16px;
        gap: 10px;
    }
    .re-searchbox__field { min-width: 100%; }
    .re-btn-search { width: 100%; padding: 12px; text-align: center; }

    /* Listing grid — single column */
    .re-listing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Developer grid */
    .re-dev-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Section headers */
    .re-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 20px;
    }
    .re-headline-lg { font-size: clamp(1.3rem, 5vw, 1.8rem); }

    /* Trust band */
    .re-trust-band { padding: 20px 0; }
    .re-trust-band__inner { gap: 16px 24px; }
    .re-trust-item strong { font-size: 1.1rem; }
    .re-trust-item span { font-size: .62rem; }

    /* Specs bar */
    .re-specs-bar { flex-wrap: wrap; }
    .re-specs-bar__item {
        flex: 0 0 50%;
        border-right: none !important;
        border-bottom: 1px solid var(--re-rule);
        padding: 10px 8px;
    }
    .re-specs-bar__item:nth-child(odd) { border-right: 1px solid var(--re-rule) !important; }
    .re-specs-bar__item:last-child,
    .re-specs-bar__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

    /* Gallery */
    .re-gallery__thumb { flex: 0 0 70px; height: 48px; }

    /* Field groups — all single column on mobile */
    .re-field-group,
    .re-field-group.triple { grid-template-columns: 1fr; }

    /* Form panels */
    .re-form-nav { flex-direction: column-reverse; gap: 8px; }
    .re-btn-prev, .re-btn-next { width: 100%; text-align: center; padding: 13px; }

    /* Steps */
    .re-steps-indicator { gap: 0; }
    .re-step-connector { width: 30px; }
    .re-step-dot__num { width: 28px; height: 28px; font-size: .8rem; }

    /* Upload zone */
    .re-upload-zone { padding: 24px 16px; }

    /* FAQ */
    .re-faq-toggle { font-size: .92rem; padding: 14px 0; }

    /* Local content */
    .re-local-content { padding: 40px 0; }
    .re-local-content h2 { font-size: 1.2rem; }

    /* Related properties — single col on mobile */
    .re-listing-grid { grid-template-columns: 1fr; }

    /* Post property CTA */
    .re-text-center { text-align: center; }

    /* Breadcrumb */
    .re-breadcrumb ol { gap: 0; }
    .re-breadcrumb li { font-size: .74rem; }

    /* Pagination */
    .re-pagination { gap: 4px; }
    .re-page-btn { width: 34px; height: 34px; font-size: .82rem; }

    /* Dev card */
    .re-dev-card__head { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   SMALL MOBILE — max 400px
══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .re-container, .re-container-wide { padding: 0 12px; }
    .re-card__actions { flex-direction: column; gap: 6px; }
    .re-btn-wa, .re-btn-call { width: 100%; justify-content: center; padding: 9px; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
    .re-header, .re-loc-ticker, .re-inquiry-box,
    .re-filter-sidebar, .re-card__actions { display: none !important; }
    .re-detail-layout { grid-template-columns: 1fr; }
}