/**
 * 城市社群与城市频道左侧导航栏样式。
 *
 * 只在城市频道页、`/community/` 归档页与单帖页加载（见 functions.php 的
 * `anchanglu_theme_is_community_endpoint()`），不给全站多背一份用不到的 CSS。
 *
 * 色值全部取 `:root` 令牌（anchanglu.css），组件不写死颜色；`cm-` 前缀为本文件
 * 专属命名空间，不与全站既有类冲突。
 */

/* =============================================================================
   ① 城市频道：左「本页栏目」导航 + 右主内容列
   ============================================================================= */

.city-portal {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 26px var(--gutter) 0;
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.city-portal__main { min-width: 0; display: grid; gap: 22px; }

/* 主内容列内的版块沿用全站骨架，但去掉重复的容器上限与水平内边距——
   否则在 264px 频道栏之后又会被 `.container` 收窄一次。 */
.city-portal__main .container { max-width: none; padding-inline: 0; }
.city-portal__main > .section:first-child { padding-top: 0; }

/* 锚点跳转时给吸顶导航留出高度，避免版块标题被压住 */
.city-portal__main > .section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* 频道栏底部「我要发帖」按钮与上方标签组留一点距离 */
.city-rail__cta { margin-top: 12px; }

@media (max-width: 1080px) {
  .city-portal { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .city-portal__main { gap: 18px; }
}

/* =============================================================================
   ② 城市社群：板块栏 + 帖子摘要卡
   ============================================================================= */

.cm-board { display: grid; gap: 14px; }

.cm-board__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.cm-board__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.cm-chip {
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  color: var(--ink-600); font-size: 13px; font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.cm-chip:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-800); }
.cm-chip.is-active { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }

.cm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.cm-card {
  display: grid; gap: 8px; padding: 16px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cm-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); transform: translateY(-1px); }

.cm-card__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-500);
}

.cm-type { padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; }
.cm-type--discuss  { background: var(--brand-50);  color: var(--brand-800); }
.cm-type--question { background: var(--accent-100); color: var(--accent-700); }
.cm-type--share    { background: var(--jade-100);   color: var(--jade-700); }
.cm-type--help     { background: var(--gold-100);   color: var(--gold-700); }

.cm-card__pin { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-700); font-weight: 600; }
.cm-card__pin svg { width: 13px; height: 13px; }

.cm-card__city {
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-600); font-weight: 600;
}
.cm-card__city:hover { background: var(--brand-50); color: var(--brand-800); }
.cm-card__time { margin-left: auto; }

.cm-card__title { font-size: 15.5px; line-height: 1.5; }
.cm-card__title a { color: var(--ink-900); }
.cm-card__title a:hover { color: var(--brand-700); }

.cm-card__excerpt { margin: 0; color: var(--ink-500); font-size: 13.5px; line-height: 1.7; }

.cm-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-500);
}
.cm-card__author, .cm-card__replies { display: inline-flex; align-items: center; gap: 5px; }
.cm-card__author svg, .cm-card__replies svg { width: 14px; height: 14px; }
.cm-card__replies { color: var(--brand-700); font-weight: 600; }

.cm-board__more { margin: 0; }

.cm-empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 30px 20px; background: var(--paper-2);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
}
.cm-empty__icon {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand-50); color: var(--brand-700);
}
.cm-empty__icon svg { width: 22px; height: 22px; }
.cm-empty strong { font-size: 15px; }
.cm-empty p { margin: 0; max-width: 460px; color: var(--ink-500); font-size: 13.5px; line-height: 1.7; }
.cm-empty .btn { margin-top: 6px; }

/* =============================================================================
   ③ /community/ 归档页
   ============================================================================= */

.cm-archive { display: grid; gap: 18px; }
.cm-archive .cm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-archive__count { margin: 0; color: var(--ink-500); font-size: 13.5px; }

/* 归档页的城市筛选表单 */
.cm-board__city { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-600); }
.cm-board__city select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink-800); font-size: 13px;
}

/* =============================================================================
   ④ 单帖页
   ============================================================================= */

.cm-thread__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: var(--ink-500);
}
.cm-thread__meta a { color: var(--brand-700); font-weight: 600; }
.cm-thread__body { margin-top: 16px; }
.cm-thread__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* =============================================================================
   ⑤ 窄屏降级
   ============================================================================= */

@media (max-width: 1080px) {
  .cm-archive .cm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cm-list { grid-template-columns: minmax(0, 1fr); }
  .cm-archive .cm-list { grid-template-columns: minmax(0, 1fr); }
  .cm-board__bar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 640px) {
  .cm-card { padding: 14px; }
}