/* ==========================================================================
   112200 主题补充样式
   —— 只放「静态稿没有、动态站才需要」的部分：社交媒体、订阅表单状态、富文本兜底
   ========================================================================== */

/* --------------------------------------------------------------------------
   横向溢出总闸：入场动画（animate.css 的 fadeInLeft / fadeInRight）在滚动进入
   视口时会把元素临时平移到视口外 100%，main.css 只给 body 加了 overflow-x:hidden，
   拦不住 html 这一层的横向滚动 —— 手机上整站会被一条 100px 左右的横向滚动带偏，
   悬浮客服按钮也会跟着错位到屏幕外。
   用 clip 而不是 hidden：hidden 会把 html 变成滚动容器，头部 position:sticky 直接失效；
   clip 不建立滚动容器，sticky 与横向裁切可以同时成立。
   老浏览器不认识 clip 时该声明被丢弃，body 仍沿用 main.css 里的 overflow-x:hidden。
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

/* 后台 logo（真实图片）与静态 SVG 混排时的高度约束 */
.site-header .logo-img,
.site-footer .logo-img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: contain;
  flex: none;
}

/* 社交媒体：页脚列表 / 分享条 / 侧边栏 / 头部（四组位标准样式） */
.hsy-social-media-list,
.hsy-social-media-header,
.hsy-social-share,
.hsy-social-media-sidebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsy-social-media-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: currentColor;
  opacity: .78;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}

.hsy-social-media-item:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.hsy-social-media-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hsy-social-media-item svg {
  width: 18px;
  height: 18px;
}

