/* 
  Rambla Property Partners - Centralized Mobile Optimizations
  This file handles global layout, typography, and animation restoration for mobile devices.
*/

/* 1. Global Layout & Overflow Fixes */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100vw !important;
    }

    /* Standardize Footer Stacking */
    .footer-layout, .footer-bottom-wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 30px !important;
    }

    .footer-logo-wrap {
        margin-bottom: 20px !important;
    }

    .footer-nav-wrap {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Standardize Navigation (Hamburger) */
    .navbar-link-wrap {
        width: 100% !important;
        background-color: #ffffff !important;
        border-top: 1px solid #f0f0f0 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    }

    .nav-link {
        padding: 18px 25px !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        display: block !important;
        transition: background 0.2s ease !important;
    }

    .nav-link:active {
        background-color: #f9f9f9 !important;
    }

    .menu-button {
        padding: 12px !important;
        border-radius: 4px !important;
    }

    /* Typography Scaling */
    h1 { font-size: 32px !important; line-height: 1.2 !important; }
    h2 { font-size: 28px !important; line-height: 1.25 !important; }
    h3 { font-size: 24px !important; line-height: 1.3 !important; }
    .hero-heading { font-size: 42px !important; }
    .big-text { font-size: 34px !important; }
    
    /* 2. Animation Restoration & Mobile Parity */
    /* Ensure elements hidden for IX2 are visible or restored */
    .zoom-target {
        transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* Restore opacity for entrance animations that IX2 might be failing on */
    html.w-mod-js:not(.w-mod-ix) [data-w-id] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* 2.5 Global Fixes for all Breakpoints */
.creation-layout {
    position: relative !important;
}

.image-overlay-box {
    height: 100% !important;
    bottom: 0 !important;
}

/* 3. Page-Specific Global Elements */
@media (max-width: 767px) {
    /* Results Section - Premium Sticky Reveal */
    .results-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .result-details-wrap {
        position: sticky !important;
        top: 80px !important;
        z-index: 10 !important;
        background: #000 !important;
        padding-bottom: 20px !important;
    }

    /* Team Grid - Force Single Column Stacking */
    .member-list-wrap, .collection-list-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .member-collection-list-wrapper {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    .member-collection-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Force Visibility for Broken Animations */
    .project-box, .project-element-box, .services-animation-details-wrap, .feedback-slider-layout {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Project Page Specific Spacing */
    .project-details-wrap {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .project-collection-item {
        margin-bottom: 40px !important;
    }

    /* 4. Hero Carousel Visibility Fix (Global for Tablet/Mobile) */
    .banner-image-box-wrap {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-height: 350px !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .banner-image-wrap {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 100% !important;
        min-height: 350px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .starix-slider-wrap {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 350px !important;
        max-height: 500px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .starix-bottom.one {
        display: flex !important;
        flex-direction: row !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 100% !important;
        width: max-content !important;
        gap: 15px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .starix-bottom.one img.stratix {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 350px !important;
        width: auto !important;
        max-width: 85vw !important;
        object-fit: cover !important;
        flex: 0 0 auto !important;
        border-radius: 12px !important;
    }

    .banner-image-wrap-top,
    .banner-image-wrap-bottom {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    .banner-image-wrap-top {
        top: 0 !important;
    }

    .banner-image-wrap-bottom {
        bottom: 5px !important;
        background-color: white !important;
    }

    .carve-image,
    .carve-image-two {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100px !important;
        object-fit: fill !important;
    }

    .starix-top, 
    .stratix-button-info-wrap {
        margin-bottom: 20px !important;
    }

    /* Master Delivery Section Fix - Format like Absolute Trust */
    .credibility-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        overflow-x: hidden !important; /* Remove sideways scroll */
        width: 100% !important;
    }
    .credibility-info-box {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }
    .credibility-info-box::before {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 15px;
        flex-shrink: 0;
        background-image: url('https://cdn.prod.website-files.com/697a72996780635254f431ca/6995edce4957eeca37b9d211_checkmark-xxl.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .credibility-info-left {
        width: 100% !important;
    }
    .credibility-info-left .h6 {
        margin: 0 !important;
    }
    .credibility-info-right {
        display: none !important; /* Hide the large image wrap if present */
    }
}