/* ============================================================
   plate.css — 日报配图组件样式表（B 档·裱框）
   版本：v1.1 · 2026-09-10
   依赖：tokens.css（--paper, --ink, --red, --card, --line 等）
   文档：design/配图排版预设.md
   变更 v1.1：新增自绘图表豁免（.plate-chart）与 M3 跨栏图移动端顺序修正
   ============================================================ */

/* ---------- 基础容器 ---------- */
.plate {
  margin: 12px 0;
  font-family: var(--font-serif);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 图说通用 ---------- */
.plate figcaption {
  font-family: var(--font-kai);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  padding: 8px 0 0 0;
}

.plate .plate-no {
  color: var(--red);
  margin-right: 6px;
  font-weight: bold;
}

.plate .plate-credit {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
  text-align: right;
}

/* ============================================================
   B · 裱框 Mounted（唯一相框档位）
   ============================================================ */

.plate .plate-frame {
  border: 1px solid var(--ink);
  padding: 8px;
  background: var(--card);
  position: relative;
}

.plate .plate-inner {
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}

/* 半调网点叠层：用 var(--ink) 走令牌，深浅模式自动跟随；
   opacity 控制强度。
   间距 2.5px：老报纸的印刷网点在 133 lpi 量级，屏幕上不宜超过 3px，
   否则浅色区（如发布会白底图）会显脏；配合 opacity 0.05，
   只在凑近看时能发现纸纹。
   注意：层内不要再叠一层低 alpha，两级相乘会把网点压到看不见。 */
.plate .plate-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ink) 0.8px, transparent 0.8px);
  background-size: 2.5px 2.5px;
  opacity: 0.05;
  pointer-events: none;
}

.plate img {
  filter: saturate(0.78) sepia(0.1) contrast(0.95);
}

/* ---------- 自绘图表豁免（.plate-chart）----------
   照片是「外来色」，需要降饱和才融得进纸面；
   自绘 SVG 图表本身就用同一套令牌画（--red / --paper / --ink），
   再过一遍照片滤镜等于把矢量图从令牌体系里拽出去。
   实测：图表里的朱砂块 #8b2c1f 被洗成 #78372d，
   而同一张图里图说「图」字标是文本、不过滤镜、仍是 #8b2c1f，出现两种朱砂。
   网点同理：SVG 图表常自带网点底纹（8px 间距），
   叠上组件网点（4px 间距）会拍出摩尔纹，故一并关掉。
   用法：<figure class="plate plate-span plate-chart"> */
.plate-chart img { filter: none; }
.plate-chart .plate-inner::after { display: none; }

/* ============================================================
   位置修饰类
   ============================================================ */

/* ---------- 通栏头条图 ---------- */
.plate-headline {
  margin: 16px 0 20px 0;
}

.plate-headline .plate-credit {
  font-size: 11.5px;
}

/* ---------- 文绕图右浮 ---------- */
.plate-float-right {
  float: right;
  width: 46%;
  margin: 4px 0 10px 14px;
}

.plate-float-right figcaption {
  font-size: 12px;
}

.plate-float-right .plate-credit {
  font-size: 10.5px;
}

/* ---------- 文绕图左浮 ---------- */
.plate-float-left {
  float: left;
  width: 46%;
  margin: 4px 14px 10px 0;
}

.plate-float-left figcaption {
  font-size: 12px;
}

.plate-float-left .plate-credit {
  font-size: 10.5px;
}

/* ---------- 出血图 ---------- */
.plate-bleed {
  margin-left: -20px;
  margin-right: -20px;
}

.plate-bleed .plate-frame {
  border-left: none;
  border-right: none;
}

/* ---------- 跨栏图（在 .cols 容器内横跨全宽） ---------- */
.plate-span {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 16px;
}

/* ---------- 图集（2列网格） ---------- */
.plate-grid .plate-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.plate-grid .plate-grid-item {
  position: relative;
  border: 1px solid var(--ink);
  overflow: hidden;
}

.plate-grid .plate-grid-item .plate-inner {
  border: none;
}

.plate-grid .plate-grid-no {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
  background: rgba(245, 240, 230, 0.85);
  padding: 1px 4px;
  z-index: 2;
}

.plate-grid figcaption {
  margin-top: 4px;
  grid-column: 1 / -1;
}

