/* Хаб «Подбор сварочного материала по марке металла»: /podbor-materiala/.
   Отдельный файл по образцу raschety.css: общую таблицу styles.css грузят все
   страницы сайта, а эта вёрстка нужна одной. Новых токенов не заводим — только
   переменные :root из styles.css. Таблица — общий .data-table сайта, здесь
   только то, что нужно этой странице. */

.podbor-hero {
  padding: 20px clamp(18px, 4vw, 54px) 6px;
}

/* Кегль H1 — как у раздела «Расчёты технолога» (raschety.css): длинный
   заголовок общим кеглем сайта занимал бы три строки. */
.podbor-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(28px, 2.6vw + 10px, 40px);
  line-height: 1.15;
  color: var(--blue-dark);
}

.podbor-lead {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
}

.podbor-toc {
  margin-top: 18px;
}

.podbor-toc a {
  padding: 7px 12px;
  font-size: 14px;
}

.podbor-section {
  padding: 14px clamp(18px, 4vw, 54px) 48px;
}

.podbor-group {
  margin-top: 30px;
  scroll-margin-top: 90px;
}

.podbor-group:first-child {
  margin-top: 10px;
}

.podbor-group h2 {
  margin: 0 0 12px;
  color: var(--blue-dark);
}

/* Колонки фиксированной доли: у всех восьми таблиц одна сетка, глаз не
   прыгает между разделами. */
.podbor-table {
  table-layout: fixed;
}

.podbor-table th:nth-child(1) { width: 27%; }
.podbor-table th:nth-child(2) { width: 22%; }
.podbor-table th:nth-child(3) { width: 22%; }
.podbor-table th:nth-child(4) { width: 29%; }

.podbor-table td {
  vertical-align: top;
  overflow-wrap: break-word;
}

/* Ссылки — оранжевые, как в технической библиотеке (AWG_PROJECT_STANDARDS.md, п. 4). */
.podbor-table a:not(.button) {
  color: var(--amber-dark);
  font-weight: 700;
}

.podbor-table a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.podbor-metal strong {
  display: block;
  color: var(--ink);
}

.podbor-grades {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.podbor-task {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.podbor-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.podbor-list li + li {
  margin-top: 4px;
}

/* Пометка «склад» у позиции Kjellberg: светлая подложка амбера — ярлык
   состояния (docs/brand/README.md, акцентная палитра). */
.podbor-stock {
  display: inline-block;
  margin-left: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--amber-soft);
  color: var(--amber-dark);
  font-size: 12px;
  font-weight: 700;
  vertical-align: 1px;
}

.podbor-empty {
  color: var(--muted);
}

.podbor-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.podbor-request.button {
  min-height: 36px;
  margin-top: 10px;
  padding: 9px 14px;
  font-size: 14px;
}

.podbor-stock-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.9em;
}

/* ≤ 820 px — строка таблицы становится карточкой, без горизонтальной
   прокрутки. Правило общего .data-table для ≤ 720 px (display: block;
   overflow-x: auto) здесь перекрывается: прокручивать нечего, ячейки
   встают друг под друга, подпись колонки — из data-label. */
@media (max-width: 820px) {
  .podbor-table,
  .podbor-table tbody,
  .podbor-table tr,
  .podbor-table td {
    display: block;
    width: 100%;
  }

  .podbor-table {
    overflow: visible;
    border: 0;
  }

  .podbor-table thead {
    display: none;
  }

  .podbor-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
  }

  .podbor-table tr:nth-child(odd) td,
  .podbor-table td {
    border: 0;
    background: transparent;
    padding: 8px 14px;
  }

  .podbor-table td + td {
    border-top: 1px solid var(--steel);
  }

  .podbor-table td.podbor-metal {
    padding-top: 12px;
    background: var(--soft);
    border-radius: 6px 6px 0 0;
  }

  .podbor-table td:not(.podbor-metal)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .podbor-table td.podbor-next {
    padding-bottom: 14px;
  }
}