/* =============================================================================
 *  东途检测官网 · 区块组件样式
 *  ---------------------------------------------------------------------------
 *  这套样式同时被「前台页面」和「后台预览画布」使用，所以后台看到的
 *  就是客户看到的。主题色等变量由 :root 提供默认值，后台可以在
 *  「主题风格」里覆盖（服务端会渲染成一段 <style> 覆盖这些变量）。
 *
 *  配色：青蓝渐变（cyan → blue）。渐变本身是由 --dt-grad-from / --dt-grad-to
 *  两个「端点色」算出来的（--dt-grad / --dt-grad-soft / --dt-grad-deep），
 *  所以后台只要改这两个端点色，全站的渐变就整体跟着换 —— 不用去改每一处
 *  linear-gradient。这也是为什么这里没有把渐变写死成常量。
 *
 *  命名约定：dt- 前缀，避免和旧样式冲突。
 * ========================================================================== */

:root {
  /* ---- 青蓝主体的三档颜色（与 css/style.css 的「壳」保持同一套） ---- */
  --dt-primary: #0b6fa4;
  --dt-primary-dark: #07496e;
  --dt-accent: #06b6d4;
  --dt-text: #0f2233;
  --dt-muted: #56707f;
  --dt-bg: #ffffff;
  --dt-bg-alt: #f1f8fd;
  --dt-border: #d9e8f3;
  --dt-radius: 14px;
  --dt-btn-radius: 8px;
  --dt-container: 1180px;
  --dt-section-gap: 0px;
  --dt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --dt-heading-font: var(--dt-font);

  /* ---- 渐变端点色：后台「主题风格」可覆盖 ---- */
  --dt-grad-from: #0b6fa4;   /* 起点：青蓝 */
  --dt-grad-to:   #06b6d4;   /* 终点：亮青 */
  /* ---- 由端点色派生的三个渐变 ---- */
  --dt-grad:      linear-gradient(118deg, var(--dt-grad-from) 0%, var(--dt-grad-to) 100%);
  --dt-grad-deep: linear-gradient(125deg, #052a41 0%, #07496e 46%, var(--dt-grad-from) 100%);
  --dt-grad-soft: linear-gradient(118deg, #e4f5fb 0%, #e7f1fb 100%);

  --dt-shadow-soft: 0 6px 20px rgba(11, 111, 164, .09);
  --dt-shadow-strong: 0 16px 42px rgba(11, 111, 164, .17);

  /* ---- 底部区域（页脚）配色：后台「主题风格 → 底部区域」可覆盖 ---- */
  --dt-footer-bg: #08344f;      /* 背景起点色（上） */
  --dt-footer-bg-to: #05212f;   /* 背景终点色（下） */
  --dt-footer-text: #a8c6d6;    /* 正文文字 */
  --dt-footer-muted: #6f8ba0;   /* 次要文字（英文名、链接） */
  --dt-footer-title: #ffffff;   /* 小标题 */

  /* 统一动效曲线 */
  --dt-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 兼容不支持 color-mix() 的老浏览器：给几个常用组合兜个底 */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .dt-eyebrow { background: #e4f5fb; }
  .dt-btn-primary { box-shadow: 0 3px 14px rgba(6, 182, 212, .28); }
  .dt-btn-ghost { background: transparent; }
  .dt-btn-ghost:hover { background: #eaf6fb; }
  .dt-form-row input:focus,
  .dt-form-row select:focus,
  .dt-form-row textarea:focus { box-shadow: 0 0 0 3px rgba(6, 182, 212, .16); }
  .dt-card-bordered:hover,
  .dt-card-filled:hover { border-color: #a9dcec; }
}

/* ---------------------------------------------------------------- 基础重置 */

.dt-page,
.dt-canvas {
  font-family: var(--dt-font);
  color: var(--dt-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.dt-page *, .dt-page *::before, .dt-page *::after,
.dt-canvas *, .dt-canvas *::before, .dt-canvas *::after { box-sizing: border-box; }

.dt-block { position: relative; }
.dt-block + .dt-block { margin-top: var(--dt-section-gap); }

/* ------------------------------------------------------------ 面包屑导航 */
/* 内页路径导航：首页不显示；普通内页「首页 / 页面标题」，
   资讯详情「首页 / 资讯中心 / 文章标题」（由服务端给 breadcrumb）。 */
.dt-breadcrumb {
  width: 100%;
  max-width: var(--dt-container);
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--dt-muted);
}
.dt-breadcrumb a { color: var(--dt-muted); text-decoration: none; transition: color .2s var(--dt-ease); }
.dt-breadcrumb a:hover { color: var(--dt-primary); }
.dt-breadcrumb .dt-crumb-sep { color: rgba(128, 145, 160, .55); }
.dt-breadcrumb .dt-crumb-current { color: var(--dt-text); font-weight: 600; }
/* 面包屑下面紧跟着的区块不再额外撑开间距 */
.dt-breadcrumb + .dt-block { margin-top: 12px; }

/* 资讯详情页：正文内容宽度统一 1130px（需求 3） */
.dt-page-article .dt-richtext { max-width: 1130px; }
.dt-page-article .dt-text > .dt-container { max-width: 1130px; }
.dt-page-article .dt-head { max-width: 1130px; }

/* 「关于我们」等图文正文页：标题与正文铺满容器、不再被 760/860px 的
   可读性宽度截断，文字到右边才换行（需求：铺满右侧空位再换行） */
.dt-page-about .dt-text .dt-head,
.dt-page-about .dt-text .dt-richtext { max-width: none; }
.dt-page-about .dt-text > .dt-container { max-width: 1130px; }

.dt-container {
  width: 100%;
  max-width: var(--dt-container);
  margin: 0 auto;
  padding: 0 24px;
}
.dt-container-full { max-width: none; }

/* 宽度档位（区块的「内容宽度」） */
.dt-w-narrow > .dt-container { max-width: 760px; }
.dt-w-normal > .dt-container { max-width: 1140px; }
.dt-w-wide   > .dt-container { max-width: 1400px; }
.dt-w-full   > .dt-container { max-width: none; }

/* 对齐档位 */
.dt-a-center { text-align: center; }
.dt-a-center .dt-head { margin-left: auto; margin-right: auto; }
.dt-a-right { text-align: right; }

/* 阴影档位 */
.dt-shadow-soft   { box-shadow: var(--dt-shadow-soft); }
.dt-shadow-strong { box-shadow: var(--dt-shadow-strong); }

/* 背景层（图片 + 遮罩），绝对定位铺满，不挡点击 */
.dt-bg,
.dt-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.dt-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.dt-bg-overlay { z-index: 1; }
.dt-block > .dt-container,
.dt-block > .dt-head { position: relative; z-index: 2; }
.dt-block > .dt-container { z-index: 2; }

/* ------------------------------------------------------------------ 通用件 */

.dt-head { max-width: 760px; margin-bottom: 40px; }
.dt-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dt-primary);
  background: color-mix(in srgb, var(--dt-primary) 10%, transparent);
  border-radius: 100px;
}
.dt-head-title {
  margin: 0 0 12px;
  font-family: var(--dt-heading-font);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -.01em;
}
.dt-head-sub { margin: 0; color: var(--dt-muted); font-size: 16px; }

.dt-grid { display: grid; gap: 20px; }
.dt-cols-1 { grid-template-columns: 1fr; }
.dt-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dt-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dt-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dt-a-center .dt-btns { justify-content: center; }
.dt-a-right .dt-btns { justify-content: flex-end; }

.dt-btn {
  display: inline-block;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--dt-btn-radius);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.dt-btn:hover { transform: translateY(-1px); }
.dt-btn-primary {
  color: #fff;
  background: var(--dt-primary);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--dt-primary) 32%, transparent);
}
.dt-btn-primary:hover { background: var(--dt-primary-dark); }
.dt-btn-ghost {
  color: var(--dt-primary);
  background: transparent;
  border-color: var(--dt-primary);
}
.dt-btn-ghost:hover { background: color-mix(in srgb, var(--dt-primary) 8%, transparent); }

.dt-tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 9px;
  font-size: 12px;
  color: var(--dt-muted);
  background: var(--dt-bg-alt);
  border: 1px solid var(--dt-border);
  border-radius: 100px;
}
.dt-empty,
.dt-empty-page {
  padding: 34px 20px;
  text-align: center;
  color: var(--dt-muted);
  border: 1px dashed var(--dt-border);
  border-radius: var(--dt-radius);
  background: var(--dt-bg-alt);
}
.dt-empty-page { margin: 60px auto; max-width: 560px; }

/* ------------------------------------------------------------------- 横幅 */

.dt-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 80px 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--dt-primary-dark), var(--dt-primary));
}
.dt-hero-small { min-height: 500px; }
.dt-hero-tall  { min-height: 640px; }
.dt-hero-full  { min-height: 100vh; }
.dt-hero-auto  { min-height: 380px; }

