/* ============================================================================
   detail16.css — 详情页 v2（参照参考图重构：news.html / product.html）
   版式：图片 Hero → 面包屑条 → 页面标题行（绿块+标题 | 打印/分享）
         → 白色文章卡（标题居中 / meta 居中 / 正文 1289px）
         → 浅青 CTA 条（左文案 + 右电话按钮）
         → 3 列相关推荐卡 → 上一篇/下一篇 → 居中"返回列表"
   无侧栏单栏；手机 / iPad / 桌面自适应。仅被 detail 模板引用，不影响其他页面。
   ============================================================================ */

.dt16-wrap {
  /* 详情页内容列宽度（PC 默认 1289px，参照设计稿量取） */
  --dt16-content: 1289px;
  padding: var(--sec-py-sm) 0 var(--sec-py);
  background: var(--c-white);
}
.dt16-container {
  width: 100%;
  /* 1289px 内容 + 左右内边距，使白色内容列实际可用宽度恰为 1289px */
  max-width: calc(var(--dt16-content) + var(--container-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Hero 英文小标前加长破折号（参照参考图 "— PRODUCT DETAIL"） */
.svisual-wrap .txt-eng::before {
  content: "——";
  margin-right: 10px;
  letter-spacing: -2px;
}

/* ---------- 面包屑条 ---------- */
.dt16-crumb { padding-top: var(--sp-3); }

/* ---------- 页面标题行：绿色方块 + 标题 | 工具按钮 ---------- */
.dt16-pagetitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-3);
}
.dt16-pagetitle h2 {
  position: relative;
  padding-left: 15px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--t-title);
}
.dt16-pagetitle h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1em;
  background: var(--c-primary);
  border-radius: 3px;
}
.dt16-tools { display: flex; gap: var(--sp-1); flex: none; }
.dt16-tools .btn-cast { border-color: var(--c-border); }

/* ---------- 文章白卡 ---------- */
.dt16-card {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sd-card);
}
.dt16-title {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--t-title);
}
.dt16-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-3) 0 0;            /* 下边距改为 0，由 padding 和正文间距接管 */
  padding-bottom: var(--sp-4);         /* 分隔线与 meta 信息的留白 */
  border-bottom: 1px solid #ccc;      /* 分隔线 */
  margin: var(--sp-4) 0 var(--sp-5);    /* 由 sp-3 改为 sp-4，拉开与分隔线的距离 */
  font-size: var(--fs-assist);
  color: var(--t-assist);
}
.dt16-meta .sep {
  width: 1px;
  height: 12px;
  background: var(--c-border-strong);
}
.dt16-meta .author { color: var(--c-primary); transition: var(--t-color); }
.dt16-meta .author:hover { color: var(--c-primary-hover); }

/* 正文：阅读区 1289px、行高 1.8
   注意：shun.css 旧版式给 #boardContents 设了 max-width:760px，
   dt16 版式下解除该限制，由 .dt16-body 统一控制宽度 */
#boardContents { max-width: none; margin: 0; }
.dt16-body {
  max-width: var(--dt16-content);
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--t-body);
  word-break: break-word;
}
.dt16-body h2 {
  margin: 1.5em 0 .7em;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--t-title);
}
.dt16-body h3 {
  margin: 1.3em 0 .6em;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--t-title);
}
.dt16-body p { margin: 0 0 1em; }
.dt16-body ul, .dt16-body ol { margin: 0 0 1em; padding-left: 1.6em; }
.dt16-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.dt16-body table { width: 100%; border-collapse: collapse; }
.dt16-body table td, .dt16-body table th { border: 1px solid var(--c-border); padding: 6px 10px; }

/* ---------- CTA 条：浅青底 + 右侧电话按钮 ---------- */
.dt16-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-light);
  border-radius: var(--r-md);
}
.dt16-cta h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--t-title);
}
.dt16-cta p { margin-top: 5px; font-size: var(--fs-assist); color: var(--t-assist); }
.dt16-cta__btn { flex: none; }
.dt16-cta__btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h-lg);
  padding: 0 var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  background: var(--c-primary);
  border-radius: var(--r-sm);
  transition: var(--t-all);
}
.dt16-cta__btn a:hover { background: var(--c-primary-hover); box-shadow: var(--sd-hover); }
.dt16-cta__btn a:active { transform: translateY(1px); }

