/* ══════════════════════════════════════════════════════════════
   模板页（#/p/<slug>，js/page.js 画）：装在服务页同一个整页层 .service-page 里，页眉也是同一个
   P3 画布模式（docs/canvas-plan.md）：页面标题下面是一块定高的画布，元素（文字 / 图片）在桌面上绝对定位
   尺寸全是 tokens.css 的 --tpl-* 变量；后台存的档位落成 data-*，位置落成 --x / --y / --w / --z，画布高度落成 --h
   这个文件先写手机（单列，按 DOM 顺序 = 先 y 后 x 往下排），再用 min-width 加桌面：
   坐标只写在桌面那一段里，手机宽度下天然不生效，不用再写一遍"手机还原"去压它
   ══════════════════════════════════════════════════════════════ */
.tpl { padding: 0 var(--gutter) 120px; }

.tpl-title {
  padding: var(--tpl-title-space) 0 var(--tpl-flow-gap);
  font-size: calc(var(--tpl-title-size) * var(--scale-tpl-title));
  line-height: .95;
  letter-spacing: -.01em;
}

.tpl-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--tpl-flow-gap);
}

.tpl-block { min-width: 0; }

/* ── 文字：标题字号（titleSize，手机也认）、正文 ─────────────── */
.tpl-heading {
  margin-bottom: .55em;
  font-size: var(--tpl-heading-m);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.tpl-heading:last-child { margin-bottom: 0; }  /* 只有标题的文字元素 */
.tpl-block[data-title-size="s"] .tpl-heading { font-size: var(--tpl-heading-s); }
.tpl-block[data-title-size="l"] .tpl-heading { font-size: var(--tpl-heading-l); }

.tpl-body {
  font-size: calc(var(--tpl-body-size) * var(--scale-tpl-body));
  line-height: 1.65;
  letter-spacing: 0;
}

/* ── 图片：高度跟着宽度和图片比例走；裁过的按 --crop（元素上的 1000/r，手机也认）居中裁 ──
   没裁的 --crop 没定义，aspect-ratio 回到 auto，img 的 height: 100% 对着高度 auto 的父元素也是 auto，和以前一样。
   overflow: hidden 不只是为了裁：有 aspect-ratio 的盒子最小高度默认按内容算，不关掉的话图片原高会把框撑回去 */
.tpl-figure { margin: 0; }
.tpl-media { display: block; overflow: hidden; aspect-ratio: var(--crop, auto); background: var(--img-empty); }
.tpl-media img { width: 100%; height: 100%; object-fit: cover; }
.tpl-media.is-empty { aspect-ratio: var(--crop, 4 / 3); background: var(--slot-empty); }
.tpl-figure figcaption {
  margin-top: 10px;
  font-size: var(--tpl-caption-size);
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ── 桌面：定高画布，元素按坐标摆 ──────────────────────────────
   x、w 是画布宽度的千分比，y 是 px；后面的元素盖在前面（--z）。元素底边超出画布时照样露出来，不裁 */
@media (min-width: 651px) {
  .tpl-canvas {
    display: block;
    position: relative;
    max-width: var(--tpl-canvas-max);
    height: calc(var(--h) * 1px);
    margin: 0 auto;
    isolation: isolate;  /* 元素的 --z 只在画布里比，不和页眉等外面的层比 */
  }
  .tpl-block {
    position: absolute;
    left: calc(var(--x) * .1%);
    top: calc(var(--y) * 1px);
    width: calc(var(--w) * .1%);
    z-index: var(--z);
  }
}