/* =========================================================================
   mobile.css - 竖屏与移动端专用响应式布局系统
   约束条件：完全不修改原有横屏代码，仅在 .is-mobile-portrait 激活时生效
   ========================================================================= */

/* ----------------------------------
   1. 基础重置与平滑过渡
   ---------------------------------- */
/* 强制触发平滑过渡效果以避免页面闪烁 */
html.is-mobile-portrait {
    font-size: 14px !important;
}

body, .snap-section, .hero-content, .staggered-layout-container, h1, h2 {
    transition: all var(--duration-normal) var(--ease-standard) !important;
}

/* ----------------------------------
   2. 竖屏单列流式布局与重构DOM
   ---------------------------------- */
/* 默认隐藏专为移动端重构的 DOM */
.mobile-only {
    display: none !important;
}

@media (orientation: portrait) {
    /* 激活竖屏专属 DOM */
    .mobile-only {
        display: flex !important;
    }
    
    /* 隐藏横屏专用的复杂网格布局 */
    .desktop-only {
        display: none !important;
    }

    /* 重写 Section 容器，允许内部高度延伸并启用 Scroll Snap */
    html {
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    .snap-section {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        /* 取消原有固定高度，让内部元素撑开 */
        padding-top: 80px !important;
        overflow-y: visible !important;
        /* 保证每个 Section 作为一个 Snap 锚点 */
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* ----------------------------------
       新重构模块样式 (.content-module)
       ---------------------------------- */
    .content-module {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        /* 模块之间保留 40vh 的视觉空隙 */
        margin-bottom: 45vh;
        z-index: 10;
        position: relative;
        /* 平滑过渡：透明度控制由 JS 动态切换 */
        transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
        opacity: 1;
    }

    /* 当模块滚出视区一半时，由 JS 添加的类名将其隐藏 */
    .content-module.is-faded-out {
        opacity: 0 !important;
        transform: translateY(-20px);
        pointer-events: none;
    }

    .content-module .module-title {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 4px;
        margin-bottom: 30px;
        text-align: center;
        color: #FFFFFF;
        text-shadow: var(--text-shadow-color);
        /* 确保标题贴顶 */
        position: sticky;
        top: 80px;
        z-index: 20;
    }

    .content-module .module-content {
        width: 100%;
        max-width: 600px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 24px;
        color: #FFFFFF;
        font-size: 17px;
        line-height: 1.8;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .content-module .module-content p {
        margin-bottom: 16px;
    }

    .content-module .module-content p:last-child {
        margin-bottom: 0;
    }

    .content-module .module-signature {
        text-align: right;
        margin-top: 30px !important;
        opacity: 0.8;
    }

    .marshmallow-group {
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.05);
        padding: 16px;
        border-radius: 8px;
    }

    .marshmallow-label {
        font-weight: bold;
        margin-bottom: 8px !important;
    }

    .marshmallow-url a {
        color: #8ec5fc;
        word-break: break-all;
        text-decoration: underline;
    }
}

/* ----------------------------------
   3. 绝对定位块转为自然文档流
   ---------------------------------- */
.is-mobile-portrait .hero-content,
.is-mobile-portrait #captain-dir-view,
.is-mobile-portrait #captain-detail-title,
.is-mobile-portrait #captain-dir-text,
.is-mobile-portrait #captain-detail-content,
.is-mobile-portrait #mc-dir-view,
.is-mobile-portrait #mc-detail-title,
.is-mobile-portrait #mc-dir-text,
.is-mobile-portrait #mc-detail-content,
.is-mobile-portrait .absolute.left-\[max\(16px\,4vw\)\],
.is-mobile-portrait .absolute.right-\[max\(16px\,4vw\)\],
.is-mobile-portrait .absolute.left-\[8\%\],
.is-mobile-portrait .absolute.right-\[8\%\],
.is-mobile-portrait .absolute.right-\[12\%\],
.is-mobile-portrait .absolute.left-\[12\%\] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* ----------------------------------
   4. 竖排文字重置为横排
   ---------------------------------- */
.is-mobile-portrait h1,
.is-mobile-portrait h2,
.is-mobile-portrait .captain-glass-content,
.is-mobile-portrait .letter-title,
.is-mobile-portrait .marshmallow-title {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: 100% !important;
    height: auto !important;
    font-size: 26px !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    letter-spacing: 2px !important;
}

/* ----------------------------------
   5. 字体大小优化 (14-16px)
   ---------------------------------- */
.is-mobile-portrait p,
.is-mobile-portrait .paragraph,
.is-mobile-portrait .vision-paragraph,
.is-mobile-portrait .kook-paragraph,
.is-mobile-portrait .marshmallow-intro,
.is-mobile-portrait .marshmallow-url,
.is-mobile-portrait .guide-poetic-text-cn,
.is-mobile-portrait .guide-poetic-text-en {
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ----------------------------------
   6. 阶梯按钮列表与分栏重置
   ---------------------------------- */
.is-mobile-portrait .staggered-layout-container {
    flex-direction: column !important;
    gap: 15px !important;
    height: auto !important;
}

.is-mobile-portrait .captain-dir-btn,
.is-mobile-portrait .mc-dir-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    padding: 15px !important;
    border-radius: 12px !important;
}

.is-mobile-portrait .letter-layout-grid,
.is-mobile-portrait .marshmallow-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    grid-template-columns: 1fr !important;
}

/* ----------------------------------
   7. 触控与导航优化
   ---------------------------------- */
/* 优化触控交互区域 (>= 44px) */
.is-mobile-portrait button,
.is-mobile-portrait a,
.is-mobile-portrait .nav-link,
.is-mobile-portrait .captain-dir-btn,
.is-mobile-portrait .mc-dir-btn {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* 强制显示汉堡菜单，隐藏横排导航 */
.is-mobile-portrait #navbar .lg\:flex {
    display: none !important;
}
.is-mobile-portrait #mobile-menu-btn {
    display: block !important;
}

