/* ==========================================================================
   聊天宝 文章页专用覆盖样式 —— v3（参考 36Kr 排版尺度）
   /css/article-page.css
   ---------------------------------------------------------------------------
   在 v2（已修复 4 个视觉问题）基础上，吸收 36Kr 的排版尺度：
     · 更大呼吸感：列表项距 16→24px、卡片内距 22/24→24/28px、正文内距 26→32/36px
     · 更低视觉重量：卡片/正文去掉阴影、边框由 #e6e6e6 减淡到 #eef0f3、hover 改边框加深
     · 更宽松正文：行高 1.85→1.9、段距 1.2em→1.6em、图片圆角 6→4px（36Kr 为 2px）
     · 段宽收窄 860→800px（36Kr 为 694px，但中文帮助文档不宜过窄）
   ⚠️ 仍然是卡片式（未照搬 36Kr 的"无框列表"）——帮助中心的长列表需要模块边界。
   ⚠️ 选择器特异性规则同 v2，见下方说明，务必保持作用域前缀。
   ========================================================================== */
/* ==========================================================================
   聊天宝 文章页专用覆盖样式
   /css/article-page.css
   只用于 /article/*.html（模板：bangkefu/template-{list,article}.html）
   加载顺序：bootstrap.min.css → main.css → 本文（保证覆盖优先级）

   ⚠️⚠️ 选择器必须带作用域前缀（.article-list / .article-content）⚠️⚠️
   main.css 里存在这些**更高特异性**的同名规则：
       .article-list li.media            (0,2,1)  → padding / border-bottom
       .article-list li.media img        (0,2,2)  → width:200px !important 级的约束
       .article-list li.media div.desc   (0,2,1)  → font-size
       .article-list ul.pagination       (0,2,1)  → padding-top
       .article-content table th, td     (0,1,2)  → 逐格 1px 边框
       .article-content h1/h2/p           (0,1,1)
   不带前缀（如裸 `.media-list > .media` = (0,2,0)）会被它们盖掉，
   表现为"我写的 padding/边框/字号全部失效"（已实测验证）。
   因此：列表页规则一律以 .article-list 开头，详细页一律以 .article-content 开头。
   —— 仍然不修改 main.css，不影响站内其他 25+ 共享页面。
   断点：>=1025px 一栏 / 769-1024px / <=768px / <=600px / <=400px
   ========================================================================== */

:root {
  --brand: #0092e8;
  --brand-d: #0079c3;
  --brand-l: #e6f3fb;
  --ink: #333;
  --ink-2: #4c4c4c;
  --sub: #666;
  --sub-2: #999;
  --line: #e6e6e6;
  --bg: #f4f4f4;
  --card: #fff;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-h: 0 6px 18px rgba(0, 0, 0, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   列表页：页头标题区（.page-hero 是 .article-list 的兄弟节点，故不加前缀；
   main.css 中没有 .page-hero 规则，无冲突）
   ========================================================================== */
.page-hero {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.page-hero > .container {
  padding-top: 44px;
  padding-bottom: 36px;
}

.page-hero h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}

.page-hero .page-desc {
  color: var(--sub-2);
  font-size: 14px;
  margin: 0;
}

/* ==========================================================================
   列表页：卡片列表（一栏；卡片内留足 padding）
   ========================================================================== */
.article-list {
  background: var(--bg);
  padding: 36px 0 60px;
}

.article-list .media-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 覆盖 main.css `.article-list li.media` 的 padding / border-bottom */
.article-list .media-list > .media {
  display: flex !important;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 28px;
  background: var(--card);
  border: 1px solid #eef0f3;
  border-radius: var(--radius);
  box-shadow: none;
  margin: 0;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
  width: auto;
}

.article-list .media-list > .media:hover {
  transform: translateY(-2px);
  border-color: #d8e2ee;
}

.article-list .media-list > .media + .media {
  margin-top: 0;
}

.article-list .media-list .media-left {
  flex: 0 0 240px;
  width: 240px;
  height: 160px;
  margin: 0;
  padding: 0;
  display: block;
}

.article-list .media-list .media-left-image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
  max-height: none;        /* 覆盖 main.css 的 max-height:110px */
}

