/* ============================================================
   图库屏视觉深化 · gallery.css（批一四四，李叔 10-07「重构图库页面」）
   ------------------------------------------------------------
   原型：D:\设计文件\BrandOS图库\gal-proto-v1.html（真图真数据，五 tab）
   铁律（同批一三〇 / 一四〇）：功能 / 字段 / 交互 / DOM 锚点零改动，
     本文件纯 CSS，未动一行 JS。所有选择器都限定 .pg-gallery 作用域，
     该作用域由 host.js route() 打在 body（#/gallery、#/outputs、
     #/styleref、#/ai-history 四 hash 同屏；弹层在 body 级 #layer，
     body 打标才罩得住）。
   为什么独立成文件：app.css 是并行会话高频战区（批一四三 正在写
     用户管理段），同一文件 git add 会连带裹走在途改动。本项目已有
     独立 CSS 惯例（seasonal.css / price.css / inspect.css），图库此段
     从之。必须在 index.html 里排在 app.css 之后加载（覆盖批一四〇粗修版）。
   回退 = 删本文件 + 删 index.html 里那一行 link（回到批一四〇粗修版，
     不是裸奔）。
   ------------------------------------------------------------
   三处卡片钩子（互不干扰，全部从真实 DOM 结构推导，非靠猜）：
     产出卡   .masonry.gal6:has(.m-t[title])   —— 产出卡 m-t 带 title 属性
     商品图库 .masonry.gal6:has(.m-kind.prod)  —— 商品图库卡必有 m-kind.prod
     AI 记录  .ai-note + .masonry              —— 记录区紧跟提示条，且不带 gal6
   gal6 是产出页与商品图库共用的类名，必须靠这两个钩子分开处理：
     商品图 → 网格货架（统一行高）；产出海报 → 保持瀑布流（长图不许裁）。
   ============================================================ */

/* ================= 一、通用：图上浮层角标 =================
   旧版分类/用途角标挤在 meta 文字行里，跟名字抢视线。
   浮到图上左上角，半透明墨底反白——认信息先认图，文字区只剩正事。
   !important 是必需的：商品图库「实拍母版」角标用 inline style 写死绿底，
   类选择器压不住 inline。 */
.pg-gallery .m-item .m-kind {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  background: rgba(20, 20, 18, .55) !important;
  color: var(--white) !important;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  backdrop-filter: blur(4px);
}

/* AI 记录图卡有两个角标（AI绘图 + 用途）：第二个挪到右上角，不叠字 */
.pg-gallery .ai-note + .masonry .m-item .m-kind ~ .m-kind {
  left: auto;
  right: 8px;
}

/* ================= 二、卡片 meta：主行是人话，机器名降档 =================
   meta 改纵向 flex，靠 order 重排而不是靠改 DOM：
   主行 = 时间·大小·导出人（一眼对得上事），次行 = 文件名（等宽小字弱化的
   「档案名」，真人认海报靠图不靠文件名）。*/
