/**
 * 喔图落地页搭建系统 - 全局设计系统 CSS（site.css）
 *
 * 所有规则都在 .cms-host 作用域下，避免污染 CRM 主应用样式。
 * 部署方式：
 *   - CRM 内 iframe 预览：iframe body 加 class="cms-host"
 *   - 未来官网渲染端：页面容器 div 加 class="cms-host"
 *
 * 当前为初稿，所有视觉变量集中在 .cms-host 顶部，调一处全局生效。
 */

/* ================================================================
   第 1 层：设计 token（CSS 变量）
   ================================================================ */
.cms-host {
  /* 色板：稳重蓝主色 + 影像暖红强调色 */
  --color-primary: #2970FF;
  --color-primary-hover: #4D86FF;
  --color-accent: #FF5A5F;
  --color-accent-hover: #ff7478;
  --color-text: #1A1A1A;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F7F8FA;
  --color-bg-dark: #0F172A;
  --color-border: #E5E7EB;

  /* 字号 */
  --font-h1: 56px;
  --font-h2: 36px;
  --font-h3: 24px;
  --font-h4: 20px;
  --font-h5: 18px;
  --font-h6: 16px;
  --font-body: 16px;
  --font-caption: 14px;
  --line-height: 1.6;

  /* 间距（8px 倍数） */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, .12);

  /* 容器 / 断点 */
  --container: 1200px;
  --breakpoint-m: 768px;
}

/* M 端 token 自动收缩 */
@media (max-width: 768px) {
  .cms-host {
    --font-h1: 36px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-h4: 18px;
    --font-h5: 16px;
    --font-h6: 14px;
    --space-15: 64px;
    --space-10: 48px;
    --space-8: 40px;
  }
}

/* ================================================================
   第 2 层：通用基础（reset / 容器 / 按钮 / 工具类）
   ================================================================ */
.cms-host,
.cms-host *,
.cms-host *::before,
.cms-host *::after {
  box-sizing: border-box;
}

.cms-host {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}

.cms-host h1,
.cms-host h2,
.cms-host h3,
.cms-host h4,
.cms-host h5,
.cms-host h6,
.cms-host p {
  margin: 0;
}

.cms-host img {
  max-width: 100%;
  display: block;
}

.cms-host a {
  color: inherit;
  text-decoration: none;
}

/* 通用容器：约束最大宽度 + 左右内边距 */
.cms-host .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* 通用按钮（区块内可复用） */
.cms-host .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}

.cms-host .btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.cms-host .btn--primary:hover {
  background: var(--color-primary-hover);
}

.cms-host .btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.cms-host .btn--accent:hover {
  background: var(--color-accent-hover);
}

.cms-host .btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.cms-host .btn--ghost:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ================================================================
   第 3 层：区块样式（BEM 命名）
   每个区块根标签都带 .page-block 基础类
   左右边距统一在 .page-block 这一层，默认 8px；
   需要更大安全边距时使用 .page-block--inset-auto。
   全宽区块（如未来的 banner / section）需要在自身规则里把 padding-left/right 重置为 0。
   ================================================================ */
