/* ============================================================
   明升历典 · 词驱动内容页样式
   用途：/xingshi/（姓氏取名） 与 /wenda/（民俗问答）
   ------------------------------------------------------------
   为什么要单独一个文件：
     site.css 与 longtail.css 已被既有 855 个页面按 hash 文件名引用
     （site.afeacc89.css / longtail.92a507a7.css）。若改动其内容，
     hash 与实际文件不符，会造成全站样式引用失效。
     因此新频道一律把增量样式放这里，既有页面零改动。
   ============================================================ */

/* ---------- 通用表格（站点原先只有 .tbl 类名、无对应样式） ---------- */
.tbl, .xs-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 8px 0 2px;
  background: #fff;
}
.tbl th, .xs-tbl th {
  background: #f5f3fb;
  color: #4a2f6b;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid #ece4ff;
  white-space: nowrap;
  vertical-align: top;
}
.tbl td, .xs-tbl td {
  padding: 9px 12px;
  border: 1px solid #ece4ff;
  line-height: 1.75;
  vertical-align: top;
}
.tbl tr:nth-child(even) td, .xs-tbl tr:nth-child(even) td { background: #fcfbff; }

/* ---------- 姓氏页：名字表 ---------- */
.xs-tbl .xs-nm {
  font-size: 16px;
  font-weight: 700;
  color: #4a2f6b;
  letter-spacing: 1px;
  white-space: nowrap;
}
.xs-tbl .xs-nm + td b {
  font-size: 15px;
  color: #6b3fa0;
}
.xs-tbl td small {
  display: inline-block;
  margin: 0 10px 0 2px;
  font-size: 11.5px;
  line-height: 1.5;
  vertical-align: middle;
}
.xs-tbl .xs-mean {
  color: #55506b;
  font-size: 13px;
}

/* ---------- 姓氏页：档案表（th 作行标题） ---------- */
.xs-tbl tr th:first-child { width: 108px; }

/* ---------- 问答页：小标签行 ---------- */
.tag-row a.tag,
.tag-row span.tag {
  display: inline-block;
  margin: 3px 6px 3px 0;
}

/* ---------- 索引页：姓氏卡片的文字层级 ---------- */
.lead-card .t { font-weight: 600; }
.lead-card .d { line-height: 1.6; }

/* ---------- 相关问答列表：末尾「查看全部」 ---------- */
.related-list a.all {
  background: transparent;
  color: #6b3fa0;
  font-weight: 600;
  padding-left: 12px;
}

/* ---------- 卡片网格：紧凑模式 ----------
   site.css 的 .lead-card 是「图标 + 标题 + 描述」三列横排，而默认 .lead-grid
   为 2 列（每卡约 500px 宽），三列放得下。索引页要给 20 个姓氏排多列，
   卡片变窄后三列会互相挤压、文字碎成竖条；故窄卡场景改为
   「图标 + 标题」同行、「描述」独占第二行。
   索引页自身的网格用 .lead-grid.wide，页内 crossPromo 容器用 .lg-wide。 */
.lead-grid.wide,
.lg-wide .lead-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}
.lead-grid.wide .lead-card,
.lg-wide .lead-grid .lead-card {
  flex-wrap: wrap;
  gap: 6px 10px;
  row-gap: 5px;
  padding: 12px 14px;
}
.lead-grid.wide .lead-card .ico,
.lg-wide .lead-grid .lead-card .ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  font-size: 19px;
}
.lead-grid.wide .lead-card .t,
.lg-wide .lead-grid .lead-card .t {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
  align-self: center;
  font-size: 14px;
}
.lead-grid.wide .lead-card .d,
.lg-wide .lead-grid .lead-card .d {
  flex: 1 1 100%;
  font-size: 12.5px;
}

/* ---------- 首屏 hero 内标签与标题的间距 ---------- */
.shan-hero .hero-h1 { letter-spacing: .5px; }
.shan-hero .hero-p { max-width: 62ch; }

/* ---------- 移动端 ---------- */
@media (max-width: 560px) {
  .tbl, .xs-tbl { font-size: 12.5px; }
  .tbl th, .xs-tbl th, .tbl td, .xs-tbl td { padding: 7px 8px; }
  .xs-tbl .xs-nm { font-size: 14.5px; letter-spacing: 0; }
  .xs-tbl .xs-mean { font-size: 12px; }
  .xs-tbl td small { display: block; margin: 2px 0 6px; }
  .xs-tbl tr th:first-child { width: 84px; }
  .lead-grid.wide,
  .lg-wide .lead-grid { grid-template-columns: 1fr; }
  .shan-hero { padding: 20px 18px; }
  .hero-h1 { font-size: 20px; }
}