/* ============================================================
 * viewthread_page.css  — 帖子详情页独立样式文件
 * 作用：1) 抽取原模板中内联<style>块/内联style属性
 *       2) PC版响应式适配(table布局→小屏单列)
 *       3) 统一黄金比例、圆角规范(8px)
 * 断点：≥1024 (PC原生) / 768–1023 (平板横) / ≤767 (平板竖+手机，此尺寸下手机UA会走touch模板)
 * ============================================================ */

/* ---------- 1. 抽取模板 auto_css_zone 规则 ---------- */
.auto_cls_viewthread_01 { display: none; }
.auto_cls_viewthread_02 { display: none; z-index: 350; }
.auto_cls_viewthread_node_body_01 { display: none; }
.auto_cls_viewthread_node_body_02 { margin: 0; }

/* ---------- 2. 通用工具类(替换内联style="display:none;..."等) ---------- */
.vt-d-none      { display: none !important; }
.vt-d-inline    { display: inline !important; }
.vt-w-100       { width: 100% !important; }
.vt-h-48        { height: 48px !important; }
.vt-mr-10       { margin-right: 10px !important; }
.vt-ml-12       { margin-left: 12px !important; }
.vt-pr-10       { padding-right: 10px !important; }
.vt-overflow-v  { overflow: visible !important; }
.vt-z-350       { z-index: 350 !important; }
.vt-rel         { position: relative !important; }

/* 帖子用户名列颜色(动态) */
.vt-author-groupcolor { }

/* ---------- 3. PC viewthread 核心响应式布局(行业最佳3档断点) ---------- */

/* === 档1：≥1024px 保留原视觉，仅做fluid优化 === */
@media (min-width: 1024px) {
    #postlist .plhin,
    #postlist .ad {
        width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }
    #postlist .pls {
        width: 170px;
        min-width: 170px;
    }
    #postlist .plc {
        width: auto;
    }
    /* 图片黄金比 2:3，圆角统一8px */
    .t_f img, .pct img, #postmessage img {
        border-radius: 8px;
        max-width: 100%;
        height: auto;
    }
    /* 猜你想看卡片圆角 */
    .mbzxbox, .mbzxlstimg, .mbzxlstimg img.isuccess {
        border-radius: 8px !important;
    }
}

/* === 档2：768px–1023px (平板横屏/窄PC窗口) 左侧栏收缩，字号微降 === */
@media (max-width: 1023px) and (min-width: 768px) {
    #ct.wp, #wp.wp, .wp {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #postlist .plhin,
    #postlist table {
        table-layout: fixed;
        width: 100%;
        box-sizing: border-box;
    }
    #postlist .pls {
        width: 120px;
        min-width: 120px;
        padding: 6px;
    }
    #postlist .pls .avatar img {
        width: 72px;
        height: 72px;
    }
    #postlist .plc {
        padding: 8px;
    }
    .pl .pls .pi .authi,
    .pl .plc .authi {
        font-size: 13px;
    }
    #postlist h1.ts, .pl h1.ts {
        font-size: 20px;
        line-height: 1.4;
    }
    .t_f {
        font-size: 15px;
        line-height: 1.7;
    }
    .t_f img, .pct img, #postmessage img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
    /* 收藏/购买按钮：自适应换行但仍保持横排 */
    #p_btn.mtw.mbm.hm.cl > a,
    #p_btn .p_btn_mobile > a {
        padding: 0 10px;
    }
}

/* === 档3：≤767px (平板竖屏/桌面窗口极小；手机UA会走独立touch模板不触发这里) === */
@media (max-width: 767px) {
    #ct.wp, #wp.wp, .wp, .wp2, .wp3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px;
        box-sizing: border-box;
    }
    /* 帖子table布局flex化：左侧用户信息置顶横排，正文100%宽 */
    #postlist table.plhin,
    #postlist table.plhin tbody,
    #postlist table.plhin tr,
    #postlist table.plhin td.pls,
    #postlist table.plhin td.plc {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    #postlist table.plhin tr {
        margin-bottom: 0;
    }
    #postlist td.pls {
        padding: 8px 6px;
        border-bottom: 1px solid rgba(74, 59, 42, 0.5);
        background: rgba(26, 20, 16, 0.6);
    }
    #postlist td.pls .favatar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    #postlist .pls .avatar {
        width: 40px;
        height: 40px;
    }
    #postlist .pls .avatar img {
        width: 40px;
        height: 40px;
    }
    #postlist .pls .pi,
    #postlist .pls .xl.xl2 {
        display: inline-block;
        margin: 0;
    }
    #postlist td.plc {
        padding: 10px 6px;
    }
    #postlist .plm {
        padding-left: 6px;
        padding-right: 6px;
    }
    /* 字号阶梯降低，保证可读 */
    #postlist h1.ts, .pl h1.ts {
        font-size: 18px;
        line-height: 1.35;
    }
    .t_f {
        font-size: 15px;
        line-height: 1.7;
        word-break: break-word;
    }
    .t_f img, .pct img, #postmessage img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
    /* 面包屑/翻页缩小 */
    #pt {
        font-size: 12px;
        padding: 6px 4px;
    }
    .pgs {
        font-size: 12px;
    }
    /* 操作按钮单列化（保证可点） */
    #p_btn.mtw.mbm.hm.cl {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    #p_btn.mtw.mbm.hm.cl > a {
        flex: 1 1 auto;
        min-width: 45%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        font-size: 13px;
        text-align: center;
    }
    #p_btn.mtw.mbm.hm.cl > a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    /* 顶部工具条简化 */
    #toptb {
        font-size: 12px;
    }
    #nv ul li {
        padding: 0 10px;
        font-size: 14px;
    }
    /* 回复/编辑/举报 底栏按钮允许换行 */
    .po .pob em,
    .po .pob p {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
}

/* ---------- 4. 小补充：手机版帖子标题h1样式(原inline抽出) ---------- */
.view_tit_h1 {
    display: inline;
    margin: 0 2px;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* ---------- 6. viewcount查看数横排对齐(原inline抽出) ---------- */
.vt-viewcount-y {
    margin-right: 10px;
    float: right;
}

/* ---------- 7. 用户弹出卡margin(原style内联抽出) ---------- */
.vt-userinfo-card {
    margin-top: -11px;
}

/* ---------- 8. 导航栏new图标(原inline抽出) ---------- */
.vt-video-newicon {
    position: absolute;
    top: 10px;
    right: -10px;
    display: inline-block;
    width: auto;
    height: auto;
    z-index: 100;
}
.vt-video-newicon img {
    width: 100%;
    height: 100%;
    display: block;
}