/* ══════════════════════════════════════════════════════════════
   模板页（#/p/<slug>，js/page.js 画）：装在服务页同一个整页层 .service-page 里，页眉也是同一个
   尺寸全是 tokens.css 的 --tpl-* 变量；后台存的档位落成 data-*，网格落成 --col / --span
   这个文件先写手机（单列），再用 min-width 加桌面：桌面才认的东西（网格位置、图片大小、图文位置、图集列数）
   只写在桌面那一段里，手机宽度下天然不生效，不用再写一遍"手机还原"去压它
   ══════════════════════════════════════════════════════════════ */
.tpl { padding: 0 var(--gutter) 120px; }

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

.tpl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--tpl-col-gap);
}

/* ── 区块：上下留白（spaceTop / spaceBottom，手机也认） ───────── */
.tpl-block {
  min-width: 0;
  padding: var(--tpl-space-m) 0;
}
.tpl-block[data-space-top="s"] { padding-top: var(--tpl-space-s); }
.tpl-block[data-space-top="l"] { padding-top: var(--tpl-space-l); }
.tpl-block[data-space-bottom="s"] { padding-bottom: var(--tpl-space-s); }
.tpl-block[data-space-bottom="l"] { padding-bottom: var(--tpl-space-l); }

/* ── 文字：标题字号（titleSize，手机也认）、正文 ─────────────── */
.tpl-heading {
  margin-bottom: .55em;
  font-size: var(--tpl-heading-m);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.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 {
  max-width: var(--tpl-body-measure);
  font-size: calc(var(--tpl-body-size) * var(--scale-tpl-body));
  line-height: 1.65;
  letter-spacing: 0;
}

/* ── 图片 ───────────────────────────────────────────────────── */
.tpl-figure { margin: 0; }
.tpl-media { display: block; background: var(--img-empty); }
.tpl-media img { width: 100%; height: auto; }
.tpl-media.is-empty { aspect-ratio: 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);
}

/* 图文：手机上图在上、字在下 */
.tpl-block[data-type="textImage"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "text";
  row-gap: 24px;
}
.tpl-block[data-type="textImage"] .tpl-text { grid-area: text; }
.tpl-block[data-type="textImage"] .tpl-figure { grid-area: media; }

/* 图集：格子统一比例，按裁切焦点裁；手机固定 2 列 */
.tpl-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tpl-gallery-gap);
}
.tpl-gallery .tpl-media {
  position: relative;
  aspect-ratio: var(--tpl-gallery-ratio);
  overflow: hidden;
}
.tpl-gallery .tpl-media img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* ── 桌面：12 列网格位置和只在桌面生效的预设 ─────────────────── */
@media (min-width: 651px) {
  .tpl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* 没写 grid 的区块占满一行。并排 / 换行和 layout-spec.js 的 gridRows() 是同一条规则（grid-auto-flow: row） */
  .tpl-block { grid-column: var(--col, 1) / span var(--span, 12); }

  /* 图片区块：图占区块多宽（imageSize） */
  .tpl-block[data-type="image"] .tpl-figure { width: var(--tpl-image-m); }
  .tpl-block[data-type="image"][data-image-size="s"] .tpl-figure { width: var(--tpl-image-s); }
  .tpl-block[data-type="image"][data-image-size="l"] .tpl-figure { width: var(--tpl-image-l); }

  /* 图文区块：图在左 / 右（imageSide），图占多宽（imageSize） */
  .tpl-block[data-type="textImage"] {
    --split: var(--tpl-split-m);
    grid-template-columns: var(--split) minmax(0, 1fr);
    grid-template-areas: "media text";
    column-gap: calc(var(--tpl-col-gap) * 2);
    align-items: start;
  }
  .tpl-block[data-type="textImage"][data-image-size="s"] { --split: var(--tpl-split-s); }
  .tpl-block[data-type="textImage"][data-image-size="l"] { --split: var(--tpl-split-l); }
  .tpl-block[data-type="textImage"][data-image-side="right"] {
    grid-template-columns: minmax(0, 1fr) var(--split);
    grid-template-areas: "text media";
  }

  /* 图集列数（galleryCols） */
  .tpl-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tpl-block[data-gallery-cols="2"] .tpl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-block[data-gallery-cols="4"] .tpl-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}