/**
 * asr.css
 * U2-ASR 页独有样式 —— 需与 model-common.css 一起引入
 *
 * 公共结构（简介/指标/核心能力/优势/场景/能力/立即开始/CTA）见 model-common.css，
 * 本文件只覆盖 ASR 特有的部分：带 Tab 切换的评测区。
 */

/* ========== 评测：Tab 切换版 ========== */
.md-bench--tabbed {
  gap: 48px;
}

.md-bench__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.md-bench__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #BDDCFD;
  border-radius: 16px;
  background: #fff;
  padding: 8px 16px;
}

.md-bench__tab {
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: #616D7E;
  transition: background-color 0.2s, color 0.2s;
}

.md-bench__tab:hover {
  color: #3067FF;
}

.md-bench__tab[aria-selected="true"] {
  background: #3067FF;
  font-weight: 500;
  color: #fff;
}

.md-bench__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.md-bench__desc {
  font-size: 18px;
  line-height: 18px;
  color: #616D7E;
  margin: 0;
}

/* 面板：非激活的隐藏 */
.md-bench__panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.md-bench__panel.is-active {
  display: flex;
}

/* ASR 每卡模型少、卡片多，用 6 列窄卡（公共样式默认 4 列） */
.md-bench--tabbed .md-bench__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.md-bench--tabbed .md-bench__card {
  min-height: 228px;
  padding: 16px 12px;
}

/* 柱宽自适应：格子宽时封顶 30px，格子窄时跟着缩。
   原为死值 width:30px，列数一旦可配就会溢出——6 列下每根柱位仅约 26px，
   比柱子本身还窄，柱子互相重叠。改成 100%+max-width 后 2-6 列都不会翻车。 */
.md-bench--tabbed .md-bench__bar-fill {
  width: 100%;
  max-width: 30px;
}

/* 名称行数不一（如 whisper-large-v3-turbo 换 3 行）会撑高个别卡片，
   导致网格行高参差；固定标签区高度，让同一行卡片顶边对齐。
   高度按三行名称反算：padding-top 4 + 图标 16 + gap 6 + 三行 9×3 = 53，取 54。
   原值 46 只够两行（46-4-16-6=20 < 27），第三行被 overflow:hidden 裁掉，
   且 height 死值会覆盖 model-common.css 里 min-height 的"按需增高"意图。 */
.md-bench--tabbed .md-bench__bar-meta {
  min-height: 54px;
  height: 54px;
}
.md-bench--tabbed .md-bench__card {
  align-self: start;
}

/* ---------- 每行列数：后台按 Tab 单独配置（block_type_field.panelCols） ----------
   模板输出 .md-bench__panel--cols-N，N 已在 ftl 里做 2-6 白名单校验。
   末行不足一行时保持左对齐（默认行为），不居中。

   ⚠️ 不要再用 [data-md-panel="public"] / ="multilingual" 这类语义值选择器：
   静态原型 u2-asr.html 里 data-md-panel 是语义字符串，但 block 化后
   model_bench.ftl 输出的是 page_block_item.id（数字），那两条规则从未生效，
   导致所有 Tab 静默退回 6 列（多语种 Tab 数值重叠的根因）。已于本次移除。 */
/* ⚠️ 必须带 .md-bench--tabbed 祖先限定，提权到 (0,3,0)。
   上方 .md-bench--tabbed .md-bench__grid 的默认 6 列是 (0,2,0)，
   若这里只写 .md-bench__panel--cols-N .md-bench__grid 同为 (0,2,0)，
   同权重下靠源码顺序决胜过于脆弱——实测宽屏下后台配置会被默认值压掉，
   所有 Tab 恒为同一列数（2026-09-11 headless 实测确认）。 */
/* 1 列：整行只放一张卡片。用于柱子很多的卡片（如 8-9 根对比条），
   多列下卡片会被压窄导致数值/名称重叠，占满整行才放得下。 */
.md-bench--tabbed .md-bench__panel--cols-1 .md-bench__grid {
  grid-template-columns: minmax(0, 1fr);
}

.md-bench--tabbed .md-bench__panel--cols-2 .md-bench__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md-bench--tabbed .md-bench__panel--cols-3 .md-bench__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-bench--tabbed .md-bench__panel--cols-4 .md-bench__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.md-bench--tabbed .md-bench__panel--cols-5 .md-bench__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.md-bench--tabbed .md-bench__panel--cols-6 .md-bench__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 窄列降数值字号，防止 5 位数字（如 94.72）横向重叠。
   名称字号维持公共样式的 8px 不动——再降就不可读，且长名称无论如何都会
   被 line-clamp:3 截断，降字号并不能多显示内容。 */
.md-bench__panel--cols-5 .md-bench__bar-value {
  font-size: 12px;
}

.md-bench__panel--cols-6 .md-bench__bar-value {
  font-size: 10px;
}

/* ========== 响应式 ========== */
/* 窄屏统一按屏宽收敛，覆盖后台配的列数（cols-N 与本组同为 class 选择器，
   但媒体查询内的规则在源码顺序上靠后，故优先级足够） */
@media (max-width: 1200px) {
  .md-bench--tabbed .md-bench__grid,
  .md-bench--tabbed .md-bench__panel[class*="--cols-"] .md-bench__grid,
  .md-bench--tabbed.md-bench .md-bench__panel[class*="--cols-"] .md-bench__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .md-bench--tabbed {
    gap: 32px;
  }

  .md-bench__tabs {
    flex-wrap: wrap;
    padding: 8px;
  }

  .md-bench__tab {
    padding: 12px 16px;
    font-size: 14px;
  }

  .md-bench__desc {
    font-size: 15px;
    line-height: 1.6;
  }

  /* 单列：每卡最多 6 根柱子，2 列时每根柱位仅约 55px，
     数值（如 96.99）与模型名会横向重叠、名称被压成 3 行仍显示不全。
     单列下每根柱位约 130px，数值和名称都能完整展示。 */
  .md-bench--tabbed .md-bench__grid,
  .md-bench--tabbed .md-bench__panel[class*="--cols-"] .md-bench__grid,
  .md-bench--tabbed.md-bench .md-bench__panel[class*="--cols-"] .md-bench__grid {
    grid-template-columns: 1fr;
  }

  /* 单列后卡片变宽，柱子可以放开到默认宽度，不必再收窄 */
  .md-bench--tabbed .md-bench__bar-fill {
    max-width: 36px;
  }

  /* 窄屏下后台配的 5/6 列降字号规则会连带生效，但单列已不拥挤，
     统一恢复正常字号，避免手机上数值过小 */
  .md-bench__panel--cols-5 .md-bench__bar-value,
  .md-bench__panel--cols-6 .md-bench__bar-value {
    font-size: 14px;
  }
}