/* 覆盖 main.css `.article-list li.media img { width:200px; max-width:200px }` */
.article-list .media-list .media-left-image-container img {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}

.article-list .media-list .media:hover .media-left-image-container img {
  transform: scale(1.05);
}

.article-list .media-list .media-body {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column;
  vertical-align: top;
  width: auto;
}

.article-list .media-list .media-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-list .media-list .media-heading a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.article-list .media-list .media-heading a:hover {
  color: var(--brand);
}

/* 覆盖 main.css `.article-list li.media div.desc`（(0,3,2)：padding-top / font-size）
   必须再加一层 .media-body 把特异性提到 (0,4,0) 才能稳压。 */
.article-list .media-list .media-body .desc {
  color: var(--sub);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  padding-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-list .media-list .desc br {
  display: none;
}

/* 空状态（不支持 :has 的浏览器自动忽略） */
.article-list .media-list:not(:has(.media))::after {
  content: "暂无文章";
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--sub-2);
  font-size: 14px;
}

/* ==========================================================================
   列表页：分页
   覆盖 main.css `.article-list ul.pagination { padding-top:30px }`（(0,2,1)）
   → 用 .article-list .container .pagination（(0,3,0)）压过
   ========================================================================== */
.article-list .container .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 0;
}

.article-list .container .pagination .page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;      /* 关键：让「下一页」这类多字按钮撑开，避免被压成竖排 */
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  float: none;
  font-size: 13px;
  color: var(--sub);
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}

.article-list .container .pagination .page-item.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* 同时覆盖 a 与 span：当前页用的是 <span class="page-link">，
   Bootstrap 3 的 `.pagination > .active > span` 自带 #337ab7 底色+边框，
   只覆盖 a 会留下第二层色块（实测表现为"选中页有两个背景色"）。 */
.article-list .container .pagination .page-item > a,
.article-list .container .pagination .page-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;          /* 由 li 决定：普通项灰、当前项白 */
  text-decoration: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0;
  box-shadow: none !important;
}

.article-list .container .pagination .page-item:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ==========================================================================
   详细页：内容容器 + 标题卡片
   ========================================================================== */
.article-content {
  background: var(--bg);
  padding: 32px 0 56px;
}

/* 标题区卡片：与正文卡片同宽同风格。
   原结构里标题/日期/摘要直接铺在灰底上，因此给人"没有 padding"的感觉。 */
.article-content .article-header {
  max-width: 800px;
  margin: 0 auto 20px;
  padding: 30px 32px 28px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--radius);
  box-shadow: none;
}

/* 面包屑：纯文本条，与卡片同轴 */
.article-content .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--sub-2);
  padding: 0 0 12px;
  max-width: 800px;
  margin: 0 auto 16px;
  border-bottom: 1px dashed #e6e6e6;
  list-style: none;
  background: transparent;
  border-radius: 0;
}