.dt-hero-img, .dt-hero-video, .dt-hero-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.dt-hero-img { background-size: cover; background-position: center; }
.dt-hero-video { object-fit: cover; }
.dt-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--dt-container); padding: 0 24px; text-align: center; }
.dt-hero-title {
  margin: 0 0 16px;
  font-family: var(--dt-heading-font);
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .28);
}
.dt-hero-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 14px;
  font-size: 13px;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 100px;
}
.dt-hero-sub {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255, 255, 255, .9);
}
.dt-hero .dt-a-center .dt-hero-sub { margin-left: auto; margin-right: auto; }
.dt-hero .dt-btn-primary { background: #fff; color: var(--dt-primary-dark); }
.dt-hero .dt-btn-primary:hover { background: #f0f4f2; }
.dt-hero .dt-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.dt-hero .dt-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.dt-hero-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  width: 22px; height: 34px;
  margin-left: -11px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 100px;
}
.dt-hero-scroll::after {
  content: ''; position: absolute; left: 50%; top: 7px;
  width: 4px; height: 6px; margin-left: -2px;
  background: rgba(255, 255, 255, .85);
  border-radius: 2px;
  animation: dt-scroll 1.6s infinite;
}
@keyframes dt-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------- 数据看板 */

.dt-stats .dt-stat { padding: 8px 4px; }
.dt-stat-value {
  font-family: var(--dt-heading-font);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--dt-primary);
  letter-spacing: -.02em;
}
.dt-stat-suffix { font-size: .48em; font-weight: 600; margin-left: 3px; }
.dt-stat-label { margin-top: 6px; font-size: 15px; color: var(--dt-muted); }

/* --------------------------------------------------------------- 卡片网格 */

.dt-card {
  padding: 26px 22px;
  background: var(--dt-bg);
  border-radius: var(--dt-radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dt-card-bordered { border: 1px solid var(--dt-border); }
.dt-card-filled { background: var(--dt-bg-alt); }
.dt-cards-plain .dt-card { padding: 18px 4px; background: transparent; }
.dt-cards-image .dt-card { padding: 0; overflow: hidden; border: 1px solid var(--dt-border); }
.dt-cards-image .dt-card-title,
.dt-cards-image .dt-card-desc,
.dt-cards-image .dt-card-tags,
.dt-cards-image .dt-card-more { margin-left: 20px; margin-right: 20px; }
.dt-cards-image .dt-card-more { margin-bottom: 22px; }
.dt-cards-image .dt-card-tags { margin-bottom: 12px; }
.dt-card-bordered:hover,
.dt-card-filled:hover { transform: translateY(-3px); box-shadow: var(--dt-shadow-soft); border-color: color-mix(in srgb, var(--dt-primary) 30%, var(--dt-border)); }

.dt-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dt-bg-alt); }
.dt-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dt-card:hover .dt-card-img img { transform: scale(1.04); }

