/* =========================================================================
 * 移动端 / iOS / 安卓 兼容性增强（最后加载，仅做增强不破坏现有桌面表现）
 * ========================================================================= */

/* ===== 新闻封面图：完整显示、首页与新闻页一致（桌面+移动均生效，不限 media）=====
 * 所有新闻图均为 507×314（比例≈1.615:1）。原来用固定高度+cover 会按盒子比例裁切，
 * 首页裁两侧、新闻页裁上下。改为盒子比例 = 图片比例 + cover：
 * 完整显示整张海报、不裁切也不留白，两个页面、两种设备一致。 */
.part6 .p6_con .top .pics .pic,
.part6 .p6_con .bottom .box .pics .pic,
.nl_con .boxs .box .pics .pic {
    height: auto !important;
    aspect-ratio: 507 / 314;
    background-size: cover !important;
    background-position: center !important;
}

/* ---- P0-1 iOS 输入框聚焦自动放大：表单控件在移动端强制 ≥16px ---- */
@media (max-width: 1024px) {
    input,
    textarea,
    select,
    .search input,
    .member-search input {
        font-size: 16px !important;
    }
}

/* ---- P0-2 iOS Safari 100vh 失真：关键全屏/弹窗容器用 dvh 兜底 ----
 * 不支持 dvh 的浏览器会忽略该声明、回退到原有 vh 值（渐进增强）。 */
@media (max-width: 1024px) {
    .z_tanchuang .tbox,
    .z_tanchuang .modal { min-height: 100dvh; }
    .z_tanchuang .tbox .modal .img video { max-height: 67dvh; }
    .mh_nav { height: 100dvh; }
}
/* 活动详情模态框（members/activities 用 vh 的容器）*/
.act-modal-container { height: 90dvh; }

