/**
 * 作品瀑布流（zib_work 归档页 /works/）
 *
 * 布局：JS 最短列（work.js 的 layoutMasonry）负责真正的排列——
 *   每张卡放进当前最短的列，顺序才是「从左到右铺满一行、再下一行」。
 *   这里的 CSS 多列（column-count）只是**无 JS 时的降级**：脚本没跑到时卡片
 *   照样排得出来、看得见、点得动，只是顺序退回「列优先」。
 *   （为什么不用纯 CSS 多列：它的列优先填充会把前几张挤在同一列，见 .zwork-masonry 那一段）
 *
 * 颜色一律走父主题变量（--main-bg-color / --theme-color / --muted-bg-color …），
 * 深浅色模式自动翻转，本文件里不出现任何硬编码颜色（纯白/纯黑除外）。
 *
 * 后台可调的数值（圆角/间距/宽度/列数）由 inc/work/work.php 的 wp_head 内联输出成
 * --zwork-radius / --zwork-gap / --zwork-cols* 这些变量，样式层只消费。
 */

/*========== 页面骨架 ==========*/

.zibll-work-page {
    padding-bottom: 20px;
}

/* ⚠️ 同 work-detail.css：默认的 [hidden]{display:none} 权重极低，被本文件里
   任何 display:flex/grid 规则盖掉就失效（加载提示、空状态、详情节点都靠 hidden 控制） */
.zibll-work-page [hidden] {
    display: none !important;
}

.zibll-work-head {
    margin-bottom: 16px;
}

/*========== 分类 tab ==========*/

.zibll-work-tabs {
    display: flex;
    /* 水平居中；用 safe center —— 分类多到溢出时自动退回左对齐，
       不会出现「居中后最左侧几个 tab 滚不到」的经典 flex 坑
       （不支持 safe 的内核会忽略这行、退回默认 flex-start，同样是安全的） */
    justify-content: safe center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    /* 横向滚动但不显示滚动条（移动端一排放不下时） */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.zibll-work-tabs::-webkit-scrollbar {
    display: none;
}

.zibll-work-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--muted-bg-color);
    color: var(--main-color);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.zibll-work-tab small {
    font-size: 11px;
    opacity: .65;
}

.zibll-work-tab.cur,
.zibll-work-tab:hover {
    background: var(--theme-color);
    color: #fff;
}

.zibll-work-tab.cur small,
.zibll-work-tab:hover small {
    opacity: .85;
}

/*========== 瀑布流 ==========*/

.zibll-work-grid {
    /* 「当前生效的列数」单独存一个变量：
       ① column-count 消费它；
       ② work.js 的 layoutMasonry 也读它（getPropertyValue('--zwork-cols-cur')）。
       为什么要多这一层：JS 布局时会给容器加 .zwork-masonry（把 column-count 改成 auto
       彻底关掉多列，避免「多列容器里绝对定位子元素的包含块」在个别内核上出现差异），
       那时 column-count 就读不到了 —— 而这个变量不受影响，随时可读。
       继承链：.zibll-work-page / .zibll-work-gallery / 弹窗容器上的 --zwork-cols 系列
       会自动传进来，下面三档媒体查询只负责挑「当前是哪一档」。 */
    --zwork-cols-cur: var(--zwork-cols, 4);
    column-count: var(--zwork-cols-cur);
    column-gap: var(--zwork-gap, 16px);
}

/* 卡片 */
.zibll-work-card {
    /* 三个必要的组合：inline-block 让旧 WebKit 不在中间断开，
       break-inside 让现代浏览器不把卡片劈成两半，width:100% 保证单列满宽 */
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--zwork-gap, 16px);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    background: var(--main-bg-color);
    border-radius: var(--zwork-radius, 12px);
    box-shadow: var(--main-shadow);
    overflow: hidden;
    vertical-align: top;
}

/*========== JS 最短列布局（.zwork-masonry 由 work.js 添加）==========

   ⚠️ 为什么不能只用 CSS 多列：column-count 的分列是**列优先**的 ——
   浏览器为了平衡列高，会把第 1、2 张卡都放进第 1 列，然后才轮到第 2 列。
   结果就是「6 张图、4 列」时第 1、2 张挤在同一列，而不是 1/2/3/4 各占一列。
   要「从左到右铺满一行、再下一行」这种顺序，只能由 JS 把每张卡放进当前**最短**的那一列。

   ⚠️ 这里把 column-count 关掉（auto）：卡片虽然已经绝对定位、多列本就不会生效，
   但「多列容器里绝对定位子元素的包含块算哪一块」在个别内核上有实现差异，
   直接关掉多列最省心。列数信息不存在 column-count 里，而在 --zwork-cols-cur 上，
   所以关了也不影响 JS 读列数（见上面 .zibll-work-grid 的说明）。

   降级：类由 JS 添加，脚本没跑到（或抛错）时走上面的 CSS 多列，内容照常可见可点。 */