.article-content .breadcrumb a {
  color: var(--sub);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.article-content .breadcrumb a:hover {
  color: var(--brand);
}

.article-content .breadcrumb .sep {
  color: #ccc;
  margin: 0 2px;
}

.article-content .breadcrumb .current {
  color: var(--sub-2);
  max-width: 26em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 标题（覆盖 main.css `.article-content h1 { font-size:30px; line-height:42px }`） */
.article-content .article-title,
.article-content h1.article-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
  text-align: left;
}

.article-content .article-date {
  font-size: 12px;
  color: var(--sub-2);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-content .article-date::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 4px;
}

.article-content .article-summary {
  font-size: 14px;
  color: #5a6472;
  line-height: 1.75;
  margin: 0;
  padding: 14px 16px;
  background: #f7f9fc;
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
}

/* main.css 给 .article-summary 加了装饰短线 :after（58px×0.5px 灰线）。
   新设计已用"卡片 + 浅底 + 左竖条"承担分隔作用，这条线显得多余，隐藏之。 */
.article-content .article-summary::after,
.article-content .article-header .article-summary::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   详细页：正文
   ========================================================================== */
.article-content .article-desc {
  background: #fff;
  padding: 32px 36px 36px;
  font-size: 15px;
  line-height: 1.9;
  color: #262626;
  word-wrap: break-word;
  border: 1px solid #eef0f3;
  border-radius: var(--radius);
  box-shadow: none;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 正文首个重复 H1 隐藏（与 .article-title 同文本） */
.article-content .article-desc > h1:first-child {
  display: none;
}

/* 覆盖 main.css `.article-content h2/h3/h4`（同为 (0,1,1)，靠加载顺序取胜；
   这里主动加前缀以确保稳定） */
.article-content .article-desc h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  line-height: 1.5;
}

.article-content .article-desc h2:first-child {
  margin-top: 4px;
}

.article-content .article-desc h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 10px;
  padding-left: 8px;
  border-left: 3px solid #d6ecff;
  line-height: 1.5;
}

.article-content .article-desc h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 16px 0 8px;
}

.article-content .article-desc p {
  margin: 0 0 1.6em;
  padding: 0;
}

/* 覆盖 main.css `.article-content a img / p img / p video { max-width:690px }` */
.article-content .article-desc img,
.article-content .article-desc p img,
.article-content .article-desc a img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin: 1.2em auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.article-content .article-desc a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 146, 232, 0.3);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.article-content .article-desc a:hover {
  color: var(--brand-d);
  border-bottom-color: var(--brand-d);
}

.article-content .article-desc strong {
  color: var(--ink);
  font-weight: 600;
}

/* main.css 在 blockquote 左侧放了一个 24×24 的引号图标（:before）。
   新设计用"浅底 + 左竖条"表达引用，图标叠加会显得杂乱，隐藏之。 */
.article-content .article-desc blockquote {
  margin: 1.2em 0;
  padding: 12px 16px;
  background: var(--brand-l);
  border-left: 4px solid var(--brand);
  color: var(--sub);
  border-radius: 0 6px 6px 0;
}

.article-content .article-desc blockquote::before {
  display: none !important;
  content: none !important;
}

.article-content .article-desc blockquote p:last-child {
  margin-bottom: 0;
}

.article-content .article-desc code {
  background: #f4f6f9;
  color: #c0392b;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.article-content .article-desc pre {
  margin: 1.2em 0;
  padding: 12px 16px;
  background: #1a1f2b;
  color: #e6e9ef;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
}

.article-content .article-desc pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.article-content .article-desc ul,
.article-content .article-desc ol {
  padding-left: 22px;
  margin: 0 0 1.2em;
}

.article-content .article-desc li {
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   表格：用 separate + 整体圆角外框，避免 collapse 拼出的直角硬边。
   必须压过 main.css：
     `.article-content table`        (0,1,1) → box-shadow / collapse
     `.article-content table th, td` (0,1,2) → 逐格 1px 实边框（会导致双线、四角脏）
   本段选择器为 (0,2,1)/(0,2,2)，类数更多 → 胜出。
   ⚠️ 圆角与"去边线"都必须区分 thead / tbody：
      裸写 `tr:first-child` 会同时命中 thead 首行和 tbody 首行，
      结果是表头被去掉下边线、tbody 首行被误加圆角。
   -------------------------------------------------------------------------- */
.article-content .article-desc table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.2em 0;
  font-size: 13.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}

