/* =============================================================
 * components/base-info-grid.css
 * 详情页「基本信息」网格组件（.base-info-grid / .bi-*）
 *
 * 2026-09-10 抽取：此前这 13 条规则在 7 个详情页（property / building /
 * sale / creative / oldhouse / coworking / coworking-space）的内联 <style>
 * 里各存一份，逐字重复；同时各页又 link 了 detail-info-tables.css
 * （那是 .info-table 表格版组件，与本网格组件不是同一套，不冲突）。
 *
 * 加载位置：保持在各详情页原来的位置（body 内 .base-info-grid 之前），
 * 以免改变与 head 内其它 CSS 的覆盖顺序。
 * ============================================================= */

.base-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px;
  width: 100% !important;
}

.bi-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.bi-item.bi-full {
  grid-column: 1 / -1;
}

.bi-lbl {
  font-size: 15px;
  color: var(--text-placeholder);
  white-space: nowrap;
  flex-shrink: 0;
}

.bi-val {
  font-size: var(--fs-base);
  color: var(--text-dark);
  font-weight: 500;
}

.bi-val.red {
  color: #E53935;
  font-weight: 600;
}

.bi-full .bi-val {
  word-break: break-all;
}

@media (max-width: 767px) {
  .base-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .bi-item.bi-long {
    grid-column: 1/-1;
  }

  .bi-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--bg-gray);
  }

  .bi-item:nth-child(odd) {
    border-right: 1px solid var(--bg-gray);
  }

  .bi-lbl {
    font-size: var(--fs-sm);
    min-width: auto;
  }

  .bi-val {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .bi-item.bi-long .bi-val {
    white-space: normal;
    word-break: break-all;
    text-align: left;
  }
}