/* =========================================================================
   详情页媒体画廊布局（body.xy-media-layout）
   只服务于「资源类文章启用媒体画廊布局」开关打开时的详情页，其余页面不加载。

   页面骨架仍是主题原有的 9/3 两列（content-column / sidebar-column），
   本文件只负责：全宽标题行、左列顶部的媒体画廊、以及侧栏面板的少量收紧。
   Tab 卡片（.single-download-nav / .tab-content）沿用 app.css，一行都不覆盖。

   浅色与暗色（.dark-open）写在同一个文件里，避免两处分开改时漏配色。
   ========================================================================= */

/* ---------------------------------------------------------- 全宽标题行
   做成和媒体区、侧栏面板同规格的白卡片（透明底直接坐在页面底色上太单调），
   并且尽量贴着导航：.site-content 自带 padding-top:30px，这里收窄，
   标题卡片自己不再加 margin-top，只保留与下方媒体区之间的间距。 */
.xy-media-layout .site-content {
    padding-top: 15px;
}

.xy-media-layout .entry-header-wide {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 4px;
}

.xy-media-layout .entry-header-wide .ehw-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ⚠️ app.css 的 .entry-header .entry-title 是给列表卡片写的：
   固定 height:36px + display:-webkit-box + line-clamp:2，标题超过两行会被裁掉
   （桌面端 24px 一行约 35px，刚好看不出来；手机端两行必然被切）。
   主题自己在 .article-content .entry-header .entry-title 里也解除过同一条，照它的做法来。 */
.xy-media-layout .entry-header-wide .entry-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 24px;
    line-height: 1.45;
    font-weight: 600;
    display: block;
    height: auto;
    overflow: visible;
    -webkit-line-clamp: inherit;
    line-clamp: inherit;
}

/* 角标在标题文字之前内联，跟着标题换行 */
.xy-media-layout .entry-header-wide .entry-title .post-badge-single {
    margin-right: 8px;
    vertical-align: 3px;
}

.xy-media-layout .entry-header-wide .ehw-fav {
    flex: 0 0 auto;
    white-space: nowrap;
}

.xy-media-layout .entry-header-wide .entry-meta {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ------------------------------------------------------------ 媒体画廊 */
.xy-media {
    position: relative;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

/* 底色之上垫一层文章封面（内联 background-image）：图片还没加载时当占位，
   老文章图床挂掉时露出封面，而不是给用户一整块纯黑 */
.xy-media-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0d1117;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 老浏览器没有 aspect-ratio 时的兜底（16:9 = 56.25%） */
@supports not (aspect-ratio: 16 / 9) {
    .xy-media-stage {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.xy-media-track {
    display: flex;
    height: 100%;
    transition: transform .32s ease;
}

/* 每格自带不透明深色底，盖住 stage 那层封面：
   不盖的话图片在加载那一瞬是透明的，翻页时会先闪一下文章封面再换成截图。
   只有图片彻底加载失败（.is-broken，由 single-media.js 打上）才放它透出来。 */
.xy-media-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    background: #0d1117;
}

.xy-media-slide.is-broken {
    background: transparent;
}

.xy-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频项：DPlayer 填满整格 */
.xy-media-slide.is-video #rizhuti-video {
    width: 100%;
    height: 100%;
}

.xy-media-slide.is-video .dplayer,
.xy-media-slide.is-video .dplayer-video-wrap,
.xy-media-slide.is-video .dplayer-video {
    width: 100%;
    height: 100%;
}

.xy-media-slide.is-video .dplayer-video {
    object-fit: contain;
}

/* 无播放权限：DPlayer 底下压一层遮罩（沿用 hero-video 的文案与按钮） */
.xy-media-locked {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: rgba(8, 12, 18, .74);
    backdrop-filter: blur(2px);
}

.xy-media-locked .lock-note {
    margin: 0 0 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.xy-media-locked .pricing-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    background: transparent;
}

/* the_post_shop_priceo_options() 的结构是 li > span(名称) + b(价格)，
   app.css 里的 .pricing-options 样式全部带作用域（.content-do-video / .info-box /
   .ripro-v2-widget-shop-down），我们这个容器一条都吃不到，所以这里要自己写全 */
.xy-media-locked .pricing-options li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
}

.xy-media-locked .pricing-options li::before,
.xy-media-locked .pricing-options li::after {
    display: none;
}

.xy-media-locked .pricing-options li span,
.xy-media-locked .pricing-options li b {
    color: rgba(255, 255, 255, .85);
}

/* 左右箭头 */
.xy-media-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 54px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, .34);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    opacity: .72;
    transition: opacity .18s ease;
}

.xy-media-arrow:hover {
    opacity: 1;
}

.xy-media-arrow.prev {
    left: 0;
    border-radius: 0 5px 5px 0;
}

.xy-media-arrow.next {
    right: 0;
    border-radius: 5px 0 0 5px;
}

/* 计数与放大 */
.xy-media-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 3px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 12px;
}

.xy-media-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 14px;
}

.xy-media-zoom:hover {
    background: rgba(0, 0, 0, .65);
}

/* 停在视频那一格时不出现放大按钮（视频没什么可放大的），由 JS 加 .on-video */
.xy-media.on-video .xy-media-zoom {
    display: none;
}