.article-content .article-desc table th,
.article-content .article-desc table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.article-content .article-desc table thead th {
  background-color: #f7f9fc;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

/* main.css 给首列加了灰底 + nowrap，与新设计冲突，恢复为普通单元格 */
.article-content .article-desc table tbody td:first-child {
  background-color: transparent;
  font-weight: 400;
  color: inherit;
  white-space: normal;
}

/* 去掉 main.css 的斑马纹与 hover 底色，保持干净 */
.article-content .article-desc table tbody tr:nth-child(even),
.article-content .article-desc table tbody tr:nth-child(odd),
.article-content .article-desc table tbody tr:hover {
  background-color: transparent;
}

/* 末列去掉右边线（外框已有） */
.article-content .article-desc tr > *:last-child {
  border-right: 0;
}

/* 末行去掉下边线：只针对 tbody 的最后一行，以及 table 直接挂 tr 的写法 */
.article-content .article-desc tbody tr:last-child > th,
.article-content .article-desc tbody tr:last-child > td,
.article-content .article-desc table > tr:last-child > th,
.article-content .article-desc table > tr:last-child > td {
  border-bottom: 0;
}

/* 四角圆角 */
.article-content .article-desc thead tr:first-child > *:first-child,
.article-content .article-desc table > tr:first-child > *:first-child {
  border-top-left-radius: 8px;
}

.article-content .article-desc thead tr:first-child > *:last-child,
.article-content .article-desc table > tr:first-child > *:last-child {
  border-top-right-radius: 8px;
}

.article-content .article-desc tbody tr:last-child > *:first-child,
.article-content .article-desc table > tr:last-child > *:first-child {
  border-bottom-left-radius: 8px;
}

.article-content .article-desc tbody tr:last-child > *:last-child,
.article-content .article-desc table > tr:last-child > *:last-child {
  border-bottom-right-radius: 8px;
}

/* 无 thead 时（tbody 直接是 table 的第一个子元素），由首行承担顶部圆角 */
.article-content .article-desc table > tbody:first-child > tr:first-child > *:first-child {
  border-top-left-radius: 8px;
}

.article-content .article-desc table > tbody:first-child > tr:first-child > *:last-child {
  border-top-right-radius: 8px;
}

.article-content .article-desc hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}

/* --------------------------------------------------------------------------
   上下篇
   main.css 的 `.article-content .next-link-title:after` 会在标题下再画一条 20px 短线，
   与本设计的全宽分隔线重复，隐藏之。
   -------------------------------------------------------------------------- */
.article-content .next-link-title {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.5px;
  text-align: left;
}

.article-content .next-link-title::after {
  display: none !important;
  content: none !important;
}

.article-content .next-link {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.article-content .next-link:hover {
  color: var(--brand);
}

.article-content hr {
  border-top: 1px solid var(--line);
  margin: 32px 0 20px;
}

/* 右侧客服悬浮栏避让（main.css 的 .side-bar 在 576-1024px 会压住卡片右缘） */

/* ==========================================================================
   详细页：上一篇 / 下一篇 —— 收进与正文同宽的白卡片
   原结构（模板里是 .container > hr + .row > 两个 .col-md-6）平铺在灰底上，
   与上方两张白卡片风格不统一。这里把 .row 本身做成卡片，并隐藏原 <hr/>。
   选择器说明：.article-content > .container > .row 只会命中这一处
   （第一个 .container 装的是面包屑/标题卡片/正文，没有 .row；
     正文内部的 .row 层级更深，不会误伤）。
   ========================================================================== */
/* 原 <hr/> 分隔线由卡片边界取代 */
.article-content > .container > hr {
  display: none;
}

.article-content > .container > .row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 800px;
  /* 顶部间距 = .article-header 的 margin-bottom(20px)，保证与正文卡片之间
     留出一条与上方同宽的缝隙；原 <hr/> 已 display:none，不再提供间距。 */
  margin: 20px auto 0;
  padding: 24px 32px 26px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--radius);
}

