/* ═══════════════════════════════════════════════════════════
   Rentu.in Mobile-First Enhancement CSS
   Active on screens ≤1024px (iPad Air, Pro 11", phones)
   via <link media="(max-width: 1024px)">
   Created: 2026-04-23
   ═══════════════════════════════════════════════════════════ */

/* ─── Global — Prevent Horizontal Overflow ─────────────── */
html, body {
    overflow-x: hidden;
}

/* ─── Typography — Mobile Safe ─────────────────────────── */
body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* 16px inputs prevent iOS auto-zoom */
input, select, textarea, .form-control {
    font-size: 16px !important;
}

/* ─── Better Touch Targets (Apple HIG: 44px min) ──────── */
a, button, .btn, .nav-link,
.rentu-loc-chip, .rentu-resource-pill,
.rentu-quick-card {
    min-height: 44px;
}

/* ─── iPad Layout Tier (769px–1024px) ──────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Force Bootstrap hamburger on iPad */
    .navbar-expand-lg .navbar-toggler {
        display: flex !important;
    }
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }
    .navbar-expand-lg .navbar-collapse.show,
    .navbar-expand-lg .navbar-collapse.collapsing {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0,0,0,.15);
        z-index: 999;
        padding: 1rem;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(0,0,0,.06);
        font-size: 1rem;
    }

    /* Hide phone number + "Rent your property" on iPad */
    .d-none.d-xl-flex,
    .header-icon .header-button {
        display: none !important;
    }

    /* Property grid: 2-col on iPad */
    .row .col-xl-4,
    .row .col-lg-4 {
        width: 50% !important;
    }

    /* Quick cards: smaller on iPad */
    .rentu-quick-card {
        width: 120px;
        height: 95px;
        font-size: 14px;
    }

    /* Section padding tighter */
    section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    section.big-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

/* ─── Hero Section — Mobile Stack ──────────────────────── */
.rentu-hero {
    padding: 100px 0 40px !important;
    min-height: auto !important;
}

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

.rentu-search-box {
    border-radius: 16px !important;
    padding: 6px !important;
    flex-direction: column;
}

.rentu-search-btn {
    width: 100%;
    padding: 12px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    margin-top: 6px;
}

.rentu-search-input {
    padding: 12px 14px !important;
    font-size: 16px !important;
}

/* Quick cards — horizontal scroll on mobile */
.rentu-quick-card {
    width: 110px !important;
    height: 85px !important;
    font-size: 13px;
    flex-shrink: 0;
}

/* Popular location chips — horizontal scroll */
.rentu-popular-locs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-bottom: 8px;
}
.rentu-popular-locs::-webkit-scrollbar { display: none; }

.rentu-loc-chip {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 6px 16px !important;
}

/* ─── Resource Pills — Horizontal Scroll ───────────────── */
.rentu-resource-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
}
.rentu-resource-strip::-webkit-scrollbar { display: none; }

.rentu-resource-pill {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* ─── Property Cards — Full Width ──────────────────────── */
.property-card-wrap {
    width: 100% !important;
}

/* Swiper / Carousel cards — full width snap */
.slider-one-slide .swiper-slide {
    width: 85% !important;
    flex-shrink: 0 !important;
}

/* Property images — optimized aspect ratio */
.property-card-wrap img,
.blog-post img,
.slider-one-slide img {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* ─── Search/Listings Page ─────────────────────────────── */
/* Filter bar — vertical stack */
.filter-bar,
.search-filters {
    flex-direction: column !important;
    gap: 8px !important;
}

.filter-bar select,
.filter-bar input,
.search-filters select,
.search-filters input {
    width: 100% !important;
    min-height: 44px;
}

/* Sort controls — horizontal scroll */
.sort-controls,
.sort-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
}
.sort-controls::-webkit-scrollbar,
.sort-bar::-webkit-scrollbar { display: none; }

/* Results grid — single column on phone */
.row .col-md-4,
.row .col-sm-6 {
    width: 100% !important;
}

/* ─── Property Detail — Stack Layout ───────────────────── */
.content-layout,
.detail-layout {
    grid-template-columns: 1fr !important;
}

.detail-sidebar,
.sidebar,
.price-card {
    position: static !important;
    width: 100% !important;
}

/* Gallery — full bleed on mobile */
.gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-grid > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
}

/* ─── Page Title — Compact ─────────────────────────────── */
.page-title-big-typography {
    padding-top: 100px !important;
}

.page-title-big-typography h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
}

.page-title-big-typography h2 {
    font-size: 1.25rem !important;
}

/* ─── Footer — Simplified Grid ─────────────────────────── */
footer .row .col-lg-3,
footer .row .col-md-6,
footer .row .col-xl-3 {
    width: 100% !important;
    margin-bottom: 24px;
}

footer .footer-logo img {
    max-height: 36px !important;
}

/* ─── Explore More Cards — 2-col on tablet, 1-col phone ─ */
.rentu-explore-card {
    padding: 14px 10px !important;
}
.rentu-explore-icon {
    font-size: 20px !important;
}
.rentu-explore-title {
    font-size: 13px !important;
}
.rentu-explore-desc {
    font-size: 11px !important;
}

/* ─── Data Tables — Auto Scroll ────────────────────────── */
table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

table thead, table tbody, table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* ─── Breadcrumb — Scrollable ──────────────────────────── */
.breadcrumb, .breadcrumb-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 8px 0;
}
.breadcrumb::-webkit-scrollbar { display: none; }

/* ─── Mobile Nav — Touch Optimized ─────────────────────── */
.navbar-nav .nav-link {
    padding: 14px 16px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.navbar .navbar-nav .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 16px;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ─── CTA Bar — Always Visible on Mobile ───────────────── */
#mobileCta {
    display: flex !important;
}

/* ─── Bottom Safe Area (iPhone notch/gesture bar) ──────── */
body {
    padding-bottom: max(60px, env(safe-area-inset-bottom, 60px));
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #mobileCta {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* ─── Phone-Only Refinements (≤ 480px) ─────────────────── */
@media (max-width: 480px) {
    .rentu-hero-title {
        font-size: 24px !important;
    }

    .rentu-hero-badge {
        font-size: 10px !important;
        padding: 4px 14px !important;
    }

    /* Property columns — strictly single */
    .row .col-lg-4,
    .row .col-md-4,
    .row .col-sm-6,
    .row .col-xl-4 {
        width: 100% !important;
    }

    /* Footer — single column */
    footer .row .col-lg-3,
    footer .row .col-md-6 {
        width: 100% !important;
    }

    /* Page title — even smaller */
    .page-title-big-typography h1 {
        font-size: 1.3rem !important;
    }

    /* Tighter section padding */
    section {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}

/* ─── Smooth Animations — Reduce for Performance ───────── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}