/* Besfo — информационные страницы: документы, контакты, о компании, хаб
   каталога. Боковой список берется из общего блока .subcats (components.css).

   Mobile First: базовые правила — узкий экран, шире — через min-width. */

.info,
.cat-hub { padding-bottom: var(--gap-page); }

/* Раскладка та же, что в кабинете: слева список, справа содержимое. Колонка
   240px — ширина панели фильтров в листинге, чтобы при переходах между
   разделами сайта содержимое не прыгало. */
.info__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-component);
}

/* ── Текст документа ───────────────────────────────────────────────────────
   Правила набора задаются один раз на весь блок: внутри документа идет
   обычный текст без классов на каждом абзаце. */
.doc {
  min-width: 0;
  max-width: 70ch;          /* мера строки: длинную строку трудно читать */
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.doc > * + * { margin-top: var(--gap-block); }

.doc h2 {
  margin-top: var(--gap-section);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}
/* Первый заголовок не отодвигается: над ним уже стоит H1 страницы. */
.doc > h2:first-child { margin-top: 0; }

.doc ul,
.doc ol {
  padding-left: var(--gap-section);
}
.doc li + li { margin-top: var(--gap-inner); }

.doc a { color: var(--color-action); }
@media (hover: hover) and (pointer: fine) {
  .doc a:hover { color: var(--color-action-hover); }
}
.doc a:active { color: var(--color-action-hover); }

/* Пояснение о том, что значение еще не утверждено. Вторичным цветом: это
   служебная пометка, а не часть условий. */
.doc-note {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-secondary);
}

/* Пары «свойство — значение»: реквизиты, контакты. */
.doc-dl {
  display: grid;
  gap: var(--gap-inner) var(--gap-block);
}
.doc-dl dt {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-secondary);
}
.doc-dl dd { font-weight: var(--fw-h2); }

/* ── Таблица в документе ───────────────────────────────────────────────────
   Прокручивается внутри себя: на телефоне таблица из трех колонок иначе
   растягивает страницу. */
.doc-table {
  display: block;
  overflow-x: auto;
  /* Ширина по содержимому, но не уже контейнера: при width: 100% последняя
     колонка обрезалась на десктопе, хотя место было. На узком экране таблица
     прокручивается внутри себя и не растягивает страницу. */
  width: max-content;
  min-width: 100%;
  /* Но не шире контейнера: иначе таблица тянет за собой всю страницу, и на
     телефоне появляется горизонтальная прокрутка страницы вместо прокрутки
     самой таблицы. */
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
.doc-table th,
.doc-table td {
  padding: var(--gap-inner) var(--gap-block);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
/* Перенос в ячейках разрешен: запрет переноса заставлял таблицу прокручиваться
   даже там, где места хватало. Прокрутка остается запасным вариантом для
   узких экранов. */
.doc-table td { min-width: 10ch; }
.doc-table th {
  font-weight: var(--fw-h2);
  background: var(--color-gray-light);
}

/* ── Перечень документов на хабе ───────────────────────────────────────────*/
.doc-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-block);
  padding-left: 0;
  list-style: none;
}
.doc-hub li + li { margin-top: 0; }

.doc-hub__item {
  display: flex;
  align-items: center;
  min-height: 64px;
  height: 100%;
  padding: var(--pad-box);
  border-radius: var(--radius-block);
  background: var(--color-gray-light);
  color: var(--color-text);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .doc-hub__item:hover { background: var(--color-border); }
}
.doc-hub__item:active { background: var(--color-gray-pressed); }

.doc-hub__name {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
}

/* ── Хаб каталога ──────────────────────────────────────────────────────────
   Все разделы одной страницей: и человеку, и роботу путь до любого раздела в
   один переход. */
.cat-hub__intro {
  max-width: 70ch;
  margin-bottom: var(--gap-section);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

.cat-hub__group + .cat-hub__group { margin-top: var(--gap-section); }

.cat-hub__title {
  margin-bottom: var(--gap-block);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}
.cat-hub__title a { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .cat-hub__title a:hover { color: var(--color-brand); }
}

/* Колонки считает auto-fill от минимальной ширины: на телефоне одна, на
   десктопе четыре, и ни одного брейкпоинта на это не нужно. */
.cat-hub__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap-tight) var(--gap-block);
  list-style: none;
}

.cat-hub__link {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: var(--gap-tight) 0;
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
@media (hover: hover) and (pointer: fine) {
  .cat-hub__link:hover { color: var(--color-brand); }
}
.cat-hub__link:active { color: var(--color-brand); }

/* ≥ 1025: список слева, содержимое справа. */
@media (min-width: 1025px) {
  .info__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--gap-section);
    align-items: start;
  }
}