/* ============================================================================
 * 媒体交付优化：LQIP 占位 / 响应式图片 / 视频懒加载
 * ----------------------------------------------------------------------------
 * 配套：
 *   - includes/media.php           服务端变体与 LQIP 生成（PHP）
 *   - img.php                      按需生成中间件（首次请求生成后 302 到静态文件）
 *   - assets/js/media-lazy.js      懒加载增强（IntersectionObserver 兜底）
 *   - assets/js/perf-monitor.js    TTFB / LCP / CLS / INP 指标采集
 *
 * 设计约束（遵守项目铁律）
 *   - 颜色一律走 --c-* token，禁止硬编码十六进制
 *   - 不引入 emoji 图标（仅 SVG / 描边）
 *   - 不依赖 JS：JS 未加载时占位与真图展示均正常，JS 只做增强
 *   - 不新增包裹元素：LQIP 直接作为 <img> 自身背景，零 DOM 结构变更，
 *     避免影响既有卡片的像素级布局（行内/块级、间距、圆角均不变）
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. LQIP 模糊占位（Low Quality Image Placeholder）
 *    服务端把原图缩到 20px 宽并内联为 data URI（约 300~800 字节），
 *    通过自定义属性 --media-lqip 注入；浏览器 cover 放大后天然柔化，
 *    因此无需 filter: blur()（省一层合成开销，也避免边缘透白）。
 *    真图解码完成后自然覆盖背景，无需 JS 参与。
 * ------------------------------------------------------------------------- */
.media-lqip {
  background-image: var(--media-lqip);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
 * 2. 视频懒加载（preload="metadata" 已在服务端输出）
 *    [data-lazy-video] 元素在进入视口前不设置 src（连元数据都不下载），
 *    进入视口后由 media-lazy.js 挂载 src 并 load()。
 *    JS 未加载时：视频保持无 src 状态，此处给出中性底色占位，避免黑块闪动。
 * ------------------------------------------------------------------------- */
.media-video-pending {
  background-color: var(--c-surface);
}

/* 视频进入视口、挂上 src 后移除占位底色 */
.media-video-ready.media-video-pending {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * 3. 响应式图片基础约束
 *    防止 srcset 选中的变体撑破容器；width/height 由服务端输出以锁定宽高比，
 *    从根源上消除布局抖动（CLS）。此处只兜底，不覆盖各模块自有尺寸规则。
 * ------------------------------------------------------------------------- */
picture {
  display: contents; /* picture 本身不参与布局，内部 img 维持原有盒模型 */
}

picture > img {
  max-width: 100%;
  height: auto;
}