/* ============================================================
   作品卡片（复用组件）
   首页横向滚动卡片与详情页引用同一套卡片样式
   ============================================================ */

/* ---- 卡片文字响应式机制（2026-10-16，banner 同款） ----
   基础字号保持定值，输出时乘以缩放系数变量，分两档：
   标题档 --card-fs（25px 级）、小字档 --card-fs-sub（12~14px 级）。
   桌面两档均为 1（原值直出），移动端断点内统一下调（见文件末尾）。
   系数挂在卡片外壳（.work-card / .wf-card）上，卡内参与缩放的文字
   通过 var() 继承——想整体调档只改断点里那两个数。
   为什么小字也要缩：标题缩小后若小字不动，大小对比减弱、层级发闷
   （banner 注释「等比缩放保留行间比例」同一原理）；但小字基数只有
   12~14px，系数不能跟标题一样狠（12×0.64=7.7 不可读），故单独取
   0.85——已贴近中文可读下限，再小需谨慎。 */
.work-card,
.wf-card {
    --card-fs: 1;       /* 标题档 */
    --card-fs-sub: 1;   /* 小字档 */
}

.work-card {
    position: relative;   /* 2026-10-15 作者名可点改造：作为铺满卡片的 .wf-stretch 透明链接的定位基准（原外壳是整卡 <a> 自身可定位，改 div 后需补） */
    flex: 0 0 var(--card-w);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--card-shadow);   /* 全站统一：引用 base.css 的苹果同款阴影变量 */
    transition: transform 0.3s cubic-bezier(0, 0, .5, 1), box-shadow 0.3s cubic-bezier(0, 0, .5, 1);   /* 苹果同款缓动，和帮手卡一致 */
    /* 入场动画：backwards 只影响播放前状态，
       不能用 both——否则动画结束状态会一直压住 hover 的 transform */
    animation: cardIn 0.6s ease backwards;
}
.work-card:hover {
    transform: scale3d(1.01, 1.01, 1.01);   /* 苹果式轻微放大（与帮手卡统一的 1.01） */
    box-shadow: var(--card-shadow-hover);   /* 全站统一：引用悬停阴影变量 */
}

/* 依次浮入：第 2、3、4... 张各延迟一点 */
.work-card:nth-child(2) { animation-delay: 0.06s; }
.work-card:nth-child(3) { animation-delay: 0.12s; }
.work-card:nth-child(4) { animation-delay: 0.18s; }
.work-card:nth-child(5) { animation-delay: 0.24s; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* ---- 海报区 ---- */
.card-poster {
    position: relative;
    aspect-ratio: 4 / 3;           /* 海报比例 */
    overflow: hidden;
}
.card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* 填满并裁切多余部分 */
    transform: scale(1.1);        /* 出血：图比裁切框略大，缝隙被图盖住 */
}

/* （原 .card-shade 渐变模糊层已于 2026-08-31 全站移除）
   移除原因：它的 backdrop-filter: blur(16px) 与底部信息栏 .card-meta 的 blur(18px)
   区域重叠且嵌套——第二层完全落在第一层内部，输入是第一层模糊后的画面，
   必须串行算两次全区域高斯模糊，不能并行也不能缓存。横滑时同屏 3~4 张卡
   就是 6~8 次串行模糊，是卡片墙掉帧的主因。
   白字可读性改由下面 .card-text 的文字投影承担。 */

/* 遮罩栏内的文字列（2026-10-14 从海报绝对定位层并入 .card-meta）：
   两行左对齐 = 作品名 / 分类（标签行同日取消，不再在卡片里显示） */
.card-text {
    flex: 1;                      /* 吃掉作者区以外的全部宽度 */
    min-width: 0;                 /* 允许内部 h3 省略号生效 */
    display: flex;
    flex-direction: column;       /* 纵向排三行 */
    gap: 2px;
    color: #fff;                  /* 白字直接压在深色玻璃上（原海报上的文字投影已随并入栏内删除） */
}
/* 第二行：分类名小字，如“展厅”
   字号 12px = 首页帮手卡片眉题 .help-card-eyebrow 的定值（home.css，全端一致） */
.card-kicker {
    font-size: calc(12px * var(--card-fs-sub, 1));   /* 基础 12px（=帮手卡眉题定值，桌面全站一致）；移动端随小字档微缩 */
    font-weight: 600;
    text-transform: uppercase;     /* 英文分类名自动大写 */
    letter-spacing: 0.06em;
    opacity: 0.85;
    line-height: 1.3;
}
/* 第一行：作品名（超长省略号截断，防止撑破栏）
   字号 25px = 首页帮手卡片标题 .help-card-header 的中文定值（home.css，鸿蒙观感校准）
   字重 600 = 同帮手卡标题 .help-card-header（2026-10-14 从 700 改齐，两卡标题观感统一） */