.pg-gallery .masonry.gal6:has(.m-t[title]) .m-meta {
  display: flex;
  flex-direction: column;
  padding: 9px 12px 11px;
}
.pg-gallery .masonry.gal6:has(.m-t[title]) .m-t {
  order: 2;
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-gallery .masonry.gal6:has(.m-t[title]) .m-d {
  order: 1;
  margin-top: 0;
  font-weight: 600;
  color: var(--text-2);
}

/* ================= 三、商品图库：瀑布流改「货架格」 =================
   511 张商品图全是大致方形，瀑布流参差显得乱；统一行高后整齐像超市货架，
   「图库」的语义也落到实处。
   注意：产出页的长海报（1080×2340）万万不能进这个网格——所以钩子必须是
   :has(.m-kind.prod)，不能图省事直接改 .masonry.gal6。*/
.pg-gallery .masonry.gal6:has(.m-kind.prod) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  column-count: initial; /* 卸掉瀑布流列数，避免与 grid 打架 */
}
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-item {
  margin-bottom: 0;
  break-inside: auto;
}
/* 统一方图 + cover 裁切：图片内容居中取，不被拉伸 */
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}
/* 商品图库 meta：名字才是主角（认图靠名字），保持主次关系，只做收敛 */
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-meta {
  padding: 9px 12px 11px;
}
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-t {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-cnt,
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-alias {
  vertical-align: middle;
}
.pg-gallery .masonry.gal6:has(.m-kind.prod) .m-d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✎ 改名 / ✨ AI 优化：旧版永远常显，511 张卡的右上角一排小按钮全是噪点。
   改成 hover 才浮现；触屏设备（hover:none）没有鼠标概念，必须保持常显，
   否则用户压根点不到——这条兜底不能省。 */
.pg-gallery .gal-re {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.pg-gallery .m-item:hover .gal-re {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .pg-gallery .gal-re { opacity: 1; transform: none; }
}

/* ================= 四、商品图库：提示条 + 上传钮提级 ================= */
.pg-gallery .tip {
  border-radius: var(--r-m);
  padding: 10px 12px;
  margin-bottom: 12px;
}
/* 上传是这张页面的主行动，不该是灰白次钮 */
.pg-gallery #prodUpBtn,
.pg-gallery #prodUpBtn0 {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.pg-gallery #prodUpBtn:hover,
.pg-gallery #prodUpBtn0:hover {
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}

/* ================= 五、AI 生成记录 ================= */
/* 提示条：从灰字一行改成有底的提示片，跟上面两行筛选拉开主次 */
.pg-gallery .ai-note {
  font-size: var(--t-weak);
  color: var(--text-3);
  background: var(--card-2);
  border-radius: var(--r-m);
  padding: 7px 10px;
  line-height: 1.6;
}
/* AI 文案卡：旧版把整段原始 JSON 直接糊在卡里，又丑又读不懂。
   改成「引用文档块」：左侧绿竖条 + 等宽小字 + 限高截断，
   语义一下子清楚了——这是 AI 返回的原始档案，不是给人读的正文。
   padding-top 留出 30px 给浮层角标（"AI 文案"）让位。 */
.pg-gallery .ai-note + .masonry .m-text {
  margin: 12px 12px 0;
  padding: 30px 10px 8px;
  background: var(--card-2);
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  line-height: 1.7;
  max-height: 118px;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pg-gallery .ai-note + .masonry .m-text::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(transparent, var(--card-2));
  border-radius: 0 0 8px 0;
}
/* AI 记录卡 meta 收敛（图卡/文案卡共用） */
.pg-gallery .ai-note + .masonry .m-meta {
  padding: 9px 12px 11px;
}
.pg-gallery .ai-note + .masonry .m-t {
  margin-top: 8px;
}
.pg-gallery .ai-note + .masonry .m-d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}

/* ================= 六、风格参考卡：拉齐卡片语言 =================
   风格参考是 stylelib.js 自己渲的，视觉本来就不难看，
   这里只做一件事——跟图库其他 tab 用同一副 hover 与圆角语言。 */
.pg-gallery .sr-card {
  border-radius: var(--r-l);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.pg-gallery .sr-card:hover {
  box-shadow: var(--shadow-2);
  transform: var(--lift-2);
}

/* ================= 七、响应式：货架格逐级降列 =================
   断点沿用原 gal6 的瀑布流语义（1500 / 1200 / 760 / 460），
   只把「降列」翻译成 grid 语言；产出页的瀑布流不受本段影响。 */
@media (max-width: 1500px) {
  .pg-gallery .masonry.gal6:has(.m-kind.prod) { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1200px) {
  .pg-gallery .masonry.gal6:has(.m-kind.prod) { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .pg-gallery .masonry.gal6:has(.m-kind.prod) {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  /* 窄屏 meta 再收一刀，别让文字把方图挤成条 */
  .pg-gallery .m-item .m-t { font-size: var(--t-aux); }
}
@media (max-width: 460px) {
  .pg-gallery .masonry.gal6:has(.m-kind.prod) { grid-template-columns: repeat(2, 1fr); }
}