/* 页脚深色底上的社媒按钮 */
.site-footer .hsy-social-media-item {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.site-footer .hsy-social-media-item:hover {
  background: rgba(255, 255, 255, .14);
}

/* 头部社媒（浅色底） */
.hsy-social-media-header .hsy-social-media-item {
  color: var(--text-2, #4b5563);
  width: 30px;
  height: 30px;
}

/* 空容器不占位（后台没配社媒时不留空洞） */
.hsy-social-media-list:empty,
.hsy-social-media-header:empty,
.hsy-social-share:empty,
.hsy-social-media-sidebar:empty {
  display: none;
}

/* 详情页正文：连续无空格字符（长数字 / 英文单词 / URL）超过左栏宽度时自动换行。
   只作用于正文内部的文字，不改动任何布局容器的宽度、边距、定位。 */
.detail-body,
.detail-body p,
.detail-body li,
.detail-body a,
.detail-body h1,
.detail-body h2,
.detail-body h3,
.detail-body blockquote,
.detail-body td,
.detail-body th {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* 详情页正文：表格在窄屏可横向滚动，不撑破容器 */
.detail-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 订阅表单：内联提示（无 Toast 时的兜底） */
.subscribe-form {
  position: relative;
}

.subscribe-form .subscribe-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.subscribe-form .subscribe-tip.is-ok { color: #16a34a; }
.subscribe-form .subscribe-tip.is-err { color: #dc2626; }

/* 列表页空态 */
.filter-grid:empty::after {
  content: "暂无内容";
  display: block;
  padding: 48px 0;
  text-align: center;
  color: var(--text-2, #6b7280);
}

/* ==========================================================================
   以下为「动态站新增页面」专用样式：单页无图头部、关于页数据条、
   网站地图、标签云、分页、空态、404、询盘表单提示
   ========================================================================== */

/* 无配图的页头（sitemap / tag / 通用详情） */
.page-head--plain {
  background: var(--paper, #F7F8F3);
  border-bottom: 1px solid var(--line, #E2E7DB);
}

/* 富文本兜底（后台富文本编辑器产出的裸标签） */
.rich-text,
.standard-db-content {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--text-2, #3E4A43);
}

.rich-text > *:first-child,
.standard-db-content > *:first-child { margin-top: 0; }

.rich-text > *:last-child,
.standard-db-content > *:last-child { margin-bottom: 0; }

.rich-text h2,
.standard-db-content h2 { margin: 34px 0 14px; font-size: clamp(20px, 2.4vw, 26px); color: var(--text, #0F1A15); }
.rich-text h3,
.standard-db-content h3 { margin: 26px 0 10px; font-size: 18px; color: var(--text, #0F1A15); }
.rich-text p,
.standard-db-content p { margin: 0 0 16px; }
.rich-text ul,
.rich-text ol,
.standard-db-content ul,
.standard-db-content ol { margin: 0 0 16px; padding-left: 22px; }
.rich-text li,
.standard-db-content li { margin: 6px 0; }
.rich-text a,
.standard-db-content a { color: var(--accent-deep, #1D4ED8); text-decoration: underline; text-underline-offset: 2px; }
.rich-text img,
.standard-db-content img { max-width: 100%; height: auto; border-radius: 10px; }
.rich-text table,
.standard-db-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.rich-text blockquote,
.standard-db-content blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--accent, #2563EB);
  background: var(--accent-soft, #EAF1FE);
  border-radius: 0 8px 8px 0;
}

/* 关于页数据条（原静态稿写在内联 style 里，这里收进类） */
.about-story p { color: var(--text-2, #3E4A43); }

.about-stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.about-stats b {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 28px;
  line-height: 1.1;
  color: var(--accent-deep, #1D4ED8);
}

.about-stats p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted, #5F6D65);
}

/* 联系页信息卡里的电话号码 */
.info-card .info-tel {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 20px;
  color: var(--text, #0F1A15);
}

/* 询盘表单：内联提示（无 Toast 时的兜底） */
#contact-form .form-tip {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

#contact-form .form-tip.is-ok { color: #16a34a; }
#contact-form .form-tip.is-err { color: #dc2626; }

/* 分页器（后端 paginate()->render() 输出的 ul.pagination 等结构） */
.pager {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}

.pager > * {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pager li { list-style: none; }

.pager a,
.pager span,
.pager li > a,
.pager li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line, #E2E7DB);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text-2, #3E4A43);
  background: var(--panel, #fff);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.pager a:hover,
.pager li > a:hover {
  border-color: var(--accent, #2563EB);
  color: var(--accent-deep, #1D4ED8);
}

.pager .active > span,
.pager .active > a,
.pager span.current {
  background: var(--accent, #2563EB);
  border-color: var(--accent, #2563EB);
  color: #fff;
}

.pager .disabled > span,
.pager .disabled > a {
  opacity: .45;
  cursor: not-allowed;
}

/* 空态提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 56px 0;
  color: var(--muted, #5F6D65);
  font-size: 14px;
}

.empty-tip svg {
  width: 30px;
  height: 30px;
  opacity: .55;
}

.empty-tip p { margin: 0; }

/* 标签云 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-cloud a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--line, #E2E7DB);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-2, #3E4A43);
  background: var(--panel, #fff);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.tag-cloud a:hover {
  border-color: var(--accent, #2563EB);
  color: var(--accent-deep, #1D4ED8);
  transform: translateY(-1px);
}

.tag-cloud a span {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--muted, #5F6D65);
}

.tag-cloud--related {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft, #EDF0E7);
}

.tag-cloud--related .kicker { width: 100%; margin-bottom: 4px; }

/* 网站地图卡片 */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.sm-card {
  position: relative;
  padding: 22px 24px 20px;
  border: 1px solid var(--line, #E2E7DB);
  border-radius: 14px;
  background: var(--panel, #fff);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sm-card::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -1px;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #2563EB);
  opacity: .85;
}

.sm-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim, #3B82F6);
  box-shadow: var(--shadow, 0 14px 34px -18px rgba(16, 26, 21, .22));
}

.sm-card-t {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text, #0F1A15);
}

.sm-card-t a { color: inherit; text-decoration: none; }
.sm-card-t a:hover { color: var(--accent-deep, #1D4ED8); }

.sm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sm-links a {
  display: inline-block;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2, #3E4A43);
  background: var(--paper-2, #EFF2E8);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.sm-links a:hover {
  background: var(--accent-soft, #EAF1FE);
  color: var(--accent-deep, #1D4ED8);
}

.sm-xml {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
}

.sm-xml a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--line-strong, #CFD7C4);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2, #3E4A43);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.sm-xml a:hover {
  border-color: var(--accent, #2563EB);
  color: var(--accent-deep, #1D4ED8);
}

/* 案例详情页顶部的改造前后指标条（列表卡片上的 .case-metrics 放大版） */
.case-metrics--detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 24px 0 8px;
  padding: 20px 22px;
  border: 1px solid var(--line, #E2E7DB);
  border-radius: 14px;
  background: var(--paper, #F7F8F3);
}

.case-metrics--detail > div {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted, #5F6D65);
}

.case-metrics--detail > div b {
  display: block;
  margin-top: 2px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 22px;
  line-height: 1.2;
  color: var(--accent-deep, #1D4ED8);
}

/* 404 */
.sec-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.sec-404-in { text-align: center; }

.sec-404 h1 {
  font-size: clamp(32px, 6vw, 64px);
  margin-bottom: 18px;
}

.sec-404-sub {
  max-width: 520px;
  margin: 0 auto 32px;
}

.sec-404-act {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .sm-grid { grid-template-columns: 1fr; gap: 14px; }
  .sm-card { padding: 18px 16px 16px; }
  .sm-card::before { left: 16px; }
  .sm-links a { font-size: 12px; padding: 4px 10px; }
  .about-stats { gap: 22px; }
}


/* =========================================================================
 * 新闻列表：精选文章（带图）+ 其余文章（纯文字，不显示缩略图）
 * ========================================================================= */
.post-featured { margin-bottom: 60px; }

.post-featured-head { margin-bottom: 32px; }

.post-featured-head h2 { font-size: clamp(22px, 2.6vw, 32px); }

/* 精选区与下方完整列表之间的分隔线 */
.post-list-block {
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

/* 列表卡片去掉缩略图后靠排版分层：正文留白略大、标题收小、摘要最多三行 */
.post-card--text .post-body { padding: 26px 26px 24px; }

.post-card--text h3 { font-size: 16px; }

.post-card--text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 640px) {
  .post-featured { margin-bottom: 40px; }
  .post-list-block { padding-top: 32px; }
  .post-card--text .post-body { padding: 20px 20px 18px; }
}

/* =========================================================================
 * 首页页脚友情链接（仅首页渲染，见 layout.html 的 $is_home 判断）
 * ========================================================================= */
.footer-links {
  border-top: 1px solid var(--line-strong);
  padding: 16px 0 20px;
}

/* 显示友情链接时，版权行上方的分隔线去掉，只保留友情链接上方这条 */
.site-footer:has(.footer-links) .footer-bar { border-top: 0; }

.footer-links-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  font-size: 12px;
  line-height: 1.8;
}

.footer-links-label {
  color: var(--accent);
  font-weight: 600;
  flex: none;
}

.footer-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  color: var(--muted);
}

.footer-links-list a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.footer-links-list a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .footer-links-in { gap: 6px 14px; }
  .footer-links-list { gap: 2px 14px; }
}