/* ============================================
   Responsive Design - All Breakpoints
   Breakpoints:
     - Desktop Large: > 1440px
     - Desktop: 1025px - 1440px (base styles)
     - Tablet: 744px - 1024px
     - Mobile: 480px - 743px
     - Small Mobile: < 480px
   ============================================ */

/* ---- Global: prevent horizontal overflow ---- */
html {
    overflow-x: hidden;
}

/* ============================================
   Desktop Large (> 1440px)
   ============================================ */
@media (min-width: 1441px) {
    :root {
        --content-max-width: 1280px;
    }

    .photo-gallery {
        height: 520px;
    }
}

/* ============================================
   Tablet (744px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --content-padding: 24px;
    }

    /* Header */
    .header-inner {
        height: 66px;
    }

    .header-nav {
        gap: var(--space-base);
    }

    .header-nav a {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    /* Photo Gallery */
    .photo-gallery {
        height: 360px;
        border-radius: 0;
    }

    .photo-gallery-section {
        margin: 0 calc(-1 * var(--content-padding));
    }

    /* Content Layout */
    .content-layout {
        gap: 5%;
    }

    .content-main {
        flex: 0 0 58%;
        max-width: 58%;
    }

    .content-sidebar {
        flex: 0 0 37%;
        max-width: 37%;
    }

    /* Booking Widget */
    .booking-widget {
        padding: var(--space-base);
    }

    .booking-widget-title {
        font-size: var(--font-size-lg);
    }

    /* Rules */
    .rules-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Calendar */
    .calendar-two-months {
        grid-template-columns: 1fr;
    }

    /* Map */
    .map-container {
        height: 360px;
    }

    /* Modal */
    .modal-content {
        max-width: 90vw;
    }
}

/* ============================================
   Mobile (< 744px)
   ============================================ */
