/*
 * 子比帖子移动端图集 —— 前端样式
 *
 * 只作用于插件自己输出的 .zibpmg-* 元素，不改子比主题任何其它区域的样式。
 * 手机端断点 640px 与子比主题的 show-sm 一致（改这里的话入口文件的 ZIBPMG_MOBILE_MAX 也要一起改）。
 */

/* ---------- 图集外框 ---------- */

.zibpmg-gallery {
    --zibpmg-ratio: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 18px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(125, 125, 125, .08);
    aspect-ratio: var(--zibpmg-ratio, 1);
    min-height: 240px;
    max-height: 94vh;
}

/* 老浏览器没有 aspect-ratio 时的兜底：用 padding 撑出同样高度 */
@supports not (aspect-ratio: 1 / 1) {
    .zibpmg-gallery::before {
        content: '';
        display: block;
        padding-top: calc(100% / var(--zibpmg-ratio, 1));
    }
}

/* ---------- 图片两边的留白：用同一张图做模糊底，不会出现难看的灰条 ---------- */

.zibpmg-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .08);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(24px) saturate(1.15);
    /* 单独提成一层：换背景图时模糊结果会被缓存住，翻页不会因为重新栅格化闪一下 */
    transform: translateZ(0) scale(1.3);
    will-change: filter;
    backface-visibility: hidden;
    opacity: .62;
    pointer-events: none;
}

/* ---------- 滑动轨道 ---------- */

.zibpmg-track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    transform: translate3d(0, 0, 0);
    /* 只动 transform：走 GPU 合成层，不触发重排，滑动才跟手不掉帧 */
    will-change: transform;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    /* 关键：竖向手势永远交给页面原生滚动，横向手势才由插件脚本接管。
       就靠这一条，才不会出现「想往下滑看内容，结果图片被翻页」。
       不用 overflow-x + scroll-snap：那种原生横向滚动在手机上会抢斜向手势。 */
    touch-action: pan-y;
}

/* 拖动中关掉过渡，图片直接跟手（松手后由脚本去掉这个 class，恢复过渡） */
.zibpmg-gallery.zibpmg-dragging .zibpmg-track {
    transition: none;
}

/* 系统开了「减弱动态效果」就直接到位，不做动画 */
@media (prefers-reduced-motion: reduce) {
    .zibpmg-track,
    .zibpmg-gallery.zibpmg-ready {
        transition-duration: .001s;
    }
}

.zibpmg-item {
    position: relative;
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    /* 裁掉自己的模糊底放大出来的部分，免得串到相邻那张上 */
    overflow: hidden;
    /* iOS 上图片跟着 transform 动时容易发虚，这两个属性可以避免 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 每张图自己的模糊底：跟着这张图一起滑动（观感与子比主题的幻灯片一致）。
   外层 .zibpmg-bg 仍然在更下面兜底，所以任何时刻都不会露出空白。
   背景图由脚本在「预热相邻图」时一起设置，不会多下载一张图。 */
.zibpmg-item-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(24px) saturate(1.15);
    transform: translateZ(0) scale(1.3);
    backface-visibility: hidden;
    opacity: .62;
    pointer-events: none;
}

/* 注意选择器要写到 .zibpmg-gallery .zibpmg-item img：
   图集是插在 .wp-posts-content 里面的，子比主题有
   .wp-posts-content img{max-width:100%;height:auto;display:block;margin:auto}
   这条规则，特异性不够的话会被它把 height:100% 顶掉，图片就撑不满画框了。 */
.zibpmg-gallery .zibpmg-item img {
    display: block;
    /* 图片要压在「自己那张图的模糊底」上面 */
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
    -webkit-user-drag: none;
}

/* 裁切填满：
   · .zibpmg-fit-cover —— 后台选「裁切填满」，所有图都用 cover；
   · .zibpmg-crop —— 脚本按"当前这张是不是横图/方图"动态加的（智能模式用），
     这样竖图仍能完整显示、横图才裁切。 */
.zibpmg-gallery.zibpmg-fit-cover .zibpmg-item img,
.zibpmg-gallery.zibpmg-crop .zibpmg-item img {
    object-fit: cover;
}

/* ---------- 底部指示：圆点 + 右下角计数 ---------- */

.zibpmg-ui {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 76px;
    padding-bottom: 14px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
}

.zibpmg-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
}

.zibpmg-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: width .22s ease, border-radius .22s ease, background-color .22s ease;
}

.zibpmg-dot.on {
    width: 16px;
    border-radius: 3px;
    background: #fff;
}

.zibpmg-count {
    position: absolute;
    right: 14px;
    bottom: 12px;
    padding: 2px 10px;
    border-radius: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .38);
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .5px;
    pointer-events: none;
}

.zibpmg-count b {
    font-weight: 500;
}

/* ---------- 选了「仅手机端」时，电脑端不显示图集 ---------- */

@media (min-width: 641px) {
    .zibpmg-gallery.zibpmg-only-mobile {
        display: none !important;
    }
}

/* ---------- 手机端：图集贴到屏幕两边，全宽展示 ---------- */

@media (max-width: 640px) {
    .zibpmg-gallery {
        width: 100vw;
        max-width: 100vw;
        margin-right: calc(50% - 50vw);
        margin-bottom: 14px;
        margin-left: calc(50% - 50vw);
        border-radius: 0;
        /* 没跑脚本时的兜底：画框不超过「一屏减去上方标题作者栏、再减去下方留白」，
           这样进帖子第一眼看到完整图片，同时下方正文也露出开头。
           180px ≈ 站点头部 + 标题 + 作者栏；--zibpmg-lead-gap 是后台的「首屏下方留白」。
           脚本会用真实位置再算一次并覆盖这个值。
           用 dvh 而不是 vh：浏览器地址栏收起/展开时它会跟着变，尺寸更准。 */
        max-height: 92vh;
        max-height: min(92vh, calc(100dvh - 140px - var(--zibpmg-lead-gap, 90px)));
    }

    /* 画框高度变化（地址栏收起展开、旋转屏幕、图片比例算出来）走过渡，
       不要瞬跳 —— 这就是「往上滑动图片变大」那一下变丝滑的关键。
       zibpmg-ready 由脚本在首屏量好之后才加，避免刚进页面自己动一下。 */
    .zibpmg-gallery.zibpmg-ready {
        transition: height .3s cubic-bezier(.25,.8,.25,1);
        /* 脚本接管高度后，取消上面那条 CSS 兜底上限：
           脚本的规则是「只涨不缩」，如果这里还按当前 dvh 卡一道，
           地址栏回来后（dvh 变小）就会把已经变大的画框又压回去。 */
        max-height: none;
    }
}