.dt-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  font-size: 26px;
  line-height: 1;
  background: var(--dt-bg-alt);
  border-radius: 14px;
}
.dt-a-center .dt-card-icon { margin-left: auto; margin-right: auto; }
/* 需求：卡片网格区块设为「居中」时，只让区块大标题（.dt-head）居中；
   卡片内部内容（图标 / 标题 / 说明 / 标签 / 链接）统一靠左 —— 成段说明文字
   居中很难读。图片卡片（资质证书）标题紧贴图片下方，居中更协调，故排除。
   注意 dt-a-center 与 dt-cards 是**同一个 section 元素**上的两个类，
   必须是连写的 .dt-a-center.dt-cards，写成后代选择器（空格）不会命中。 */
.dt-a-center.dt-cards:not(.dt-cards-image) .dt-card { text-align: left; }
.dt-a-center.dt-cards:not(.dt-cards-image) .dt-card-icon { margin-left: 0; margin-right: 0; }
.dt-card-icon-img { padding: 0; overflow: hidden; }
.dt-card-icon-img img { width: 100%; height: 100%; object-fit: cover; }

.dt-card-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.dt-cards-image .dt-card-title { margin-top: 20px; }
.dt-card-desc { margin: 0; font-size: 14.5px; color: var(--dt-muted); line-height: 1.72; }
.dt-card-tags { margin-top: 14px; }
.dt-card-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dt-primary);
  text-decoration: none;
}
.dt-card-more:hover { text-decoration: underline; }

/* ------------------------------------------------------ 企业文化 / 团队 / 资质 */

