/* ══════════════════════════════════════════════════════════════════════
   v0892_wall.css — v0.8.9.2 · 个人信息页「作品缩略 5×2」+「全屏作品背景墙」
   老板 2026-10-04 定案：
     缩略 = 1:1 小图 × **10 张 × 5 列 2 行**（v0.8.9.5：由 8 张 × 4 列 2 行 改，与个人名片同规格）
     点击 = 全屏作品墙，**相邻缝隙固定 18px**（由屏幕中心向外生长；不再是无缝铺满 —— v0.8.9.1 口径已废）
   ══════════════════════════════════════════════════════════════════════ */

/* `--ox` / `--oy` 由 JS（v0892_wall.js）按格子在网格中的行列位置写到每个 cell 上
   （决定悬浮放大时"往哪边长"，靠边的朝屏内长才不会被裁）；此处给声明与默认值。 */
:root { --ox: 50%; --oy: 50%; }

/* ── ① 缩略区：5 列 × 2 行 = 10 张，全部 1:1 ──
   v0.8.9.5（老板 2026-10-04）：「个人信息页的参考作品参照个人名片改，1:1，十个」
   → 由 4 列 × 2 行 = 8 张 改为 **5 列 × 2 行 = 10 张**，与个人名片（`.v92-c-samples` 固定 5 列）同规格。
   ⚠ 老板 2026-10-04：「个人名片这不是挺好的吗？**为啥都没内容的时候就给我开始改卡片大小了**」
   → **卡片尺寸必须恒定**：不用 flex-grow 拉伸填满（那会让卡片大小随内容多少变化）。
   回到 grid 等宽等尺寸；**内容不足时行末留空属正常现象，不靠拉伸解决**。 */
.pf-portfolio.v92-wallgrid,
.v92-wallgrid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: auto;
  gap: 10px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start;
}

/* v0.8.9.5：原先这里有一条「纠正为 4 列」的块（fe-home 在 v0892_home.css 把作品卡写成 5 列，
   当时老板定的是 4 列 × 2 行）。**现在老板要求个人页与名片统一为 5 列**，两边口径已一致
   → 纠正块删除，不再跨文件用 !important 互压（L9②）。v0892_home.css 的 5 列规则即最终口径。 */

/* 卡片贴合格宽；**尺寸恒定、不随内容多少变化** */
.v92-wallgrid > .v92-pf-item {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  position: relative;
}

/* 帧强制 1:1、无缝铺满格宽 */
.v92-wallgrid .v92-frame,
.v92-wallgrid .v92-frame.v92-wall-sq {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: var(--r-s);
  overflow: hidden;
}

/* ★ 老板 2026-10-04 明确：「参考作品是让你拿 **1:1 裁其中图的一部分**，不是让你留空」
   → 1:1 缩略**必须 `cover` 裁切填满**，不许 `contain` 完整显示（那样竖图两侧留黑边 = 留空）。
   `v0892_ratio.css` 的全局默认是 `.v92-frame img{object-fit:contain}`（那是七档帧"完整显示"口径），
   这里用**更高特异度 + !important** 把 1:1 体系压成 cover（fe-home 在 v0892_home.css 里也有 contain 类规则，故加权重）。 */
.content-scroll #v92-works-card .pf-portfolio.v92-wallgrid .v92-frame img,
.content-scroll .pf-works-card .pf-portfolio.v92-wallgrid .v92-frame img,
.pf-portfolio.v92-wallgrid .v92-frame img,
.v92-wallgrid .v92-frame img,
.v92-wallgrid .v92-frame > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* 裁一部分填满方格 */
  object-position: center !important;  /* 取中间区域 */
  display: block;
}

/* 全屏作品墙的格子：**原生比例零裁切**（老板 2026-10-04 终版口径）
   —— 框宽高 = 照片自然宽高（JS 整像素取整，误差 ≤0.4% 不可见）；
   contain 兜底保证整图可见，绝不 cover 裁边。（缩略区的 1:1 cover 是另一套口径，见上） */
.v92-wall-cell img {
  object-fit: contain !important;
  object-position: center !important;
}

/* 序号角标与工具行：保持在格内，不再撑宽卡片（防上一次那个 6px 越界裁切） */
.v92-wallgrid .v92-pf-ord {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  max-width: calc(100% - 12px);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: var(--fs-1);
  font-weight: 800;
  color: #fff;
  background: rgba(16, 24, 40, .55);
  z-index: 2;
}

.v92-wallgrid .v92-pf-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  max-width: calc(100% - 12px);
  display: flex;
  gap: 4px;
  z-index: 2;
}

.v92-wallgrid .v92-pf-cap { display: none; }   /* 5×2 小图不放标题，保持格阵干净 */