.zwork-masonry {
    position: relative;
    column-count: auto;
}

.zwork-masonry .zibll-work-card {
    position: absolute;
    top: 0;
    left: 0;
    /* 间距改由 JS 计算（绝对定位下 margin 不参与流，留着只会让高度对不上） */
    margin: 0;
}

/* 媒体区 */
.zibll-work-media {
    display: block;
    position: relative;
    /* 图片未加载完时给一点底色，避免闪白 */
    background: var(--muted-bg-2-color);
    line-height: 0;
    /* 图片缩放裁剪都在卡片圆角内，交给卡片自身的 overflow:hidden */
}

/* ⚠️ `<picture>` 不能抢 `<img>` 的横向尺寸来源。
   列表这里是块容器（不是 flex），所以 img 的 `width:100%` 仍然按容器宽度算 —— 实测尺寸
   与加 picture 之前完全一致。这两行只是把"picture 自身别超宽"写死，避免将来外层改成
   flex/grid 时重演详情页那个"竖版图被裁半截"的问题。
   ⚠️ 别用 `display:contents`：实测会让 img 在 flex 上下文里被压成极小尺寸。 */
.zibll-work-media picture {
    display: block;
    max-width: 100%;
}

.zibll-work-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease;
}

.zibll-work-media:hover .zibll-work-img {
    transform: scale(1.03);
}

/* 无图占位（视频且未设封面 / 空媒体） */
.zibll-work-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 默认 4:3。视频卡片会由 PHP 输出内联 aspect-ratio 覆盖成**视频真实比例**
       （竖版视频按 4:3 画会和详情里的竖长条完全不是一回事，看着像两张作品）——
       内联样式优先级高于这里的类规则，不需要 !important */
    aspect-ratio: 4 / 3;
    background: var(--muted-bg-2-color);
    color: var(--muted-2-color);
    font-size: 30px;
}

/* 视频播放角标 */
.zibll-work-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    padding-left: 3px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

/* 多图角标 */
.zibll-work-multi {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
}

/*========== 卡片操作区（收藏 / 评论 / 点赞）==========*/

.zibll-work-acts {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px 6px;
}

.zibll-work-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* 触控目标不小于 40px（移动端手指友好） */
    min-height: 40px;
    min-width: 40px;
    padding: 0 6px;
    color: var(--muted-2-color);
    font-size: 13px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: color .2s, background .2s;
    cursor: pointer;
}

/* 图标块级化 + 去掉 margin：行内元素会被基线顶偏，看起来就是「没对齐」 */
.zibll-work-act .icon {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
    display: block;
    margin: 0;
}

/* 父主题点赞/收藏按钮里的 <text> 是文字标签，卡片上不要（已传空串，这里兜底隐藏） */
.zibll-work-act text {
    display: none;
}

.zibll-work-act count {
    font-size: 13px;
    color: inherit;
}

/* 计数为 0 时只留图标、不显数字。
   ⚠️ 不能靠 CSS：父主题点赞按钮恒输出 <count>0</count>（有字），
   收藏按钮则输出空 <count> —— 两种都判不了，所以由 work.js 统一打类隐藏 */
.zibll-work-act count.zibll-work-count-empty {
    display: none;
}

.zibll-work-act:hover {
    color: var(--theme-color);
    background: var(--muted-bg-color);
}

.zibll-work-act.actived {
    color: var(--theme-color);
    /* 浅色底 + 加粗数字：只换个字色在卡片上几乎看不出「我已经赞过了」 */
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
}

.zibll-work-act.actived count {
    font-weight: 700;
}

/*========== 卡片不带操作区（[zibll_work_gallery bottom="false"]）==========
   没有操作区时，图片就是卡片最后一块，下缘两角直接贴到卡片边上。
   卡片自身是 overflow:hidden + 圆角，本来就会把这两角裁掉；这里再把同一个半径
   显式写到媒体区与图片自己身上，是不依赖「父级裁切」的保证 ——
   图片 hover 缩放（transform）会把图变成独立合成层，父级裁切的边缘在这种情形下
   个别内核会有半像素锯齿；写死在元素自己身上就与图层无关了。
   上缘两角同样是这个半径、与卡片圆角完全重合，所以视觉零变化。 */
.zibll-work-card.zwork-no-acts .zibll-work-media,
.zibll-work-card.zwork-no-acts .zibll-work-media img,
.zibll-work-card.zwork-no-acts .zibll-work-nophoto {
    border-radius: var(--zwork-radius, 12px);
}