/* 企业文化：图标在上、标题 + 描述居中的轻量卡片 */
.dt-culture-item {
  padding: 30px 22px; text-align: center;
  background: var(--dt-bg); border-radius: var(--dt-radius);
  border: 1px solid var(--dt-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dt-culture-item:hover {
  transform: translateY(-3px); box-shadow: var(--dt-shadow-soft);
  border-color: color-mix(in srgb, var(--dt-primary) 30%, var(--dt-border));
}
.dt-culture-icon {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin: 0 auto 16px;
  font-size: 30px; line-height: 1;
  background: var(--dt-bg-alt); border-radius: 16px;
}
.dt-culture-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.dt-culture-desc { margin: 0; font-size: 14.5px; color: var(--dt-muted); line-height: 1.72; }

/* 团队风采：头像 + 姓名 + 职位 + 简介的人物卡片 */
.dt-team-item {
  padding: 26px 20px; text-align: center;
  background: var(--dt-bg); border-radius: var(--dt-radius);
  border: 1px solid var(--dt-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dt-team-item:hover {
  transform: translateY(-3px); box-shadow: var(--dt-shadow-soft);
  border-color: color-mix(in srgb, var(--dt-primary) 30%, var(--dt-border));
}
.dt-team-avatar {
  width: 92px; height: 92px; margin: 0 auto 16px;
  border-radius: 50%; overflow: hidden;
  background: var(--dt-bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.dt-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-team-avatar-empty {
  font-size: 34px; font-weight: 700; color: var(--dt-primary);
  background: color-mix(in srgb, var(--dt-primary) 10%, var(--dt-bg-alt));
}
.dt-team-name { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.dt-team-role { margin: 0 0 10px; font-size: 13.5px; color: var(--dt-primary); font-weight: 600; }
.dt-team-desc { margin: 0; font-size: 14px; color: var(--dt-muted); line-height: 1.66; }

/* 资质证书：证书图片（可点放大）+ 名称的展示卡片 */
.dt-qual-item {
  padding: 16px; text-align: center;
  background: var(--dt-bg); border-radius: var(--dt-radius);
  border: 1px solid var(--dt-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dt-qual-item:hover {
  transform: translateY(-3px); box-shadow: var(--dt-shadow-soft);
  border-color: color-mix(in srgb, var(--dt-primary) 30%, var(--dt-border));
}
.dt-qual-img {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px;
  background: var(--dt-bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.dt-qual-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-qual-img-empty {
  font-size: 15px; color: var(--dt-muted); letter-spacing: 2px;
}
.dt-qual-name { margin: 14px 0 4px; font-size: 16px; font-weight: 700; }
.dt-qual-desc { margin: 0; font-size: 13px; color: var(--dt-muted); }

/* ---------------------------------------------------------------- 富文本 */

.dt-richtext { max-width: 860px; }
.dt-a-center .dt-richtext { margin-left: auto; margin-right: auto; }
.dt-richtext-2col { max-width: none; column-count: 2; column-gap: 44px; }
.dt-richtext > *:first-child { margin-top: 0; }
.dt-richtext > *:last-child { margin-bottom: 0; }
.dt-richtext h1, .dt-richtext h2, .dt-richtext h3, .dt-richtext h4 {
  margin: 1.5em 0 .6em;
  font-family: var(--dt-heading-font);
  line-height: 1.34;
  font-weight: 700;
}
.dt-richtext h1 { font-size: 30px; }
.dt-richtext h2 { font-size: 25px; }
.dt-richtext h3 { font-size: 20px; }
.dt-richtext h4 { font-size: 17px; }
.dt-richtext p { margin: 0 0 1.05em; }
.dt-richtext ul, .dt-richtext ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.dt-richtext li { margin-bottom: .35em; }
.dt-richtext a { color: var(--dt-primary); text-decoration: underline; text-underline-offset: 3px; }
.dt-richtext blockquote {
  margin: 1.2em 0;
  padding: 14px 20px;
  color: var(--dt-muted);
  background: var(--dt-bg-alt);
  border-left: 4px solid var(--dt-primary);
  border-radius: 0 8px 8px 0;
}
.dt-richtext img, .dt-richtext video { max-width: 100%; height: auto; border-radius: var(--dt-radius); display: block; margin: 1.2em auto; }
.dt-richtext iframe { max-width: 100%; border: 0; border-radius: var(--dt-radius); aspect-ratio: 16 / 9; width: 100%; }
.dt-richtext table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14.5px; }
.dt-richtext th, .dt-richtext td { padding: 10px 12px; border: 1px solid var(--dt-border); text-align: left; }
.dt-richtext th { background: var(--dt-bg-alt); font-weight: 600; }
.dt-richtext hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--dt-border); }
.dt-richtext code { padding: 2px 6px; font-size: .92em; background: var(--dt-bg-alt); border-radius: 4px; }
.dt-richtext pre { padding: 16px; overflow: auto; background: var(--dt-bg-alt); border-radius: var(--dt-radius); }
.dt-richtext pre code { padding: 0; background: none; }
.dt-richtext figure { margin: 1.2em 0; }
.dt-richtext figcaption { margin-top: 8px; text-align: center; font-size: 13.5px; color: var(--dt-muted); }

/* --------------------------------------------------- 资讯详情（后台发布）
   资讯详情页正文是一个 text 区块，这里的两条规则是给 index.php 拼进去的
   「发布时间 / 所属栏目」和「正文视频」用的。封面图不用单独管，
   上面的 `.dt-richtext img` 已经把宽度、圆角和间距兜住了。 */
.dt-richtext .dt-article-meta {
  margin: 0 0 1.5em;
  padding-bottom: 1.1em;
  border-bottom: 1px solid var(--dt-border);
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--dt-muted);
}
/* 视频给个黑底：竖视频或比例对不上时，留白是白色的会很难看 */
.dt-richtext .dt-article-video { width: 100%; background: #000; }

/* ------------------------------------------------------------------ 单图 */

.dt-figure { margin: 0 auto; }
.dt-figure img { display: block; width: 100%; height: auto; border-radius: var(--dt-radius); }
.dt-image-link { display: block; }
.dt-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--dt-muted); text-align: center; }

/* ---------------------------------------------------------------- 图片组 */

.dt-gal-grid .dt-gal-item,
.dt-carousel .dt-gal-item { margin: 0; }
.dt-gal-item {
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: var(--dt-radius);
  background: var(--dt-bg-alt);
}
.dt-gal-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.dt-gal-item:hover img { transform: scale(1.05); }
.dt-gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  font-size: 13.5px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.dt-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.dt-carousel .dt-gal-item { flex: 0 0 min(420px, 78vw); scroll-snap-align: center; }

/* ------------------------------------------------------------------ 视频 */

.dt-video-frame { position: relative; border-radius: var(--dt-radius); overflow: hidden; background: #0b1512; }
.dt-video-frame video { display: block; width: 100%; height: auto; }
.dt-video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* 「点开去别处看」的视频卡片（视频号 / 嵌不进去的自定义链接）。
   没有封面图时用深青蓝渐变兜底，不会出现一块惨白的空框。 */
.dt-video-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--dt-radius);
  background: var(--dt-grad-deep);
  text-decoration: none;
  color: #fff;
}
.dt-video-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--dt-ease); }
.dt-video-card:hover img { transform: scale(1.05); }
.dt-video-card-mask {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, rgba(6, 42, 65, .18), rgba(6, 42, 65, .62));
  transition: background .3s var(--dt-ease);
}
.dt-video-card:hover .dt-video-card-mask { background: linear-gradient(180deg, rgba(6, 42, 65, .28), rgba(6, 42, 65, .72)); }
.dt-video-card-play {
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; padding-left: 4px;
  font-size: 24px;
  background: var(--dt-grad);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(6, 182, 212, .42);
  transition: transform .3s var(--dt-ease);
}
.dt-video-card:hover .dt-video-card-play { transform: scale(1.1); }
.dt-video-card-tip { font-size: 14px; letter-spacing: .5px; opacity: .92; }

/* ---------------------------------------------------------------- 时间轴 */

.dt-tl { position: relative; padding-left: 30px; max-width: 860px; }
.dt-tl::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--dt-border);
}
.dt-tl-item { position: relative; padding: 0 0 30px; }
.dt-tl-item:last-child { padding-bottom: 0; }
.dt-tl-item::before {
  content: ''; position: absolute; left: -30px; top: 7px;
  width: 16px; height: 16px;
  background: var(--dt-bg);
  border: 3px solid var(--dt-primary);
  border-radius: 50%;
}
.dt-tl-year {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--dt-heading-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--dt-primary);
}
.dt-tl-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.dt-tl-body p { margin: 0; font-size: 14.5px; color: var(--dt-muted); }

/* ------------------------------------------------------------ 行动号召 */