/* ── ② 全屏作品背景墙：**所有图片铺满一屏 + 鼠标悬浮放大** ── */
.v92-wall-mask {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #0b0f16;
  overflow: hidden;
  cursor: default;
  animation: v92-wall-in 260ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
@keyframes v92-wall-in { from { opacity: 0; } to { opacity: 1; } }

/* 墙本体：格子由 JS 按固定 18px 缝隙绝对定位铺满一屏（不再是无缝网格） */
.v92-wall-grid {
  position: absolute;
  inset: 0;
  display: block;
  gap: 0;
  touch-action: none;            /* 手指/指针拖拽平移，别让浏览器抢去滚动 */
}

.v92-wall-cell {
  position: absolute;            /* left/top/width/height 全由 JS 整像素给定 */
  overflow: hidden;
  border-radius: var(--r-s, 10px);      /* 画廊照片墙：每块小圆角 */
  /* v0.8.9.26（老板：现在的不是按照一个中心）——
     悬浮/钉住放大统一按格子自身中心（50% 50%），不再用 28/72% 朝屏幕中心的偏置锚点 */
  transform-origin: 50% 50%;
  transition: transform 220ms var(--ease-out, cubic-bezier(.22,1,.36,1)),
              box-shadow 220ms ease,
              filter 220ms ease;
  will-change: transform;
  cursor: zoom-in;
}
.v92-wall-grid.dragging { cursor: grabbing; }
.v92-wall-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* 零裁切：整图可见（框比≈自然比，误差仅取整） */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ★ 悬浮放大展示（同时抬 z-index 盖住邻居 + 加投影和描边，视觉上"浮起来"） */
/* ★ 老板 2026-10-04：「**我请问这能看到个啥**」（截图：悬浮块被放到 2.6 倍霸屏 + 其余块压暗到 .62 → 整面墙看不见了）
   → 悬浮放大必须是**"轻微抬起"**：能同时看清周围作品，而不是霸屏。 */
.v92-wall-cell.zoomed,
.v92-wall-cell.pinned {
  transform: scale(1.35);                 /* 2.6 → 1.35：抬起一点，不遮墙 */
  z-index: 30;
  box-shadow: 0 14px 44px rgba(16, 24, 40, .5);
  outline: 2px solid color-mix(in srgb, #fff 82%, transparent);
  outline-offset: -2px;
  cursor: zoom-out;
}
/* 非悬浮块只**极轻微**压暗（原 .62 太狠，等于把墙关了） */
.v92-wall-grid:hover .v92-wall-cell:not(.zoomed):not(.pinned) { filter: brightness(.9); }

/* v0.8.9.26：先开墙后加载 —— 未就绪微光骨架 + 加载完淡入 */
.v92-wall-cell img { opacity: 1; }
.v92-wall-cell img.pf-loading { opacity: 0; }
.v92-wall-cell img.pf-loaded { opacity: 1; transition: opacity .3s ease; }
.v92-wall-cell:has(img.pf-loading)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .10) 42%, transparent 64%);
  animation: pfShimmer 1.15s linear infinite;
}
.v92-wall-cell.noimg { background: rgba(255, 255, 255, .05); }
@keyframes pfShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .v92-wall-cell:has(img.pf-loading)::after { animation: none; }
  .v92-wall-cell img.pf-loaded { transition: none; }
}

.v92-wall-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 4002;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  background: rgba(16, 24, 40, .5);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}
.v92-wall-close:hover { background: rgba(16, 24, 40, .78); }

.v92-wall-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4002;
  font-size: var(--fs-2);
  color: rgba(255, 255, 255, .76);
  background: rgba(16, 24, 40, .5);
  padding: 6px 14px;
  border-radius: var(--r-full);
  pointer-events: none;
  white-space: nowrap;
}

.v92-wall-mask.closing { animation: v92-wall-out 200ms ease-in forwards; }
@keyframes v92-wall-out { to { opacity: 0; } }

body.v92-wall-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .v92-wall-mask { animation: none; }
  .v92-wall-cell { transition: none; }
}

/* ── 窄屏：缩略区仍 4 列（小图更小），全屏墙格子略小 ── */
@media (max-width: 560px) {
  .pf-portfolio.v92-wallgrid, .v92-wallgrid { gap: 6px !important; }
}

/* ══ ④ 参考作品独立成卡（老板：「个人信息和参考作品可以拆成两个卡」） ══ */
.v92-works-own {
  margin-top: var(--sp-3);
  padding: 14px 18px 16px;
}
.v92-works-own .pf-section { margin: 0; }
.v92-works-own h4 { margin-top: 0; }

/* ══ ③ 参考作品：把「上传 / 素材库选 / 名片展示 N 张」压成**同一行** ══
   老板：「参考作品这个选项就不能做成一个吗？」—— 原来 flex-wrap 把它们拆成三行。 */
h4:has(> #pf-sample-count) {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center;
}
h4:has(> #pf-sample-count) #pf-works-ops {
  margin-left: auto !important;      /* 上传/素材库选 靠右 */
  flex: 0 0 auto;
  display: inline-flex !important;
  gap: 6px;
}
h4:has(> #pf-sample-count) #pf-sample-count {
  margin-left: 0 !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
h4:has(> #pf-sample-count) #pf-cnt-total { display: none !important; }   /* 冗长说明（共 N 张…）收进 tooltip */
h4:has(> #pf-sample-count) #pf-cnt-input { width: 36px !important; text-align: center; }

/* ══ ② 徽章：合并成一块后的排版（佩戴的徽章 + 展示设置同卡） ══ */
.v92-badgeset-card .pf-badges-row { margin: 2px 0 10px; }
.v92-badgeset-card .pf-badges-row:empty { display: none; }
.v92-badge-pin-ico { display: inline-flex; align-items: center; }
.v92-badge-pin-ico svg { width: 14px; height: 14px; }