/* 视频选集 */
.xy-media-eps {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
}

.xy-media-eps .eps-label {
    flex: 0 0 auto;
    margin-right: 4px;
    color: #98a2b3;
    font-size: 12px;
}

.xy-media-eps .switch-video {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 12px;
    background: #f7f8fa;
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}

.xy-media-eps .switch-video:hover,
.xy-media-eps .switch-video.active {
    background: var(--xy-brand, #f58907);
    color: #fff;
}

/* ------------------------------------------------- 侧栏面板的少量收紧
   媒体是标准 16:9、高度固定，把面板略微收紧能让两列底边更接近，
   媒体下方就不会剩一条明显的空白。只改内边距，不动结构与配色。 */
.xy-media-layout .pan-download-card {
    padding: 11px 18px;
}

.xy-media-layout .client-promo-bar {
    padding: 10px 18px;
}

.xy-media-layout .ripro-v2-widget-shop-down .pricing-options {
    padding-top: 12px;
    margin-bottom: 12px;
}

.xy-media-layout .ripro-v2-widget-shop-down .down-info {
    margin-top: 12px;
}

/* ------------------------------------------------------------ 暗色模式
   ⚠️ .dark-open 与 .xy-media-layout 都挂在 <body> 上，是同一个元素的两个 class，
   千万别写成 `.dark-open .xy-media-layout xxx`（后代选择器，永远不匹配）。
   页面内的元素直接用 `.dark-open xxx` 即可，body 自身要用 `.dark-open.xy-media-layout`。 */
.dark-open .entry-header-wide,
.dark-open .xy-media {
    background: #1e2433;
}

.dark-open .xy-media-eps .switch-video {
    background: #1a2030;
    color: #9ca3af;
}

.dark-open .xy-media-eps .switch-video:hover,
.dark-open .xy-media-eps .switch-video.active {
    background: var(--xy-brand, #f58907);
    color: #fff;
}

.dark-open .xy-media-eps .eps-label {
    color: #6b7280;
}

/* 下面两块补的是 dark.css 缺的既有配色，老布局同样有这个问题；
   本文件只在媒体画廊布局的详情页加载，所以影响面限于这类页面。 */

/* Tab 当前项：app.css 给的是深色 #323a46，暗底上等于隐形（非当前项有 dark.css 兜着，
   所以表现成「唯一看不见的恰好是选中的那个」） */
.dark-open .single-download-nav li .nav-link.active {
    color: #e5e9f0;
    border-color: #e5e9f0;
}

.dark-open .single-download-nav li .nav-link:hover {
    color: #e5e9f0 !important;
}

/* 点赞排行（simple-ulike 插件）：它整套颜色走自己的 CSS 变量，
   默认 --simple-ulike-text:#333，暗底上列表标题完全看不见。改变量比逐条覆盖干净。 */
.dark-open .simple-ulike-widget {
    --simple-ulike-text: #adb5bd;
    --simple-ulike-text-muted: #8a93a0;
    --simple-ulike-text-light: #6b7280;
    --simple-ulike-border: #2b3348;
    --simple-ulike-bg: #1e2433;
    --simple-ulike-bg-light: #1a2030;
    --simple-ulike-bg-hover: #232a3c;
}

.dark-open .simple-ulike-popular-list .simple-ulike-item {
    border-bottom-color: #2b3348;
}

/* 这两处插件写了 color:#333!important，只能同样用 !important 压回来 */
.dark-open .simple-ulike-widget-count,
.dark-open .simple-ulike-user-list .simple-ulike-user-name {
    color: #adb5bd !important;
}

.dark-open .simple-ulike-post-rank {
    background: #2b3348;
    color: #adb5bd;
}

.dark-open .simple-ulike-post-rank.rank-1,
.dark-open .simple-ulike-post-rank.rank-2,
.dark-open .simple-ulike-post-rank.rank-3,
.dark-open .simple-ulike-post-rank.rank-4 {
    color: #fff;
}

/* ---------------------------------------------- 响应式（≤992px 单列） */
@media (max-width: 992px) {
    .xy-media-layout .site-content {
        padding-top: 10px;
    }

    .xy-media-layout .entry-header-wide {
        margin: 0 0 12px;
        padding: 12px 14px;
    }

    /* 标题独占一行、收藏按钮换到第二行右侧：
       挤在同一行时标题会被压成很窄的一栏、连着折两三行还贴到按钮上 */
    .xy-media-layout .entry-header-wide .ehw-main {
        flex-wrap: wrap;
        gap: 8px;
    }

    .xy-media-layout .entry-header-wide .entry-title {
        flex: 1 1 100%;
        min-width: 100%;
        font-size: 18px;
        line-height: 1.45;
    }

    .xy-media-layout .entry-header-wide .entry-title .post-badge-single {
        vertical-align: 2px;
    }

    .xy-media-layout .entry-header-wide .ehw-fav {
        margin-left: auto;
    }

    .xy-media-layout .entry-header-wide .entry-meta {
        margin-top: 4px;
    }

    .xy-media {
        margin-bottom: 15px;
    }

    .xy-media-arrow {
        width: 32px;
        height: 44px;
        font-size: 18px;
    }
}