/* ---------- 缩略图（小图嵌文） ----------
   仅限产品图 / 品牌图标 / 界面截图这类无肖像风险的素材。
   真人头像原则上不用（肖像权风险 + figcaption 隐藏即无来源标注）。 */
.plate-thumb {
  float: left;
  width: 64px;
  margin: 2px 12px 4px 0;
}

.plate-thumb .plate-frame {
  padding: 3px;
}

/* 显式锁定 1:1 内框并用 object-fit 裁切：
   若只给 figure 定高，竖图会溢出内框、把底部裁掉（人像常见只剩额头）。
   aspect-ratio 自动适配 560px 断点下的 48px 尺寸，不必写两遍。 */
.plate-thumb .plate-inner {
  aspect-ratio: 1 / 1;
}

.plate-thumb img {
  height: 100%;
  object-fit: cover;
}

.plate-thumb figcaption {
  display: none;
}

/* ============================================================
   清浮动辅助
   .lead 也纳入：头条位若加浮动配图，float 会越出该块压到下一段
   ============================================================ */
.lead::after,
.news::after,
.watch-item::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
   兜底：图片加载失败时隐藏整个 figure
   ============================================================ */
.plate.broken {
  display: none;
}

/* ============================================================
   响应式（≤560px）
   ============================================================ */
@media (max-width: 560px) {
  .plate-float-right,
  .plate-float-left {
    float: none;
    width: 100%;
    margin: 12px 0;
  }

  .plate-bleed {
    margin-left: 0;
    margin-right: 0;
  }

  .plate-bleed .plate-frame {
    border-left: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
  }

  .plate-grid .plate-grid-inner {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .plate-thumb {
    width: 48px;
    margin: 2px 10px 2px 0;
  }

  .plate-span {
    margin-bottom: 12px;
  }
}

/* ============================================================
   M3 跨栏图的移动端阅读顺序（≤560px）

   背景：M3 为把跨栏图插在「栏目小标下方、两栏内容之上」，
   两个 .sec-title 必须放在 .cols 直接子级（不能包进栏容器），
   DOM 顺序变成：小标A、小标B、跨栏图、内容A、内容B。
   桌面双栏靠 grid 自动排成「小标行 / 跨栏行 / 内容行」，没问题；
   但 ≤560px 压成单列后 DOM 顺序即视觉顺序，
   「游戏 / 开发圈」小标会和它自己的内容隔开一整栏（实测相隔 1700px）。

   解法：给容器加 .cols-m3，四个分栏元素加语义类名，用 order 显式指定顺序。
   M3 模板（完整骨架见 design/配图排版预设.md 第二节）：
     <div class="cols cols-m3">
       <div class="sec-title col-a-head">AI / 科技 ...</div>
       <div class="sec-title col-b-head">游戏 / 开发圈 ...</div>
       <figure class="plate plate-span">...</figure>
       <div class="col-a-body">...AI 条目...</div>
       <div class="col-b-body">...游戏条目...</div>
     </div>
   类名与元素一一对应，改模板时不需要改 CSS，也不依赖元素位置。
   改完记得跑 design/plate-回归页.html 自查。
   ============================================================ */
@media (max-width: 560px) {
  .cols-m3 > .col-a-head { order: 1; }
  .cols-m3 > .col-a-body { order: 2; }
  .cols-m3 > .plate-span { order: 3; }
  .cols-m3 > .col-b-head { order: 4; }
  .cols-m3 > .col-b-body { order: 5; }
}

/* 兼容回退：旧写法（.cols 无 .cols-m3，只把跨栏图当直接子级）
   靠元素位置排顺序。仅为不改旧版样张而留，不要在新模板里照抄这套。
   新模板一律用上面的 .cols-m3 + 四个语义类名。 */
@media (max-width: 560px) {
  .cols:not(.cols-m3):has(> .plate-span) > div:nth-of-type(1) { order: 1; }
  .cols:not(.cols-m3):has(> .plate-span) > div:nth-of-type(3) { order: 2; }
  .cols:not(.cols-m3):has(> .plate-span) > .plate-span { order: 3; }
  .cols:not(.cols-m3):has(> .plate-span) > div:nth-of-type(2) { order: 4; }
  .cols:not(.cols-m3):has(> .plate-span) > div:nth-of-type(4) { order: 5; }
}