/* ---- P1 iPhone 全面屏：固定头部 / 底部 / 抽屉导航避开刘海与底部横条 ---- */
@supports (padding: env(safe-area-inset-top)) {
    .header { padding-top: env(safe-area-inset-top); }
    .m_header {
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-left: calc(15px + env(safe-area-inset-left));
        padding-right: calc(15px + env(safe-area-inset-right));
    }
    .mh_nav {
        padding-top: calc(50px + env(safe-area-inset-top));
        padding-bottom: calc(25px + env(safe-area-inset-bottom));
    }
    .footers .footer .bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---- P2-1 触屏 hover 粘连：hover 效果只在真正支持悬停的设备生效 ----
 * 触屏设备 (hover: none) 上跳过这些，点完即恢复，避免样式"卡住"。 */
@media (hover: none) {
    .banner .txt>div .more:hover { background-color: transparent; transform: none; border-color: #fff; }
    .banner .txt>div .more:hover span { background-image: url('https://shindev.oss-cn-hongkong.aliyuncs.com/assets/static/img/more2.png'); color: #fff; }
    .nav>li>a:hover { color: inherit; }
}

/* ---- P2-2 点击反馈：全局去了 tap-highlight，给可点元素补 :active 视觉反馈 ---- */
@media (hover: none) {
    a:active,
    button:active,
    .more:active,
    .tab-button:active,
    .m_header .btn:active,
    .mh_nav .nav>li:active { opacity: 0.6; transition: opacity 0.1s; }
}

/* ---- P2-3 iOS 滚动惯性：弹窗 / 抽屉 / 模态内可滚动区域跟手 ---- */
.mh_nav,
.z_tanchuang .tbox,
.act-modal-container,
.members-list {
    -webkit-overflow-scrolling: touch;
}

/* ---- 通用：移动端图片/视频禁止溢出，统一 box-sizing ---- */
@media (max-width: 1024px) {
    img, video { max-width: 100%; }
}

/* ===== 移动端：恢复首屏"观看视频"按钮，使其可点开弹窗播放（带声音）=====
 * commonc16a.css 在 ≤1024 把它 display:none 了，这里覆盖回来（本文件后加载，优先级更高）。*/
@media (max-width: 1024px) {
    /* 关键：播放中的背景视频在移动端会截走触摸 → 让视频和透明覆盖层都不接收点击，
       只让"观看视频"按钮接收，保证按钮可点、其余区域不挡滑动。 */
    .banner video { pointer-events: none !important; }
    /* 解除 banner 的堆叠困局：桌面遗留的 z-index:40 会把按钮困在 40 层、低于 index_con(50)，
       导致 index_con 里的全屏 fixed 覆盖层盖住按钮。移动端 banner 是普通流，不需要这个 z-index。 */
    .banner { z-index: auto !important; }
    /* part3 的全屏 fixed 装饰层(.before 太空背景，桌面视差特效用)在移动端无用，
       且会盖在首屏捕获点击 → 直接隐藏，根除"按钮点不动"。 */
    .part3 .box:last-child .before,
    .part3 .before.parallaxo33 { display: none !important; }
    /* 抬高覆盖层层级，确保按钮在 part1(z41)/index_con(z50) 之上、能接收点击 */
    .banner .txt { pointer-events: none !important; z-index: 60 !important; }
    .banner .txt > div { pointer-events: none !important; }

    .banner .txt > div .more {
        display: table !important;
        margin: 0.6rem auto 0 !important;
        padding: 0 0.28rem;
        min-width: 1.8rem;
        line-height: 0.7rem;
        font-size: 0.24rem;
        border: 1px solid #fff;
        border-radius: 0.4rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.35);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        cursor: pointer;
        position: relative;
        z-index: 10;
        pointer-events: auto !important;   /* 仅按钮可点 */
        -webkit-tap-highlight-color: rgba(255,255,255,0.2);
    }
    .banner .txt > div .more span {
        background: none !important;   /* 去掉桌面那个右侧小箭头背景图 */
        padding: 0 !important;
        pointer-events: none;          /* 点 span 也算点按钮 */
    }
    .banner .txt > div .more:active { opacity: 0.7; transform: scale(0.97); }

    /* 弹窗：移动端关闭按钮移到模态框内（原 right:-50px 会跑到屏外点不到）*/
    .z_tanchuang .tbox .modal { width: 92% !important; padding: 14px !important; }
    .z_tanchuang .tbox .modal .out {
        right: 6px !important;
        top: 6px !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        z-index: 10;
    }
    .z_tanchuang .tbox .modal .img { max-width: 100% !important; }
    .z_tanchuang .tbox .modal .img video { max-height: 78dvh !important; }
}

/* ===== 关于我们·核心团队：移动端取消桌面 sticky 滚动卡片动画 =====
 * 桌面端 .ab2 .boxs 是 sticky+100vh，两张团队卡片 absolute+translateY 靠滚动逐个滑入；
 * 移动端(尤其窄屏)绝对定位卡片会溢出固定高度容器，压到下一节「发展历程」。
 * 这里改为正常堆叠流：容器自动撑高、卡片依次排列在背景图上，彻底消除重叠。 */
@media (max-width: 1024px) {
    .ab_con .ab2 .boxs {
        position: relative !important;
        height: auto !important;
        padding-bottom: 0.6rem;
        overflow: hidden;
    }
    .ab_con .ab2 .boxs .txt { position: static !important; }
    .ab_con .ab2 .boxs .txt1 {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        margin-bottom: 0.5rem;
    }
}

/* ===== 联系/招聘·人才理念：.center 固定高度+overflow隐藏会截断文字 =====
 * 桌面端 .join1 .txt .center 固定 3.6rem 高、overflow:hidden（配合滚动渐显），
 * 移动端 3 条理念+引号图超出该高度被截断；改为自动高度、全部可见。 */
@media (max-width: 1024px) {
    .join1 .txt .center { height: auto !important; overflow: visible !important; margin-bottom: 0.6rem; }
    .join1 .txt .center .box { opacity: 1 !important; }
}

/* ===== 关于我们·Core Values(价值观)：移动端取消桌面 800vh 滚动卡片堆叠 =====
 * 桌面端 .ab4 高 800vh、卡片 sticky+100vh+top:4.82rem 靠滚动逐张堆叠；
 * 移动端这套特效会把卡片定得很靠下、且英文长描述显示不全。
 * 改为正常竖向卡片列表：标题在上，7 张卡片依次排列、每张完整显示。 */
@media (max-width: 1024px) {
    .ab_con .ab4 { height: auto !important; }
    .ab_con .ab4 .height { display: none !important; }
    .ab_con .ab4 .bg {
        position: relative !important; height: auto !important;
        padding: 40px 15px !important; min-height: 120px;
    }
    .ab_con .ab4 .boxs {
        position: static !important; height: auto !important;
        width: calc(100% - 30px) !important; margin: 0 auto !important; float: none !important;
    }
    .ab_con .ab4 .boxs .box {
        position: static !important; height: auto !important; top: auto !important;
        margin-bottom: 16px;
    }
    .ab_con .ab4 .boxs .box1,
    .ab_con .ab4 .boxs .box.on .box1,
    .ab_con .ab4 .boxs .box.on1 .box1 {
        transform: none !important; opacity: 1 !important;
    }
    .ab_con .ab4 .boxs .box1 .p {
        height: auto !important; -webkit-line-clamp: unset !important;
        display: block !important; overflow: visible !important;
    }
    /* 背景图拉长铺满整节、卡片浮于其上（叠暗色蒙版保证可读）。
       原 .bg 只在标题那条显示图片 → 改为整节背景，标题条自身的图去掉。 */
    .ab_con .ab4 {
        background-image:
            linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
            url('https://shindev.oss-cn-hongkong.aliyuncs.com/assets/uploads/images/202304/df2b70aa270e6e8db1f72b85e9272701.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-bottom: 24px;
    }
    .ab_con .ab4 .bg { background: none !important; min-height: 0 !important; padding: 36px 15px 8px !important; }
    /* 卡片半透明深色，让背景图隐约透出，更有"悬浮在图上"的层次 */
    .ab_con .ab4 .boxs .box1 { background-color: rgba(28,28,30,0.82) !important; }
}