/* ---------- 相关推荐：3 列封面卡 ---------- */
.dt16-rel { margin-top: var(--sp-6); }
.dt16-rel > h3 {
  position: relative;
  padding-left: 15px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--t-title);
}
.dt16-rel > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1em;
  background: var(--c-primary);
  border-radius: 3px;
}
.dt16-rel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--sp-4);
}
.dt16-card2 {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: var(--t-card);
}
.dt16-card2:hover {
  transform: translateY(-3px);
  border-color: var(--c-border-strong);
  box-shadow: var(--sd-hover);
}
.dt16-card2 .pic {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* 无封面图时显示品牌封面（main.js 会把 nopic.gif 替换为 images/cover/ 下的图）；
     CSS 背景作为无 JS 环境的兜底，按卡片序号轮换 3 张 */
  background: linear-gradient(135deg, #0b3d33 0%, #116e5f 55%, #1f9c86 100%) center / cover no-repeat;
}
.dt16-rel__grid .dt16-card2:nth-child(3n+1) .pic { background-image: url(../images/cover/cover-01.jpg); }
.dt16-rel__grid .dt16-card2:nth-child(3n+2) .pic { background-image: url(../images/cover/cover-02.jpg); }
.dt16-rel__grid .dt16-card2:nth-child(3n+3) .pic { background-image: url(../images/cover/cover-03.jpg); }
.dt16-card2 .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.dt16-card2 .pic img[src*="nopic"] { opacity: 0; }
.dt16-card2:hover .pic img { transform: scale(1.04); }
.dt16-card2 .txt { padding: var(--sp-3); }
.dt16-card2 .txt strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--t-title);
  transition: var(--t-color);
}
.dt16-card2:hover .txt strong { color: var(--c-primary); }
.dt16-card2 .txt .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 8px;
  font-size: var(--fs-assist);
  line-height: 1.6;
  color: var(--t-assist);
}

/* ---------- 上一篇 / 下一篇 ---------- */
.dt16-pn {
  margin-top: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dt16-pn a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-assist);
  color: var(--t-body);
  transition: var(--t-color);
}
.dt16-pn a + a { border-top: 1px solid var(--c-border); }
.dt16-pn .arr { flex: none; font-weight: var(--fw-bold); color: var(--c-primary); }
.dt16-pn .lbl { flex: none; color: var(--t-assist); }
.dt16-pn .subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  transition: var(--t-color);
}
.dt16-pn a:hover .subject { color: var(--c-primary); }

/* ---------- 返回列表 ---------- */
.dt16-back { display: flex; justify-content: center; margin-top: var(--sp-5); }
.dt16-back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: var(--btn-h);
  padding: 0 var(--sp-5);
  font-size: var(--fs-assist);
  color: var(--t-body);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  transition: var(--t-all);
}
.dt16-back a:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-white);
}

/* ============================================================================
   响应式：iPad 横竖屏 → 收紧留白；手机 → 单列
   ============================================================================ */
@media (max-width: 1024px) {
  .dt16-card { padding: var(--sp-5) var(--sp-4); }
  .dt16-cta { padding: var(--sp-4); }
}

@media (max-width: 900px) {
  .dt16-rel__grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-sm); }
  .dt16-card2 .txt { padding: var(--sp-2); }
  .dt16-card2 .txt .desc { display: none; }   /* iPad 竖屏以下收起描述，突出标题 */
}

@media (max-width: 789px) {
  .dt16-pagetitle { margin: var(--sp-3) 0 var(--sp-2); }
  .dt16-pagetitle h2 { font-size: var(--fs-h3); }
  .dt16-title { font-size: var(--fs-h2); }
  .dt16-cta { flex-direction: column; align-items: flex-start; }
  .dt16-cta__btn { width: 100%; }
  .dt16-cta__btn a { width: 100%; min-height: var(--touch-min); }
}

@media (max-width: 640px) {
  .dt16-rel__grid { grid-template-columns: 1fr; }
  .dt16-card2 .txt .desc { display: -webkit-box; }  /* 手机单列恢复描述 */
  .dt16-card { padding: var(--sp-4) var(--sp-3); }
  .dt16-title { font-size: var(--fs-h3); }
  .dt16-meta { gap: var(--sp-1); }
  .dt16-meta .sep { display: none; }
  .dt16-meta span, .dt16-meta time, .dt16-meta .author { padding: 0 var(--sp-1); }
}