.dt-cta { text-align: center; }
.dt-cta h2 { margin: 0 0 10px; font-family: var(--dt-heading-font); font-size: clamp(22px, 3vw, 31px); font-weight: 800; line-height: 1.3; }
.dt-cta p { margin: 0; font-size: 16px; opacity: .86; }
.dt-cta .dt-btns { justify-content: center; }
.dt-cta .dt-btn-primary { background: #fff; color: var(--dt-primary-dark); }
.dt-cta .dt-btn-primary:hover { background: #eef3f0; }
.dt-cta .dt-btn-ghost { color: inherit; border-color: currentColor; opacity: .8; }
.dt-cta .dt-btn-ghost:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.dt-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; text-align: left; flex-wrap: wrap; }
.dt-cta-row .dt-cta-txt { flex: 1 1 380px; }
.dt-cta-row .dt-btns { margin-top: 0; flex: 0 0 auto; }

/* ---------------------------------------------------------------- 折叠问答 */

.dt-faq-list { max-width: 860px; }
.dt-a-center .dt-faq-list { margin-left: auto; margin-right: auto; text-align: left; }
.dt-faq-item {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  margin-bottom: 10px;
  background: var(--dt-bg);
  overflow: hidden;
}
.dt-faq-item + .dt-faq-item { margin-top: 0; }
.dt-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.dt-faq-item summary::-webkit-details-marker { display: none; }
.dt-faq-arrow {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--dt-muted);
  border-bottom: 2px solid var(--dt-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -4px;
}
.dt-faq-item[open] .dt-faq-arrow { transform: rotate(-135deg); margin-top: 4px; }
.dt-faq-body { padding: 0 20px 18px; font-size: 14.8px; color: var(--dt-muted); line-height: 1.8; }

/* ---------------------------------------------------------------- 联系方式 */

.dt-contact-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.dt-contact-wrap:has(.dt-contact-form) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dt-contact-list { display: grid; gap: 18px; }
.dt-contact-item { display: flex; gap: 14px; align-items: flex-start; }
.dt-contact-icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  font-size: 19px;
  background: var(--dt-bg-alt);
  border-radius: 12px;
}
.dt-contact-label { font-size: 13px; color: var(--dt-muted); margin-bottom: 2px; }
.dt-contact-val { font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--dt-text); text-decoration: none; word-break: break-word; }
a.dt-contact-val:hover { color: var(--dt-primary); }
.dt-contact-map { margin-top: 8px; border-radius: var(--dt-radius); overflow: hidden; border: 1px solid var(--dt-border); }
.dt-contact-map img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- 表单 */

.dt-form-wrap {
  padding: 26px;
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
}
.dt-form-row { margin-bottom: 16px; }
.dt-form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.dt-form-row input,
.dt-form-row select,
.dt-form-row textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  color: var(--dt-text);
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dt-form-row textarea { resize: vertical; min-height: 96px; }
.dt-form-row input:focus,
.dt-form-row select:focus,
.dt-form-row textarea:focus {
  outline: none;
  border-color: var(--dt-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-primary) 14%, transparent);
}
.dt-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.dt-form-msg { margin: 0; font-size: 14px; }
.dt-form-msg.is-ok { color: var(--dt-primary); font-weight: 600; }
.dt-form-msg.is-err { color: #b42318; font-weight: 600; }

/* ------------------------------------------------------------ 资讯列表 */

.dt-news {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dt-news:hover { transform: translateY(-3px); box-shadow: var(--dt-shadow-soft); }
.dt-news-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dt-bg-alt); }
.dt-news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--dt-ease); }
.dt-news:hover .dt-news-cover img { transform: scale(1.05); }
.dt-news-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.dt-news-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 9px; font-size: 13px; color: var(--dt-muted); }
.dt-news-cat { padding: 1px 9px; background: var(--dt-bg-alt); border-radius: 100px; }
.dt-news-title { margin: 0 0 9px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.dt-news-title a { color: inherit; text-decoration: none; transition: color .22s var(--dt-ease); }
.dt-news-title a:hover { color: var(--dt-primary); }
.dt-news-sum {
  margin: 0 0 14px;
  font-size: 14.4px;
  color: var(--dt-muted);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dt-news-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--dt-primary); text-decoration: none; }
.dt-news-more:hover { text-decoration: underline; }
.dt-cols-1 .dt-news { flex-direction: row; }
.dt-cols-1 .dt-news-cover { flex: 0 0 280px; aspect-ratio: auto; }
.dt-more { margin-top: 34px; text-align: center; }
.dt-a-left .dt-more { text-align: left; }

/* -------------------------------------------------------------- 分隔留白 */

.dt-divider-outer { padding-left: 24px; padding-right: 24px; }
.dt-divider-dots { text-align: center; letter-spacing: .5em; font-size: 18px; }

/* ------------------------------------------------------------ 入场动画
 *  机制：区块上带 data-dt-anim="xxx"，页面加载后由 js/page-render.js 用
 *  IntersectionObserver 在它进入视口时补一个 .dt-in 类，动画才开始跑。
 *  所以这里每个动效都是「默认态（偏移/透明/模糊）→ .dt-in 归位」一对。
 *
 *  加新动效只要在下面补一对选择器 + 在 js/blocks.js 的 animate 选项里加上，
 *  不用改 JS 的观察逻辑（它只认 data-dt-anim 这个属性，不认具体值）。
 *
 *  注意三条既有约定，别打破：
 *    · .dt-canvas 里（后台画布）一律直接显形，否则编辑时整页是空白；
 *    · prefers-reduced-motion 下全部显形（见文件末尾）；
 *    · 默认态必须把「不可见」写全（opacity:0），否则会先闪一下再动。
 *
 *  ⚠️ 选择器挂在 html.dt-anim-ready 上，而不是直接写 [data-dt-anim]：
 *    整页都带入场动画之后，「先 opacity:0 再等 JS 来揭开」就成了一条
 *    致命链路 —— 只要 JS 没跑起来（脚本 404、抛错），整站内容全是隐形的。
 *    加了闸门之后，只有 js/page-render.js 确认要接管动画时才会给 <html>
 *    打上这个类；JS 彻底没跑的情况下页面照常显示，只是没有动画。
 *    这个类是**在写入 innerHTML 之前**加的（同一个同步任务里），
 *    所以不会出现「先亮一下再被藏起来」的闪烁。
 */

/*  ⚠️ 第二条约定（踩过一次，别再踩）：这里必须写 `:not(.dt-in)`，不能写成
 *    「默认 opacity:0」+「.dt-in 时 opacity:1」两条互斥靠特异度去压。
 *    因为闸门那条选择器是 html.dt-anim-ready [data-dt-anim]，特异度 (0,2,1)，
 *    比 [data-dt-anim].dt-in 的 (0,2,0) 更高 —— 结果就是 .dt-in 明明加上了，
 *    opacity 还是被压成 0：transform 的过渡正常跑到终点、透明度却纹丝不动，
 *    表现为「整站正文全部隐形、页面不报错、CSS 看着完全正确」。
 *    用 :not(.dt-in) 让两条规则天然互斥，就不存在特异度之争了。
 */
