/* ============================================================
   magic —— 苹果CMS v10 模板补充样式
   （复用 front 的 template.css，这里只做站台适配）
   ============================================================ */

/* 固定头部占位（front 用 .scroll-container 自己滚，maccms 用正常滚动） */
body {
    padding-top: 54px;
}

@media (max-width: 575px) {
    body {
        padding-top: 50px;
    }
}

/* 列表卡片 */
.one_pic {
    position: relative;
    overflow: hidden;
    background-color: #ddd;
}

/* 卡片封面比例交给 template.css 的 .one_pic:before(67.3% = 3:2)
   + .one_pic .img-h.cover{object-fit:cover}，不要写 height:auto */
.one_pic img.cover {
    display: block;
}

.one_pic .video-time {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 3;
}

.list .item .content .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 播放/详情页 */
.player_frame embed,
.player_frame iframe,
.player_frame video {
    width: 100%;
    height: 100%;
}

.play-from-tabs {
    list-style: none;
    padding: 0;
}

.part-list ul {
    list-style: none;
    padding-left: 0;
}

/* 搜索框 */
.search-block .form-block input {
    min-width: 8em;
}

/* 文章正文 */
.art-content img {
    max-width: 100%;
    height: auto;
}

/* ---- 首页 bn-slider：body 已有 padding-top，取消 design.js 给 .bn-slider 加的 margin ---- */
body .bn-slider { margin-top: 0 !important; }
.bn-slider .item { position: relative; }
.bn-slider .item a { display: block; }
.bn-slider .item img { display: block; width: 100%; height: auto; }

/* ---- 列表卡片：悬停预览时的加载动画 ---- */
.one_pic .magic-loading {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .38);
    z-index: 6;
    pointer-events: none;
}
.one_pic .magic-loading img { width: 72px; height: auto; display: block; }

/* ---- 播放页：右侧信息栏的收起按钮 ----
   原站 template.css 里 .collapse-btn 是 position:absolute; left:-1.5em，
   定位父级必须是这个侧栏本身，否则会跑到整个视频区左侧（屏幕外看不见）。 */
.play .play-block .collapse { position: relative; }

/* ---- 演员详情页「个人档案」卡片 ----
   原站 .pornstar-page{margin-top:47px} 是给浮层 header / 上方那条分类导航留位的；
   我们模板 header 下面直接就是这块卡片，而且 body 已经有 padding-top:54px 占位，
   再叠 47px 就多出一段空白，所以这里清零。 */
body .pornstar-page { margin-top: 0 !important; }

/* ---- 播放页右侧信息栏：标题行（片名 + 下载/最爱）----
   片名太长时省略号截断，两个药丸按钮文字不换行（否则窄侧栏里会排列成「下 載」两行）。 */
.play .play-block .collapse .title { flex-wrap: nowrap; }
.play .play-block .collapse .title > div:first-child { min-width: 0; overflow: hidden; }
.play .play-block .collapse .title .number { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play .play-block .collapse .title .collect { flex: 0 0 auto; }
.play .play-block .collapse .title .collect a p { white-space: nowrap; margin-bottom: 0; }

/* ---- 分页按钮（首页/上一页/页码/下一页/末页）----
   模板原站写法是 <li class="item px-2 ..."><a>数字</a></li>，
   ① 原站那几个非数字按钮用的是图标，我们模板用的是文字，所以不能动宽度；
   ② <a> 是 inline，只有文字那一小块可点（实测 ~10px 宽），按钮内边距点了没反应。
   处理：把内边距从 li 挪到 a 上，a 铺满整颗按钮且参与宽度计算（不会搞坏换行）。 */
.page .item { padding-left: 0 !important; padding-right: 0 !important; }
.page .item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 .5rem;
    white-space: nowrap;
}

/* ---- 分页区：提到最上层 + 装饰浮层不吃点击 ----
   卡片的悬停预览（.td_slideclips-block / .netflix-hover-preview）、加载动画都是纯装饰，
   它们不能拦住分页按钮的点击，所以设 pointer-events:none。
   （另有 shim-mini.js 里的坐标兜底，双保险） */
.row.page { position: relative; z-index: 60; }
.td_slideclips-block, .netflix-hover-preview, .magic-loading { pointer-events: none !important; }

/* ---- 播放页侧栏「影片片段」滚动区 ----
   原站 template.css 里 .play .video-block .part-list 已是滚动容器：
   height:calc(100% - 125px); overflow:scroll; scrollbar-width:none;
   那个 125px 是给侧栏标题行（片名 + 下载/最爱）预留的高度，
   我们这一行实际只有 ~68px，白扔 57px，所以按实际留位 → 片段区可视高度更大。 */
.play .video-block .part-list { height: calc(100% - 70px); }

/* 原站只写了 scrollbar-width（Firefox），Chrome 下要这条才能真正把滚动条藏起来 */
.play .video-block .part-list::-webkit-scrollbar { width: 0; height: 0; }