/* ============================================
   HOTEL SECTION MOBILE RESPONSIVE FIX
   Make Hotel section behave exactly like Builder & Resort on mobile
   ============================================ */

/* ============================================
   1. HOTEL SECTION LAYOUT - Match Builder & Resort
   ============================================ */
@media (max-width: 768px) {
    /* Hotel section container - match other sections */
    #hotels .hotel-info-section,
    #hotels .brand-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
    
    /* Hotel content layout - match building-content and resort-content */
    #hotels .hotel-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
    
    /* Hotel text and image - match building-text/resort-text and building-image/resort-image */
    #hotels .hotel-text,
    #hotels .hotel-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
    
    /* Hotel image - match building-image and resort-image */
    #hotels .hotel-image {
        order: -1 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    #hotels .hotel-image img {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }
    
    /* Hotel text content - match building-text and resort-text */
    #hotels .hotel-text {
        text-align: left !important;
        padding: 0 !important;
    }
    
    #hotels .hotel-text h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        color: #2c3e50 !important;
        line-height: 1.3 !important;
    }
    
    #hotels .hotel-text p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        text-align: justify !important;
        color: #555 !important;
        margin-bottom: 25px !important;
    }
}

/* ============================================
   2. HOTEL HIGHLIGHTS - Match Builder & Resort
   ============================================ */
@media (max-width: 768px) {
    /* Hotel highlights grid - match building-highlights and resort-highlights */
    #hotels .hotel-highlights {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        margin-bottom: 25px !important;
        margin-top: 0 !important;
        width: 100% !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
    
    /* Hotel highlight items - match building-highlight and resort-highlight items */
    #hotels .hotel-highlights .highlight-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
        background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
        border: 1px solid #e9ecef !important;
        border-radius: 10px !important;
        height: 100% !important;
        min-height: 120px !important;
        max-height: 180px !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transition: all 0.3s ease !important;
    }
    
    #hotels .hotel-highlights .highlight-item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }
    
    /* Hotel highlight icons - match other sections */
    #hotels .hotel-highlights .highlight-item i {
        font-size: 20px !important;
        color: #3498db !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        width: 20px !important;
        text-align: center !important;
    }
    
    /* Hotel highlight content - match other sections */
    #hotels .hotel-highlights .highlight-item div {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    #hotels .hotel-highlights .highlight-item h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 0 0 8px 0 !important;
        color: #2c3e50 !important;
        line-height: 1.3 !important;
    }
    
    #hotels .hotel-highlights .highlight-item p {
        font-size: 14px !important;
        margin: 0 !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   3. HOTEL STATS - Match Builder & Resort
   ============================================ */
@media (max-width: 768px) {
    /* Hotel stats grid - match building-stats and resort-stats */
    #hotels .hotel-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid #e9ecef !important;
        width: 100% !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
    
    /* Hotel stat items - match other sections */
    #hotels .hotel-stats .stat-item {
        text-align: center !important;
        padding: 15px !important;
        background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
        border: 1px solid #e9ecef !important;
        border-radius: 10px !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transition: all 0.3s ease !important;
    }
    
    #hotels .hotel-stats .stat-item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }
    
    #hotels .hotel-stats .stat-item h4 {
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 0 0 5px 0 !important;
        color: #3498db !important;
        line-height: 1.2 !important;
    }
    
    #hotels .hotel-stats .stat-item p {
        font-size: 12px !important;
        margin: 0 !important;
        color: #666 !important;
        line-height: 1.3 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

/* ============================================
   4. HOTEL BUTTON - Match Builder & Resort
   ============================================ */
@media (max-width: 768px) {
    /* Hotel discover button - match other sections */
    #hotels .discover-hotel-btn,
    #hotels button.discover-hotel-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 25px 0 0 0 !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 50px !important;
        background: linear-gradient(135deg, #3498db, #2980b9) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    }
    
    #hotels .discover-hotel-btn:hover,
    #hotels button.discover-hotel-btn:hover {
        background: linear-gradient(135deg, #2980b9, #21618c) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
    }
    
    #hotels .discover-hotel-btn i,
    #hotels button.discover-hotel-btn i {
        margin-right: 8px !important;
        transition: transform 0.3s ease !important;
    }
    
    #hotels .discover-hotel-btn:hover i,
    #hotels button.discover-hotel-btn:hover i {
        transform: translateX(3px) !important;
    }
}

/* ============================================
   5. SMALLER SCREENS - Extra Mobile Optimization
   ============================================ */
@media (max-width: 480px) {
    /* Hotel highlights - single column on very small screens */
    #hotels .hotel-highlights {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Hotel stats - single column on very small screens */
    #hotels .hotel-stats {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Hotel text - smaller font on very small screens */
    #hotels .hotel-text h3 {
        font-size: 20px !important;
    }
    
    #hotels .hotel-text p {
        font-size: 14px !important;
    }
    
    /* Hotel image - smaller on very small screens */
    #hotels .hotel-image img {
        max-width: 240px !important;
    }
}

/* ============================================
   6. ANIMATION & INTERACTION FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Disable any conflicting animations */
    #hotels .hotel-highlights .highlight-item,
    #hotels .hotel-stats .stat-item,
    #hotels .hotel-image,
    #hotels .hotel-text {
        animation: none !important;
        transition: all 0.3s ease !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    /* Ensure all elements are visible */
    #hotels .brand-section,
    #hotels .hotel-info-section,
    #hotels .hotel-content,
    #hotels .hotel-highlights,
    #hotels .hotel-stats {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        mask: none !important;
        filter: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }
}