/**
 * Mobile v2 — H5 改版样式（与 PC 硬隔离）
 *
 * 加载：headerv3 全站引入；所有规则写在 @media (max-width: 767px) 内，不影响 PC。
 * 不改 common.css / ui-v2.css 的桌面断点规则。
 *
 * ── Header 顶栏 ────────────────────────────────────────────────────
 * [首修] 状态栏下漏出内容 → safe-area + 顶栏行高收敛
 * [三修] 750 稿顶栏 114px → H5 57px；搜索 64→32px，距右 25→12.5px
 * [四修] Logo 尺寸（750÷2）：顶栏 191×99→95.5×49.5；底栏 140×73→70×36.5
 * [五修] 顶栏保留登录头像，置于搜索放大镜右侧
 *
 * ── 视频列表 ───────────────────────────────────────────────────────
 * H5 固定两列，沿用老 .video-item（indexv3 / videov3 里的 .video-items）
 * 不碰 .video-items-v2 / .video-card-v2（PC v2 专用，H5 已 display:none）
 *
 * ── 主色 ───────────────────────────────────────────────────────────
 * 全站 token 在 common.css :root --dx-primary-color（PC/H5 登录钮等均读此变量）。
 * 本文件部分 v2 样式仍写死 #f93c79，见下方【硬编码清单】。
 *
 * ── 列表头区（面包屑 / 标题 / 收录说明）──────────────────────────
 * 组件：components/mobile_list_meta.phtml（videov3 + indexv3 引入，.md:hide）
 *   = 列表顶「面包屑 + 大标题 + 收录说明」三块，不是视频卡底下的小字
 * 样式：.mobile-list-v2__* ；H5 隐藏旧 .list-page-legacy-head
 *
 * ── Footer 底栏顺序（仅 H5）──────────────────────────────────────
 * 关于/支持/其他 链接栏在上，Logo+版权+地址 在下（PC ui-v2 左右布局不变）
 */

