/* LYNCA asset image — the one component that shows a collectible.
   正本：Linear 【Infra】LYNCA Design Standard §11.1 / §11.3 / §11.7；迁移 issue COS-82。
   加载顺序：nocturne/styles.css → lynca/tokens.css → 本文件。
   配套 React 参考实现：AssetImage.tsx（同目录）。应用整份复制这两个文件，不改内容；
   要改先改这里（和正本），再同步各仓库。验收门第 8 条（design-gate.mjs rule 8）检查
   图像元素 .asset-img__img 上没有 border-radius / filter / mix-blend-mode / object-fit: cover。

   结构：
   <figure class="asset-img asset-img--{evidenceClass}" data-evidence-class="…">
     <div class="asset-img__well">            凹槽：--color-bg，可 --radius-sm，--shadow-sm 发丝边
       <img class="asset-img__img" …>         图像：contain，永不裁切、圆角、滤镜、混合、hover 放大
       <span class="asset-img__badge">        只在 generated_* 出现：不可移除的角标
     </div>
     <figcaption class="asset-img__caption">  状态文字（§11.7）+ disclaimer + 说明
   </figure>
   .asset-pair 正反面配对（正面在左），.asset-inspect 检视态。 */

.asset-img {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);                 /* §11.3 装裱：图像坐在 surface 卡片上的凹槽里 */
  background: var(--color-surface);
  border-radius: var(--radius-md);         /* 卡片可以有圆角；图像不能 */
}

.asset-img__well {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background: var(--color-bg);             /* 底比表面暗一档，就是展柜 */
  border-radius: var(--radius-sm);         /* 凹槽可以有 --radius-sm；图像不能 */
  box-shadow: var(--shadow-sm);            /* 边界一条发丝；图像与凹槽之间不加线 */
}

.asset-img__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;                     /* 永不裁切；缩略图也 contain，宁可留边 */
  border-radius: 0;                        /* 角是品相证据，不盖 */
  filter: none;                            /* 像素不动 */
  mix-blend-mode: normal;                  /* §11.1：藏品图永不 .lighten */
  transform: none;
  transition: none;                        /* 不做 hover 内缩放；放大走检视态 */
}

.asset-img__well:hover .asset-img__img,
.asset-img__img:hover {
  transform: none;
  filter: none;
}

/* 可检视时图像包在一个无样式的 button 里；尺寸链 well → button → img 全靠百分比 */
.asset-img__inspect {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  border-radius: 0;
}
.asset-img__inspect:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 尺寸预设：缩略、列表、详情。都是 contain，只定凹槽高度 */
.asset-img--thumb .asset-img__well { height: 96px; }
.asset-img--list  .asset-img__well { height: 160px; }
.asset-img--detail .asset-img__well { min-height: 320px; }
.asset-img--thumb { padding: var(--space-2); gap: var(--space-1); }

/* 状态文字（§11.7）：每张图都有可读的 evidence class；颜色只是第二通道 */
.asset-img__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-neutral-500);
}
.asset-img__caption .tag { flex: none; }
.asset-img__note { flex: 1 1 100%; }

/* generated_presentation / generated_decase —— 整套里唯一让图框变色的状态（§11.3 四样）。
   角标和边框不能被页面样式覆盖：这里用 !important 是刻意的，是合规组件对外的硬边界。 */
.asset-img--generated_presentation .asset-img__well,
.asset-img--generated_decase .asset-img__well {
  box-shadow: 0 0 0 1px var(--color-generated-500) !important;   /* 1. 发丝边改 generated-500 */
}

.asset-img__badge {                                              /* 2. 左上角不可移除的角标 */
  position: absolute !important;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: calc(var(--radius-md) * 0.75);
  border: 1px solid var(--color-generated-500) !important;
  background: var(--color-bg) !important;
  color: var(--color-generated-300) !important;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
}
.asset-img__badge svg { width: 12px; height: 12px; flex: none; }
.asset-img__badge:lang(zh) { letter-spacing: 0; }

.asset-img__disclaimer {                                         /* 3. 图下 .tag-generated + disclaimer */
  color: var(--color-generated-300);
}

/* 正反面配对：同尺寸、同装裱、同一行，正面在左 */
.asset-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.asset-pair > .asset-img { min-width: 0; }
.asset-pair > .asset-img .asset-img__well { aspect-ratio: 5 / 7; height: auto; }
@media (max-width: 599px) {
  .asset-pair { grid-template-columns: 1fr; }
}

/* 检视态：全分辨率、独占视口、背景无色相偏移（1.0 用 --color-neutral-900）。缩放用 transform */
.asset-inspect {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--color-neutral-900);
  overflow: hidden;
}
.asset-inspect .asset-img {
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}
.asset-inspect .asset-img__well {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.asset-inspect .asset-img__img {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-16));
  transform: scale(var(--asset-zoom, 1)) translate(var(--asset-pan-x, 0px), var(--asset-pan-y, 0px));
  transform-origin: center;
  transition: transform var(--motion-standard) var(--ease-out);
  cursor: zoom-in;
}
.asset-inspect .asset-img__img[data-zoomed="true"] { cursor: zoom-out; }
.asset-inspect .asset-img__caption { justify-content: center; }
.asset-inspect__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  min-width: var(--touch, 44px);
  min-height: var(--touch, 44px);
}

@media (prefers-reduced-motion: reduce) {
  .asset-inspect .asset-img__img { transition: none; }
}