/* ========================================
   小区页面（/info-{id} 详情、/house- 等列表）专用样式
   🔴 文件名必须是 house-community，不能叫 community——
   community.css 是「数据社区」频道（文章/快讯/排行内容页）的样式，两者只是中文都带「区」，
   业务上毫无关系；曾经因为重名把社区样式整份覆盖，社区详情页样式全崩。
   🔴 PC 与手机端共用这一份：手机端详情页的挂牌均价与参数块要求与 PC 同布局，
   两边各写一套必然漂移，所以抽出来单独成文件，两端模板各引一次。
   涨跌色复用既有 .price-up / .price-down（channel.css 与 mobile-common.css 都有），不另起一套。
   遵循前台 UI 规范：圆角 ≤4px、无弥散阴影、不加粗、hover 只轻微加深。
   ======================================== */
.community-price-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 2px;
}

.community-price-value {
  font-size: 26px;
  font-family: var(--font-data);
  font-feature-settings: "tnum" on, "lnum" on;
  color: #BA2A20;
}

.community-price-value em {
  font-style: normal;
  font-size: 13px;
  margin-left: 4px;
  color: var(--text-muted, #6b7280);
}

.community-price-month,
.community-price-rate {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

.community-price-rate em {
  font-style: normal;
  font-family: var(--font-data);
  margin-left: 2px;
}

/* 小区参数：两列平铺，标签固定宽度对齐 */
.community-param-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}

.community-param-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-color, #eceff3);
  font-size: 13px;
}

.community-param-list li span {
  flex: 0 0 76px;
  color: var(--text-muted, #6b7280);
}

.community-param-list li p {
  margin: 0;
  flex: 1;
  word-break: break-all;
}

@media (max-width: 992px) {
  .community-param-list { grid-template-columns: 1fr; }
}

/* 手机端：参数单列、价格条紧凑一档（PC 的两列在窄屏读不了） */
@media (max-width: 768px) {
  .community-price-bar {
    gap: 12px;
    padding: 8px 0 2px;
  }

  .community-price-value { font-size: 22px; }

  .community-param-list li { padding: 6px 0; }

  .community-param-list li span { flex: 0 0 72px; }
}