@charset "utf-8";
/*---------- 页面容器 ----------*/
.article-page { padding: 2rem 0 3.5rem; background: #f2f7ff; }
/*---------- 主体卡片 / 空态（原 channel.css 并入，与新闻列表页同款） ----------*/
.art-main { background: #fff; border-radius: var(--tncms-radius); box-shadow: var(--tncms-shadow); padding: 1.75rem 2.25rem 2.5rem; }
.art-empty { padding: 3.75rem 0; text-align: center; color: var(--tncms-text-muted); }
/*---------- 面包屑（结构/颜色/分隔符由全站统一 .common-breadcrumb 提供，此处仅保留与返回按钮的行布局） ----------*/
.art-crumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--tncms-border); }
.art-crumb .common-breadcrumb { flex: 1 1 12rem; min-width: 0; margin-bottom: 0; }
.art-crumb-actions { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; margin-left: auto; }
/*---------- 返回按钮 ----------*/
.art-back { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem; height: 2.5rem; padding: 0 .875rem; font-size: .85rem; color: var(--tncms-text-muted) !important; border: 1px solid var(--tncms-border); border-radius: .75rem; text-decoration: none !important; transition: all .2s; }
.art-back svg { margin-top: 0.063rem; }
.art-back:hover { color: #2576fb !important; border-color: #2576fb; background: var(--tncms-primary-light); }
/*---------- 标题与顶部分享工具 ----------*/
.art-title-wrap { position: relative; max-width: 52rem; margin-inline: auto; }
.art-title { font-size: 1.6rem; font-weight: 700; line-height: 1.4; color: var(--tncms-text); margin: 0; text-align: center; }
.art-date { font-size: .85rem; font-weight: 400; color: var(--tncms-text-muted); }
.art-share { display: flex; flex-shrink: 0; align-items: center; gap: .375rem; box-sizing: border-box; padding: .25rem .375rem .25rem .75rem; border: 1px solid #e7edf5; border-radius: .875rem; background: #f6f8fc; }
.art-share-label { margin-right: .25rem; font-size: .75rem; color: var(--tncms-text-muted); white-space: nowrap; }
.art-share-btn { flex-shrink: 0; width: 2rem; height: 2rem; border: 1px solid #e4eaf2; border-radius: .625rem; display: inline-flex; align-items: center; justify-content: center; padding: .313rem; color: var(--share-color, #64748b) !important; background: #fff; text-decoration: none !important; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.art-share-btn i { display: block; width: 100%; height: 1em; margin: 0; color: currentColor !important; font-size: 1.05rem; font-weight: 600; line-height: 1; text-align: center; }
.art-share-btn i::before { display: inline-block; vertical-align: 0; }
.art-share-btn:focus-visible, .art-back:focus-visible { outline: 2px solid #367cf6; outline-offset: 3px; }
.art-share-qq i::before { position: relative; left: .08em; }
.art-share-btn:hover { transform: translateY(-1px); border-color: var(--share-color, #64748b); background: var(--share-bg, #edf2f7); }
.art-share-wx { --share-color: #278b48; --share-bg: #eaf7ee; }
.art-share-qq { --share-color: #1689bc; --share-bg: #e9f6fc; }
.art-share-wb { --share-color: #d84242; --share-bg: #fff0f0; }
.art-share-copy { --share-color: #65758f; --share-bg: #edf1f7; }
.art-wechat-modal[hidden] { display: none; }
.art-wechat-modal { position: fixed; z-index: 1100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15, 29, 52, .48); }
.art-wechat-dialog { position: relative; width: min(22rem, 100%); padding: 1.5rem 1.5rem 1.25rem; border: 1px solid #e1e8f2; border-radius: .75rem; background: #fff; box-shadow: 0 1rem 3rem rgba(18, 43, 80, .2); text-align: center; }
.art-wechat-dialog h2 { margin: 0 0 1rem; color: #1c2b43; font-size: 1rem; font-weight: 700; }
.art-wechat-close { position: absolute; top: .75rem; right: .75rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; color: #8a99ad; cursor: pointer; }
.art-wechat-close:hover { color: #1c2b43; }
.art-wechat-qr { display: block; width: 13.75rem; height: 13.75rem; margin: 0 auto 1rem; padding: .5rem; border: 1px solid #edf1f6; object-fit: contain; }
.art-wechat-dialog p { margin: 0; color: #71809a; font-size: .8rem; line-height: 1.8; }
.art-share-lock { overflow: hidden; }
.art-share-toast { position: fixed; z-index: 1200; left: 50%; bottom: 2rem; padding: .65rem 1rem; border-radius: .375rem; background: rgba(22, 35, 57, .9); color: #fff; font-size: .85rem; opacity: 0; transform: translate(-50%, .5rem); transition: opacity .2s, transform .2s; pointer-events: none; }
.art-share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/*---------- 元信息 ----------*/
.art-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1rem 0 1.5rem; font-size: .85rem; color: var(--tncms-text-muted); }
/*---------- 成功案例头图 + 案例 Logo ----------*/
.case-detail-hero { margin: 0 auto 2.25rem; overflow: hidden; border: 1px solid #dce8f6; border-radius: 1rem; background: linear-gradient(135deg, #f6faff, #fff); box-shadow: 0 .75rem 2rem rgba(26, 75, 140, .08); }
.case-detail-hero-media { position: relative; overflow: hidden; background: #eaf2fc; }
.case-detail-hero-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.case-detail-hero-info { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.case-detail-logo { display: grid; flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; place-items: center; border: 1px solid #e1eaf5; border-radius: .85rem; background: #fff; box-shadow: 0 .35rem .9rem rgba(31, 74, 130, .08); }
.case-detail-logo img { display: block; width: 3.2rem; height: 3.2rem; object-fit: contain; }
.case-detail-hero-copy { min-width: 0; }
.case-detail-customer { margin: 0 0 .25rem; color: #246bfd; font-size: .78rem; font-weight: 700; }
.case-detail-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .35rem; }
.case-detail-category { display: inline-flex; align-items: center; max-width: 100%; padding: .18rem .55rem; border: 1px solid #d6e5ff; border-radius: .375rem; background: #edf4ff; color: #246bfd; font-size: .75rem; font-weight: 600; line-height: 1.4; }
.case-detail-subtitle { min-width: 0; margin: 0; color: #1b2c47; font-size: 1rem; font-weight: 700; }
.case-detail-summary { margin: 0; color: #71819a; font-size: .88rem; line-height: 1.75; }
/*---------- 新闻动态头图 ----------*/
.news-detail-hero { margin: 0 auto 2.25rem; overflow: hidden; border: 1px solid #dce8f6; border-radius: 1rem; background: #eaf2fc; box-shadow: 0 .75rem 2rem rgba(26, 75, 140, .08); }
.news-detail-hero img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center; }
/*---------- 正文 ----------*/
/** 正文由 TinyMCE 生成。全站基础样式会清空所有元素的 margin/padding，
 * 并把 ul/ol 的列表标记移除；Bootstrap 还会重新定义标题字号。
 * 在正文容器内恢复与 TinyMCE 默认内容区一致的排版，确保后台预览和
 * 静态文章页展示相同，同时保留编辑器写入的行内颜色、缩进和尺寸。*/
.article-body { width: 100%; max-width: 100%; color: var(--tncms-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; }
.article-body p { display: block; margin: 1em 0; }
.article-body h1 { display: block; margin: .67em 0; font-size: 2em; font-weight: bold; line-height: normal; }
.article-body h2 { display: block; margin: .83em 0; font-size: 1.5em; font-weight: bold; line-height: normal; }
.article-body h3 { display: block; margin: 1em 0; font-size: 1.17em; font-weight: bold; line-height: normal; }
.article-body h4 { display: block; margin: 1.33em 0; font-size: 1em; font-weight: bold; line-height: normal; }
.article-body h5 { display: block; margin: 1.67em 0; font-size: .83em; font-weight: bold; line-height: normal; }
.article-body h6 { display: block; margin: 2.33em 0; font-size: .67em; font-weight: bold; line-height: normal; }
.article-body ul,
.article-body ol { display: block; margin: 1em 0; padding-left: 40px; }
.article-body ul { list-style: disc outside; }
.article-body ol { list-style: decimal outside; }
.article-body ul ul { list-style-type: circle; }
.article-body ul ul ul { list-style-type: square; }
.article-body li { display: list-item; list-style: inherit; }
.article-body blockquote { display: block; margin: 1em 40px; padding-left: 1rem; border-left: 2px solid #ccc; }
.article-body pre { display: block; margin: 1em 0; font-family: monospace; white-space: pre; }
.article-body code { padding: .1rem .2rem; border-radius: 3px; background-color: #e8e8e8; font-family: monospace; }
.article-body hr { margin: .5em auto; border: 0; border-top: 1px solid #ccc; }
.article-body figure { display: flow-root; width: fit-content; max-width: min(100%, 64rem) !important; margin: 1.75rem auto; text-indent: 0; }
.article-body figure.align-left { margin-left: 0; margin-right: auto; }
.article-body figure.align-center { margin-left: auto; margin-right: auto; }
.article-body figure.align-right { margin-left: auto; margin-right: 0; }
.article-body figure figcaption { display: block; margin-top: .65rem; color: #71819a; font-size: .8125rem; line-height: 1.65; text-align: center; }
.article-body table { border-collapse: collapse; }
.article-body table:not([cellpadding]) th,
.article-body table:not([cellpadding]) td { padding: .4rem; }
.article-body table[border]:not([border="0"]):not([style*="border-width"]) th,
.article-body table[border]:not([border="0"]):not([style*="border-width"]) td { border-width: 1px; }
.article-body table[border]:not([border="0"]):not([style*="border-style"]) th,
.article-body table[border]:not([border="0"]):not([style*="border-style"]) td { border-style: solid; }
.article-body table[border]:not([border="0"]):not([style*="border-color"]) th,
.article-body table[border]:not([border="0"]):not([style*="border-color"]) td { border-color: #ccc; }
.article-body img,
.article-body video,
.article-body audio,
.article-body iframe { max-width: 100%; }
/*限制正文大图，覆盖编辑器的固定尺寸；小图不强制放大，长图保持比例完整展示。*/
.article-body img { display: inline-block; box-sizing: border-box; width: auto; max-width: min(100%, 64rem) !important; height: auto !important; margin: 1.5rem auto; border: 1px solid #dce8f6; border-radius: 1rem; box-shadow: 0 .4rem 1.25rem rgba(26, 75, 140, .06); }
.article-body figure img { margin: 0 auto; }
.article-body p:has(> img:only-child),
.article-body p:has(> picture:only-child),
.article-body p:has(> a:only-child > img:only-child) { display: flow-root; text-indent: 0 !important; }
/*---------- 版权声明 + 上一篇 / 下一篇 ----------*/
.art-statement { background: #f8faff; border: 1px solid #e2eaf5; border-radius: 1rem; padding: 1.5rem; margin-top: 2rem; box-shadow: 0 .25rem 1rem rgba(26, 75, 140, .035); }
.art-statement-text { font-size: .9rem; color: var(--tncms-text-muted); line-height: 1.85; margin-bottom: 1.25rem; }
.art-statement-label { color: var(--tncms-text); font-weight: 600; }
.art-statement-text a { color: #2576fb; text-decoration: none; word-break: normal; overflow-wrap: anywhere; }
.art-statement-text a:hover { text-decoration: underline; }
.art-case-statement { display: grid; gap: .45rem; margin-bottom: 1rem; }
.art-case-statement-copy { margin: 0; color: var(--tncms-text-muted); font-size: .92rem; line-height: 1.8; }
.art-case-statement-copy .art-statement-label { margin-right: .4rem; color: #253a59; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.art-case-statement-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: 0; color: var(--tncms-text-muted); font-size: .9rem; line-height: 1.75; }
.art-case-statement-source > span { flex: 0 0 auto; color: #253a59; font-weight: 700; }
.art-case-statement-source > a { min-width: 0; color: #2576fb; text-decoration: none; overflow-wrap: anywhere; }
.art-case-statement-source > a:hover { text-decoration: underline; }
.art-statement > .art-pager { margin-top: .15rem; padding-top: 0; border-top: 0; }
/*上一篇 / 下一篇*/
.art-pager { display: flex; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--tncms-border); font-size: .9rem; }
.art-pager-item { flex: 1; min-width: 0; }
.art-pager-card { display: flex; align-items: center; gap: .5rem; min-height: 3.75rem; padding: 1rem 1.25rem; border: 1px solid var(--tncms-border); border-radius: .75rem; background: #fff; color: var(--tncms-text); text-decoration: none; transition: border-color .2s, background-color .2s, color .2s; }
.art-pager-card:not(.is-disabled):hover { border-color: #94b9fa; color: #2576fb; background: #f1f6ff; }
.art-pager-card:focus-visible { outline: 2px solid #367cf6; outline-offset: 3px; }
.art-pager-card.is-disabled { cursor: default; background: #f3f6fa; }
.art-pager-card.is-disabled:hover { border-color: var(--tncms-border); color: var(--tncms-text-muted); }
.art-pager-label { flex-shrink: 0; color: var(--tncms-text-muted); font-size: .8rem; }
.art-pager-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-pager-next .art-pager-card { justify-content: flex-end; }
.art-pager-none { color: var(--tncms-text-muted); }
/*---------- 相关文章 / 最新文章 ----------*/
.art-about { margin-top: 2.25rem; }
.art-about-title { font-size: 1.1rem; font-weight: 600; color: var(--tncms-text); padding-left: 0.75rem; margin-bottom: 0.75rem; position: relative; line-height: 1.2; }
.art-about-title::before { content: ""; position: absolute; left: 0; top: 0.125rem; width: 0.25rem; height: 1rem; background: #2576fb; border-radius: 0.125rem; }
.art-about-list { list-style: none; margin: 0; padding: 0; }
.art-about-list li { position: relative; padding: 0.563rem 0 0.563rem 1rem; border-bottom: 1px dashed var(--tncms-border); }
.art-about-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.313rem; height: 0.313rem; border-radius: 50%; background: #2576fb; }
.art-about-list a { color: var(--tncms-text); text-decoration: none; font-size: .92rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-about-list a:hover { color: #2576fb; }
/*---------- 响应式 ----------*/
@media (max-width: 991.98px) {
  .art-main { padding: 1.25rem 1rem 1.75rem; }
  .art-title { font-size: 1.3rem; }
  .case-detail-hero, .news-detail-hero { border-radius: .75rem; }
  .article-body img { margin-block: 1.25rem; border-radius: .75rem; }
  .article-body figure { margin-block: 1.25rem; }
  .article-body figure img { margin-block: 0; }
}
@media (max-width: 575.98px) {
  /* 第一行导航与返回，第二行独立分享；保留桌面端的工具顺序。 */
  .art-crumb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; margin-bottom: 1.25rem; }
  .art-crumb .common-breadcrumb { grid-column: 1; grid-row: 1; }
  .art-crumb-actions { display: contents; }
  .art-back { grid-column: 2; grid-row: 1; min-height: 2.5rem; padding-inline: .75rem; }
  .art-share { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; justify-content: space-between; gap: .25rem; padding: .375rem; }
  .art-share-label { margin: 0 .25rem; font-size: .75rem; }
  .art-share-btn { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .5rem; }
  .art-statement { padding: 1rem; margin-top: 1.5rem; border-radius: .875rem; }
  .art-statement-text { font-size: .8125rem; margin-bottom: 1rem; }
  .art-pager { flex-direction: column; gap: .625rem; padding-top: 1rem; }
  .art-pager-card { padding: .875rem; }
  .art-pager-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.6; overflow-wrap: anywhere; }
  .art-pager-next .art-pager-card { justify-content: flex-start; }
  .case-detail-hero-info { align-items: flex-start; padding: .85rem; }
  .case-detail-logo { flex-basis: 3.8rem; width: 3.8rem; height: 3.8rem; }
  .case-detail-logo img { width: 2.7rem; height: 2.7rem; }
}
@media (min-width: 768px) {
  .art-about-body .art-about-list:first-child li { padding-right: 1.5rem; }
}
/** 大屏适配（置于文件末尾以保持最后的覆盖顺序）*/
@media (min-width: 1400px) {
  /*文章正文适度放宽，控制正文行长。*/
  .article-page > .container { width: calc(100% - (var(--tncms-channel-gutter) * 2)); max-width: var(--tncms-channel-readable); }
}