/* ===== MetallurgPro — стили статьи (mp-article) ===== */

/* БАЗА КОНТЕНТА */
.mp-article{
  --mp-measure: 96ch;                           /* ширина колонки текста */
  max-width: min(var(--mp-measure), calc(100% - 2rem));
  margin-inline: auto;

  font-size: clamp(16px, 0.9vw + 14px, 18px);
  line-height: 1.62;
  letter-spacing: 0.003em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;                            /* страница не тянется по X */
}
@media (min-width: 1280px){ .mp-article{ --mp-measure: 100ch; } }
@media (min-width: 1536px){ .mp-article{ --mp-measure: 106ch; } }

/* Абзацы */
.mp-article .mp-p,
.mp-article p{ margin: 0 0 1.1em; }

/* ===== ЗАГОЛОВКИ ===== */
.mp-article .mp-h2,
.mp-article h2{
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.28;
  margin: 2.0rem 0 0.75rem;
  letter-spacing: -0.005em;
  scroll-margin-top: var(--mp-sticky-offset, 96px);
}
.mp-article .mp-h3,
.mp-article h3{
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.35;
  margin: 1.5rem 0 0.65rem;
}

/* ===== СПИСКИ ===== */
.mp-article .mp-list,
.mp-article ul{
  list-style: disc outside;
  margin: 0 0 1.1em 1.25em;
  padding: 0;
}
.mp-article ol{
  list-style: decimal outside;
  margin: 0 0 1.1em 1.5em;
}
.mp-article li{ margin: 0.4em 0; }
.mp-article li > ul,
.mp-article li > ol{ margin-top: 0.35em; }

/* ===== ТАБЛИЦЫ — десктоп/планшет ===== */
.mp-article .mp-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid #E5E7EB;
  background: #fff;
  margin: 1.25rem 0;
}
.mp-article .mp-table caption{
  caption-side: bottom;
  font-size: 0.9em;
  color: #6B7280;
  padding-top: .5rem;
  text-align: left;
}
.mp-article .mp-table th,
.mp-article .mp-table td{
  padding: .65rem .8rem;
  vertical-align: top;
  border-bottom: 1px solid #E5E7EB;
  overflow-wrap: anywhere;              /* длинные токены не ломают макет */
  word-break: normal;
  hyphens: auto;
}
.mp-article .mp-table th{
  font-weight: 600;
  background: #F8FAFC;
  text-align: left;
}
.mp-article .mp-table tbody tr:nth-child(even) td{
  background: #FBFDFF;
}
.mp-article .mp-table th.num,
.mp-article .mp-table td.num{
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== ТАБЛИЦЫ — МОБИЛЬНЫЙ РЕЖИМ: 2–3 слова/строку + скролл ===== */
@media (max-width: 768px){
  .mp-article .mp-table{
    /* ширина таблицы = сумма ширин столбцов; если больше экрана — будет скролл */
    --mp-col: 22ch;                   /* ШИРИНА ОДНОГО СТОЛБЦА на мобилке (18–22ch) */
    display: block;
    overflow-x: auto;                 /* горизонтальный скролл внутри таблицы */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;              /* равномерная ширина колонок */
    border-spacing: 0;
  }

  .mp-article .mp-table th,
  .mp-article .mp-table td{
    width: var(--mp-col);             /* фиксируем меру столбца */
    max-width: var(--mp-col);
    padding: .6rem .7rem;             /* чуть компактнее на телефоне */

    /* переносим ТОЛЬКО по словам */
    white-space: normal;
    word-break: keep-all;             /* не ломаем по буквам */
    overflow-wrap: normal;            /* без “break-word” */
    hyphens: none;                    /* никаких автоматических дефисов */

    min-width: 0;
  }
}

/* ===== МЕЛОЧИ ===== */
.mp-article img{
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.mp-article a{
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* Мобилки: короче строка (больше боковых полей) */
@media (max-width: 480px){
  .mp-article{
    max-width: calc(100% - 3rem);
    margin-inline: auto;
    font-size: 17px;
    line-height: 1.66;
  }
}
@media (max-width: 360px){
  .mp-article{ max-width: calc(100% - 3.5rem); }
}