/*========== 短代码 [zibll_work_gallery] ==========
   复用了 .zibll-work-grid 的全部列/卡片规则，这里只补上下文差异 */

.zibll-work-gallery {
    margin: 10px 0;
    /* 正文列比作品页整页窄，默认 3 列更合适。
       ⚠️ 写成变量而不是直接定 column-count：这样 [zibll_work_gallery cols="N"]
       的内联样式能覆盖它（内联只赢在元素自身，赢不了后代 .zibll-work-grid 上的双类规则） */
    --zwork-cols: 3;
    --zwork-cols-m: 3;
    --zwork-cols-s: 2;
}

.zibll-work-gallery-title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
}

.zibll-work-gallery-more,
.zibll-work-gallery-empty {
    text-align: center;
    padding: 28px 0;
}

/*========== 工作流「作品」入口（AI 创作页徽标行里的彩色徽标）==========
   尺寸外形沿用 `badg`（与旁边两个实心徽标成一套），底色改成**彩色实心**，
   与「使用说明」那个描边徽标区分开（后者是次要入口，这个是内容入口）。

   配色思路（为什么不是直接用 --theme-color）：
   ⚠️ 本站的主题色被设成了中性灰（theme_skin_custom = #707070），
   直接拿它做底色只会得到一个灰徽标、根本谈不上"彩色"。
   所以改成「主题色参与调制 + 紫/粉主导」：主题色只占三成留一点站点调性，
   鲜艳端占七成保证无论主题色是灰还是有彩，结果都是彩色且够醒目。
   选紫→粉是因为同一行已经有蓝（输出类型）和黄（计费）两个徽标，
   紫粉与它们色相距离最远、不会撞色，同时二者互为邻近色、过渡自然不脏。 */
.zibll-ai-form-badges .badg.zwork-gal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 回退行：不支持 color-mix 的内核给个纯色，别退回灰 */
    background: #8a5cf0;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--theme-color) 30%, #7c5cff) 0%,
        color-mix(in srgb, var(--theme-color) 30%, #e4579a) 100%);
    color: #fff;
    /* 描边改成透明但**保留 1px 宽度**：否则徽标会比旁边的小一圈 */
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(124, 92, 255, .32);
}

.zibll-ai-form-badges .badg.zwork-gal-tag:hover,
.zibll-ai-form-badges .badg.zwork-gal-tag:focus-visible {
    color: #fff;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--theme-color) 18%, #7c5cff) 0%,
        color-mix(in srgb, var(--theme-color) 18%, #e4579a) 100%);
}

.zwork-gal-tag .icon {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    display: block;
}

/*========== 工作流作品弹窗 ==========*/

.zwork-gal-mask {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
}

/* ⚠️ 显式写 !important：本文件里 .zwork-gal-mask 自己就是 display:flex，
   会盖过浏览器默认的 [hidden]{display:none}，不写就永远关不掉 */
.zwork-gal-mask[hidden] {
    display: none !important;
}

.zwork-gal-box {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    /* 电脑端限高 + 内部滚动：min() 双约束 —— 既不超过视口的 88%，
       也不超过一个绝对高度，免得在超高屏幕上把弹窗拉得过于空旷 */
    height: min(88vh, 900px);
    background: var(--main-bg-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}

.zwork-gal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--main-border-color);
    color: var(--main-color);
}

.zwork-gal-close {
    border: 0;
    background: transparent;
    color: var(--muted-2-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}

.zwork-gal-close:hover {
    color: var(--theme-color);
}

/* 滚动交给这一层；里面的瀑布流直接复用 .zibll-work-grid 的列定义 */
.zwork-gal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    /* ⚠️ 底色必须与卡片（--main-bg-color）**不同**：弹窗盒子与卡片同色时，
       卡片只在阴影上勉强看出边界，一屏白茫茫没有卡片感。
       这里用 muted（浅色模式=浅灰、深色模式=更深一档），两种模式下都与卡片分开 */
    background: var(--muted-bg-color);
}

.zwork-gal-empty,
.zwork-gal-more {
    text-align: center;
    padding: 14px 0;
}

/*========== 作品弹窗的滚动条（跟随「作品设置→详情」里选的档位）==========
   预设类由 JS 直接挂在滚动容器 .zwork-gal-body 上（而不是挂在祖先），
   这样这里不必为每种档位再写一堆「祖先 .zwork-sb-x 后代 .zwork-gal-body」的选择器。
   颜色同样取自主题变量，深浅色自适应。 */