/* 两列等宽，去掉 Bootstrap 的 float / 负 margin / 固定列宽 */
.article-content > .container > .row > [class*="col-"] {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  float: none;
}

/* 存在第二列时，加左分隔线与间距（只有"上一篇"时不会出现） */
.article-content > .container > .row > [class*="col-"] + [class*="col-"] {
  padding-left: 28px;
  border-left: 1px solid #eef0f3;
}

/* 卡片内的上下篇标题 */
.article-content > .container > .row .next-link-title {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
}

.article-content > .container > .row .next-link {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.article-content > .container > .row .next-link:hover {
  color: var(--brand);
}
/* 卡片内窄屏：两列改上下堆叠，分隔线由竖变横 */
@media (max-width: 768px) {
  .article-content > .container > .row {
    display: block;
    padding: 20px 20px 22px;
  }
  .article-content > .container > .row > [class*="col-"] + [class*="col-"] {
    margin-top: 16px;
    padding-top: 16px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #eef0f3;
  }
}

@media (min-width: 576px) and (max-width: 1024px) {
  .article-list .container,
  .article-content > .container {
    padding-right: 76px;
  }
}

/* 移动端正文 + 上下篇改为上下堆叠 */
@media (max-width: 768px) {
  .article-content .col-sm-12.col-md-6 {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   返回顶部（.back-to-top 为新增元素，无冲突）
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 146, 232, 0.4);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.back-to-top.is-visible {
  display: flex;
}

.back-to-top:hover {
  background: var(--brand-d);
  transform: translateY(-2px);
}

/* ==========================================================================
   响应式（PC 已是一栏，这里只调图片尺寸与留白）
   ========================================================================== */

@media (max-width: 1024px) {
  .article-list .media-list .media-left {
    flex: 0 0 200px;
    width: 200px;
    height: 113px;
  }
  .article-content .article-title {
    font-size: 21px;
  }
}

@media (max-width: 768px) {
  .page-hero > .container {
    padding-top: 28px;
    padding-bottom: 22px;
  }
  .page-hero h1 {
    font-size: 22px;
  }
  .article-list .media-list > .media {
    padding: 18px 20px;
    gap: 16px;
  }
  .article-list .media-list .media-left {
    flex: 0 0 160px;
    width: 160px;
    height: 90px;
  }
  .article-list .media-list .media-heading {
    font-size: 15.5px;
  }
  .article-list .media-list .media-body .desc {
    font-size: 13px;
  }
  .article-content .article-header {
    padding: 22px 20px 20px;
  }
  .article-content .article-title {
    font-size: 19px;
  }
  .article-content .article-desc {
    padding: 20px 18px;
    font-size: 14.5px;
  }
  .article-list .container .pagination .page-item {
    min-width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .article-list {
    padding: 20px 0 40px;
  }
  .article-list .media-list {
    gap: 12px;
  }
  .article-list .media-list > .media {
    padding: 14px 16px;
    gap: 13px;
  }
  .article-list .media-list .media-left {
    flex: 0 0 120px;
    width: 120px;
    height: 68px;
  }
  .article-list .media-list .media-heading {
    font-size: 14.5px;
    -webkit-line-clamp: 2;
  }
  .article-list .media-list .media-body .desc {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
  }
  .article-content .article-title {
    font-size: 17.5px;
  }
  .article-content .article-desc {
    font-size: 14px;
    line-height: 1.8;
  }
  .article-content .article-desc h2 {
    font-size: 17px;
    margin: 22px 0 10px;
  }
  .article-content .article-desc h3 {
    font-size: 14.5px;
  }
}

@media (max-width: 400px) {
  .article-list .media-list > .media {
    padding: 12px 14px;
    gap: 11px;
  }
  .article-list .media-list .media-left {
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
  }
  .article-content .article-title {
    font-size: 16px;
  }
  .article-content .article-desc {
    font-size: 13.5px;
    padding: 16px 14px;
  }
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}