.card-text h3 {
    font-size: calc(25px * var(--card-fs, 1));   /* 基础 25px × 标题档系数（默认 1；手机档 0.64 → 16px） */
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 底部信息栏：覆盖在海报底部的深色玻璃（对照 App Store 卡片） ---- */
.card-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70px;                 /* 2026-10-14 定值 70：栏内纵向两行（标题/分类），含上下 padding */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 28px;   /* 左 28 对齐帮手卡 .help-card-info 的 padding（home.css），作品名/分类左缘一致；右保持 16 给按钮留位 */
    background: rgba(30, 30, 32, 0.1);   /* 深色半透明 */
    -webkit-backdrop-filter: blur(18px);  /* 图片延伸到底栏并模糊 */
    backdrop-filter: blur(18px);
}
/* （2026-10-14 甲方品牌位退役：.client-logo / .logo-fallback / .client-name /
   .client-intro 样式随之移除；.client-info 壳层同日并入 .card-text 文字列。
   作品标签 .client-tags / .client-tag 同日取消在卡片内显示，规则一并删除） */
.btn-view {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.8);   /* 浅色胶囊 + 深色字，对照"获取"按钮 */
    color: var(--color-text);
    font-size: calc(13px * var(--card-fs-sub, 1));
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 980px;
}

/* ---- 卡片作者信息：头像 + 昵称（替换"查看"按钮，个人主页除外） ---- */
.card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    margin-left: auto;   /* 2026-10-14 品牌位退役后，作者区作为唯一子项推到右侧 */
}
.card-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);   /* 半透明白色描边 */
    overflow: hidden;
    flex-shrink: 0;
}
.card-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.card-author-name {
    font-size: calc(13px * var(--card-fs-sub, 1));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;   /* 昵称过长时省略，避免挤压左侧信息 */
}

/* ---- 2026-10-15 作者名可点：卡片外壳分层改造 ----
   四处作品卡（首页横滑 / 作品列表 / 搜索 / 灵感）外壳从"整卡 <a>"改为
   div + .wf-stretch 透明链接铺满跳详情（HTML 不允许 <a> 嵌套 <a>，
   与个人主页卡片 pm-card/wf-stretch 同一分层模式）。
   信息栏整体放行点击穿透（点作品名/分类落到底层 stretch 照常跳详情），
   仅作者链接单独恢复可点。 */
.work-card .card-meta {
    z-index: 3;                 /* 视觉上抬到 wf-stretch(2) 之上；点击行为由穿透规则决定 */
    pointer-events: none;       /* 与 .wf-card .card-meta（下方个人主页段落）同一穿透规则 */
}
a.card-author {
    pointer-events: auto;       /* 父级信息栏已穿透，作者链接必须单独恢复接收点击 */
    position: relative;
    z-index: 4;                 /* 高于 wf-stretch(2) / 信息栏(3) */
}
/* 悬停反馈：名字半透明白提亮为实白 + 头像描边同步提亮 */
a.card-author:hover .card-author-name {
    color: #fff;
}
a.card-author:hover .card-author-avatar {
    border-color: rgba(255, 255, 255, 0.9);
}

/* ---- 个人主页卡片：整卡跳转 + 编辑按钮分层 ----
   卡片外层是 div（内部含编辑链接，不能嵌套 <a>），
   wf-stretch 是铺满整卡的透明链接，负责跳详情页 */
.wf-stretch {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 18px;         /* 和卡片圆角一致 */
}
/* 底部信息栏：整体抬到覆盖链接之上（z-index 3 > wf-stretch 的 2），
   但自身不拦截点击（点击穿透到 wf-stretch 跳详情），
   只有"编辑"按钮恢复可点 */
.wf-card .card-meta {
    z-index: 3;
    pointer-events: none;
}
.wf-card a.btn-view {
    pointer-events: auto;
    position: relative;
    transition: background 0.2s ease, transform 0.2s ease;
}
/* 编辑按钮悬停动效：变实白 + 轻微放大，区别于装饰性的"查看" */
.wf-card a.btn-view:hover {
    background: #fff;
    transform: scale(1.06);
}

/* 删除按钮（个人主页卡片）：半透明白色描边、内部全透明、文字半透明 */
.btn-delete {
    pointer-events: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);   /* 半透明白色描边 */
    color: rgba(255, 255, 255, 0.6);               /* 半透明文字 */
    font-size: calc(13px * var(--card-fs-sub, 1));
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 980px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-delete:hover {
    border-color: rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.95);
}

