/*
 * zibll-forum-waterfall — compat.css
 *
 * 兼容层：只补齐本插件自有 UI（瀑布流卡片 / 帖子弹窗）需要的工具类与基础排版。
 *
 * ⚠ 重要：这里不再向 :root 写入 --theme-color / --main-color / --muted-* 等变量。
 *   子比主题会自动输出这些设计变量，若插件再写一份 :root 覆盖（且插件样式通常
 *   排在主题 main.css 之后），会直接改变整站配色与间距，表现为“网站排版出问题”。
 *   预览模式（未安装子比主题）所需的变量回退由 PHP 端 wp_add_inline_style 注入。
 *
 * 所有工具类选择器都限定在插件自己的容器内，避免影响主题其它区域的样式。
 */

/* 工具类回退：与子比主题同名样式取值一致，仅保证插件容器内可用 */
.mugcxpb-posts-section .text-ellipsis,
.mugcxpb-modal .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mugcxpb-posts-section .meta-right,
.mugcxpb-modal .meta-right {
    margin-left: auto;
}

.mugcxpb-posts-section .muted-3-color,
.mugcxpb-modal .muted-3-color {
    color: var(--muted-3-color, #999);
}

.mugcxpb-posts-section .hide,
.mugcxpb-modal .hide {
    display: none !important;
}

/* 图片封面卡片：与文字封面卡片共用 body 结构，补一条分隔线 */
.mugcxpb-post-card .mugcxpb-card-media + .mugcxpb-card-body {
    border-top: 1px solid var(--main-border-color, rgba(50, 50, 50, .06));
}

.mugcxpb-modal-actions.mugcxpb-comment-editor-overflow-ready,
.mugcxpb-modal-actions.mugcxpb-comment-editor-overflow-ready .mugcxpb-modal-comment-editor-inner {
    overflow: visible;
}

/* 评论区占位（真实子比评论结构接入后会被覆盖） */
.mugcxpb-modal-comments .mugcxpb-comment-null {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color, #777);
    font-size: 14px;
}

/* 正文区域基础排版（独立运行时；子比主题的 .wp-posts-content 会接管） */
.mugcxpb-modal-content {
    word-break: break-word;
}

.mugcxpb-modal-content p {
    margin: 0 0 1em;
}

.mugcxpb-modal-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* 帖子阅读权限提示块（弹窗内复用主题 not_html 时，保证按钮排版正常） */
.mugcxpb-modal-content .hide-post {
    text-align: center;
    line-height: 1.8;
}

.mugcxpb-modal-content .hide-post .but {
    display: inline-block;
    margin: 4px 6px 0;
}

/* ================= 列表里的视频帖封面（封面图 + 播放角标） =================
   列表里不再输出 <video>，所以既不会自动播放、鼠标悬停也不会播放；
   这里只负责把角标摆好看（点击整张卡片依然是打开帖子弹窗）。
   角标层级要高于 .mugcxpb-card-media::after 的悬停遮罩（z-index:2）。 */
.mugcxpb-post-card .mugcxpb-video-card .mugcxpb-card-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
    transition: background .2s ease, transform .2s ease;
}

.mugcxpb-post-card .mugcxpb-video-card .mugcxpb-card-play svg {
    width: 1em;
    height: 1em;
    /* 三角图标视觉重心偏左，往右挪一点点看起来才居中 */
    margin-left: 3px;
}

.mugcxpb-post-card .mugcxpb-video-card:hover .mugcxpb-card-play {
    background: rgba(0, 0, 0, .6);
    transform: scale(1.06);
}

