/* Legacy mobile list and detail styles. Shared header/footer live in ui-v2.css. */
@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;
    }

    /* ── 视频列表：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: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    main.dx-container.search-results-page .search-results-grid {
        column-gap: 10px;
    }

    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 与相关列表同宽，封面在上、标题在下。 */
    main.dx-container .detail-recommend {
        width: auto;
    }

    main.dx-container .detail-recommend .video-items > li > .video-item {
        display: block;
    }

    main.dx-container .detail-recommend .video-items > li > .video-item > a {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* ── 列表头区：面包屑 / 标题 / 收录说明 ───────────────────────── */
    /* 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
     *
     * 旧列表头区的面包屑已移除；视频详情由 detailv3.phtml 共用输出 PC / H5 面包屑。
     */
    .mobile-list-v2__meta {
        padding: 0;
    }

    /* 标题：稿 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;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        letter-spacing: 0;
        color: #eeeeee;
    }

    /* ── 详情页：分类 + 标签胶囊（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 > span {
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
    }
}