/* ==========================================================================
   型号对比表（首页「Barrier Gate Models & Key Specifications」专用）
   2026-10-09 新增：原表复用全站 2 列规格表 .specs-table（td:first-child width:40%
   + 灰底），6 列对比时 Model 列撑到 40%、其余列折行，整表 886px 高。
   本文件只被首页加载（components 未铺开到其他页，故独立成文件，
   不改 css/style.css → 不触发 _kit/inline_css.py 的内联关键 CSS sha1 漂移）。
   站点调色：--blue #1e3a5f / --blue-dark #12253d / --orange #e05d1a
   ========================================================================== */

.model-table-card {
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 20px 40px -32px rgba(16, 24, 40, .35);
}

.model-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.model-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.model-table col.c-model { width: 12%; }
.model-table col.c-drive { width: 15%; }
.model-table col.c-arm   { width: 18%; }
.model-table col.c-time  { width: 13%; }
.model-table col.c-power { width: 15%; }
.model-table col.c-app   { width: 27%; }

.model-table thead th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5b6577;
  font-weight: 800;
  padding: 13px 16px;
  background: #f7f9fc;
  border-bottom: 2px solid #1e3a5f;
  white-space: normal;
  line-height: 1.4;
}

.model-table tbody th,
.model-table tbody td {
  padding: 12px 16px;
  /* 注意：站内 style.css 有一条全局 `td { font-size: 1.05rem !important;
     line-height: 1.65 !important }`（"所有表格单元格文本可读"的刻意规则），
     所以真实渲染的字号是 1.05rem（根 17px → 17.85px），这里的 .875rem/1.55
     只在单元格不是 <td> 时（如行首 <th>）或该全局规则被移除后才生效。
     不要用 !important 去抢它 —— 全站表格字号一致性优先，列宽按 1.05rem 调过。 */
  font-size: .875rem;
  line-height: 1.55;
  color: #414c5e;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #eef1f5;
  font-weight: 400;
}
.model-table tbody th { font-size: .95rem; line-height: 1.5; }
.model-table tbody tr:nth-child(even) { background: #fbfcfe; }
.model-table tbody tr:hover { background: #f4f7fb; }
.model-table tbody tr:last-child th,
.model-table tbody tr:last-child td { border-bottom: 0; }
.model-table tbody th { box-shadow: inset 3px 0 0 transparent; }
.model-table tbody tr:hover th { box-shadow: inset 3px 0 0 #e05d1a; }

.model-code { font-weight: 800; color: #12253d; font-size: .93rem; letter-spacing: .01em; }
.model-muted { color: #8794a7; font-style: italic; }

.model-notes { background: #f7f9fc; border-top: 1px solid #eef1f5; padding: 14px 18px 15px; }
.model-notes p { margin: 0; font-size: .84rem; line-height: 1.7; color: #5b6577; }
.model-notes p + p { margin-top: 6px; }
.model-notes a { color: #1e3a5f; font-weight: 700; text-decoration: none; border-bottom: 1px solid #c9d4e3; }
.model-notes a:hover { color: #e05d1a; border-bottom-color: #f0c3a8; }

/* 窄屏（与站内 .specs-table 的 900px 断点一致）：6 列不再横向滚动，
   每个型号变成一张卡，字段前带大写小标签（标签来自 td 的 data-label） */
@media (max-width: 900px) {
  .model-table-card { border-radius: 12px; }
  .model-table, .model-table tbody, .model-table tr, .model-table th, .model-table td { display: block; }
  .model-table colgroup, .model-table thead { display: none; }
  .model-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
  }
  .model-table tbody tr:nth-child(even) { background: #fbfcfe; }
  .model-table tbody th {
    grid-column: 1 / -1;
    padding: 0 0 9px;
    margin-bottom: 11px;
    box-shadow: none !important;
    border-bottom: 1px solid #eef1f5;
  }
  .model-table tbody th .model-code { font-size: 1rem; }
  .model-table tbody td { padding: 0 0 10px; border: 0; font-size: .875rem; }
  .model-table tbody td.cell-app { grid-column: 1 / -1; }
  .model-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8794a7;
    margin-bottom: 3px;
  }
  .model-notes { padding: 13px 16px; }
}