.cms-host .page-block {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/* ---------- Banner（顶部大图） ---------- */
.cms-host .banner {
  position: relative;
  padding: var(--space-15) 0;
  overflow: hidden;
}

.cms-host .banner--dark {
  background: var(--color-bg-dark);
  color: #fff;
}

.cms-host .banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .banner__title {
  font-size: var(--font-h1);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.cms-host .banner__subtitle {
  font-size: var(--font-h4);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.cms-host .banner--dark .banner__subtitle {
  color: rgba(255, 255, 255, .72);
}

.cms-host .banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.cms-host .banner__bg--m {
  display: none;
}

@media (max-width: 768px) {
  .cms-host .banner__bg--pc {
    display: none;
  }
  .cms-host .banner__bg--m {
    display: block;
  }
}

/* ---------- Section（带背景容器，可嵌套子区块） ---------- */
.cms-host .section {
  padding: var(--space-10) 0;
}

.cms-host .section--soft {
  background: var(--color-bg-soft);
}

.cms-host .section--dark {
  background: var(--color-bg-dark);
  color: #fff;
}

.cms-host .section__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .section__title {
  font-size: var(--font-h2);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--space-3);
}

.cms-host .section__subtitle {
  font-size: var(--font-h4);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 var(--space-6);
}

.cms-host .section--dark .section__subtitle {
  color: rgba(255, 255, 255, .72);
}

/* ---------- Heading（独立标题） ---------- */
.cms-host .heading {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  text-align: center;
}

.cms-host .heading__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .heading--h1 .heading__text { font-size: var(--font-h1); font-weight: 700; }
.cms-host .heading--h2 .heading__text { font-size: var(--font-h2); font-weight: 700; }
.cms-host .heading--h3 .heading__text { font-size: var(--font-h3); font-weight: 600; }
.cms-host .heading--h4 .heading__text { font-size: var(--font-h4); font-weight: 600; }
.cms-host .heading--h5 .heading__text { font-size: var(--font-h5); font-weight: 600; }
.cms-host .heading--h6 .heading__text { font-size: var(--font-h6); font-weight: 600; }

.cms-host .heading--left  { text-align: left; }
.cms-host .heading--right { text-align: right; }

/* ---------- Paragraph（正文段落，富文本） ---------- */
/*
  左右安全间距统一在外层 .page-block 上，paragraph 这里只负责上下间距。
  普通段落和卡片款（paragraph--card-*）的 inner 都不再各自加左右 padding，
  天然共享同一个 max-width 居中容器，所以不会出现"卡片背景比普通段落文字更靠外"。
*/
.cms-host .paragraph {
  --paragraph-line-height: 1.7;
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.cms-host .paragraph__inner {
  position: relative;
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
  font-size: var(--font-body);
  color: var(--color-text-secondary);
  line-height: var(--paragraph-line-height);
}

/* 内容宽度修饰符：默认 lg（1200），其它通过 modifier 覆盖 */
.cms-host .paragraph__inner             { max-width: var(--container); }
.cms-host .paragraph__inner--sm         { max-width: 680px; }
.cms-host .paragraph__inner--md         { max-width: 900px; }
.cms-host .paragraph__inner--lg         { max-width: var(--container); }
.cms-host .paragraph__inner--full       { max-width: 100%; }

/* 整段对齐 */
.cms-host .paragraph__inner--center  { text-align: center; }
.cms-host .paragraph__inner--right   { text-align: right; }
.cms-host .paragraph__inner--justify { text-align: justify; }

/* 富文本内部元素默认排版（覆盖浏览器默认 + Quill 输出） */
.cms-host .paragraph__inner > * { break-inside: avoid; }
.cms-host .paragraph__inner p {
  /* 段间距由 16 收紧到 8，避免卡片内多段排版"行距过大、显得空" */
  margin: 0 0 var(--space-1);
  line-height: inherit;
}
.cms-host .paragraph__inner p:last-child { margin-bottom: 0; }

.cms-host .paragraph__inner h1,
.cms-host .paragraph__inner h2,
.cms-host .paragraph__inner h3,
.cms-host .paragraph__inner h4,
.cms-host .paragraph__inner h5,
.cms-host .paragraph__inner h6 {
  /* 标题与上方段落、下方正文都收紧一档，避免在卡片内显得过于空旷 */
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-text);
  line-height: 1.35;
  font-weight: 700;
}
.cms-host .paragraph__inner h1 { font-size: var(--font-h1); }
.cms-host .paragraph__inner h2 { font-size: var(--font-h2); }
.cms-host .paragraph__inner h3 { font-size: var(--font-h3); }
.cms-host .paragraph__inner h4 { font-size: var(--font-h4); }
.cms-host .paragraph__inner h5 { font-size: var(--font-h5); }
.cms-host .paragraph__inner h6 { font-size: var(--font-h6); }
.cms-host .paragraph__inner h1:first-child,
.cms-host .paragraph__inner h2:first-child,
.cms-host .paragraph__inner h3:first-child,
.cms-host .paragraph__inner h4:first-child,
.cms-host .paragraph__inner h5:first-child,
.cms-host .paragraph__inner h6:first-child {
  margin-top: 0;
}

.cms-host .paragraph__inner ul,
.cms-host .paragraph__inner ol {
  /* 列表底部留白与 p 保持一致，避免卡片内拉得过开 */
  margin: 0 0 var(--space-1);
  padding-left: 1.5em;
}
.cms-host .paragraph__inner ul > li { list-style: disc !important; }
.cms-host .paragraph__inner ol > li { list-style: decimal !important; }
.cms-host .paragraph__inner li { margin: 0 0 4px; }
.cms-host .paragraph__inner li:last-child { margin-bottom: 0; }

.cms-host .paragraph__inner blockquote {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-text);
}

.cms-host .paragraph__inner strong { color: var(--color-text); font-weight: 600; }
.cms-host .paragraph__inner em     { font-style: italic; }
.cms-host .paragraph__inner s      { text-decoration: line-through; opacity: .7; }

.cms-host .paragraph__inner a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cms-host .paragraph__inner a:hover { opacity: .85; }

/* Quill 输出的对齐 class（ql-align-center/right/justify） */
.cms-host .paragraph__inner .ql-align-center  { text-align: center; }
.cms-host .paragraph__inner .ql-align-right   { text-align: right; }
.cms-host .paragraph__inner .ql-align-justify { text-align: justify; }

/* 兼容老版纯文本段落（v1）数据：仍然能被 site.css 渲染 */
.cms-host .paragraph--center .paragraph__inner { text-align: center; }
.cms-host .paragraph--bold   .paragraph__inner { font-weight: 600; color: var(--color-text); }

/* ---------- Paragraph 卡片皮肤（背景 / 内边距 / 圆角，三件可独立组合） ---------- */
/* 卡片背景：6 种预设色（基于品牌主色与常见情绪色） */
.cms-host .paragraph--card-blue   .paragraph__inner { background: #eef4ff; }
.cms-host .paragraph--card-pink   .paragraph__inner { background: #fef0f3; }
.cms-host .paragraph--card-green  .paragraph__inner { background: #ecfdf5; }
.cms-host .paragraph--card-yellow .paragraph__inner { background: #fefce8; }
.cms-host .paragraph--card-purple .paragraph__inner { background: #f5f3ff; }
.cms-host .paragraph--card-gray   .paragraph__inner { background: #f7f8fa; }

/* 新版自定义背景：背景色 / 背景图通过 inline CSS 变量注入 */
.cms-host .paragraph--has-bg .paragraph__inner {
  background-color: var(--paragraph-bg-color);
}

.cms-host .paragraph--has-bg-image .paragraph__inner {
  background-image: var(--paragraph-bg-image);
  background-repeat: no-repeat;
  background-size: var(--paragraph-bg-size, cover);
  background-position: var(--paragraph-bg-position, center);
}

/* 背景区域内边距（覆盖 inner 默认的 0 var(--space-3)） */
.cms-host .paragraph--pad-sm .paragraph__inner { padding: 8px 12px; }
.cms-host .paragraph--pad-md .paragraph__inner { padding: 12px 16px; }
.cms-host .paragraph--pad-lg .paragraph__inner { padding: 16px 20px; }

/* 背景区域圆角 */
.cms-host .paragraph--radius-sm .paragraph__inner { border-radius: 4px; }
.cms-host .paragraph--radius-md .paragraph__inner { border-radius: 8px; }
.cms-host .paragraph--radius-lg .paragraph__inner { border-radius: 16px; }

/* 移动端：背景区域内边距收紧，避免占据过多屏幕宽度
   注：外层左右安全间距已统一在 .page-block 上处理，此处不再单独追加，避免背景区域比其他组件多缩进。 */
@media (max-width: 640px) {
  .cms-host .paragraph--pad-sm .paragraph__inner { padding: 8px 10px; }
  .cms-host .paragraph--pad-md .paragraph__inner { padding: 10px 12px; }
  .cms-host .paragraph--pad-lg .paragraph__inner { padding: 12px 14px; }
}
.cms-host[data-device="m"] .paragraph--pad-sm .paragraph__inner { padding: 8px 10px; }
.cms-host[data-device="m"] .paragraph--pad-md .paragraph__inner { padding: 10px 12px; }
.cms-host[data-device="m"] .paragraph--pad-lg .paragraph__inner { padding: 12px 14px; }

/* ---------- Image（单图，支持自适应、点击链接） ---------- */
.cms-host .image-block {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  text-align: center;
}

.cms-host .image-block__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .image-block__media {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.cms-host .image-block--full .image-block__media,
.cms-host .image-block[class*="image-block--ratio-"] .image-block__media {
  display: block;
  width: 100%;
}

.cms-host .image-block__img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-md);
  vertical-align: top;
}

.cms-host .image-block--rounded .image-block__img { border-radius: var(--radius-lg); }
.cms-host .image-block--circle  .image-block__img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.cms-host .image-block--full    .image-block__img { width: 100%; }

.cms-host .image-block--ratio-1-1  .image-block__img { aspect-ratio: 1 / 1; }
.cms-host .image-block--ratio-4-3  .image-block__img { aspect-ratio: 4 / 3; }
.cms-host .image-block--ratio-3-2  .image-block__img { aspect-ratio: 3 / 2; }
.cms-host .image-block--ratio-16-9 .image-block__img { aspect-ratio: 16 / 9; }
.cms-host .image-block--ratio-21-9 .image-block__img { aspect-ratio: 21 / 9; }

.cms-host .image-block[class*="image-block--ratio-"] .image-block__img {
  display: block;
  width: 100%;
  object-position: center;
}

.cms-host .image-block--fit-cover .image-block__img {
  object-fit: cover;
}

.cms-host .image-block--fit-contain .image-block__img {
  object-fit: contain;
  background: var(--color-bg-soft);
}

/* 图注 */
.cms-host .image-block__caption {
  margin-top: var(--space-1);
  font-size: var(--font-caption);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 图注对齐：只影响文案，不改变图片本体位置 */
.cms-host .image-block__caption--left   { text-align: left; }
.cms-host .image-block__caption--center { text-align: center; }
.cms-host .image-block__caption--right  { text-align: right; }

/* 链接包裹时去掉 inline 元素的下划线 */
.cms-host .image-block__link {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
}

.cms-host .image-block[class*="image-block--ratio-"] .image-block__link,
.cms-host .image-block--full .image-block__link {
  display: block;
  width: 100%;
}

/* 占位（未上传图片） */
.cms-host .image-block--placeholder .image-block__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 200px;
  background: #f7f8fa;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-size: var(--font-caption);
}
.cms-host .image-block--placeholder .image-block__placeholder i {
  font-size: 36px;
  color: var(--color-border);
}

.cms-host .image-block--placeholder .image-block__placeholder--uploading {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.cms-host .image-block--placeholder .image-block__placeholder--uploading i {
  color: #2970FF;
}

/* ---------- Video（嵌入视频，支持封面） ---------- */
.cms-host .video-block {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.cms-host .video-block__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .video-block__player {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cms-host .video-block--ratio-1-1  .video-block__player { aspect-ratio: 1 / 1; }
.cms-host .video-block--ratio-4-3  .video-block__player { aspect-ratio: 4 / 3; }
.cms-host .video-block--ratio-3-2  .video-block__player { aspect-ratio: 3 / 2; }
.cms-host .video-block--ratio-16-9 .video-block__player { aspect-ratio: 16 / 9; }
.cms-host .video-block--ratio-21-9 .video-block__player { aspect-ratio: 21 / 9; }

.cms-host .video-block__player video,
.cms-host .video-block__player iframe {
  width: 100%;
  border: 0;
  display: block;
}

.cms-host .video-block[class*="video-block--ratio-"] .video-block__player video,
.cms-host .video-block[class*="video-block--ratio-"] .video-block__player iframe {
  height: 100%;
}

.cms-host .video-block--fit-cover .video-block__player video,
.cms-host .video-block--fit-cover .video-block__player iframe {
  object-fit: cover;
}

.cms-host .video-block--fit-contain .video-block__player video,
.cms-host .video-block--fit-contain .video-block__player iframe {
  object-fit: contain;
  background: #000;
}

.cms-host .video-block__caption {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-caption);
  text-align: center;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 说明文字对齐：只影响文案，不改变视频本体位置 */
.cms-host .video-block__caption--left   { text-align: left; }
.cms-host .video-block__caption--center { text-align: center; }
.cms-host .video-block__caption--right  { text-align: right; }

/* 占位（未上传/未填 URL） */
.cms-host .video-block--placeholder .video-block__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 9;
  background: #f7f8fa;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-size: var(--font-caption);
}
.cms-host .video-block--placeholder.video-block--ratio-1-1  .video-block__placeholder { aspect-ratio: 1 / 1; }
.cms-host .video-block--placeholder.video-block--ratio-4-3  .video-block__placeholder { aspect-ratio: 4 / 3; }
.cms-host .video-block--placeholder.video-block--ratio-3-2  .video-block__placeholder { aspect-ratio: 3 / 2; }
.cms-host .video-block--placeholder.video-block--ratio-16-9 .video-block__placeholder { aspect-ratio: 16 / 9; }
.cms-host .video-block--placeholder.video-block--ratio-21-9 .video-block__placeholder { aspect-ratio: 21 / 9; }
.cms-host .video-block--placeholder .video-block__placeholder i {
  font-size: 36px;
  color: var(--color-border);
}

.cms-host .video-block--placeholder .video-block__placeholder--uploading {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.cms-host .video-block--placeholder .video-block__placeholder--uploading i {
  color: #2970FF;
}

.cms-host .video-block__progress {
  width: min(320px, 72%);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

.cms-host .video-block__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2970FF;
  transition: width .2s ease;
}

/* 上传中遮罩：用于已有图片、视频封面、卡片背景和正文背景的替换过程 */
.cms-host .cms-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: inherit;
  background: rgba(239, 246, 255, .84);
  color: #1d4ed8;
  pointer-events: none;
}

.cms-host .cms-upload-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(320px, 86%);
  font-size: var(--font-caption);
  text-align: center;
}

.cms-host .cms-upload-overlay__box i {
  font-size: 28px;
  color: #2970FF;
}

.cms-host .cms-upload-progress {
  width: min(320px, 72%);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

.cms-host .cms-upload-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2970FF;
  transition: width .2s ease;
}

/* ---------- Link（链接：箭头/纯文字/按钮 三种形态） ---------- */
.cms-host .link-block {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  text-align: center;
}

.cms-host .link-block__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

/* 对齐方式 */
.cms-host .link-block--left   { text-align: left; }
.cms-host .link-block--right  { text-align: right; }

/* 默认带箭头的指引链接 */
.cms-host .link-block__a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: var(--font-body);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.cms-host .link-block__a:hover {
  border-bottom-color: var(--color-primary);
}

.cms-host .link-block--arrow .link-block__a::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
}

/* 纯文字链（无箭头，带下划线） */
.cms-host .link-block__a--plain {
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: none;
}
.cms-host .link-block__a--plain:hover {
  opacity: .8;
  border-bottom: none;
}

/* ---------- Button（独立放置的行动按钮） ---------- */
.cms-host .button-block {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  text-align: center;
}

.cms-host .button-block--left  { text-align: left; }
.cms-host .button-block--right { text-align: right; }

/* 按钮本身复用 .btn 工具类，区块只控制对齐 */

/* ---------- Divider（分割线） ---------- */
.cms-host .divider {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.cms-host .divider__line {
  height: 1px;
  background: var(--color-border);
  max-width: var(--container);
  margin: 0 auto;
}

.cms-host .divider--thick .divider__line { height: 2px; }
.cms-host .divider--dashed .divider__line {
  background: transparent;
  border-top: 1px dashed var(--color-border);
  height: 0;
}

/* ---------- ImageTextRow（图文左右版） ---------- */
.cms-host .image-text-row {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.cms-host .image-text-row__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

.cms-host .image-text-row--reverse .image-text-row__inner > .image-text-row__image { order: 2; }
.cms-host .image-text-row--reverse .image-text-row__inner > .image-text-row__content { order: 1; }

.cms-host .image-text-row__image {
  width: 100%;
  border-radius: var(--radius-lg);
}

.cms-host .image-text-row__title {
  font-size: var(--font-h2);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.cms-host .image-text-row__desc {
  font-size: var(--font-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height);
  margin: 0 0 var(--space-4);
  white-space: pre-line;
}

@media (max-width: 768px) {
  .cms-host .image-text-row__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------- Card 卡片 ---------- */
.cms-host .card {
  background-color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  transition: all .2s ease;
  overflow: hidden;
}

.cms-host .card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cms-host .card__title {
  font-size: var(--font-h4);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.cms-host .card__desc {
  color: var(--color-text-secondary);
  font-size: var(--font-body);
  line-height: var(--line-height);
  margin: 0;
  white-space: pre-line;
}

/* CTA 链接 */
.cms-host .card__link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}
.cms-host .card__link:hover { opacity: .75; }

.cms-host .card--has-bg {
  background-color: var(--card-bg-color);
}

.cms-host .card--has-bg-image {
  background-image: var(--card-bg-image);
  background-repeat: no-repeat;
  background-size: var(--card-bg-size, cover);
  background-position: var(--card-bg-position, center);
}

/* 居中卡片 */
.cms-host .card--center {
  text-align: center;
}

/* ---------- Card 单卡片（独立放页面） ---------- */
.cms-host .card-block {
  /* 仅设上下 padding，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.cms-host .card-block__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* padding: 0 var(--space-3); */
}

/* 单卡片不撑满宽度，避免一张卡占满整行视觉笨重 */
.cms-host .card-block .card {
  position: relative;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- Columns 多栏布局（容器型，可放任意叶子区块） ---------- */
/* 上下间距统一走 .page-block--gap-*，此处只负责栏布局本身 */
.cms-host .columns {
  /* 仅设上下 padding 兜底，避免 shorthand 把 .page-block 的左右安全间距覆盖为 0 */
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.cms-host .columns__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  /* --columns-template 由 inline style 提供（自由比例时）；缺省走 --columns-default 等宽 fallback */
  grid-template-columns: var(--columns-template, var(--columns-default));
  align-items: stretch;
}

.cms-host .columns__item {
  display: flex;
  min-width: 0;
}

.cms-host .columns__item > .page-block {
  flex: 1;
}

.cms-host .columns__mobile {
  display: none;
}

/*
  槽内子区块上下 padding 收紧
  - 子区块的左右 padding 仍保留（保证内部内容有呼吸空间）
  - 先清掉区块自身默认 padding，再让 page-block--gap-* 显式档位接管上下间距
  - 仅作用于直接子级，不影响嵌套更深层的 .page-block
*/
.cms-host .columns__item > .page-block {
  padding-top: 0;
  padding-bottom: 0;
}
.cms-host .columns__item > .page-block--gap-none   { padding-top: 0;    padding-bottom: 0; }
.cms-host .columns__item > .page-block--gap-tight  { padding-top: 8px;  padding-bottom: 8px; }
.cms-host .columns__item > .page-block--gap-normal { padding-top: 16px; padding-bottom: 16px; }
.cms-host .columns__item > .page-block--gap-loose  { padding-top: 24px; padding-bottom: 24px; }
.cms-host .columns__item > .page-block--gap-xlarge { padding-top: 32px; padding-bottom: 32px; }

/* 等宽 fallback：与 inline --columns-template 形成"用户配 → 覆盖默认"的层级 */
.cms-host .columns--cols-2 { --columns-default: 1fr 1fr; }
.cms-host .columns--cols-3 { --columns-default: 1fr 1fr 1fr; }
.cms-host .columns--cols-4 { --columns-default: 1fr 1fr 1fr 1fr; }

/* 栏间距（5 档） */
.cms-host .columns--gap-none .columns__inner { gap: 0; }
.cms-host .columns--gap-xs .columns__inner { gap: 8px; }
.cms-host .columns--gap-sm .columns__inner { gap: 16px; }
.cms-host .columns--gap-md .columns__inner { gap: 24px; }
.cms-host .columns--gap-lg .columns__inner { gap: 40px; }

/* 移动端：自动塌成 1 列；inline --columns-template 也被 !important 覆盖 */
@media (max-width: 768px) {
  .cms-host .columns__inner {
    display: none;
  }

  /* M 端改成单列后，用列表间距补回原本由栏间距提供的分隔感 */
  .cms-host .columns__mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}
.cms-host[data-device="m"] .columns__inner {
  display: none;
}
/* 预览器显式切到 M 端时，同样走单列间距 */
.cms-host[data-device="m"] .columns__mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ================================================================
   第 4 层：用户可调样式 modifier（属性面板暴露给搭建者使用）
   - 离散档位通过 BEM modifier 实现，HTML 仅产出 class、不产出 inline style
   - 写在所有区块根类规则之后，靠 cascade 顺序覆盖区块默认 padding/margin
   - 命名规范：page-block--gap-* (区块上下间距) / page-block--inset-* (左右边距) / paragraph--pgap-* (段间距)
              heading--lh-* (行高)
   ================================================================ */

/* 区块上下间距（所有区块通用，PropertyPanel 字段 spacing） */
.cms-host .page-block--gap-none   { padding-top: 0;    padding-bottom: 0; }
.cms-host .page-block--gap-tight  { padding-top: 8px;  padding-bottom: 8px; }
.cms-host .page-block--gap-normal { padding-top: 16px; padding-bottom: 16px; }
.cms-host .page-block--gap-loose  { padding-top: 24px; padding-bottom: 24px; }
.cms-host .page-block--gap-xlarge { padding-top: 32px; padding-bottom: 32px; }

/* 区块左右边距（所有区块通用，PropertyPanel 字段 inset） */
.cms-host .page-block--inset-none   { padding-left: 0; padding-right: 0; }
.cms-host .page-block--inset-tight  { padding-left: 8px; padding-right: 8px; }
.cms-host .page-block--inset-normal { padding-left: 16px; padding-right: 16px; }
.cms-host .page-block--inset-loose  { padding-left: 32px; padding-right: 32px; }
.cms-host .page-block--inset-auto   { padding-left: clamp(16px, 5%, 48px); padding-right: clamp(16px, 5%, 48px); }

/* Paragraph 段间距（控制 p / ul / ol 之间的距离，PropertyPanel 字段 paraGap） */
.cms-host .paragraph--pgap-tight  .paragraph__inner p,
.cms-host .paragraph--pgap-tight  .paragraph__inner ul,
.cms-host .paragraph--pgap-tight  .paragraph__inner ol  { margin-bottom: 4px; }
.cms-host .paragraph--pgap-normal .paragraph__inner p,
.cms-host .paragraph--pgap-normal .paragraph__inner ul,
.cms-host .paragraph--pgap-normal .paragraph__inner ol  { margin-bottom: 8px; }
.cms-host .paragraph--pgap-loose  .paragraph__inner p,
.cms-host .paragraph--pgap-loose  .paragraph__inner ul,
.cms-host .paragraph--pgap-loose  .paragraph__inner ol  { margin-bottom: 16px; }
/* 末项不留底部 margin，避免卡片底部多出空白；优先级高于 modifier 的 margin-bottom */
.cms-host .paragraph__inner p:last-child,
.cms-host .paragraph__inner ul:last-child,
.cms-host .paragraph__inner ol:last-child { margin-bottom: 0; }

/* Heading 文字行高（PropertyPanel 字段 lineHeight） */
.cms-host .heading--lh-tight  .heading__text { line-height: 1.1; }
.cms-host .heading--lh-normal .heading__text { line-height: 1.4; }
.cms-host .heading--lh-loose  .heading__text { line-height: 1.7; }

/* ================================================================
   编辑器内强制 M 端预览（不依赖视口宽度）
   通过给 .cms-host 加 data-device="m" 即可模拟 M 端样式
   未来 iframe 预览以视口宽度为准时仍依赖 @media，本规则只在编辑器中起作用
   ================================================================ */
.cms-host[data-device="m"] {
  --font-h1: 36px;
  --font-h2: 28px;
  --font-h3: 20px;
  --font-h4: 18px;
  --space-15: 64px;
  --space-10: 48px;
  --space-8: 40px;
}

.cms-host[data-device="m"] .banner__bg--pc { display: none; }
.cms-host[data-device="m"] .banner__bg--m { display: block; }

.cms-host[data-device="m"] .image-text-row__inner {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}