html.dt-anim-ready [data-dt-anim]:not(.dt-in) { opacity: 0; }
[data-dt-anim].dt-in { opacity: 1; }

/* 向上浮起 —— 最常用 */
[data-dt-anim="fade-up"] { transform: translateY(26px); transition: opacity .6s var(--dt-ease), transform .6s var(--dt-ease); }
[data-dt-anim="fade-up"].dt-in { transform: none; }

/* 淡入 */
[data-dt-anim="fade-in"] { transition: opacity .7s var(--dt-ease); }

/* 由小放大 */
[data-dt-anim="zoom-in"] { transform: scale(.965); transition: opacity .55s var(--dt-ease), transform .55s var(--dt-ease); }
[data-dt-anim="zoom-in"].dt-in { transform: none; }

/* ---- 以下为 3.3 新增 ---- */

/* 从右侧滑入（元素起始偏右，向左归位） */
[data-dt-anim="slide-left"] { transform: translateX(46px); transition: opacity .62s var(--dt-ease), transform .62s var(--dt-ease); }
[data-dt-anim="slide-left"].dt-in { transform: none; }

/* 从左侧滑入 */
[data-dt-anim="slide-right"] { transform: translateX(-46px); transition: opacity .62s var(--dt-ease), transform .62s var(--dt-ease); }
[data-dt-anim="slide-right"].dt-in { transform: none; }

/* 立体翻起：绕顶边转进来。perspective 挂在元素自身上即可，
   父层不需要 transform-style —— 这里只有一个元素在动。 */
[data-dt-anim="flip-up"] {
  transform: perspective(900px) rotateX(-22deg) translateY(18px);
  transform-origin: 50% 0%;
  transition: opacity .7s var(--dt-ease), transform .7s var(--dt-ease);
}
[data-dt-anim="flip-up"].dt-in { transform: perspective(900px) rotateX(0) translateY(0); }

/* 模糊聚焦：从虚到实，比单纯淡入更有「显影」感 */
[data-dt-anim="blur-in"] { filter: blur(12px); transform: scale(1.015); transition: opacity .75s var(--dt-ease), filter .75s var(--dt-ease), transform .75s var(--dt-ease); }
[data-dt-anim="blur-in"].dt-in { filter: blur(0); transform: none; }

/* 弹性上浮：用一条回弹曲线做出「过冲再落回」的手感 */
[data-dt-anim="bounce-up"] {
  transform: translateY(34px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.18, 1.5, .42, 1);
}
[data-dt-anim="bounce-up"].dt-in { transform: none; }

/* 轻微倾斜摆正 */
[data-dt-anim="tilt-in"] {
  transform: perspective(800px) rotateY(9deg) translateX(24px);
  transition: opacity .68s var(--dt-ease), transform .68s var(--dt-ease);
}
[data-dt-anim="tilt-in"].dt-in { transform: perspective(800px) rotateY(0) translateX(0); }

