/* ============================================================
   步哥看天下 ･ 打卡天中（TIANZHONG CHECK-IN）
   独立样式表：只服务 checkin.html / checkin-post.html 两个新页面。
   设计语言刻意区别于「天中物产」的商品卡墙：
     ･ 栏目页 = 路线索引（大标题 + 数字统计 + 文字页签 + 竖排站点清单）
     ･ 详情页 = 路线站牌（NO. 站号 + 站点标签 + 速览）
   配色只取 style.css 的变量（ink / paper / acid / line），深浅模式通用。
   窄屏降级：≤1100 收缩布局；≤760 手机版专设（清单行 → 打卡卡片、
   级别/门票口语高亮章、页头像素标签收英文尾巴）。
   ============================================================ */

/* ============================================================
   一、栏目页：文字页签（替代物产页的圆角筛选块）
   ============================================================ */
/* 应步哥要求（2026-10-06）：手机端页眉学群英传——只留绿色像素标签，大标题与描述行隐藏，电脑端整块保留 */
@media (max-width: 760px) {
  #checkinContent .wb-section__heading { margin-bottom: 14px; }
  #checkinContent .wb-section__heading h2,
  #checkinContent .wb-section__heading > p { display: none; }
}

.wb-ck-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 30px 0 22px;
  border-bottom: 1px solid var(--wb-line);
}

.wb-ck-tabs .wb-hero-filter__btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 4px 2px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--wb-body);
  font-size: 15.5px;
  color: var(--wb-muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

.wb-ck-tabs .wb-hero-filter__btn b {
  font-family: var(--wb-pixel);
  font-size: 11px;
  color: var(--wb-muted);
  transition: color .16s ease;
}

.wb-ck-tabs .wb-hero-filter__btn:hover { color: var(--wb-ink); }

.wb-ck-tabs .wb-hero-filter__btn.is-active {
  color: var(--wb-ink);
  border-bottom-color: var(--wb-acid);
  font-weight: 600;
}

.wb-ck-tabs .wb-hero-filter__btn.is-active b { color: var(--wb-label); }

/* ============================================================
   二、栏目页：路线清单（一行一个站点）
   ============================================================ */
.wb-ck-rows { display: grid; gap: 0; }

.wb-ck-row {
  display: grid;
  grid-template-columns: 56px 172px minmax(0, 1fr) 104px;
  gap: 26px;
  align-items: center;
  padding: 20px 8px;
  border-bottom: 1px solid var(--wb-line);
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, padding .16s ease;
}

.wb-ck-row:hover,
.wb-ck-row:focus-visible {
  padding-left: 16px;
  padding-right: 0;
  background: var(--wb-acid-soft);
}

/* 站号 */
.wb-ck-row__no {
  font-family: var(--wb-pixel);
  font-size: 24px;
  line-height: 1;
  color: var(--wb-note-no);
  transition: color .16s ease;
}

.wb-ck-row:hover .wb-ck-row__no { color: var(--wb-ink); }

/* 方图 + 县区角标 */
.wb-ck-row__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--wb-ink);
  background: var(--wb-surface);
}

.wb-ck-row__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.wb-ck-row:hover .wb-ck-row__shot img { transform: scale(1.04); }

.wb-ck-row__county {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 3px 8px;
  background: var(--wb-chip);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--wb-on-accent);
}

/* 文字区 */
.wb-ck-row__body { min-width: 0; }

.wb-ck-row__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wb-ck-row__head strong {
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--wb-ink);
}

.wb-ck-row__kind {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--wb-line);
  font-size: 11.5px;
  font-style: normal;
  color: var(--wb-muted);
}

.wb-ck-row__sum {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--wb-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wb-ck-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--wb-muted);
}

