/* Shared responsive layout for portal + admin/agent/builder panels */

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.container,
.container-fluid,
.container-xl {
    min-width: 0;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Navbar: keep a single row on desktop, collapse earlier than Bootstrap lg */
.navbar-apna .navbar-nav .nav-link {
    white-space: nowrap;
    padding-inline: 0.5rem;
    font-size: 0.9rem;
}

.navbar-apna .navbar-actions {
    flex-shrink: 0;
}

.navbar-apna .navbar-collapse {
    min-width: 0;
}

@media (min-width: 1200px) {
    .navbar-apna .navbar-nav .nav-link {
        padding-inline: 0.62rem;
        font-size: 0.92rem;
    }

    .navbar-apna .navbar-collapse {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .navbar-apna .navbar-nav {
        flex-wrap: nowrap;
        align-items: center;
    }

    .navbar-apna .navbar-actions {
        margin-left: auto;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1400px) {
    .navbar-apna .navbar-nav .nav-link {
        padding-inline: 0.8rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 1199.98px) {
    .navbar-apna .navbar-collapse {
        padding-top: 0.75rem;
    }

    .navbar-apna .navbar-actions {
        width: 100%;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--apna-border, rgba(0, 0, 0, 0.08));
    }

    .navbar-apna .navbar-actions .btn,
    .navbar-apna .navbar-actions .dropdown {
        flex: 1 1 auto;
    }
}

/* Hero + search */
.hero-banner {
    min-height: 420px;
}

@media (min-width: 768px) {
    .hero-banner {
        min-height: 520px;
    }
}

@media (min-width: 992px) {
    .hero-banner {
        min-height: 580px;
        padding-top: 4.5rem !important;
        padding-bottom: 5.5rem !important;
    }

    .hero-banner .hero-title,
    .hero-banner .display-5 {
        font-size: clamp(2.4rem, 4.2vw, 4.1rem);
        max-width: 16ch;
    }

    .hero-banner .hero-lead,
    .hero-banner .lead {
        max-width: 38rem;
    }
}

.search-form .form-select,
.search-form .form-control,
.search-form .btn {
    min-width: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .search-form {
        padding: 1.5rem !important;
    }
}

/* Cards / tiles */
.property-card {
    min-width: 0;
}

.property-card .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}

.property-card .card-title {
    word-break: break-word;
}

.city-tile,
.category-tile {
    min-width: 0;
}

@media (min-width: 1200px) {
    .city-tile {
        min-height: 200px;
    }

    .city-tile img {
        height: 200px;
    }
}

/* Listing filters stay usable on tall desktops */
@media (min-width: 992px) {
    .listing-filters {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .detail-sidebar {
        position: sticky;
        top: 96px;
    }
}

/* Detail galleries */
.gallery-thumb {
    flex: 0 0 auto;
}

/* Tables never blow out the page */
.table-responsive {
    width: 100%;
    max-width: 100%;
}

/* Admin / agent / builder */
.admin-sidebar,
.role-sidebar {
    overflow-y: auto;
    max-height: 100vh;
}

.admin-main,
.role-main {
    min-width: 0;
}

.admin-topbar,
.role-topbar {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-main > main,
.role-main > main {
    max-width: 100%;
}

@media (min-width: 992px) {
    .admin-main > main,
    .role-main > main {
        padding: 1.5rem 2rem !important;
    }
}

/* Footer */
.footer-apna form {
    min-width: 0;
}

.footer-apna .form-control {
    min-width: 0;
}

/* Forms on desktop shouldn't stretch edge-to-edge on huge screens */
@media (min-width: 1400px) {
    .page-narrow {
        max-width: 1120px;
        margin-inline: auto;
    }
}

.property-hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 260px;
    object-fit: cover;
}

.property-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}

.min-w-0 {
    min-width: 0;
}

.search-form .btn {
    min-height: 38px;
}

.footer-apna form {
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .property-hero-img {
        max-height: 480px;
        min-height: 380px;
    }

    .navbar-brand-apna {
        font-size: 1.35rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-brand-apna {
        font-size: 1.2rem;
    }
}

@media (min-width: 1400px) {
    .hero-banner {
        min-height: 620px;
    }

    .category-tile {
        min-height: 180px;
    }

    .category-tile img {
        height: 180px;
    }
}