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

.mkd-table {
  position: relative;
  background: var(--color-surface); /* 设计 var(--color-soft-gray) */
  padding: 128px 0 152px;
}

.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: 56px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 88px;
}

/* --- 横向滚动容器（移动端表格保持 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: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.4px;
  padding: 12px 8px;
  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: 1rem;
  font-weight: 300;
  letter-spacing: 0;
}

.mkd-table__table sub {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  vertical-align: baseline;
}

/* --- 分组行 --- */
.mkd-table__table tbody .mkd-table__group td {
  background: var(--color-soft-blue);
  border-bottom: 1px solid var(--color-placeholder);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: var(--color-text);
  padding: 12px 32px;
  text-align: left;
}

.mkd-table__table tbody .mkd-table__group .mkd-table__count {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  font-weight: 600;
  letter-spacing: 0;
}

/* --- 数据行 --- */
.mkd-table__table tbody td {
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--color-text);
  padding: 12px 8px;
  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: 88px 0 110px;
  }

  .mkd-table__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 64px;
  }

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

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

  .mkd-table__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    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: clamp(0.75rem, 0.04vw + 0.74rem, 0.8125rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
  }

  .mkd-table__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .mkd-table__group td {
    padding: 8px 20px;
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

  /* 第一列型号（星标+编号）严格不折行 */
  .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;
  }
}