/* ============================================================
   /realestate/assets/css/re-responsive.css
   Property detail page — desktop + mobile responsive fixes
   ============================================================ */

/* ── GLOBAL OVERFLOW FIX ──────────────────────────────── */
.re-module { overflow-x: hidden !important; width: 100% !important; }
.re-container, .re-container-wide {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ── HEADER — fix empty gold box on mobile ─────────────── */
/* The empty box is .re-logo-badge showing before logo loads */
.re-logo-badge { vertical-align: middle !important; }

/* ── BREADCRUMB — prevent overflow ─────────────────────── */
.re-breadcrumb ol {
    flex-wrap: wrap !important;
    word-break: break-word !important;
}
.re-breadcrumb li {
    font-size: 0.78rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── PROPERTY DETAIL — desktop layout ─────────────────── */
.re-detail-layout {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    gap: 36px !important;
    align-items: start !important;
    width: 100% !important;
}

/* ── INQUIRY BOX — desktop sticky ──────────────────────── */
@media (min-width: 901px) {
    .re-inquiry-box {
        position: sticky !important;
        top: 100px !important;
        width: 100% !important;
        max-width: 360px !important;
        transform: none !important;
        border-radius: 10px !important;
        overflow: visible !important;
        max-height: none !important;
    }
    .re-inquiry-box__toggle { display: none !important; }
}

/* ── GALLERY ───────────────────────────────────────────── */
.re-gallery { width: 100% !important; overflow: hidden !important; }
.re-gallery__main { width: 100% !important; }
.re-gallery__main img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    display: block !important;
}
.re-gallery__thumbs {
    display: flex !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    flex-wrap: nowrap !important;
}
.re-gallery__thumb {
    flex: 0 0 90px !important;
    height: 60px !important;
    min-width: 90px !important;
}

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

/* ── FEATURES GRID ─────────────────────────────────────── */
.re-features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 8px !important;
}

/* ── LISTING CARDS ─────────────────────────────────────── */
.re-listing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}
.re-card { overflow: hidden !important; }
.re-card__img { position: relative !important; overflow: hidden !important; }
.re-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── MAP ───────────────────────────────────────────────── */
.re-map-container { width: 100% !important; overflow: hidden !important; }
.re-map-container iframe { width: 100% !important; display: block !important; }

/* ══════════════════════════════════════════════════════
   TABLET  ≤ 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .re-detail-layout {
        grid-template-columns: 1fr 320px !important;
        gap: 24px !important;
    }
}

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

    /* Stack detail layout */
    .re-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Hide sticky sidebar — show as bottom drawer */
    .re-detail-layout aside {
        order: -1 !important; /* bring contact box above content on mobile */
        margin-bottom: 0 !important;
    }

    /* Mobile inquiry drawer */
    .re-inquiry-box {
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,.2) !important;
        z-index: 400 !important;
        transform: translateY(calc(100% - 60px)) !important;
        transition: transform .3s ease !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
    .re-inquiry-box.is-open {
        transform: translateY(0) !important;
    }
    .re-inquiry-box__toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        background: #1a3a42 !important;
        cursor: pointer !important;
        border-radius: 14px 14px 0 0 !important;
        min-height: 60px !important;
    }
    .re-inquiry-box__toggle strong {
        font-family: 'DM Sans', sans-serif !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }
    .re-inquiry-box__toggle .re-toggle-arrow {
        width: 16px !important; height: 16px !important;
        border-left: 2px solid rgba(255,255,255,.7) !important;
        border-top: 2px solid rgba(255,255,255,.7) !important;
        transform: rotate(225deg) !important;
        transition: transform .28s !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    .re-inquiry-box.is-open .re-toggle-arrow {
        transform: rotate(45deg) !important;
    }
    .re-inquiry-box__head { display: none !important; }

    /* Main content bottom padding so drawer doesn't cover it */
    .re-detail-layout main {
        padding-bottom: 80px !important;
    }

    /* Listing layout — remove sidebar */
    .re-listing-layout {
        grid-template-columns: 1fr !important;
    }
    .re-filter-sidebar { display: none !important; }
    .re-filter-toggle-btn { display: flex !important; }

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

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

    .re-container, .re-container-wide {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Hero */
    .re-hero { min-height: 300px !important; }
    .re-hero__content { padding: 36px 0 72px !important; }
    .re-hero__title { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    .re-hero__subtitle { font-size: 0.88rem !important; }
    .re-hero__stat { gap: 16px !important; flex-wrap: wrap !important; }

    /* Search box */
    .re-searchbox { border-radius: 8px !important; margin-top: -16px !important; }
    .re-searchbox__body {
        flex-direction: column !important;
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .re-searchbox__field { min-width: 100% !important; width: 100% !important; }
    .re-btn-search { width: 100% !important; text-align: center !important; justify-content: center !important; }

    /* Cards — single column */
    .re-listing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .re-dev-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* Section headers */
    .re-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .re-section { padding: 36px 0 !important; }
    .re-section-sm { padding: 24px 0 !important; }

    /* Trust band */
    .re-trust-band { padding: 18px 0 !important; }
    .re-trust-band__inner { gap: 16px 24px !important; justify-content: center !important; }

    /* Gallery thumbnails */
    .re-gallery__thumb { flex: 0 0 72px !important; height: 52px !important; min-width: 72px !important; }

    /* Detail title */
    .re-detail__title { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }
    .re-detail__price { font-size: 1.5rem !important; }

    /* Specs bar — 2 per row */
    .re-specs-bar__item {
        flex: 0 0 50% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--re-rule) !important;
    }
    .re-specs-bar__item:nth-child(odd) { border-right: 1px solid var(--re-rule) !important; }

    /* Card action buttons */
    .re-card__actions { display: flex !important; gap: 6px !important; }
    .re-btn-wa, .re-btn-call { padding: 8px 10px !important; }

    /* Post property form */
    .re-field-group,
    .re-field-group.triple { grid-template-columns: 1fr !important; }
    .re-form-nav { flex-direction: column-reverse !important; gap: 8px !important; }
    .re-btn-prev, .re-btn-next { width: 100% !important; text-align: center !important; justify-content: center !important; }

    /* FAQ */
    .re-faq-toggle { font-size: 0.88rem !important; }

    /* Pagination */
    .re-pagination { gap: 4px !important; }
    .re-page-btn { width: 32px !important; height: 32px !important; font-size: 0.78rem !important; }

    /* Breadcrumb */
    .re-breadcrumb li { font-size: 0.72rem !important; }

    /* Local content */
    .re-local-content { padding: 36px 0 !important; }
    .re-local-content h2 { font-size: 1.15rem !important; }
    .re-local-content p { font-size: 0.88rem !important; }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 400px
══════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .re-container, .re-container-wide { padding-left: 12px !important; padding-right: 12px !important; }
    .re-hero__stat-item strong { font-size: 1.1rem !important; }
    .re-trust-item strong { font-size: 1.1rem !important; }
    .re-card__footer { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
    .re-card__actions { width: 100% !important; }
    .re-btn-wa, .re-btn-call { flex: 1 !important; justify-content: center !important; }
}