/* =====================================================================
 * 极客壁纸列表 · 小红书式模态框打开文章内页（content-post-style-6.php）
 * 适用模块：post_10 电脑壁纸 / post_12 手机壁纸 / post_13 瀑布流手机壁纸
 * 触发条件：列表项文章内页样式为 post-style-6（极客壁纸模块）
 * ===================================================================== */

/* ---------- 列表页：模态框本体 ---------- */
html.jktheme-jkmodal-open,
body.jktheme-jkmodal-open{ overflow:hidden; }

.jktheme-jkmodal-overlay{
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.jktheme-jkmodal-overlay.show{ opacity:1; visibility:visible; }

.jktheme-jkmodal-dialog{
    position: relative;
    width: 94vw;
    max-width: 1340px;
    height: 92vh;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 60px rgba(0,0,0,.35);
    transform: scale(.96);
    transition: transform .25s ease;
}
.jktheme-jkmodal-overlay.show .jktheme-jkmodal-dialog{ transform: scale(1); }

.jktheme-jkmodal-frame{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* 关闭按钮（模态面板外侧 · 右上角） */
.jktheme-jkmodal-close{
    position: absolute;
    top: 12px;
    right: max(12px, calc(50% - min(47vw, 670px) - 58px));
    z-index: 20;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.jktheme-jkmodal-close:hover{ background: #ff2442; }

/* 上一张 / 下一张（位于模态面板外侧，左右居中） */
.jktheme-jkmodal-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    box-sizing: content-box;  /* 保证 width/height 即可见按钮尺寸，透明边框只扩大热区 */
    width: 44px;
    height: 84px;
    padding: 0;
    border: 14px solid transparent;  /* 扩大点击热区，减少误触遮罩关闭 */
    background-clip: padding-box;
    border-radius: 6px;
    background-color: rgba(0,0,0,.35);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.jktheme-jkmodal-nav:hover{ background-color: rgba(0,0,0,.6); }
/* 模态面板为居中容器（宽 94vw / 最大 1340px），按钮放在面板左/右外侧 */
.jktheme-jkmodal-prev{ left: max(12px, calc(50% - min(47vw, 670px) - 58px)); }
.jktheme-jkmodal-next{ right: max(12px, calc(50% - min(47vw, 670px) - 58px)); }
.jktheme-jkmodal-nav.is-disabled{ opacity: .25; cursor: not-allowed; }

/* 手机端：全屏 + 隐藏左右导航 */
@media screen and (max-width: 768px){
    .jktheme-jkmodal-dialog{ width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
    .jktheme-jkmodal-nav{ width: 38px; height: 68px; font-size: 24px; }
}

/* =====================================================================
 * iframe 内页（body 带 jktheme-jkmodal-page 类）：
 * 隐藏站点 header / 页脚 / 侧栏，只呈现 content-post-style-6.php 壁纸内页
 * ===================================================================== */
body.jktheme-jkmodal-page{ background: #fff; }

body.jktheme-jkmodal-page .site-header,
body.jktheme-jkmodal-page .b2-header{ display:none !important; }

body.jktheme-jkmodal-page #colophon.footer,
body.jktheme-jkmodal-page .site-footer,
body.jktheme-jkmodal-page .site-footer-nav,
body.jktheme-jkmodal-page #mobile-footer-menu,
body.jktheme-jkmodal-page .mobile-footer-menu,
body.jktheme-jkmodal-page #post-po-box,
body.jktheme-jkmodal-page .post-po-box{ display:none !important; }

body.jktheme-jkmodal-page #secondary,
body.jktheme-jkmodal-page .widget-area,
body.jktheme-jkmodal-page .sidebar,
body.jktheme-jkmodal-page aside.widget-area{ display:none !important; }

body.jktheme-jkmodal-page #page.site,
body.jktheme-jkmodal-page #content.site-content{ max-width:none; padding:0; margin:0; }

body.jktheme-jkmodal-page .b2-single-content.wrapper{
    max-width:none;
    width:100%;
    height:100%;
    box-sizing:border-box;
    margin:0;
    padding:12px;
}

body.jktheme-jkmodal-page #primary-home.content-area{
    width:100%;
    max-width:none;
    height:100%;
    padding:0;
}

body.jktheme-jkmodal-page .b2-breadcrumbs,
body.jktheme-jkmodal-page .crumbs,
body.jktheme-jkmodal-page .single-crumbs,
body.jktheme-jkmodal-page .breadcrumb{ display:none !important; }

/* 模态框内页：不显示文章分享/海报模块（content-footer-poster）、右侧悬浮小工具（aside-bar）、
   文章内上一篇/下一篇（post-pre-next）—— 上一篇/下一篇统一由模态框外侧按钮控制 */
body.jktheme-jkmodal-page .content-footer.post-content-footer,
body.jktheme-jkmodal-page .content-footer-poster,
body.jktheme-jkmodal-page .post-content-footer,
body.jktheme-jkmodal-page .aside-bar,
body.jktheme-jkmodal-page .post-pre-next{ display:none !important; }

/* 去除评论区底部的小黑屋链接 */
body.jktheme-jkmodal-page .comment-tips,
body.jktheme-jkmodal-page a.dark-room{ display:none !important; }

/* =====================================================================
 * 模态框内页 · 小红书式布局（content-post-style-6.php）：
 * 仅评论区可滚动，图片区/文字区不滚动；整体随窗口缩放
 * ===================================================================== */
body.jktheme-jkmodal-page{ overflow: hidden; height: 100vh; }

body.jktheme-jkmodal-page #page.site,
body.jktheme-jkmodal-page #content.site-content{ height: 100%; }

body.jktheme-jkmodal-page .jktheme-img-content{
    width: 100%;
    height: calc(100vh - 24px);   /* iframe 视口高度，扣除 wrapper 上下各 12px 内边距 */
    box-sizing: border-box;
    overflow: hidden;
    gap: 12px;                    /* 左右两栏之间留白 */
}

/* ---- 左侧图片区（约 2/3）：高度与模态框同高，图片随窗口缩放 ---- */
body.jktheme-jkmodal-page .jktheme-img-left{
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body.jktheme-jkmodal-page .jktheme-img-left .flickity-slider{
    width: 100% !important;
    height: 100% !important;
}
/* 图片铺满左区（100% 高 / 宽），等比例 contain：
   竖图/长图/小图默认放大至与模态框同高，横图放大至最宽宽度 */
body.jktheme-jkmodal-page .jktheme-img-left .flickity-slider img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ---- 右侧列（约 1/3）：文字+评论区，随窗口缩放 ---- */
body.jktheme-jkmodal-page .jktheme-img-right{
    flex: 0 0 33.333%;
    width: 33.333%;
    min-width: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
body.jktheme-jkmodal-page .jktheme-img-right #post-meta,
body.jktheme-jkmodal-page .jktheme-img-right .jktheme-img-user-info{ flex: 0 0 auto; }

/* ---- 评论区：整个 .jktheme-img-comments 区域（文字区+评论）作为一个整体滚动容器 ---- */
body.jktheme-jkmodal-page .jktheme-img-comments{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
/* 文字区与评论作为一个整体随 .jktheme-img-comments 滚动，不单独固定 */
body.jktheme-jkmodal-page .jktheme-post-text{ overflow: visible; }
/* 关闭单条评论/评论块自身的滚动，仅由 .jktheme-img-comments 整体滚动 */
body.jktheme-jkmodal-page .jktheme-img-comments .comment-list,
body.jktheme-jkmodal-page .jktheme-img-comments .comment-item,
body.jktheme-jkmodal-page .jktheme-img-comments li,
body.jktheme-jkmodal-page .jktheme-img-comments .comments-area{
    overflow: visible !important;
    overflow-y: visible !important;
}
/* #comments 作为列容器：列表在上、输入框推到底部 */
body.jktheme-jkmodal-page .jktheme-img-comments #comments{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
}

/* ---- 右侧评论输入框：在滚动容器内 sticky 固定底部（分享模块已在模态框隐藏） ---- */
body.jktheme-jkmodal-page .jktheme-img-comments #comment-form{
    order: 99;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    width: 100%;
    max-width: none;
}
body.jktheme-jkmodal-page .jktheme-img-right-footer{
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
}
body.jktheme-jkmodal-page .jktheme-img-right-footer .comments-area,
body.jktheme-jkmodal-page .jktheme-img-right-footer .com-form{
    width: 100%;
    max-width: none;
}

/* 中性化 content-area 直接子元素（若有 <article> 等包裹层）的边距，避免影响高度链 */
body.jktheme-jkmodal-page #primary-home.content-area > *{ margin: 0; max-width: none; }

/* 手机端：上下堆叠，图片区占上半、右侧信息+评论区占下半 */
@media screen and (max-width: 768px){
    body.jktheme-jkmodal-page .jktheme-img-content{ flex-direction: column; }
    body.jktheme-jkmodal-page .jktheme-img-left{
        flex: 0 0 auto;
        width: 100%;
        height: 44vh;
        margin: 0;
    }
    body.jktheme-jkmodal-page .jktheme-img-right{
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
    }
}