/* 级别 / 门票：口语高亮章（级别=酸绿荧光笔，门票=墨底价签；2026-10-06 起电脑版同款） */
.wb-ck-row__meta em {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.wb-ck-row__meta em:first-child {
  background: var(--wb-acid);
  color: var(--wb-on-acid, var(--wb-ink));
}

.wb-ck-row__meta em + em {
  background: var(--wb-chip);
  color: var(--wb-on-accent);
}

/* 深色模式：酸绿位变赭红，级别章文字换纸色保对比度 */
html.dark .wb-ck-row__meta em:first-child { color: var(--wb-on-accent); }

/* 右侧行动区 */
.wb-ck-row__go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  color: var(--wb-muted);
  transition: color .16s ease, transform .16s ease;
}

.wb-ck-row__go .hl { width: 17px; height: 17px; }
.wb-ck-row:hover .wb-ck-row__go { color: var(--wb-ink); transform: translateX(3px); }

/* 列表底部的条数说明 */
.wb-page-checkin .wb-listbar { border-top: 0; }

/* ============================================================
   三、详情页：路线站牌（页头下方）
   ============================================================ */
.wb-ck-stop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 13px 18px;
  border: 2px solid var(--wb-ink);
  background: var(--wb-surface);
}

.wb-ck-stop__no {
  flex: none;
  padding: 3px 9px;
  background: var(--wb-chip);
  font-family: var(--wb-pixel);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--wb-on-accent);
}

.wb-ck-stop__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--wb-ink);
}

.wb-ck-stop__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wb-ck-stop__tags i {
  padding: 2px 9px;
  border: 1px solid var(--wb-line);
  font-size: 12px;
  font-style: normal;
  color: var(--wb-muted);
}

.wb-ck-stop__seq {
  margin-left: auto;
  font-family: var(--wb-pixel);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--wb-note-no);
}

/* ============================================================
   四、详情页：打卡速览（比物产的四宫格更重、更像路书）
   ============================================================ */
.wb-detail--checkin .wb-produce-facts {
  border: 2px solid var(--wb-ink);
  border-top: 2px solid var(--wb-ink);
  background: var(--wb-surface);
}

.wb-detail--checkin .wb-produce-facts > div { padding: 16px 18px 17px; }

.wb-detail--checkin .wb-produce-facts dt {
  display: inline-block;
  padding: 3px 8px;
  background: var(--wb-chip);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--wb-on-accent);
}

.wb-detail--checkin .wb-produce-facts dd {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.62;
}

/* ============================================================
   五、详情页：编号章节标题 + 正文尾部各块
   ============================================================ */
.wb-ck-sec__no {
  display: inline-block;
  margin-right: 12px;
  font-family: var(--wb-pixel);
  font-size: 14px;
  color: var(--wb-label);
  vertical-align: 2px;
}

.wb-detail--checkin .wb-produce-block { margin-top: 0; }

.wb-detail--checkin .wb-produce-block h2 {
  padding-top: 26px;
  border-top: 2px solid var(--wb-ink);
}

/* 打卡清单：扁平清单（显式排掉正文 ul 的样式泄漏） */
.wb-checkin-list {
  margin: 26px 0 0;
  padding: 4px 0 0;
  list-style: none;
  border-top: 1px solid var(--wb-line);
}

.wb-detail--checkin .wb-prose .wb-checkin-list li::before { content: none; }
.wb-detail--checkin .wb-prose .wb-checkin-list li + li { margin-top: 0; }
.wb-detail--checkin .wb-prose .wb-checkin-list li { padding-left: 2px; }

.wb-checkin-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 2px 14px;
  border-bottom: 1px dashed var(--wb-line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--wb-muted);
  background: none;
}

.wb-checkin-list li .hl {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: var(--wb-ink);
}

.wb-checkin-list li b {
  display: inline;
  margin-right: 10px;
  color: var(--wb-ink);
  font-size: 15px;
}

/* 怎么去：两列信息表，标签用墨底纸字（深色模式同样清楚） */
.wb-checkin-go {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--wb-ink);
  background: var(--wb-surface);
}

.wb-checkin-go > div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 18px 16px;
  border-right: 2px solid var(--wb-ink);
  border-bottom: 2px solid var(--wb-ink);
}

