/* ==========================================================================
 * EyouCMS 适配样式（在 main.css 之后加载）
 * 只覆盖两件事：
 *   1) 系统分页标签 {eyou:pagelist} 输出的 ul.pagination → 画成设计稿的 .page-btn 观感
 *   2) 后台编辑器正文（article-body）里的图片 / 表格自适应
 * 其余样式全部沿用 main.css，不改一行。
 * ========================================================================== */

/* ---- 分页 ---- */
/* 形态一：系统 dataTables 结构（部分版本输出） */
.dataTables_paginate { margin-top: 56px; }
.dataTables_paginate ul.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dataTables_paginate ul.pagination li a {
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: all .2s;
}
.dataTables_paginate ul.pagination li a:hover { border-color: var(--red); color: var(--red); }
.dataTables_paginate ul.pagination li.active a { background: var(--red); border-color: var(--red); color: #fff; }
.dataTables_paginate ul.pagination li.disabled a { opacity: .38; cursor: not-allowed; }
/* “共 N 条记录”不在设计稿内，隐藏 */
.dataTables_paginate .rows { display: none; }

/* 形态二：div.pagination > li > a（实测输出形态） */
.pagination { list-style: none; padding: 0; margin-top: 56px; }
.pagination li { display: inline-block; margin: 0 4px; }
.pagination li a {
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: all .2s;
}
.pagination li a:hover { border-color: var(--red); color: var(--red); }
.pagination li.active a { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- 后台编辑器正文 ---- */
.article-body img { max-width: 100%; height: auto; }
.article-body table { width: 100%; border-collapse: collapse; margin: 26px 0; }
.article-body td, .article-body th { border: 1px solid var(--line); padding: 8px 12px; }
.article-body ul, .article-body ol { padding-left: 2em; margin-bottom: 26px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

/* ---- 搜索框（EyouCMS searchform 输出原生 form/input，样式已在 main.css） ---- */
.search-box input { margin: 0; }

/* ---- 面包屑分隔竖线 ----
   main.css 里 .crumb span 取 color: var(--line) (#E4E1DC)，那是按纯纸底定的色。
   但竖线所在的 .page-head 铺了 hero-tex.jpg 底纹，最暗处约 #E0DBD5，
   两者亮度几乎相同，实测竖线完全看不见。
   这里单独把竖线改深一档：#8A8378 在底纹上对比约 2.8:1 —— 清晰可辨，
   又比旁边的面包屑文字（#5A5A5A）浅，不抢视线。 */
.crumb span { color: #8A8378; }

/* ---- 页脚 · 公众号二维码 ----
   位置：页脚「联系我们」栏下方（footer.htm 尾部）。
   白卡包边 → 在淡墨米色页脚（#EDE8DE）和深色页脚上都读得出「这是可扫描的码」，
   也让二维码的黑块不与页脚底色糊在一起（扫码需要四周留白，白卡正好充当静区）。
   图片未上传（web_attr_146 为空）时模板整块不输出，这里不必写 empty 态。 */
.footer-qr {
  margin-top: 28px;
  width: fit-content;         /* 容器宽度收敛到二维码卡面（100px）——
                                 说明文字以此为基准居中，与卡片左右对齐；
                                 若将来说明文字比卡面还长，容器才随之变宽 */
  max-width: 100%;
}
.footer-qr-img {
  display: block;
  margin: 0 auto;             /* 容器被文字撑宽时，图片仍在容器内居中 */
  width: 86px;
  height: 86px;
  padding: 6px;               /* 留白即扫码静区，不要压到 4px 以下 */
  box-sizing: content-box;    /* 86 + 12 padding + 2 border = 100 见方的卡面 */
  background: #fff;
  border: 1px solid #D9D2C4;
  border-radius: 2px;
  object-fit: contain;
}
.footer-qr-cap {
  margin-top: 12px;
  text-align: center;            /* 以二维码卡面宽度为基准居中 */
  font-size: 12.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: rgba(255,255,255,.55);   /* 深色页脚默认 */
}
html.sk-paper .footer-qr-cap { color: rgba(27,27,27,.72); }   /* 浅色页脚 */
html.sk-paper .footer-qr-img { border-color: #D9D2C4; }
@media (max-width: 640px) {
  .footer-qr { margin-top: 22px; }
  .footer-qr-cap { margin-top: 10px; font-size: 12px; }
}

/* ---- 信息格为奇数个时，最后一格通栏补满 ----
   联系我们页原为 6 格（办公地址 / 邮编 / 电话 / 邮箱 / 工作时间 / 总会官网），
   按要求去掉「联系电话」后剩 5 格。宽屏是 2 列栅格，落单的那格右侧会空出半格，
   露出 .info-grid 自身的底色（--line 浅灰 #E4E1DC），看起来像表格缺了一块，
   所以让落单格横跨两列补满。
   :last-child:nth-child(odd) 只在「总数为奇数」时命中 —— 分会简介页的 8 格 / 4 格
   是偶数，不受影响。
   仅宽屏生效：≤860px 时 main.css 把栅格改成单列，本来就无缺口，且 span 2 会撑出隐式列。 */
@media (min-width: 861px) {
  .info-grid > .info-cell:last-child:nth-child(odd) { grid-column: span 2; }
}