/* ============================================================
   Markets-Detail Featured Products 表格（markets-detail.html Section 3）
   Figma Frame 476:19537
   - 背景 #F8F8F8（此处用 --color-surface 近似）
   - 表头行 bg #3EA8D9 白字（主名 20px ExtraBold + 单位 16px Regular，两行）
   - 分组行 bg #ECF6FB、底部 #ccc 分隔线、20px ExtraBold #333
   - 数据行 bg white、18px Regular #333
   - 绿色高亮行 bg #A8CE50 白字，前置白色 ">" 图标
   - 列对齐：Product/Features 左对齐，其余数值列居中；移动端横向滚动
   ============================================================ */

.mkd-table {
  position: relative;
  background: var(--color-surface); /* 设计 #F8F8F8 */
  padding: 130px 0 150px;
}

.mkd-table__inner {
  max-width: 1648px; /* 表宽 1600（设计 x=160） + 左右 padding 24 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.mkd-table__title {
  font-family: var(--font-primary);
  font-size: 76px;
  font-weight: 800;
  line-height: 90px;
  letter-spacing: -1.52px;
  color: var(--color-primary);
  margin: 0 0 90px;
}

/* --- 横向滚动容器（移动端表格保持 1080px 最小宽） --- */
.mkd-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 移动端滑动提示（参考 reidge.com 的 scroll-hint），PC 隐藏 */
.mkd-table__swipe {
  display: none;
}

.mkd-table__table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.mkd-table__table colgroup col:nth-child(1) { width: 8.5%; }
.mkd-table__table colgroup col:nth-child(2) { width: 18.5%; }
.mkd-table__table colgroup col:nth-child(3) { width: 7.5%; }
.mkd-table__table colgroup col:nth-child(4) { width: 13%; }
.mkd-table__table colgroup col:nth-child(5) { width: 11.5%; }
.mkd-table__table colgroup col:nth-child(6) { width: 9%; }
.mkd-table__table colgroup col:nth-child(7) { width: 9%; }
.mkd-table__table colgroup col:nth-child(8) { width: 9%; }
.mkd-table__table colgroup col:nth-child(9) { width: 13%; }

/* --- 表头 --- */
.mkd-table__table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.4px;
  padding: 12px 10px;
  text-align: left;
}

/* 数值列居中 */
.mkd-table__table thead th:nth-child(n + 3),
.mkd-table__table tbody td:nth-child(n + 3) {
  text-align: center;
}

.mkd-table__unit {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.mkd-table__table sub {
  font-size: 12.9px;
  vertical-align: baseline;
}

/* --- 分组行 --- */
.mkd-table__table tbody .mkd-table__group td {
  background: #ECF6FB;
  border-bottom: 1px solid #cccccc;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  padding: 11px 30px;
  text-align: left;
}

.mkd-table__table tbody .mkd-table__group .mkd-table__count {
  font-size: 12.9px;
  font-weight: 800;
  letter-spacing: 0;
}

/* --- 数据行 --- */
.mkd-table__table tbody td {
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.36px;
  color: var(--color-text);
  padding: 12px 10px;
  text-align: left;
}

/* --- 绿色高亮（hover 驱动）：每行数据行 hover 时变绿 + 白字 + 星标淡入
       （表头与分组行除外） --- */
.mkd-table__table tbody tr:not(.mkd-table__group) td {
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.mkd-table__table tbody tr:not(.mkd-table__group):hover td {
  background: var(--color-secondary);
  color: var(--color-white);
}

.mkd-table__star {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 14px;
  vertical-align: -3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.mkd-table__star img {
  width: 100%;
  height: 100%;
}

.mkd-table__table tbody tr:not(.mkd-table__group):hover .mkd-table__star {
  opacity: 1;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
  .mkd-table {
    padding: 90px 0 110px;
  }

  .mkd-table__title {
    font-size: 64px;
    line-height: 76px;
    margin-bottom: 64px;
  }

  /* Featured Products 标题移动端左右居中（product-detail 与 markets-detail 两页共用此 CSS，均居中） */
  .mkd-table__title {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .mkd-table {
    padding: 70px 0 80px;
  }

  .mkd-table__title {
    font-size: 44px;
    line-height: 56px;
    margin-bottom: 48px;
  }

  .mkd-table__table {
    min-width: 960px;
    /* fixed 布局下列宽由 colgroup 锁死，第一列 nowrap 内容会溢出重叠；
       改 auto 让列宽按内容自适应（其余数值列本身不换行，分布不变） */
    table-layout: auto;
  }

  /* 移动端显示滑动提示（居中灰字，风格同 reidge.com） */
  .mkd-table__swipe {
    display: block;
    margin: -24px 0 24px;          /* 与标题间距平衡 */
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: #999999;
    text-align: center;
  }

  .mkd-table__group td {
    padding: 10px 20px;
  }

  /* 第一列型号（星标+编号）严格不折行 */
  .mkd-table__table tbody td:first-child {
    white-space: nowrap;
  }

  /* 第二列（产品说明）与单元格左缘留 5px 间距 */
  .mkd-table__table tbody td:nth-child(2) {
    padding-left: 5px;
  }

  /* product-detail 页（id=featured）移动端：去除 hover 星标/箭头，第一列数据左对齐
     （markets-detail 页 id=products 不受影响） */
  #featured .mkd-table__star {
    display: none;
  }
  #featured .mkd-table__table tbody td:first-child {
    text-align: left;
  }
  /* markets-detail 页（id=products）移动端：hover 效果对齐 product-detail，同样隐藏星标 */
  #products .mkd-table__star {
    display: none;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}