/*
  «Характеристики» и таблица характеристик страницы модели (451:1577,
  451:1582), разметка — partials/model-specs.njk.

  Вертикаль фрейма: низ панели описания 844 → заголовок 904 → таблица 977
  → низ таблицы 1460 → блок заявки 1537.
  Горизонталь: заголовок и таблица с 75 до 1365, то есть 1290 =
  --content-width, как и весь остальной контент страницы.
*/
.model-specs {
  /* 904 - 844 сверху, 1537 - 1460 снизу (у блока заявки своего верхнего
     отступа нет — он приходит от предыдущего блока). */
  padding: 60px 0 77px;
}

.model-specs__inner {
  width: min(var(--content-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
}

/* 977 - 945 (низ строчного бокса заголовка) = 32. */
.model-specs__heading {
  margin: 0 0 32px;
  font-size: var(--fs-model-heading);
  line-height: var(--lh-model-heading);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/*
  Рамка таблицы. Обводка и скругление висят на обёртке, а не на самой
  таблице: обёртка и обрезает по скруглению заливку крайних строк, и
  служит областью прокрутки на узком экране (см. media-запрос внизу).
  Своей заливки у таблицы нет — незалитые строки в макете ровно цвета
  фона страницы.
*/
.model-specs__frame {
  overflow-x: auto;
  border: 1px solid var(--color-model-table-line);
  border-radius: var(--radius-model-table);
}

.model-specs__table {
  width: 100%;
  /* Раскладка по <colgroup>, а не по содержимому: колонки в макете
     строго равные, и длинное значение не должно их перекашивать. */
  table-layout: fixed;
  /* separate + нулевой интервал: при collapse браузер сводит соседние
     границы ячеек в одну общую и рисует её поверх скругления обёртки. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-model-spec);
  line-height: var(--lh-model-spec);
  color: var(--color-ink);
}

/* Три равные колонки по 430 из 1290. */
.model-specs__col {
  width: calc(100% / 3);
}

/*
  Чередование фона. Ключевое место всей таблицы: заливка идёт по
  ЛОГИЧЕСКИМ строкам, где группа со всеми своими подстроками считается
  одной. Каждая логическая строка — свой <tbody> (см. партиал), поэтому
  селектор считает именно их, а не <tr>: nth-child по строкам раскрасил бы
  группу полосами внутри неё самой.
*/
.model-specs__table tbody:nth-of-type(odd) {
  background: var(--color-model-table-tint);
}

.model-specs__table th,
.model-specs__table td {
  /* height у ячейки таблицы работает как минимум: одна строка текста
     даёт ровно макетные 40, значение в две строки строку растит, а не
     обрезает. Фиксированной высоты под нынешний текст здесь нет. */
  height: var(--model-table-row-height);
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: break-word;
}

/* Вторая и третья колонки — обычное начертание. Правило отдельное от
   общего: в общем оно перебило бы полужирную первую колонку по весу
   селектора. */
.model-specs__table td {
  font-weight: var(--fw-regular);
}

/* Первая колонка — полужирная; разделитель между 1-й и 2-й колонками
   идёт на всю высоту таблицы, потому что первая ячейка есть у каждой
   логической строки (у группы — с rowspan на все подстроки). */
.model-specs__name {
  font-weight: var(--fw-semibold);
  border-right: 1px solid var(--color-model-table-line);
}

/*
  Разделитель между 2-й и 3-й колонками сам собой получается только на
  высоту сгруппированной части: ячейка параметра существует лишь у
  подстрок группы, у простой строки вторая и третья колонки объединены
  под значение.
*/
.model-specs__param {
  border-right: 1px solid var(--color-model-table-line);
}

/* Разделитель между подстроками одной группы: начинается от второй
   колонки и первую не пересекает — потому и висит на ячейках, а не на
   строке целиком. */
.model-specs__table tbody tr:not(:last-child) > td {
  border-bottom: 1px solid var(--color-model-table-line);
}

/* Разделитель между логическими строками — во всю ширину. Нижняя граница
   ячейки с rowspan приходится ровно на низ группы, поэтому линия
   получается сплошной, включая первую колонку. Под последней логической
   строкой линии нет — там обводка рамки. */
.model-specs__table tbody:not(:last-of-type) > tr:last-child > td,
.model-specs__table tbody:not(:last-of-type) .model-specs__name {
  border-bottom: 1px solid var(--color-model-table-line);
}

/*
  Узкий экран. Колонок нет — таблица идёт парами «подпись — значение»,
  группа становится заголовком над своими параметрами. Вид утверждён
  клиентом, прототип — project/publication/ПРОТОТИП-таблица-мобилка.html.
  Прежнее решение «прокручивается таблица, а не страница» (min-width:720px
  у таблицы плюс overflow-x у рамки) отменено.

  РАЗМЕТКА ТА ЖЕ: в DOM остаётся <table> с <th scope> — и принятый десктоп,
  и доступность не трогаем, перестроение делает только display.

  Почему этого хватает без единого условия в CSS:
   • ячейка группы с rowspan стоит ПЕРВОЙ в первом <tr> группы, поэтому у
     флекс-строки с переносом она, заняв всю ширину, сама встаёт отдельной
     строкой НАД своими парами — ровно туда, где нужен заголовок группы;
   • флекс-строка ломается по гипотетическим (max-content) размерам ячеек,
     а не по сжатым, поэтому пара, которой не хватает 300px, переносит
     значение на свою строку, и justify-content:space-between ставит там
     одиночную ячейку к началу — значение оказывается слева под подписью.
     Решает ширина текста; списка исключений под длинные значения нет.
*/
@media (max-width: 599.98px) {
  /* Кегль заголовка — токеном на секции, тем же приёмом и теми же
     макетными числами, что у панели описания (см. model-description.css). */
  .model-specs {
    padding: min(30px, calc(30 / 390 * 100vw)) 0;
    --fs-model-heading: min(30px, calc(30 / 390 * 100vw));
    --lh-model-heading: min(41px, calc(41 / 390 * 100vw));
  }

  .model-specs__inner {
    width: min(330px, calc(330 / 390 * 100vw));
  }

  .model-specs__heading {
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
  }

  /* Рамка больше не область прокрутки: таблица в неё помещается. Скрытое
     переполнение остаётся, но уже только чтобы обрезать заливку крайних
     логических строк по скруглению. */
  .model-specs__frame {
    overflow: hidden;
  }

  /* Таблица перестаёт быть таблицей визуально. colgroup выключен: у
     нетабличного родителя его table-column-group потянул бы за собой
     анонимный табличный бокс, а ширины колонок здесь уже не нужны. */
  .model-specs__table {
    display: block;
  }

  .model-specs__table colgroup {
    display: none;
  }

  /* Логическая строка. Чередование заливки остаётся на <tbody>
     (tbody:nth-of-type(odd) выше), поэтому группа со всеми подстроками
     красится целиком, как на компьютере. */
  .model-specs__table tbody {
    display: block;
  }

  /* Разделитель между логическими строками — во всю ширину. Под последней
     линии нет: там обводка рамки. */
  .model-specs__table tbody:not(:last-of-type) {
    border-bottom: 1px solid var(--color-model-table-line);
  }

  /* Пара «подпись — значение». 330 - 2 (обводка рамки) - 2 x 14 = 300px под
     содержимое — та же полоса, что в прототипе. */
  .model-specs__table tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 1px;
    padding: 9px 14px;
  }

  /* Разделитель между парами внутри одной группы. */
  .model-specs__table tbody > tr + tr {
    border-top: 1px solid var(--color-model-table-line);
  }

  .model-specs__table th,
  .model-specs__table td {
    display: block;
    height: auto;
    padding: 0;
    text-align: left;
  }

  /* Десктопные разделители колонок и подстрок снимаем. Селекторы повторены
     один в один, чтобы перебить их порядком в файле, а не весом. */
  .model-specs__name,
  .model-specs__param {
    border-right: 0;
  }

  .model-specs__table tbody tr:not(:last-child) > td,
  .model-specs__table tbody:not(:last-of-type) > tr:last-child > td,
  .model-specs__table tbody:not(:last-of-type) .model-specs__name {
    border-bottom: 0;
  }

  /* Заголовок группы. Полная ширина — отсюда и перенос пар под него.
     Вертикаль как в прототипе: 9 (у строки) + 2 = 11 сверху, 6 + row-gap 1
     = 7 до первой пары. Те ~110px ширины, что объединённая ячейка съедала
     на десктопе, уходят значениям. */
  .model-specs__name[scope="rowgroup"] {
    flex: 0 0 100%;
    padding: 2px 0 6px;
    font-size: var(--fs-model-spec-group);
    line-height: var(--lh-model-spec-group);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-model-spec-muted);
  }

  /* Подпись пары: имя параметра внутри группы и имя простой строки. */
  .model-specs__param,
  .model-specs__name[scope="row"] {
    font-weight: var(--fw-regular);
    color: var(--color-model-spec-muted);
  }

  /* Значение — полужирным справа. margin-left:auto здесь НЕ нужен:
     space-between и так прижимает значение вправо, когда пара в одну
     строку, а на своей строке одиночная ячейка встаёт к началу — auto
     оттолкнул бы её вправо и сломал перенос под подпись. */
  .model-specs__table .model-specs__value {
    font-weight: var(--fw-semibold);
  }
}