/* 画布（后台）里一律直接显形：编辑时看不到内容比没有动画严重得多 */
.dt-canvas [data-dt-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 1024px) {
  .dt-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-contact-wrap:has(.dt-contact-form) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dt-container { padding: 0 18px; }
  .dt-block { padding-top: 48px !important; padding-bottom: 48px !important; }
  .dt-cols-2, .dt-cols-3, .dt-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .dt-richtext-2col { column-count: 1; }
  .dt-tl { padding-left: 26px; }
  .dt-tl-item::before { left: -26px; }
  .dt-cols-1 .dt-news { flex-direction: column; }
  .dt-cols-1 .dt-news-cover { flex: none; aspect-ratio: 16 / 9; }
  .dt-hero { padding: 64px 0; }
  .dt-hero-full { min-height: 78vh; }
  .dt-cta-row { flex-direction: column; align-items: flex-start; text-align: left; }
  .dt-form-wrap { padding: 20px; }
  .dt-head { margin-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-page [data-dt-anim] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .dt-page *, .dt-canvas * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =============================================================================
 *  青蓝渐变皮肤（3.3）
 *  ---------------------------------------------------------------------------
 *  上面那些规则是「骨架」，这一段是「皮肤」。放在文件最后是有意的：
 *  同权重下后写的生效，所以这里能用最少的选择器把渐变套上去，
 *  而不用回到上面逐条改 —— 上面那部分保持「结构 + 默认色」的干净状态，
 *  以后换配色只动这一段的变量和这几条规则。
 *
 *  想再换一套配色：改 :root 里的 --dt-grad-from / --dt-grad-to（或后台
 *  「主题风格」里改），下面全部跟着变。
 * ========================================================================== */

/* ---- 1. 小标签：渐变底 + 白字，比原来的浅色底更「跳」 ---- */
.dt-eyebrow {
  color: #fff;
  background: var(--dt-grad);
  border: 0;
  box-shadow: 0 4px 12px rgba(6, 182, 212, .24);
}

/* ---- 2. 区块标题：下面加一条渐变短横线 ---- */
.dt-head-title { position: relative; padding-bottom: 14px; }
.dt-head-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; border-radius: 2px;
  background: var(--dt-grad);
}
.dt-a-center .dt-head-title::after { left: 50%; margin-left: -24px; }
.dt-a-right .dt-head-title::after { left: auto; right: 0; }

/* ---- 3. 按钮：主按钮走渐变，幽灵按钮悬停带渐变底 ---- */
.dt-btn { transition: transform .2s var(--dt-ease), box-shadow .2s var(--dt-ease), background .2s var(--dt-ease), color .2s var(--dt-ease), border-color .2s var(--dt-ease); }
.dt-btn:hover { transform: translateY(-2px); }
.dt-btn-primary {
  background-image: var(--dt-grad);
  box-shadow: 0 6px 18px rgba(6, 182, 212, .28);
}
.dt-btn-primary:hover {
  background-image: linear-gradient(118deg, var(--dt-grad-to) 0%, var(--dt-primary) 100%);
  box-shadow: 0 10px 26px rgba(6, 182, 212, .38);
}
.dt-btn-ghost { border-color: var(--dt-primary); color: var(--dt-primary); }
.dt-btn-ghost:hover { background: var(--dt-grad-soft); }

/* 英雄区里的按钮反过来：白底 + 渐变字，压在图上更清晰 */
.dt-hero .dt-btn-primary { background: #fff; background-image: none; color: var(--dt-primary); box-shadow: 0 8px 22px rgba(4, 34, 52, .28); }
.dt-hero .dt-btn-primary:hover { background: #f2fbfe; background-image: none; transform: translateY(-2px); }

/* ---- 4. 数据看板：数字走渐变字 ---- */
.dt-stat-value {
  background: var(--dt-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- 5. 卡片：图标底渐变化 + 悬停时图标实心化、图片缓推 ---- */
.dt-card-icon {
  background: var(--dt-grad-soft);
  transition: background .3s var(--dt-ease), transform .3s var(--dt-ease), color .3s var(--dt-ease);
}
.dt-card:hover .dt-card-icon { background: var(--dt-grad); transform: rotate(-6deg) scale(1.06); }
.dt-card { transition: transform .28s var(--dt-ease), box-shadow .28s var(--dt-ease), border-color .28s var(--dt-ease); }
.dt-card-bordered:hover,
.dt-card-filled:hover { transform: translateY(-6px); box-shadow: var(--dt-shadow-strong); border-color: #a9dcec; }
.dt-card-img img { transition: transform .55s var(--dt-ease); }
.dt-card:hover .dt-card-img img { transform: scale(1.06); }
.dt-card-more { position: relative; }
.dt-card-more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--dt-grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s var(--dt-ease);
}
.dt-card:hover .dt-card-more::after { transform: scaleX(1); }

/* ---- 6. 英雄横幅：默认渐变换成深青蓝，并且给个缓慢的流光 ---- */
.dt-hero { background: var(--dt-grad-deep); }
.dt-hero-eyebrow { background: rgba(6, 182, 212, .20); border-color: rgba(103, 232, 249, .45); }

/* ---- 7. 时间轴：竖线渐变、节点渐变 ---- */
.dt-tl::before { background: linear-gradient(to bottom, var(--dt-primary), var(--dt-grad-to)); }
.dt-tl-item::before { background: var(--dt-grad); border: 0; box-shadow: inset 0 0 0 3px var(--dt-bg); }

/* ---- 8. 图片组：圆角容器 + 悬停缓推 + 说明条 ---- */
.dt-gal-item img { transition: transform .55s var(--dt-ease); }
.dt-gal-item:hover img { transform: scale(1.07); }

/* ---- 9. 引用块左侧换成渐变竖条 ---- */
.dt-richtext blockquote { border-left: 0; border-radius: 8px; position: relative; padding-left: 22px; }
.dt-richtext blockquote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 4px; background: var(--dt-grad);
}

/* =============================================================================
 *  社交二维码板块
 *  ---------------------------------------------------------------------------
 *  内容（图 / 名称 / 链接）全部来自后台「站点设置 → 社交二维码」，
 *  所以这里只管怎么摆。三个尺寸档 + 两种列数，够用且不用写一堆 inline style。
 * ========================================================================== */

.dt-social-grid {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.dt-social-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; margin: 0 auto; }
.dt-social-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.dt-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* 二维码卡片：白底 + 圆角 + 描边，悬停时上浮并加一圈渐变描边。
   渐变描边用 ::after 画一圈 padding 背景而不是 border —— border 吃不到渐变。 */
.dt-social-qr {
  position: relative;
  display: block;
  padding: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(11, 111, 164, .10);
  transition: transform .3s var(--dt-ease), box-shadow .3s var(--dt-ease);
}
.dt-social-qr::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 2px; background: var(--dt-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--dt-ease);
  pointer-events: none;
}
.dt-social-item:hover .dt-social-qr { transform: translateY(-6px); box-shadow: var(--dt-shadow-strong); }
.dt-social-item:hover .dt-social-qr::after { opacity: 1; }
.dt-social-qr img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 尺寸档：宽度定死，二维码本身是方图，高度自然跟着来 */
.dt-social-sm .dt-social-qr { width: 82px; padding: 7px; }
.dt-social-md .dt-social-qr { width: 116px; padding: 9px; }
.dt-social-lg .dt-social-qr { width: 156px; padding: 11px; }

.dt-social-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dt-text);
  letter-spacing: .5px;
}
.dt-social-note {
  margin: 26px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--dt-muted);
}

@media (max-width: 1024px) {
  .dt-social-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dt-social-cols-3,
  .dt-social-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .dt-social-md .dt-social-qr { width: 104px; }
  .dt-social-lg .dt-social-qr { width: 132px; }
}

/* =============================================================================
 *  首页灯片（轮播）
 *  ---------------------------------------------------------------------------
 *  切换行为在 js/page-render.js 的 bindBehaviors() 里（第 6 段），这里只管长相。
 *
 *  三件事值得说明：
 *   1. 高度走 CSS 变量 --slider-h：幻灯片是绝对定位叠在一起的，撑不出高度，
 *      所以容器必须自带 min-height。用变量是为了让「矮 / 高 / 满屏」三档
 *      只改一个值，而不用给 viewport 和 inner 各写一遍。
 *   2. 非当前张要 pointer-events:none —— 否则叠在下面的那张里的按钮、
 *      链接依然可点，会点到「看不见的东西」。
 *   3. 「动态效果图」= 当前张的图片层缓慢推近（Ken Burns）。只 transform
 *      背景层、不碰文字，所以字不会跟着放大变虚。
 * ========================================================================== */

