/* ============================================================
 * Longlight - 长光雨滴小站 | 媒体呈现 components/media.css
 * 来源：~README/项目架构.js → 风格.控件
 * 职责：记录内媒体的公共版式（CUI vim 预览 / CUI write <编号> 输出 / GUI 随心记 三处共用，FE-06）——
 *       图片（单张居中真实比例 / 多张九宫格，最多 9 格）、声音波形播放器、媒体说明与编辑态移除角标
 * 说明：颜色 / 圆角 / 字阶一律引用 tokens.css 令牌；播放键走公共控件 .btn .btn-icon；
 *       九宫格缺省铺满容器（GUI 正文列宽），.is-compact 取固定小格（CUI 输出与 vim 预览）；
 *       图片不铺底色（透明图片直接透出所在页面背景），点击由全局图片查看器放大（data-zoom）
 * ============================================================ */

/* ---- 块：图片块（单张 / 九宫格）与声音块；块间距贴合、紧接正文 ---- */
.media-block { display: block; margin: var(--space-form-field) 0 0; }
.media-block + .media-block { margin-top: 6px; }

/* ---- 图片 ---- */
.media-img {
  display: block;
  border: 0;                      /* 不加描边 / 阴影：图片即图片，透明图片直接透出所在页面背景 */
  border-radius: var(--radius-card);
  cursor: zoom-in;
}
.media-img:hover { opacity: .92; }

/* 单张：居中、保留真实比例、限高 */
.media-block.is-solo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.media-block.is-solo .media-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
}
.media-block.is-solo .media-cap { justify-content: center; text-align: center; }

/* 多张：九宫格（3 列，缺省铺满容器） */
.media-block.is-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.media-block.is-grid .media-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.media-cellw { position: relative; }
.media-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  font: var(--text-h4);
  color: var(--text-primary);
  letter-spacing: .04em;
}

/* CUI 场景（vim 预览 / write <编号> 输出）：固定小格，块宽随内容，不铺满终端 */
.media-block.is-grid.is-compact {
  grid-template-columns: repeat(3, 96px);
  width: max-content;
  max-width: 100%;
}
.media-block.is-solo.is-compact .media-img {
  max-width: min(100%, 320px);
  max-height: 240px;
}

/* ---- 媒体说明（单张：类型 + 说明；九宫格：类型 + 张数） ---- */
.media-cap {
  display: flex;
  align-items: center;
  gap: var(--space-icon-text);
  margin-top: 6px;
  font: var(--text-mono);
  color: var(--text-secondary);
}
.media-cap b { font-weight: 400; color: var(--green-700); }

/* ---- 编辑态：媒体移除角标（尺寸 / 外观全走公共控件 .btn .btn-icon.is-sm.is-danger，这里只负责定位） ---- */
.media-x { position: absolute; top: 2px; right: 2px; z-index: 3; }

/* ---- 声音：项目自绘的波形播放器（不使用浏览器原生 <audio> 控件） ---- */
.media-block.is-audio { display: block; }
.media-deck {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-input);
  padding: var(--space-form-label) 0;
  border-bottom: var(--border-soft);
}
.media-deck + .media-deck { margin-top: var(--space-icon-text); }
.media-deck .btn-icon { flex: none; }   /* 尺寸与图标大小一律随公共控件 .btn-icon，不另设一套 */
.media-deck-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
}
.media-deck-wave i {
  flex: 1;
  min-width: 1px;
  background: color-mix(in srgb, var(--green-700) 40%, transparent);
  transition: background 100ms linear;
}
.media-deck-wave i.on { background: var(--green-900); }
.media-deck-time { font: var(--text-mono); color: var(--text-secondary); white-space: nowrap; }

/* ---- 落盘文件缺失：退化为文件名芯片，避免留下破图 ---- */
.media-chip { font: var(--text-caption); color: var(--text-secondary); word-break: break-all; }