/* ----------------------------------
   8. 图片与媒体自适应
   ---------------------------------- */
.is-mobile-portrait img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* 视频背景需继续保持全屏覆盖效果 */
.is-mobile-portrait .section-bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 隐藏手机端占用空间的纯装饰性元素 */
.is-mobile-portrait .deco-circle-tl,
.is-mobile-portrait .deco-circle-br-lg,
.is-mobile-portrait .deco-circle-br-sm {
    display: none !important;
}

/* 缩小右下角悬浮工具栏以防遮挡文字 */
.is-mobile-portrait .fixed.bottom-6.right-6 {
    bottom: 20px !important;
    right: 20px !important;
    transform: scale(0.85);
    transform-origin: bottom right;
}
/* ----------------------------------
   9. 左侧抽屉导航栏 (移动端竖屏)
   ---------------------------------- */
.is-mobile-portrait #mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    margin-top: 0 !important;
    padding-top: 80px !important; /* 给顶部留出空间 */
    background: rgba(15, 23, 54, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: flex-start !important;
    z-index: 1000 !important;
}

/* 抽屉隐藏状态（带有 hidden 类） */
.is-mobile-portrait #mobile-menu.hidden {
    display: flex !important; /* 覆盖 tailwind 的 display: none */
    transform: translateX(-100%) !important;
}

/* 抽屉显示状态（移除了 hidden 类） */
.is-mobile-portrait #mobile-menu:not(.hidden) {
    display: flex !important;
    transform: translateX(0) !important;
}

/* 控制背景遮罩在移动端竖屏下的行为 */
.is-mobile-portrait #mobile-menu-backdrop {
    display: block !important;
}
.is-mobile-portrait #mobile-menu-backdrop.hidden {
    display: none !important;
}

.is-mobile-portrait #mobile-menu .nav-link {
    width: 100% !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* ========================================================================== */
/* ����ר�������Ż� (�� <= 414px, �� >= 736px) */
/* ========================================================================== */
@media (orientation: portrait) and (max-width: 414px) {
    /* 1.1 ���沼���ع� (CSS Grid + Flexbox) */
    /* 1.3 �ؼ�Ԫ�ش�ֱ�ѵ����޺�������� */
    html, body {
        width: 100vw;
        overflow-x: hidden !important; /* ��ֹ���ֺ�������� */
        text-size-adjust: 100%; /* 3.4 ��ֹ�ƶ����Զ��Ŵ������ƻ����� */
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation; /* 2.3 ��������ӳ��Ż� */
    }

    #app-container, .main-container, main, .letter-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .snap-section, .content-module {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ��߸��㡢���������� */
    #navbar, .sidebar, .footer-area {
        order: 0 !important; /* �����Ӿ���˳����� */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 1.4 ͼƬ����Ƶ��������Ӧ */
    img, video, .video-container, .image-wrapper, .media-content {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9; /* �������� */
        object-fit: cover;
    }
    
    /* �޸�ȫ����Ƶ������������� */
    .section-bg-video {
        aspect-ratio: auto !important;
        height: 100vh !important;
    }

    /* 2.1 ����Ŀ��ߴ����� */
    button, 
    a, 
    input, 
    select, 
    .nav-link, 
    .btn, 
    [role="button"] {
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 4px !important; /* ��� flex gap ��֤��� >= 8px */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. �������� */
    body, p, span, div, a, button, input, .captain-dir-btn {
        /* 3.1 ʹ�� clamp ƽ���������� */
        font-size: clamp(14px, 3.8vw, 18px) !important;
        /* 3.2 �и��޷�����ֵ 1.5 - 1.75 */
        line-height: 1.6 !important; 
        /* 3.3 CJK �������ջ */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    }

    h1, .title-h1, .module-title {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.5 !important;
    }

    h2, .title-h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.5 !important;
    }

    h3, .title-h3 {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        line-height: 1.5 !important;
    }
}