.dt-slider {
  position: relative;
  overflow: hidden;
  background: var(--dt-grad-deep);
  --slider-h: 934px;
}
.dt-slider-small { --slider-h: 420px; }
.dt-slider-tall  { --slider-h: 934px; }
.dt-slider-full  { --slider-h: 100vh; }

.dt-slider-viewport { position: relative; min-height: var(--slider-h); }

.dt-slide {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .78s var(--dt-ease);
}
.dt-slide.is-active { opacity: 1; pointer-events: auto; }

/* 「横向滑动」档：在淡入淡出的基础上再补一点水平位移。
   用固定方向（从右往左）而不是跟着上一张的方向翻，是因为方向要判断
   「是前进还是后退」，得让 JS 额外记状态；对灯片来说这点差别看不出来，
   不值得为它多一条状态。 */
.dt-slider[data-effect="slide"] .dt-slide {
  transform: translateX(38px);
  transition: opacity .6s var(--dt-ease), transform .74s var(--dt-ease);
}
.dt-slider[data-effect="slide"] .dt-slide.is-active { transform: translateX(0); }

.dt-slide-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.dt-slide-overlay { position: absolute; inset: 0; pointer-events: none; }

@keyframes dt-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.15); }
}
/* forwards：停在这一张的这段时间里定格在推近后的画面，
   切走再切回来时因为 .is-active 被重新加上，动画会从头再跑一遍。 */
.dt-slider[data-kenburns="1"] .dt-slide.is-active .dt-slide-img {
  animation: dt-kenburns 9s ease-out forwards;
}

.dt-slide-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--slider-h);
  width: 100%; max-width: var(--dt-container);
  margin: 0 auto; padding: 90px 24px;
  color: #fff;
}
.dt-slider[data-align="center"] .dt-slide-inner { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.dt-slider[data-align="center"] .dt-slide-inner .dt-btns { justify-content: center; }

.dt-slide-title {
  margin: 0 0 16px;
  font-family: var(--dt-heading-font);
  font-size: clamp(26px, 4.4vw, 48px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .32);
}
.dt-slide-sub {
  max-width: 680px;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255, 255, 255, .92);
}

/* 箭头：默认半透明，悬停在灯片上才明显起来，不抢内容 */
.dt-slider-arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px; margin-top: -23px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  opacity: .55;
  transition: opacity .25s var(--dt-ease), background .25s var(--dt-ease), transform .25s var(--dt-ease);
}
.dt-slider:hover .dt-slider-arrow { opacity: 1; }
.dt-slider-arrow:hover { background: var(--dt-grad); border-color: transparent; transform: scale(1.08); }
.dt-slider-arrow.is-prev { left: 20px; }
.dt-slider-arrow.is-next { right: 20px; }

.dt-slider-dots {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
  display: flex; justify-content: center; gap: 9px;
}
.dt-slider-dot {
  width: 9px; height: 9px; padding: 0;
  background: rgba(255, 255, 255, .45);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: width .3s var(--dt-ease), background .3s var(--dt-ease);
}
.dt-slider-dot:hover { background: rgba(255, 255, 255, .75); }
/* 当前点拉长成小横条，比单纯变色更容易一眼看出在第几张 */
.dt-slider-dot.is-active { width: 26px; background: var(--dt-grad-to); }

/* 画布（后台）里不播自动轮播，只显示第一张：编辑时画面自己乱翻很难改字 */
.dt-canvas .dt-slider .dt-slide { transition: none; }
.dt-canvas .dt-slider[data-kenburns="1"] .dt-slide .dt-slide-img { animation: none; }

@media (max-width: 720px) {
  .dt-slider { --slider-h: 420px; }
  .dt-slider-full { --slider-h: 78vh; }
  .dt-slide-inner { padding: 64px 18px; }
  .dt-slider-arrow { width: 38px; height: 38px; margin-top: -19px; font-size: 22px; }
  .dt-slider-arrow.is-prev { left: 10px; }
  .dt-slider-arrow.is-next { right: 10px; }
}

/* --------------------------------------------- 资讯卡片（两列动态展示）
 *  两列本身由组件属性「每行个数 = 2」决定（渲染成 .dt-cols-2）；
 *  这里补的是两列下的观感：封面统一 16:10、悬停时图片缓推 + 卡片上浮、
 *  栏目标签走青蓝渐变、顶部一条渐变细线展开 —— 一眼看出这张能点。
 *
 *  为什么不做「第二张延后入场」的错位动画：入场靠的是 .dt-news 自身的
 *  transition，给它加 transition-delay 会把 hover 的响应也一起拖慢，
 *  鼠标移上去要等 90ms 才有反应，得不偿失。
 * ------------------------------------------------------------------------- */
.dt-news-grid { align-items: stretch; }
.dt-news-grid .dt-news-cover { aspect-ratio: 16 / 10; }
.dt-news-grid .dt-news-cover img { transition: transform .6s var(--dt-ease); }
.dt-news-grid .dt-news:hover .dt-news-cover img { transform: scale(1.06); }
.dt-news-grid .dt-news-cat {
  padding: 2px 10px; color: #fff; border: 0;
  background-image: var(--dt-grad);
}
.dt-news-grid .dt-news-title { transition: color .22s var(--dt-ease); }
.dt-news-grid .dt-news:hover .dt-news-title { color: var(--dt-primary); }
.dt-news-grid .dt-news { position: relative; }
.dt-news-grid .dt-news::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background-image: var(--dt-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--dt-ease);
}
.dt-news-grid .dt-news:hover::after { transform: scaleX(1); }