/**
 * Mobile Responsiveness Fixes for Property Detail Page
 * Ensures full-width, proper viewport behavior on all devices
 */

/* Ensure root elements don't cause horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Property detail container - ensure it respects viewport */
.property-detail-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Gallery section - full bleed on mobile */
.property-gallery-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
}

/* Ensure containers don't overflow */
.property-content .container {
    width: 100%;
    max-width: var(--container-max-width, 1200px);
    padding-left: var(--container-padding, 1rem);
    padding-right: var(--container-padding, 1rem);
    box-sizing: border-box;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {

    /* Reduce container padding on mobile */
    .property-content .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Ensure grid doesn't overflow */
    .property-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

    /* Property sections full width on mobile */
    .property-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Sidebar becomes single column on mobile */
    .property-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .sidebar-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent 100vw sections from creating horizontal scroll on mobile */
    .property-map-section {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .property-content .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Reduce section padding on very small screens */
    .property-section {
        margin-bottom: 1rem;
    }

    .section-title {
        font-size: 1.25rem;
        margin: 1rem 1rem 0.75rem;
    }
}

/* ========================================================================
   MOBILE SIDEBAR ORDERING - Booking Tabs First
   ======================================================================== */

/* On mobile/tablet, ensure booking tabs appear at the very top */
@media (max-width: 991px) {
    .property-sidebar {
        display: flex;
        flex-direction: column;
    }

    /* Booking tabs card should be first */
    .sidebar-card--booking {
        order: -10;
    }

    /* Other sidebar cards follow */
    .sidebar-card {
        order: 0;
    }

    /* Improve touch targets for tab buttons on mobile */
    .tab-btn {
        min-height: 52px;
        padding: 1rem 0.75rem;
    }
}

/* Very small screens - ensure booking is prominent */
@media (max-width: 576px) {
    .sidebar-card--booking {
        margin-bottom: 1.5rem;
        border: 2px solid var(--accent-color, #d4af37);
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
    }

    .sidebar-card--booking .tabs-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card--booking .tab-btn {
        flex: 1 1 auto;
        min-width: 100px;
        font-size: 0.85rem;
        padding: 0.875rem 0.5rem;
    }
}

/* Prevent images from causing overflow */
.property-section img,
.property-main img,
.property-sidebar img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure maps don't overflow */
#property-map {
    width: 100%;
    max-width: 100%;
    height: 400px;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    #property-map {
        height: 300px;
    }
}

/* Fix for embedded iframes and media */
.property-section iframe,
.property-section video {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure text doesn't overflow */
.property-section p,
.property-section div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Gallery - ensure it doesn't cause horizontal scroll */
.property-gallery {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.gallery-thumbs {
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent any element from exceeding viewport width */
* {
    max-width: 100%;
}

/* But allow specific containers to be full width */
.container,
.property-detail-container,
html,
body {
    max-width: none;
}

/* Ensure the property grid container respects parent width */
.property-grid--detail {
    width: 100%;
    max-width: 100%;
}

.property-main--detail,
.property-sidebar--detail {
    min-width: 0;
    /* Prevent grid items from overflowing */
}