/**
 * 移动端文字图片彻底分离 - 终极解决方案
 * 针对隐藏App按钮后的重叠问题进行彻底修复
 */

@media screen and (max-width: 768px) {
    
    /* 🚀 首屏容器 - 移除冲突的flexbox布局，恢复正常文档流 */
    #lvFuYhxX {
        display: block !important; /* 移除flex布局避免冲突 */
        min-height: 100vh !important; /* 缩小高度以适应紧凑间距 */
        padding-bottom: 20px !important; /* 从40px缩小50% = 20px */
        overflow: visible !important;
    }
    
    /* 🎯 导航区域 - 确保有足够底部间距 */
    #lvFuYhxX #iGhTLSDZ {
        margin-bottom: 30px !important;
        padding-bottom: 20px !important;
    }
    
    /* 🎯 主标题区域 - 缩小70%间距 */
    #lvFuYhxX #jhVzzpCT {
        margin-bottom: 24px !important; /* 从80px缩小70% = 24px */
        padding-bottom: 18px !important; /* 从60px缩小70% = 18px */
        position: relative !important;
        z-index: 10 !important;
        /* 添加背景色确保视觉分离（调试用） */
        /* background: rgba(255, 0, 0, 0.1) !important; */
    }
    
    /* 🎯 主标题文字本身 */
    #lvFuYhxX #wVLpdWJm {
        margin-bottom: 12px !important; /* 从40px缩小70% = 12px */
        padding-bottom: 9px !important; /* 从30px缩小70% = 9px */
    }
    
    /* 🎯 副标题文字 */
    #lvFuYhxX #TImvexHe {
        margin-bottom: 12px !important; /* 从40px缩小70% = 12px */
        padding-bottom: 9px !important; /* 从30px缩小70% = 9px */
    }
    
    /* 🎯 App按钮区域（已隐藏，但保留间距占位） */
    #lvFuYhxX #blVhhzUh {
        /* 即使隐藏了，也保留一个空白占位区域 */
        height: 0px !important; /* 高度为0但保留margin */
        margin-top: 18px !important; /* 从60px缩小70% = 18px */
        margin-bottom: 18px !important; /* 从60px缩小70% = 18px */
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important; /* 隐藏内容但保留空间 */
    }
    
    /* 🎯 手机图片区域 - 缩小70%间距但保持分离 */
    #lvFuYhxX #kDYKaAXO {
        margin-top: 30px !important; /* 从100px缩小70% = 30px */
        padding-top: 24px !important; /* 从80px缩小70% = 24px */
        clear: both !important;
        position: relative !important;
        z-index: 5 !important;
        /* 添加背景色确保视觉分离（调试用） */
        /* background: rgba(0, 255, 0, 0.1) !important; */
    }
    
    /* 🔧 缩小70%行间距 */
    #lvFuYhxX .layout_row-margin_top-e2d5e,
    #lvFuYhxX .layout_row-margin_bottom-b3e51 {
        height: 6px !important; /* 从20px缩小70% = 6px */
        min-height: 6px !important;
    }
    
    /* 🔧 确保文字容器不会负z-index */
    #lvFuYhxX #jhVzzpCT .layout-text-block-b704c,
    #lvFuYhxX #wVLpdWJm .layout-text-block-b704c,
    #lvFuYhxX #TImvexHe .layout-text-block-b704c {
        position: relative !important;
        z-index: 15 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 8px !important;
        padding: 20px !important;
        margin: 10px 0 !important;
    }
    
    /* 🔧 手机图片强制在下方 */
    #lvFuYhxX #kDYKaAXO .image_item-ff7d7 {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        margin: 0 auto !important;
        max-width: 280px !important;
    }
}

/* 📱 小屏幕进一步缩小70%间距 */
@media screen and (max-width: 480px) {
    
    #lvFuYhxX #jhVzzpCT {
        margin-bottom: 21px !important; /* 从70px缩小70% = 21px */
        padding-bottom: 15px !important; /* 从50px缩小70% = 15px */
    }
    
    #lvFuYhxX #kDYKaAXO {
        margin-top: 27px !important; /* 从90px缩小70% = 27px */
        padding-top: 21px !important; /* 从70px缩小70% = 21px */
    }
    
    #lvFuYhxX #blVhhzUh {
        margin-top: 15px !important; /* 从50px缩小70% = 15px */
        margin-bottom: 15px !important; /* 从50px缩小70% = 15px */
    }
}

/* 🔄 超小屏幕缩小70%间距 */
@media screen and (max-width: 360px) {
    
    #lvFuYhxX #jhVzzpCT {
        margin-bottom: 18px !important; /* 从60px缩小70% = 18px */
        padding-bottom: 12px !important; /* 从40px缩小70% = 12px */
    }
    
    #lvFuYhxX #kDYKaAXO {
        margin-top: 24px !important; /* 从80px缩小70% = 24px */
        padding-top: 18px !important; /* 从60px缩小70% = 18px */
    }
}