/* =========================================================================
   俄文站正文排版微调（手机端）
   只由 template/pc/sonostar-ru/home/header.html 引入：
     - 中文站、英文站一个字都不受影响（共用 style.css 保持原样）
     - 回滚 = 删本文件 + 去掉 header 里那一行 <link>
   -------------------------------------------------------------------------
   起因（2026-11-10）：/company/ 与 /manufacturing/ 的手机端表格被压得看不出结构。
   ========================================================================= */

/* =========================================================================
   ① 两列「标签—取值」表 → 手机端改成上下堆叠
   -------------------------------------------------------------------------
   现象：企业信息、生产许可、配送条款这类表都是「th 标签 + td 取值」。
        桌面端两列并排很清楚，手机 390 宽下 th 固定吃掉 148px，
        取值列只剩 236px，公司地址/经营范围那种长句被压成「一行一两个词」，
        单行行高从 44px 撑到 695px（企业信息表第 11 行实测）。

   根因（两条叠加）：
     ① 标签列的最长词（«Организационно-правовая»）顶住了 th 的 min-content，
        表格自动布局优先满足它；
     ② 取值列被 .tbl-compact td{word-break:break-word} 允许逐字断开，
        min-content 只剩一个字符，于是"能压多少压多少"，全压到取值列头上。

   修法：标签一行、取值一行，取值拿满整行宽度；桌面端不参与（只在 ≤767 生效）。
   识别：:has() 判断"行首是 th、整行只有两个格、且全表没有第三格"，
        不回后台给几十张表逐个加 class，也不会误伤真·数据表。
        老浏览器不认 :has() 就整段不生效，退回原样，不会更糟。
   ========================================================================= */
@media (max-width: 767px) {
  /* 判据只在表上写一次，用 --kv 变量向下传递（自定义属性会继承），
     没命中的表格取不到值，display 走 fallback = 浏览器默认表格显示。 */
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) {
    --kv: block;
    display: var(--kv);
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    font-size: 14px;
  }
  .rich-table-wrap > table > tbody { display: var(--kv, table-row-group); }
  .rich-table-wrap > table > tbody > tr { display: var(--kv, table-row); }
  .rich-table-wrap > table > tbody > tr > th,
  .rich-table-wrap > table > tbody > tr > td { display: var(--kv, table-cell); }

  /* 外观不能靠变量省着写（这些属性没有"等于原样"的 fallback），老实重复长选择器 */
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) > tbody > tr + tr {
    border-top: 1px solid var(--color-border);
  }
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) > tbody > tr > th {
    width: auto;
    padding: 10px 13px 1px;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-2);
    letter-spacing: .01em;
    white-space: normal;
  }
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) > tbody > tr > td {
    width: auto;
    padding: 1px 13px 11px;
    border: 0;
    line-height: 1.55;
  }
  /* 斑马纹在堆叠布局下会把"标签+取值"从中间切开，去掉更干净 */
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) > tbody > tr:nth-child(even) {
    background: none;
  }
  /* 少数表带一行「th + th」表头（如质量页的 «Показатель | Значение»）：
     堆叠后它会变成两行孤零零的标签，既占地方又没信息量，直接藏掉。 */
  .rich-table-wrap > table:has(> tbody > tr > th:first-child + td:last-child):not(:has(> tbody > tr > :nth-child(3))) > tbody > tr:has(> th:first-child + th:last-child) {
    display: none;
  }
}

/* =========================================================================
   ② 三列及以上的 .tbl-compact 数据表 → 手机端收紧字号与内边距
   -------------------------------------------------------------------------
   背景：.tbl-compact 当初是为中文站加的（中文短，三列在 390 宽能一屏看全）。
        俄文单词长得多，同样三列被压成
        「Категория 折两行 / Моделей 白占宽度 / 描述六行」，
        行高照样被撑到 150–200px。

   为什么不堆叠：这三列表都带表头（Категория | Моделей | Основное назначение），
        堆叠后"42"这种数字会失去表头语境，比挤压更难读。

   为什么不横向滑动：试过给 560px 下限，确实能少折行，
        但 390 屏上右列会被裁掉半行字，滑动前看着像显示坏了。
        这里选择"不滑动 + 收紧"：字号 15→13、内边距 11/14→8/9、行高 1.45，
        同样的列宽每行能多放 2–3 个字母，行高整体降三分之一，且内容全在屏内。
   ========================================================================= */
@media (max-width: 767px) {
  /* 收紧而不是撑宽：三列表在 390 屏上必然只有 ~120px/列，
     撑到 560 就得横向滑动、右列还会被裁掉半行字，观感更差。
     所以这里不动宽度，只把字号和内边距收一档，让同样的宽度多放 2–3 个字母，
     行高随之下降（企业信息那张 11 行的表：1630px → 约 1100px，少了三分之一），
     且所有内容仍然一屏可见、不需要滑动。 */
  .rich-table-wrap > table.tbl-compact:has(> tbody > tr > td:nth-child(3)) {
    font-size: 13px;
    /* 固定表格布局：列宽严格按表头写死的百分比走（如 38% / 13% / 余下），
       表格宽度锁死在 100%，长单词不会再把它顶出屏外 24px（顶出去就会裁掉右列边框）。 */
    table-layout: fixed;
    width: 100%;
  }
  .rich-table-wrap > table.tbl-compact:has(> tbody > tr > td:nth-child(3)) th,
  .rich-table-wrap > table.tbl-compact:has(> tbody > tr > td:nth-child(3)) td {
    padding: 8px 9px;
    line-height: 1.45;
    /* 长单词优先按俄文音节用连字符断开（html lang="ru"，浏览器自带俄文断字词典），
       断不出来时才退化为按字符断。比一句 break-word 硬切成 "Офтальмологическ/ий" 体面得多。 */
    word-break: normal;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}