/*
 * /about（关于我们）手机端适配 —— 2026-11-05。
 *
 * about.css 全长 1150 行，一条 @media 都没有：这套版式是 Discuz 门户模板原样
 * 搬过来的，所有尺寸都按 1200 宽写死。桌面正常，390 下三处直接坏掉：
 *
 * 1. .industrial-park 固定 height:496px + overflow:hidden。
 *    里面 .slogan 自带 155px 上边距，.en 是 94px 大字；390 宽下大字折成 4 行
 *    （376px），整段 scrollHeight 到 875 —— 图标和 6 项资质标签全被裁掉，
 *    屏幕上只剩「一张工厂图 + 半截大字」，看着就是"页面显示不完整"。
 * 2. .video 里 h5 写死 48px，390 下折 3 行，正好压在居中的播放按钮上。
 * 3. .brand1-swiper 的 slide 写死 300px，390 的容器只有 367 宽，
 *    右边永远露出半张被切断的卡片。
 *
 * 这三块只在 /about 出现（data-v-454e09d1 但 .industrial-park / .video
 * 的标记只有这页有），所以单独成文件、只在这页加载，见 functions.php 的
 * $ldx_portal_page_css。其它四个 about 系页面不受影响。
 */

/* ==================================================================
 * 桌面端：「业务范围」5 张卡片平分一行（2026-11-05 第二轮）
 *
 * 这组 .swiper-slide 上的 width:300px 是内联 style，来自迁移时抓下来的
 * Discuz 渲染快照 —— 站上根本没加载 swiper.js（主题里连文件都没有，
 * 首页那组轮播也是同样情况），所以没有箭头、没有拖动，就是一行静态卡片。
 * 后果是 1200 宽下 4×300=1200 正好占满，第 5 张被 .swiper-container 的
 * overflow:hidden 裁在后面，永远看不到。
 *
 * 既然没有轮播能力，正确做法是让 5 张都显示：改成等分 flex，
 * 宽度写 auto 压掉内联的 300px（不写 auto 的话 flex-basis 会被 width 顶掉）。
 * ================================================================== */
.brand1-swiper .swiper-slide[data-v-454e09d1] {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 800px) {

    /* ---------- 园区图：高度交还内容 ---------- */
    .industrial-park[data-v-454e09d1] {
        /* 写 !important 是因为原规则同选择器、同权重，靠加载顺序也压不住
           （about.css 依赖 ldx-about，本文件在其后，但保留 !important 更稳） */
        height: auto !important;
        padding: 36px 20px 40px;
        margin: 26px 0 32px;
    }

    /* 桌面靠 155px 上边距把大字压到画面中部，手机没这个空间，交给 padding */
    .industrial-park .slogan[data-v-454e09d1] {
        margin: 0;
    }

    .industrial-park .en[data-v-454e09d1] {
        font-size: 34px;
        line-height: 1.2;
    }

    /* 「十年专注」和「LED显示屏行业」分两行，各占一行。
       不分行的话浏览器会在「显示屏」和「行业」之间折行，第二行只剩「行业」
       两个字，很难看；这个 em 上没有 data-v 属性，所以选择器要照抄
       原文件里 [data-v-454e09d1] .industrial-park ... 那种写法。 */
    [data-v-454e09d1] .industrial-park .en em {
        display: block;
    }

    .industrial-park .ic[data-v-454e09d1] {
        margin: 18px 0 4px;
    }

    [data-v-454e09d1] .industrial-park .list {
        max-width: none;
    }

    /* ---------- 视频：字不再压住播放键 ---------- */
    .about-wrap .video[data-v-454e09d1] {
        height: 240px;
        margin-top: 36px;
    }

    .about-wrap .video .slogan[data-v-454e09d1] {
        margin: 0;
        padding: 30px 20px 0;
    }

    .about-wrap .video h3[data-v-454e09d1] {
        font-size: 15px;
    }

    .about-wrap .video h5[data-v-454e09d1] {
        font-size: 24px;
        line-height: 32px;
        margin-top: 6px;
    }

    /* 播放键从居中挪到右下角：居中必然和左对齐的标题打架，
       而且手机上一只手就能点到右下角 */
    .btn-video[data-v-454e09d1] {
        width: 54px;
        height: 54px;
        top: auto;
        left: auto;
        right: 18px;
        bottom: 18px;
        margin: 0;
    }

    /* ---------- 业务范围：手机上改成竖排，5 张全部摊开 ----------
     * 桌面是 5 张并排的一行；手机宽到放不下，原来只露出 1 张 + 切一半的第 2 张。
     *
     * 这里不走"横向滑动"那条路：站上根本没有轮播脚本（主题里连 swiper.js
     * 都没有，所以也没有箭头、没有分页圆点），做成可滑的假轮播，用户不滑
     * 就永远只看得到第 1 张 —— 等于 4 张还是"显示不完整"。
     * 直接让 .swiper-wrapper 换行、每张占满宽竖着排，什么都不用点就全看见了。
     *
     * flex 必须改回 0 0 <比例>：桌面那条是 flex:1 1 0（basis 0），留着的话
     * 5 张会平分宽度，每张只剩几十像素。width 要 !important 才能压掉
     * 内联的 style="width:300px"。 */
    .brand1-swiper .swiper-wrapper[data-v-454e09d1] {
        flex-wrap: wrap;
        height: auto;
    }

    .brand1-swiper .swiper-slide[data-v-454e09d1] {
        width: 100% !important;
        flex: 0 0 100%;
        /* 卡片本身没有底色/边框，全靠外边距分界；20px 跟卡内段落间距一样大，
           会糊成一整段，所以放到 28px */
        margin-bottom: 28px;
    }

    /* 最后一张下面不留空 */
    .brand1-swiper .swiper-slide[data-v-454e09d1]:last-child {
        margin-bottom: 0;
    }

    /* .about-wrap 桌面是 margin:77px 0，手机上上下各 77 太多，收到 40。
       顺带把视频下面那段到页脚的白从 137px 缩到 100px 左右。 */
    .about-wrap[data-v-454e09d1] {
        margin: 40px 0;
    }
}

/* 601–800（平板 / 横屏手机）：容器宽到 520 以上，34 / 24px 偏小，抬一档；
 * 业务范围改两列，一张占满 722 宽太浪费横向空间。 */
@media (min-width: 601px) and (max-width: 800px) {
    .industrial-park .en[data-v-454e09d1] {
        font-size: 52px;
    }

    .about-wrap .video[data-v-454e09d1] {
        height: 300px;
    }

    .about-wrap .video h5[data-v-454e09d1] {
        font-size: 34px;
        line-height: 44px;
    }

    .brand1-swiper .swiper-slide[data-v-454e09d1] {
        width: 50% !important;
        flex: 0 0 50%;
    }

    /* 5 张 → 2/2/1，最后一张单吊在半边很难看；
       一共奇数张时让它占满一行。:nth-child(odd) 判的就是"总数为奇数时
       的最后一张" —— 6 张时最后一个落在偶数位，这条不会命中。 */
    .brand1-swiper .swiper-slide[data-v-454e09d1]:last-child:nth-child(odd) {
        width: 100% !important;
        flex: 0 0 100%;
    }
}