@media (max-width: 767px) {
    /*
     * H5 布局 token（主色不在这里改，见 common.css :root --dx-primary-color）
     *
     * H5 登录钮为何也是粉色：
     *   footerv3 → .btn-primary → zui 读 var(--dx-primary-color)
     *   与 PC 同一变量；改版前 H5 曾在此文件重复写 #f93c79 盖老橙色，现已去掉。
     *
     * H5 仍硬编码 #f93c79 的已改为 var(--dx-primary-color)（面包屑当前页、底栏网址）
     */
    :root {
        /* 稿 25px @750 ÷2：列表左右边距、底栏右侧留白 */
        --ui-v2-mobile-gutter: 12.5px;
    }

    /* ── Header 顶栏（750 设计稿 ÷2 → 375 逻辑宽 CSS px）──────────────── */
    /*
     * 设计稿：顶栏高 114px，搜索图标 64×64，距右 25px
     * H5 换算：57px 行高，32×32 图标，12.5px 右边距
     * 撑高元素：.app-header-inner { height: var(--dx-header-height) }
     */

    /* ① 顶栏占位 + fixed 行高（#app-header padding-top 与 inner 同步） */
    #app-header.app-header-shell {
        --dx-header-height: 57px;
        padding-top: calc(var(--dx-header-height) + env(safe-area-inset-top, 0px));
    }

    /* ② fixed 顶栏：吃 safe-area；禁止 overflow:hidden（会裁掉展开后的 .mobile-search） */
    #app-header.app-header-shell .header {
        padding-top: env(safe-area-inset-top, 0px);
        overflow: visible;
        background-color: var(--ui-v2-header-bg, #1a1a1a);
    }

    /* ③ 导航行：不透明底；H5 允许头像下拉溢出 */
    #app-header.app-header-shell .app-header-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        height: var(--dx-header-height);
        min-height: var(--dx-header-height);
        background-color: var(--ui-v2-header-bg, #1a1a1a);
        overflow: visible;
    }

    /* ④ 顶栏 Logo：稿 191×99 @750 → H5 95.5×49.5px */
    #app-header.app-header-shell .app-header-logo .app-logo {
        width: 95.5px;
        height: 49.5px;
    }

    /* 左侧折叠菜单（btn-menu-collapse / icons.svg#menu）→ 白色 */
    #app-header.app-header-shell .btn-menu-collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: #ffffff;
    }

    #app-header.app-header-shell .btn-menu-collapse svg {
        color: #ffffff;
    }

    /*
     * ⑤ 顶栏右侧：搜索放大镜 + 登录头像（头像在放大镜右边）
     * 距屏幕右缘 12.5px（稿 25px）；图标 32×32，间距 12px
     */
    #app-header.app-header-shell .app-header-container {
        padding-right: 12.5px;
    }

    #app-header.app-header-shell .app-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-right: 0;
    }

    #app-header.app-header-shell .app-header-actions .popover-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        position: relative;
        z-index: 4;
    }

    #app-header.app-header-shell .btn-open-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 32px;
        height: 32px;
        line-height: 0;
        border: none;
        background: transparent;
        flex-shrink: 0;
    }

    #app-header.app-header-shell .app-header-search-mobile-icon {
        display: block;
        width: 32px;
        height: 32px;
    }

    #app-header.app-header-shell .header-user-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
        line-height: 0;
        border: none;
        background: transparent;
    }

    #app-header.app-header-shell .header-user-icon,
    #app-header.app-header-shell .header-user-avatar {
        display: block;
        width: 32px;
        height: 32px;
        margin: 0;
        object-fit: cover;
    }

    #app-header.app-header-shell .popover-container .popover {
        top: 32px;
        z-index: 5;
    }

    /*
     * ⑥ mobile-search（common.js：.btn-open-search 切换 .is-open）
     * 收起：移出视口上方，彻底藏 placeholder
     * 展开：下移到导航行正下方
     */
    #app-header.app-header-shell .mobile-search {
        z-index: 3;
        top: env(safe-area-inset-top, 0px);
        height: var(--dx-header-height);
        transform: translateY(-100%);
        transition: transform 0.3s;
        pointer-events: none;
        background-color: #000;
    }

    #app-header.app-header-shell .mobile-search.is-open {
        transform: translateY(var(--dx-header-height));
        pointer-events: auto;
    }

    /* ── 视频列表：H5 两列，老卡 .video-item ────────────────────────── */
    /*
     * 作用页：首页 indexv3、列表 videov3（H5 走老 DOM，非 video_list_v2）
     * 左右边距：稿 25px @750 → 12.5px（与底栏右侧留白一致）
     * 卡间距：稿 上下 20 / 左右 16 → 10px / 8px
     * 封面高：稿 192px → 96px；圆角稿 8px → 4px
     */
    main.dx-container .video-items:not(.video-items-v2) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
        column-gap: 8px;
        padding-left: var(--ui-v2-mobile-gutter);
        padding-right: var(--ui-v2-mobile-gutter);
        box-sizing: border-box;
    }

    main.dx-container .video-items:not(.video-items-v2) > li {
        min-width: 0;
    }

    /* 封面区：固定高 96px（稿 192÷2），圆角 4px（稿 8÷2） */
    main.dx-container .video-items:not(.video-items-v2) .video-item .aspect-w-16 {
        padding-bottom: 0;
        height: 96px;
        border-radius: 4px;
        overflow: hidden;
    }

    main.dx-container .video-items:not(.video-items-v2) .video-item .aspect-w-16 .poster,
    main.dx-container .video-items:not(.video-items-v2) .video-item .aspect-w-16 .poster img {
        border-radius: 4px;
    }

    main.dx-container .video-items:not(.video-items-v2) .video-item .aspect-w-16 .poster img {
        object-fit: cover;
    }

    /*
     * 时长角标：稿高 26px，距右 15 / 下 14 → H5 13px，7.5px / 7px
     * 去掉全宽 dx-bg-linear 渐变条，改为右下角胶囊
     */
    main.dx-container .video-items:not(.video-items-v2) .video-item .dx-bg-linear {
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        right: 7.5px;
        bottom: 7px;
        justify-content: flex-end;
    }

    main.dx-container .video-items:not(.video-items-v2) .video-item .dx-bg-linear span {
        display: inline-flex;
        align-items: center;
        height: 13px;
        padding: 0 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.65);
        font-weight: 500;
        font-size: 10px;
        line-height: 13px;
        letter-spacing: 0;
        color: #ffffff;
    }

    /*
     * H5 暂隐藏老视频卡：作者名 + 观看/点赞行
     * 模板仍保留 .title.flex.text-sm.justify-between.mb-1.5（videov3 / indexv3 等）
     * 恢复展示：删掉下方 display:none
     */
    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 > .title {
        display: none !important;
    }

    /* 文案区：去掉老卡左右 padding / 顶距 */
    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 {
        margin-top: 0;
        padding: 0;
    }

    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 h2,
    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 h3 {
        margin: 0;
        font-weight: inherit;
        font-size: inherit;
    }

    /* 标题：稿 28px Regular，上下 10px → H5 14px，margin 5px */
    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 .line-clamp-2,
    main.dx-container .video-items:not(.video-items-v2) .video-item .text-font1 > a.line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 5px 0;
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        color: #ffffff;
        text-decoration: none;
    }

    /* 播放量小字：稿 24px Medium → H5 12px，#999999 */
    main.dx-container .video-items:not(.video-items-v2) .video-item .video-item-mobile-meta {
        margin: 0;
        font-weight: 500;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0;
        color: #999999;
    }

    /* ── 列表头区：面包屑 / 标题 / 收录说明 ───────────────────────── */
    /* H5 隐藏 videov3 顶部分类双 Tab（改走面包屑导航） */
    .mobile-list-v2__tabs {
        display: none !important;
    }

    /* H5 隐藏首页 Footer「色站分享」外链区（#ssite，仅 $is_home 输出） */
    #app-footer #ssite {
        display: none !important;
    }

    /* H5 隐藏 videov3 / indexv3 内旧 h1 + 站长推荐 + 「热门色情片」等老标题块 */
    main.dx-container .list-page-legacy-head {
        display: none !important;
    }

    /*
     * 列表头区排版（750 稿 ÷2 → CSS px）
     * 标题：上 16.5px（原面包屑占位）/ 下 8px；字 36→18px
     * 收录：下 16→8px；字 28→14px / 行高 40→20px
     *
     * @ai-modified 2026-07-29 H5 面包屑已下线（模板与样式一并移除），
     * 详情页面包屑改为 PC-only（detailv3.phtml 的 hide md:block）。
     */
    .mobile-list-v2__meta {
        padding: 0 var(--ui-v2-mobile-gutter);
    }

    /* 标题：稿 36px Semibold → H5 18px */
    .mobile-list-v2__title {
        margin: 16.5px 0 8px;
        font-weight: 600;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0;
        color: #ffffff;
    }

    /* 收录说明：稿 28px / 行高 40px → H5 14px / 20px，色 #FFFFFF73 */
    .mobile-list-v2__desc {
        margin: 0 0 8px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0;
        text-align: justify;
        color: rgba(255, 255, 255, 0.45);
    }

    /*
     * 栅格小节标题（H2，videov3.phtml）：H5 15px，比 H1 的 18px 低一级
     * 左右边距与 .video-items 的 gutter 对齐（同 12.5px），视觉上和卡片左边线齐平
     * @ai-modified 2026-07-30 列表页原本 h1→h3 跳级，补一个描述视频栅格的 H2
     */
    .mobile-list-v2__section-title {
        margin: 4px 0 8px;
        padding: 0 var(--ui-v2-mobile-gutter);
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        letter-spacing: 0;
        color: #eeeeee;
    }

    /* ── Footer：链接栏在上，Logo 区块在下（仅 H5，不改 footerv3 DOM）──── */
    /*
     * 默认 DOM 顺序：footer-brand（Logo）→ footer-nav（关于/支持/其他）
     * H5 用 flex order 对调视觉顺序；PC ≥768px 走 ui-v2.css 横向布局，不受此处影响
     */
    #app-footer .footer-main {
        height: auto;
        min-height: 0;
        /* Logo 区块距屏幕底：稿 64px @750 → 32px */
        padding-bottom: 32px;
    }

    /* 链接栏 + Logo：左 37px（稿 74÷2），右 12.5px（稿 25÷2，与视频列边距一致） */
    #app-footer .footer-container {
        padding-left: 37px;
        padding-right: var(--ui-v2-mobile-gutter);
    }

    #app-footer .footer-nav {
        order: 1;
        padding-top: 24px;
    }

    /* 关于区 → Logo：稿 98px @750 → 49px */
    #app-footer .footer-inner {
        gap: 49px;
    }

    #app-footer .footer-brand {
        order: 2;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 底栏 Logo：稿 140×73 @750 → H5 70×36.5px */
    #app-footer .footer-brand .footer-logo img {
        width: 70px;
        height: 36.5px;
    }

    /*
     * 底栏文案（750 稿 ÷2 → CSS px）
     * Copyright：24px Semibold #EEE → 12px
     * 网址链接：#F93C79
     * 栏目标题：26px Semibold #EEE，下距 39px → 13px / 19.5px
     * 栏目链接：26px Regular #656565 → 13px
     * 三列间距：148px → 74px
     */
    #app-footer .footer-copyright {
        font-weight: 600;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0;
        color: #eeeeee;
    }

    #app-footer .footer-address {
        margin-top: 8px;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.4;
        letter-spacing: 0;
        color: #eeeeee;
    }

    #app-footer .footer-address a {
        color: var(--dx-primary-color);
    }

    #app-footer .footer-nav {
        gap: 74px;
    }

    #app-footer .footer-col--other {
        width: auto;
    }

    #app-footer .footer-col-title {
        margin: 0 0 19.5px;
        font-weight: 600;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0;
        color: #eeeeee;
    }

    #app-footer .footer-col a {
        font-weight: 400;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0;
        color: #656565;
    }

    /* ── 详情页：分类 + 标签胶囊（H5）────────────────────────────────── */
    /*
     * detailv3.phtml 的 .detail-tags-v2 原为 `hide md:flex`（H5 不渲染），
     * 现两端都展示；PC 胶囊 py-2/px-4 在 H5 偏大，这里按 H5 收敛为 24px 高小胶囊。
     */
    .detail-tags-v2 {
        margin-bottom: 8px;
    }

    .detail-tags-v2 > li > a {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.75);
    }

    .detail-tags-v2 > li > a h2,
    .detail-tags-v2 > li > a h3 {
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
    }
}