/* =================================
   PsychFlow Mobile Fixes
   移动端特殊修复样式
   ================================= */

/* 修复移动端布局问题 */
@media (max-width: 768px) {
    
    /* 修复导航栏层级问题 */
    nav {
        z-index: 1000 !important;
    }
    
    /* 修复移动端菜单显示 */
    #desktop-menu {
        transform: translateY(-10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    #desktop-menu.show {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 500px !important;
        overflow: visible !important;
    }
    
    /* 修复主内容区域在移动端的显示 */
    .relative.h-\[700px\] {
        min-height: 100vh !important;
        height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* 修复按钮在小屏幕上的显示 */
    .btn-premium-direct,
    .btn-premium,
    .btn-premium-outline {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 修复轮播图在移动端的显示 */
    .carousel-slide {
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .carousel-overlay {
        padding: 1rem !important;
    }
    
    /* 修复功能卡片间距 */
    .premium-card {
        margin-bottom: 1rem !important;
    }
    
    /* 修复文字溢出问题 */
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word !important;
        hyphens: auto !important;
    }
    
    p {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 修复图片在移动端的显示 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 修复视频容器 */
    #video-container {
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    /* 修复页脚链接的点击区域 */
    footer a {
        padding: 0.5rem !important;
        display: inline-block !important;
    }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .relative.h-\[700px\] {
        height: auto !important;
        min-height: 80vh !important;
    }
    
    .text-7xl {
        font-size: 2.25rem !important;
    }
}

/* iPhone SE 等小屏设备特殊适配 */
@media (max-width: 375px) {
    .premium-card {
        padding: 1.25rem !important;
    }
    
    .text-7xl {
        font-size: 1.875rem !important;
    }
    
    .carousel-slide img {
        height: 120px !important;
    }
}