/* 视频帖没有封面图时的占位块（比例跟子比主题列表的视频封面一致） */
.mugcxpb-post-card .mugcxpb-video-card .mugcxpb-video-placeholder {
    display: block;
    width: 100%;
    padding-bottom: 56%;
    background: linear-gradient(135deg, #2b2f36 0%, #171a1f 100%);
}

/* ================= 弹窗左栏视频播放器（效仿子比主题帖子详情页封面视频） =================
   PHP 端用主题的 zib_new_dplayer() 输出播放器，前端调用主题 new_dplayer() 实例化成
   DPlayer（与帖子详情页封面视频同一个播放器）。这里只负责让播放器铺满左栏：
   主题的 .dplayer-scale-height 会按宽度撑高播放器，弹窗里必须去掉这个比例限制。 */
.mugcxpb-modal-cover .mugcxpb-modal-player {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

/* 播放器根节点（.new-dplayer 在主题初始化后会被加上 .dplayer） */
.mugcxpb-modal-cover .mugcxpb-modal-player > .new-dplayer {
    width: 100%;
    height: 100%;
    padding-bottom: 0 !important;
}

/* 播放器初始化完成前：显示主题的海报图 + 播放图标，同样铺满左栏 */
.mugcxpb-modal-cover .mugcxpb-modal-player > .new-dplayer > .graphic {
    width: 100%;
    height: 100%;
    padding-bottom: 0 !important;
}

/* 播放器初始化后：视频画面完整居中显示（多余部分留黑边，不拉伸变形） */
.mugcxpb-modal-cover .mugcxpb-modal-player .dplayer-video-wrap {
    width: 100%;
    height: 100%;
}

.mugcxpb-modal-cover .mugcxpb-modal-player .dplayer-video {
    object-fit: contain;
}

/* 兜底：主题播放器函数不可用时的原生 <video>（纯预览环境） */
.mugcxpb-modal-cover .mugcxpb-modal-native-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ================= 列表封面按原图比例占位（修掉手机端「在空白处滑动卡住」） =================

   原因：列表封面以前不占高度。封面图是懒加载的，没出图时卡片很矮，图片一到位卡片就变高，
   整张 masonry 网格要重排一次，页面下边的内容跟着往下窜。手机端往下滑、手指正好落在
   「还没出图的空白处」时，就会被这些重排顶得跳一下、像卡住。

   做法：只在「服务端能拿到封面真实宽高」时占位（.mugcxpb-cover-fixed）：
   占位框比例 = 封面原图比例，图片只是填进这个框，卡片高度从头到尾不变，也就不会再重排。
   ★ 封面尺寸一律保持原样：比例就是原图比例，不做任何裁切、也不统一成固定形状，
     卡片高度参差的落差感完全保留。拿不到真实尺寸时就不加这个 class，
     图片仍按原始比例显示（那种情况极少，通常是外链图）。

   注意：::before 撑高度 + 图片绝对定位是配套的 —— 绝对定位元素的百分比高度是相对
   包含块的 padding box 算的，所以 height:100% 刚好等于占位框的高度。 */
.mugcxpb-masonry .mugcxpb-card-media.mugcxpb-cover-fixed {
    position: relative;
    overflow: hidden;
    /* 沿用列表原来对封面图的 680px 上限（超高图的表现和改之前完全一致） */
    max-height: 680px;
}

.mugcxpb-masonry .mugcxpb-card-media.mugcxpb-cover-fixed::before {
    display: block;
    content: "";
    padding-top: var(--mugcxpb-cover, 75%);
}

.mugcxpb-masonry .mugcxpb-card-media.mugcxpb-cover-fixed > img,
.mugcxpb-masonry .mugcxpb-card-media.mugcxpb-cover-fixed > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* 视频帖没有海报图时列表只有个占位块：改成填满占位框，否则会再加一份 56% 撑成双倍高 */
.mugcxpb-masonry .mugcxpb-post-card .mugcxpb-video-card.mugcxpb-cover-fixed .mugcxpb-video-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 0;
}

/* 「加载更多」的骨架层是绝对定位盖在网格上的，别让它挡住卡片的点击 */
.mugcxpb-loading-skeleton-grid {
    pointer-events: none;
}