.wb-checkin-go > div:nth-child(2n) { border-right: 0; }
.wb-checkin-go > div:nth-last-child(-n+2) { border-bottom: 0; }
.wb-checkin-go > div:only-child { grid-column: 1 / -1; border-right: 0; }

.wb-checkin-go dt {
  flex: none;
  padding: 3px 9px;
  background: var(--wb-chip);
  font-family: var(--wb-pixel);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--wb-on-accent);
}

.wb-checkin-go dd { margin: 1px 0 0; font-size: 14px; line-height: 1.72; color: var(--wb-ink); }
.wb-checkin-go dd small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--wb-muted); }

/* 小贴士 */
.wb-checkin-tips {
  margin: 22px 0 0;
  padding: 18px 22px 19px;
  border-left: 6px solid var(--wb-acid);
  background: var(--wb-acid-soft);
}

.wb-checkin-tips ul { margin: 0; padding: 0; list-style: none; }

.wb-checkin-tips li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--wb-ink);
}

.wb-checkin-tips li + li { margin-top: 9px; }

.wb-checkin-tips li::before {
  content: "▸";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--wb-label);
}

/* 相关阅读：详情页相关推荐固定两列 */
.wb-detail--checkin ~ .wb-related .wb-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 深色模式下，pages.css 的旧规则会把选中页签染成白字，这里按同权重压回 */
html.dark .wb-ck-tabs .wb-hero-filter__btn.is-active { color: var(--wb-ink); }
html.dark .wb-ck-tabs .wb-hero-filter__btn b { color: var(--wb-muted); }
html.dark .wb-ck-tabs .wb-hero-filter__btn.is-active b { color: var(--wb-label); }

/* ============================================================
   六、窄屏基础降级（不做手机版设计，只保不崩）
   ============================================================ */
@media (max-width: 1100px) {

  .wb-ck-row { grid-template-columns: 40px 140px minmax(0, 1fr); gap: 18px; }
  .wb-ck-row__go { grid-column: 3; justify-content: flex-start; margin-top: 4px; }
}

@media (max-width: 760px) {

  .wb-ck-tabs { gap: 18px; overflow-x: auto; }

  /* 页头像素标签：手机版留「CHECK-IN / 专题 ･ TIANZHONG」（只收尾部的 CHECK-IN），字号沿用 14px 原尺寸 */
  .wb-topic .ck-lb-en-tail { display: none; }

  /* -- 站点清单：一行一站 → 一张一张打卡卡片（留白为主，不加投影，读起来清爽） -- */
  .wb-ck-rows { gap: 22px; }
  .wb-ck-row {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "no body" "shot shot";
    row-gap: 12px;
    padding: 15px 15px 17px;
    border: 1px solid var(--wb-ink);
    background: var(--wb-surface);
    box-shadow: none;
  }
  /* 手机上没有 hover，去掉位移反馈，防点按时抖动 */
  .wb-ck-row:hover,
  .wb-ck-row:focus-visible { padding-left: 15px; padding-right: 15px; background: var(--wb-surface); }

  .wb-ck-row__no { grid-area: no; font-size: 26px; }
  .wb-ck-row__body { grid-area: body; }
  .wb-ck-row__shot { grid-area: shot; }
  .wb-ck-row__go { display: none; }

  .wb-ck-row__head strong { font-size: 19px; }
  .wb-ck-row__kind { padding: 2.5px 8px; font-size: 11px; }
  .wb-ck-row__sum { font-size: 13.5px; line-height: 1.72; -webkit-line-clamp: 3; }

  /* 级别 / 门票高亮章已提升为全局样式（电脑版同款），手机只留间距微调 */
  .wb-ck-row__meta { margin-top: 13px; }

  .wb-checkin-go { grid-template-columns: 1fr; }
  .wb-checkin-go > div { border-right: 0; }
  .wb-checkin-go > div:nth-last-child(-n+2) { border-bottom: 2px solid var(--wb-ink); }
  .wb-checkin-go > div:last-child { border-bottom: 0; }

  .wb-detail--checkin .wb-produce-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}