/* ============================================
   MOBILE RESPONSIVENESS FIXES - GLOBAL
   Fixes all mobile issues across the website
   ============================================ */

/* ============================================
   1. CONTACT SECTION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Contact cards - remove fixed heights */
    .contact-card-horizontal {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    .contact-card-horizontal .card-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .contact-card-horizontal .card-content h4,
    .contact-card-horizontal .card-content span,
    .contact-card-horizontal .card-link {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Contact form - auto height */
    .contact-form-square {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 25px !important;
        width: 100% !important;
    }
    
    .contact-form-new {
        gap: 15px !important;
    }
    
    .contact-form-new textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    /* Form rows - stack on mobile */
    .form-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .form-group-half,
    .form-group-full {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Submit button - full width */
    .submit-btn-new {
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Contact layout - stack vertically */
    .contact-new-layout {
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    .contact-cards-horizontal {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .contact-card-horizontal {
        flex: 1 1 100% !important;
        min-width: auto !important;
    }
}

@media (max-width: 480px) {
    .contact-card-horizontal {
        padding: 15px !important;
    }
    
    .contact-form-square {
        padding: 20px !important;
    }
    
    .card-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }
}

/* ============================================
   2. RESORT SECTION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Resort cards - auto height */
    .resort-highlights .highlight-item,
    #resorts .resort-highlights .highlight-item,
    section#resorts .resort-highlights .highlight-item {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    /* Resort highlights grid - single column */
    .resort-highlights,
    #resorts .resort-highlights {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 15px !important;
    }
    
    /* Resort card content */
    .resort-highlights .highlight-item > div,
    .resort-highlights .highlight-item .highlight-content {
        width: 100% !important;
    }
    
    /* Resort section buttons */
    #resorts .btn,
    #resorts button,
    .resort-section .btn,
    .resort-section button {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 10px 0 !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 44px !important;
    }
    
    /* Resort stats - full width */
    #resorts .resort-stats {
        margin-top: 20px !important;
        padding-top: 20px !important;
        width: 100% !important;
    }
}

/* ============================================
   3. BUILDER & HOTEL SECTIONS (Shared with Resort)
   ============================================ */
@media (max-width: 768px) {
    /* All brand highlights - consistent styling */
    .building-highlights,
    .hotel-highlights,
    .resort-highlights {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .building-highlights .highlight-item,
    .hotel-highlights .highlight-item,
    .resort-highlights .highlight-item {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Brand section buttons */
    #builders .btn,
    #builders button,
    #hotels .btn,
    #hotels button,
    .brand-section .btn,
    .brand-section button {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 10px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
    }
}

/* ============================================
   4. BRAND SELECTOR BUTTONS
   ============================================ */
@media (max-width: 768px) {
    .brand-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    .brand-btn {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 120px !important;
        max-width: calc(50% - 10px) !important;
        margin: 0 !important;
        padding: 12px 15px !important;
        font-size: 13px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    .brand-btn {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }
}

/* ============================================
   5. GENERAL CONTENT FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Remove overflow hidden that cuts content */
    .page,
    .page.active,
    section,
    .container,
    .brand-section,
    #brand,
    #builders,
    #hotels,
    #resorts,
    #contact,
    #story,
    #home {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Auto height for all content containers */
    .container,
    .brand-section .container,
    #brand .container,
    #contact .container,
    #story .container {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Better padding on mobile */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section padding */
    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Card grids - single column */
    .brand-grid,
    .brand-cards,
    .brand-items,
    .service-cards,
    .highlight-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* All cards - auto height */
    .card,
    .service-card,
    .brand-card,
    .highlight-item,
    .info-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 20px !important;
    }
    
    /* Better text readability */
    p, span, li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    h1, h2, h3, h4 {
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    h3 {
        font-size: 20px !important;
    }
    
    h4 {
        font-size: 18px !important;
    }
}

/* ============================================
   6. NETWORK ANIMATION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .network-hero-section {
        margin-top: 80px !important;
        margin-bottom: 80px !important;
        padding: 40px 0 !important;
    }
    
    .network-container {
        height: 300px !important;
    }
    
    .network-node {
        width: 60px !important;
        height: 60px !important;
    }
    
    .node-icon {
        font-size: 20px !important;
    }
    
    .node-popup {
        min-width: 180px !important;
        padding: 12px 15px !important;
    }
    
    .node-popup h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .discover-more-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 32px !important;
    }
}

/* ============================================
   7. SLIDER/HOME SECTION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .hero-section {
        height: auto !important;
        min-height: 400px !important;
    }
    
    .slide {
        height: auto !important;
        min-height: 400px !important;
    }
    
    .slide-content {
        padding: 20px !important;
    }
    
    .slide-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    .slide-description {
        font-size: 16px !important;
    }
    
    .slide-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .slide-buttons button {
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Slider dots */
    .slider-dots {
        bottom: 15px !important;
        padding: 8px 15px !important;
    }
    
    .slider-dots .dot {
        width: 12px !important;
        height: 12px !important;
    }
}

@media (max-width: 480px) {
    .slide-title {
        font-size: 26px !important;
    }
    
    .slide-description {
        font-size: 14px !important;
    }
}

/* ============================================
   8. BUTTON GLOBAL FIXES
   ============================================ */
@media (max-width: 768px) {
    /* All buttons - ensure visibility */
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .submit-btn,
    .action-btn,
    .discover-more-btn,
    .popup-cta,
    .submit-btn-new {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
        padding: 12px 20px !important;
    }
    
    /* Prevent text clipping in buttons */
    button span,
    .btn span,
    button a,
    .btn a {
        white-space: normal !important;
        display: inline !important;
    }
}

/* ============================================
   9. NAVIGATION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 0 !important;
    }
    
    .nav-container {
        padding: 0 15px !important;
    }
    
    .nav-menu {
        top: 60px !important;
    }
    
    .nav-item {
        margin: 8px 0 !important;
    }
    
    .nav-link {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   10. STORY PAGE MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .story-content {
        padding: 0 10px !important;
    }
    
    .story-intro p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .division-card {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    
    .division-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .division-image img {
        width: 100% !important;
        height: auto !important;
    }
    
    .division-content h3 {
        font-size: 20px !important;
    }
    
    .division-content p {
        font-size: 14px !important;
    }
}

/* ============================================
   11. FOOTER MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .footer {
        margin-top: 60px !important;
        padding: 30px 15px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ============================================
   12. POPUP MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .popup-modal,
    .website-popup {
        padding: 15px !important;
    }
    
    .popup-content,
    .popup-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .popup-image-container {
        max-height: 200px !important;
    }
    
    .popup-action-btn,
    .popup-cta {
        width: 100% !important;
        display: block !important;
    }
}

/* ============================================
   13. SCROLL ANIMATION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Faster animations on mobile */
    .scroll-animate {
        transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
    }
    
    /* Reduce animation delays on mobile */
    .service-card:nth-child(1).scroll-animate,
    .service-card:nth-child(2).scroll-animate,
    .service-card:nth-child(3).scroll-animate,
    .service-card:nth-child(4).scroll-animate {
        transition-delay: 0s !important;
    }
}

/* ============================================
   14. HERO & ABOUT SECTION MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .about-text p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .about-image img {
        max-width: 80% !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* ============================================
   15. FIX HORIZONTAL OVERFLOW
   ============================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* But allow text to wrap */
    p, h1, h2, h3, h4, h5, h6, span, a, li {
        max-width: none !important;
    }
    
    /* Images should be responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}