.zwork-gal-body.zwork-sb-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.zwork-gal-body.zwork-sb-thin::-webkit-scrollbar-track,
.zwork-gal-body.zwork-sb-pill::-webkit-scrollbar-track,
.zwork-gal-body.zwork-sb-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.zwork-gal-body.zwork-sb-thin::-webkit-scrollbar-thumb {
    background: var(--muted-2-color);
    border-radius: 0;
}

.zwork-gal-body.zwork-sb-thin:hover::-webkit-scrollbar-thumb {
    background: var(--theme-color);
}

.zwork-gal-body.zwork-sb-pill::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.zwork-gal-body.zwork-sb-pill::-webkit-scrollbar-thumb {
    background: var(--muted-2-color);
    background: color-mix(in srgb, var(--muted-2-color) 50%, transparent);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.zwork-gal-body.zwork-sb-pill:hover::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 70%, transparent);
    background-clip: padding-box;
}

.zwork-gal-body.zwork-sb-overlay::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.zwork-gal-body.zwork-sb-overlay::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.zwork-gal-body.zwork-sb-overlay:hover::-webkit-scrollbar-thumb {
    background: var(--muted-2-color);
    background: color-mix(in srgb, var(--muted-2-color) 60%, transparent);
    background-clip: padding-box;
}

.zwork-gal-body.zwork-sb-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zwork-gal-body.zwork-sb-hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Firefox 的标准属性 */
.zwork-gal-body.zwork-sb-thin,
.zwork-gal-body.zwork-sb-pill {
    scrollbar-width: thin;
    scrollbar-color: var(--muted-2-color) transparent;
}

.zwork-gal-body.zwork-sb-overlay {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.zwork-gal-body.zwork-sb-overlay:hover {
    scrollbar-color: var(--muted-2-color) transparent;
}

/*========== 作品弹窗 · 移动端 ==========
   手机上直接全屏：内容区本来就窄，再留一圈遮罩边只会让卡片更小。
   关闭按钮仍在标题栏右侧，且放大到手指好点的尺寸。 */

@media (max-width: 768px) {
    .zwork-gal-mask {
        padding: 0;
        align-items: stretch;
    }

    .zwork-gal-box {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .zwork-gal-head {
        padding: 10px 14px;
        /* 顶部留出安全区（刘海屏） */
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .zwork-gal-close {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin: -4px -4px -4px 0;
    }

    .zwork-gal-body {
        padding: 10px;
        /* 底部留出安全区（全面屏手势条） */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}


/*========== 状态提示 ==========*/

.zibll-work-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted-2-color);
}

.zibll-work-empty i {
    font-size: 44px;
    opacity: .35;
}

.zibll-work-empty p {
    margin: 12px 0 0;
}

.zibll-work-loading,
.zibll-work-end {
    text-align: center;
    padding: 28px 0;
    color: var(--muted-2-color);
    font-size: 13px;
}

.zibll-work-loading .loading {
    display: inline-block;
    margin-right: 6px;
}

.zibll-work-sentinel {
    height: 1px;
}

/*========== 入场动画 ==========
   .zwork-anim 由 JS 添加——没有 JS（或脚本失败）时卡片保持可见，绝不会「内容全白」 */
.zwork-anim .zibll-work-card {
    opacity: 0;
    transition: opacity .45s ease, transform .45s ease;
}

.zwork-anim.zwork-fade-up .zibll-work-card {
    transform: translateY(18px);
}

.zwork-anim.zwork-zoom-in .zibll-work-card {
    transform: scale(.94);
}

.zwork-anim.zwork-slide-left .zibll-work-card {
    transform: translateX(-18px);
}

.zwork-anim.zwork-slide-right .zibll-work-card {
    transform: translateX(18px);
}

.zwork-anim .zibll-work-card.zwork-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .zwork-anim .zibll-work-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .zibll-work-media:hover .zibll-work-img {
        transform: none;
    }
}

/*========== 响应式 ==========*/

@media (max-width: 1200px) {
    .zibll-work-grid {
        --zwork-cols-cur: var(--zwork-cols-m, 3);
    }
}

@media (max-width: 768px) {
    .zibll-work-grid {
        --zwork-cols-cur: var(--zwork-cols-s, 2);
        /* 移动端固定小间距：用后台设置的值会过散 */
        column-gap: 10px;
    }

    .zibll-work-card {
        margin-bottom: 10px;
    }

    .zibll-work-title {
        font-size: 19px;
    }

    .zibll-work-acts {
        padding: 4px 2px;
    }

    .zibll-work-act {
        font-size: 12px;
        min-width: 34px;
        padding: 0 4px;
    }

    /* 小屏上毛玻璃与图片缩放都会掉帧，一并关掉 */
    .zibll-work-play {
        backdrop-filter: none;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
    }

    .zibll-work-media:hover .zibll-work-img {
        transform: none;
    }
}