/* ---- 编辑按钮 + 选择菜单（编辑作品信息 / 编辑作品详情页） ---- */
.edit-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    pointer-events: auto;
    z-index: 5;                 /* 高于 card-meta(3) / wf-stretch(2) */
}
/* 编辑触发按钮：样式与原编辑 <a> 一致（浅色胶囊 + 深色字） */
.wf-card button.btn-edit-trigger {
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-text);
    font-size: calc(13px * var(--card-fs-sub, 1));
    font-weight: 600;
    padding: 6px 16px;
    border: none;
    border-radius: 980px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, transform 0.2s ease;
}
.wf-card button.btn-edit-trigger:hover {
    background: #fff;
    transform: scale(1.06);
}
/* 菜单：半透明磨砂圆角矩形，从编辑按钮上方、向卡片左侧展开 */
.edit-menu {
    position: absolute;
    bottom: calc(100% + 8px);   /* 编辑按钮上方 */
    right: 0;                   /* 右缘对齐按钮，主体向左展开 */
    min-width: 150px;
    padding: 6px;
    /* 与导航"灵感"下拉同一玻璃配方：251/253 灰白 + 同组 backdrop-filter */
    background: rgba(251, 251, 253, 0.35);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
    backdrop-filter: saturate(180%) blur(15px);
    border: 0.2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow:
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.edit-wrap.open .edit-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.edit-menu a {
    display: block;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: calc(14px * var(--card-fs-sub, 1));
    color: #fff;               /* 白色文字 */
    text-align: right;         /* 两行文字右对齐 */
    white-space: nowrap;
    transition: background 0.15s ease;
}
.edit-menu a:hover {
    background: rgba(255, 255, 255, 0.15);   /* 悬停轻微提亮 */
}

/* ---- 发布状态徽标：卡片左上角，所有卡片都有；本人可点击下拉切换 ---- */
.wf-status {
    position: absolute;
    top: 12px;
    left: 18px;                 /* 与卡片左边距一致（12+6），状态徽标整体右移 */
    z-index: 4;                 /* 高于 wf-stretch(2) / card-meta(3) */
}
.wf-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;          /* 2026-10-16 反馈徽标太矮：竖向 3→5px 加高，横向 10→12px 保持胶囊比例 */
    font-size: calc(12px * var(--card-fs-sub, 1));
    font-weight: 600;
    border-radius: 980px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* hover 放大（2026-10-16）：与全站按钮 hover scale(1.03) 同语言；
   徽标尺寸小、1.03 仅 ~0.8px 察觉不到，故取 1.05；
   [disabled]（非本人视角的静态展示）不可交互，:not() 排除不放大 */
.wf-status-badge:hover:not([disabled]) {
    transform: scale(1.05);
}
/* 状态小圆点：文字前的半透明色点 */
.wf-status-badge::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
/* 未发布：浅灰胶囊 + 黑字（2026-10-12 配色调整；原深色毛玻璃随胶囊改不透明浅灰一并移除） */
.wf-status-badge.draft {
    background: #e8e8ed;
    color: #1d1d1f;
}
/* 未发布：深灰小点 */
.wf-status-badge.draft::before {
    background: #6e6e73;
}
/* 已发布：浅灰胶囊（与未发布同底色，靠绿色小点区分），文字沿用深黑 */
.wf-status-badge.published {
    background: #e8e8ed;
    color: #1d1d1f;
}
/* 已发布：绿色半透明小点 */
.wf-status-badge.published::before {
    background: rgba(52, 199, 89, 0.55);
}
/* 已封禁（管理员下架）：深红胶囊 + 白字（此前无专属样式，落在透明胶囊上） */
.wf-status-badge.offline {
    background: #b3261e;
    color: #fff;
}
/* 已封禁：浅红小点 */
.wf-status-badge.offline::before {
    background: #ff8a80;
}
/* 非本人：不可点击 */
.wf-status-badge[disabled] {
    cursor: default;
}

/* 状态下拉菜单 */
.wf-status-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 112px;
    background: rgba(251, 251, 253, 0.96);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.wf-status.open .wf-status-menu {
    display: block;
}
.wf-status-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: calc(13px * var(--card-fs-sub, 1));
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
}
.wf-status-option:hover {
    background: rgba(0, 0, 0, 0.06);
}
.wf-status-option.active {
    color: var(--color-accent);
    font-weight: 600;
}

.rail-empty {
    padding: 40px 0;
    color: var(--color-text-sub);
}

/* ---- 手机档（≤734px）：两档系数统一缩放 ----
   断点取 734（项目既有手机断点惯例，苹果手机线 736）而非 768——
   iPad mini 竖屏视口正好 768（六代及以后 744），曾落入 768 断点被当
   手机、80vw 大卡配手机字号，用户实测「平板文字过小」；734 让两种
   iPad mini 宽度都回归桌面档。
   标题 25×0.64=16px：与桌面 25px/480px 卡的字卡比例（5.2%）一致；
   首版 0.8→20、二版 0.72→18 均被用户判「手机端过大」，此为第三档。
   小字 0.85 不再加深：12→10.2 / 13→11 / 14→11.9，已贴近中文可读下限。
   帮手卡不在本机制内（苹果逐值对齐基线，未动）。pm-card（个人中心
   管理卡）有独立缩放体系且 font-size 直接写死、特异性更高，不受影响。 */
@media (max-width: 734px) {
    .work-card,
    .wf-card {
        --card-fs: 0.64;      /* 标题档：25px → 16px */
        --card-fs-sub: 0.85;  /* 小字档：12→10.2 / 13→11 / 14→11.9 */
    }
}

/* 减少动画时关闭卡片入场动画 */
@media (prefers-reduced-motion: reduce) {
    .work-card { animation: none; }
}