@media (max-width: 743px) {
    :root {
        --content-padding: 24px;
        --font-size-2xl: 22px;
        --font-size-xl: 18px;
        --font-size-3xl: 26px;
    }

    /* ---- Header ---- */
    .site-header {
        display: none;
    }

    /* ---- Section Nav ---- */
    .section-nav {
        top: 0;
    }

    .section-nav-inner {
        gap: var(--space-base);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .section-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .section-nav a {
        white-space: nowrap;
        flex-shrink: 0;
        padding: var(--space-md) 0;
        font-size: var(--font-size-sm);
        /* Minimum touch target size (44px) */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ---- Title ---- */
    .listing-title-section {
        padding: var(--space-base) 0;
    }

    .listing-title {
        font-size: var(--font-size-2xl);
    }

    .listing-title-row {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .listing-actions {
        display: none;
    }

    /* ---- Photo Gallery - Carousel ---- */
    .photo-gallery-section {
        margin: 0 calc(-1 * var(--content-padding));
        position: relative;
    }

    .photo-gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        height: 300px;
        border-radius: 0;
        gap: 0;
    }

    .photo-gallery .photo-main,
    .photo-gallery .photo-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
        grid-row: auto;
        grid-column: auto;
        min-width: 100%;
    }

    .photo-gallery .photo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .photo-gallery .photo-grid-right {
        display: contents;
    }

    .photo-gallery .photo-grid-right .photo-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
        min-width: 100%;
    }

    .show-all-photos-btn {
        display: none;
    }

    /* Mobile photo counter */
    .mobile-photo-counter {
        display: flex;
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        z-index: 2;
    }

    /* ---- Content Layout - Single Column ---- */
    .content-layout {
        flex-direction: column;
        gap: 0;
        padding: var(--space-lg) 0;
    }

    .content-main {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }

    .content-sidebar {
        display: none;
    }

    /* ---- Mobile Booking Bar ---- */
    .mobile-booking-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--airbnb-background);
        border-top: 1px solid var(--airbnb-border);
        padding: var(--space-base) var(--content-padding);
        z-index: 100;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-base);
    }

    .mobile-booking-bar .price-info {
        font-size: var(--font-size-sm);
        flex: 1;
        min-width: 0;
    }

    .mobile-booking-bar .price-info strong {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
    }

    .mobile-booking-bar .booking-cta {
        width: auto;
        flex-shrink: 0;
        padding: 12px 24px;
        font-size: var(--font-size-sm);
        /* Minimum touch target */
        min-height: 44px;
    }

    /* ---- Property Overview ---- */
    .property-overview {
        padding-bottom: var(--space-base);
    }

    .property-type {
        font-size: var(--font-size-lg);
    }

    .property-details {
        font-size: var(--font-size-sm);
    }

    /* ---- Host Section ---- */
    .host-section {
        padding: var(--space-base) 0;
        flex-direction: row;
        align-items: flex-start;
    }

    .host-avatar {
        width: 48px;
        height: 48px;
    }

    .host-info p {
        font-size: var(--font-size-xs);
    }

    /* ---- Description ---- */
    .description-section {
        padding: var(--space-lg) 0;
    }

    .description-text {
        font-size: var(--font-size-sm);
    }

    .read-more-btn {
        font-size: var(--font-size-sm);
        /* Touch target */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ---- Bedrooms ---- */
    .bedrooms-section {
        padding: var(--space-lg) 0;
    }

    .bedrooms-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-base);
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .bedroom-card {
        flex: 0 0 calc(50% - var(--space-sm));
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .bedroom-card-image {
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .bedroom-card-info {
        padding: var(--space-sm) 0;
    }

    /* ---- Amenities ---- */
    .amenities-section {
        padding: var(--space-lg) 0;
    }

    .amenities-grid {
        grid-template-columns: 1fr;
    }

    .amenity-item {
        padding: var(--space-md) 0;
        /* Touch target */
        min-height: 44px;
    }

    .show-amenities-btn {
        width: 100%;
        padding: 14px;
        font-size: var(--font-size-sm);
        /* Touch target */
        min-height: 48px;
    }

    /* ---- Calendar ---- */
    .calendar-section {
        padding: var(--space-lg) 0;
    }

    .calendar-two-months {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .calendar-day {
        min-height: 36px;
        font-size: var(--font-size-xs);
    }

    .calendar-header {
        margin-bottom: var(--space-base);
    }

    .calendar-nav-btn {
        width: 36px;
        height: 36px;
        /* Touch target */
        min-width: 44px;
        min-height: 44px;
    }

    .calendar-legend {
        flex-wrap: wrap;
        gap: var(--space-base);
    }

    /* ---- Rules ---- */
    .rules-section {
        padding: var(--space-lg) 0;
    }

    .rules-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .rule-item {
        /* Touch target */
        min-height: 44px;
        padding: var(--space-sm) 0;
    }

    /* ---- Map ---- */
    .location-section {
        padding: var(--space-lg) 0;
    }

    .map-container {
        height: 280px;
        margin: 0 calc(-1 * var(--content-padding));
        border-radius: 0;
    }

    /* ---- Footer ---- */
    .site-footer {
        padding: var(--space-lg) 0;
        margin-top: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + 80px); /* Space for mobile booking bar */
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-column a {
        padding: var(--space-sm) 0;
        /* Touch target */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-base);
        text-align: center;
    }

    /* ---- Modal (Full-screen on mobile) ---- */
    .modal-overlay {
        padding: 0;
    }

    .modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        width: 100%;
        border-radius: 0;
        animation: modalSlideUp 0.3s ease;
    }

    @keyframes modalSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .modal-header {
        padding: var(--space-base);
    }

    .modal-body {
        padding: var(--space-base);
    }

    .modal-body h2 {
        font-size: var(--font-size-xl);
    }

    .modal-close {
        width: 36px;
        height: 36px;
        /* Touch target */
        min-width: 44px;
        min-height: 44px;
    }

    /* ---- Booking Form Modal overrides ---- */
    #booking-modal .modal-content {
        max-width: 100% !important;
    }

    /* Override inline grid styles in booking form */
    #booking-form [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    #booking-form input,
    #booking-form textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }

    #booking-submit-btn {
        min-height: 48px;
    }

    /* ---- Lightbox ---- */
    .lightbox-nav {
        width: 36px;
        height: 36px;
        /* Touch target */
        min-width: 44px;
        min-height: 44px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-close {
        top: 12px;
        left: 12px;
        width: 36px;
        height: 36px;
        /* Touch target */
        min-width: 44px;
        min-height: 44px;
    }

    .lightbox-image {
        max-width: 100%;
        max-height: 80vh;
    }

    .lightbox-counter {
        bottom: 12px;
    }

    /* ---- Guest Dropdown ---- */
    .guest-dropdown {
        left: calc(-1 * var(--content-padding));
        right: calc(-1 * var(--content-padding));
        width: auto;
    }

    .guest-counter button {
        width: 36px;
        height: 36px;
        /* Touch target */
        min-width: 44px;
        min-height: 44px;
    }

    /* ---- Prevent horizontal scroll + bottom padding for booking bar ---- */
    body {
        padding-bottom: 80px;
        overflow-x: hidden;
    }

    /* ---- Ensure all images are contained ---- */
    img,
    iframe,
    video,
    svg {
        max-width: 100%;
    }

    /* ---- Amenities Modal ---- */
    .amenities-modal-item {
        padding: var(--space-md) 0;
        min-height: 44px;
    }

    .amenities-modal-category h3 {
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   Small Mobile (< 480px)
   ============================================ */
@media (max-width: 479px) {
    :root {
        --content-padding: 16px;
        --font-size-2xl: 20px;
        --font-size-xl: 16px;
    }

    /* Photo Gallery */
    .photo-gallery {
        height: 220px;
    }

    /* Bedrooms */
    .bedroom-card {
        flex: 0 0 calc(50% - var(--space-sm));
    }

    .bedroom-card-image {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    /* Section headings */
    .bedrooms-section h2,
    .amenities-section h2,
    .calendar-section h2,
    .rules-section h2,
    .location-section h2 {
        font-size: var(--font-size-lg);
    }

    /* Calendar days smaller */
    .calendar-day {
        min-height: 32px;
        font-size: 11px;
    }

    .calendar-weekday {
        font-size: 10px;
    }

    /* Mobile booking bar tighter */
    .mobile-booking-bar {
        padding: var(--space-sm) var(--content-padding);
    }

    .mobile-booking-bar .booking-cta {
        padding: 10px 16px;
        font-size: var(--font-size-xs);
    }

    /* Map */
    .map-container {
        height: 220px;
    }

    /* Footer */
    .footer-column h4 {
        font-size: var(--font-size-xs);
    }

    .footer-bottom {
        font-size: var(--font-size-xs);
    }

    /* Lightbox */
    .lightbox-prev {
        left: 4px;
    }

    .lightbox-next {
        right: 4px;
    }

    /* Property details wrap */
    .property-details {
        font-size: var(--font-size-xs);
    }

    .property-details span::after {
        content: ' · ';
    }

    /* Host section */
    .host-avatar {
        width: 40px;
        height: 40px;
    }

    /* New badge */
    .new-badge {
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   Hide/Show utilities
   ============================================ */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 743px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* ============================================
   Touch device enhancements
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .photo-gallery .photo-item:hover img {
        transform: none;
    }

    .header-nav a:hover {
        background: none;
    }

    /* Ensure all interactive elements have adequate touch targets */
    .action-btn,
    .section-nav a,
    .footer-column a,
    .calendar-nav-btn,
    .guest-counter button,
    .modal-close,
    .lightbox-nav,
    .lightbox-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   Landscape mobile (short viewport)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .photo-gallery {
        height: 200px;
    }

    .modal-content {
        max-height: 100vh;
    }

    .mobile-booking-bar {
        padding: var(--space-xs) var(--content-padding);
    }
}

/* ============================================
   Print styles
   ============================================ */
@media print {
    .site-header,
    .section-nav,
    .booking-widget,
    .mobile-booking-bar,
    .show-all-photos-btn,
    .lightbox-overlay,
    .modal-overlay,
    .listing-actions,
    .show-amenities-btn,
    .calendar-nav-buttons,
    .booking-report {
        display: none !important;
    }

    .content-layout {
        flex-direction: column;
    }

    .content-main,
    .content-sidebar {
        max-width: 100%;
        flex: 1;
    }

    .content-sidebar {
        display: block;
    }

    .photo-gallery {
        height: auto;
    }

    .map-container {
        height: 300px;
    }

    body {
        padding-bottom: 0;
    }

    .rules-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Reduced motion preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}