/* ============================================================
   DOCUMENTS.CSS — Страница «Документы и реквизиты»
   Театр на Таганке

   Простая текстовая страница без фильтров, карточек и JS-логики.
   Переиспользует page.css (.header--page, .page, .page__intro*,
   .page__divider). Страничная специфика — секции с заголовками,
   текстом и ссылками на PDF-документы.

   Подключение:
     fonts.css → tokens.css → style.css → page.css → menu.css →
     search-desktop.css → documents.css
   ============================================================ */


/* ══════════════════════════════════════════════════
   ФОН СТРАНИЦЫ
   Отличается от стандартного --color-bg-warm (#FCFAF7).
   Макет использует #EBEAE4 — более холодный песочный.
   Переопределяем фон на .page, .page__intro и .header--page.
   ══════════════════════════════════════════════════ */
.page--documents,
.page--documents .page__intro {
  background-color: #f2f1ed;
}

/* Шапка тоже на этом фоне */
body:has(.page--documents) .header--page {
  background-color: #f2f1ed;
}

/* Разделитель под интро — 25% как между секциями */
.page--documents .page__divider {
  background: var(--color-black-soft-25);
}


/* ══════════════════════════════════════════════════
   КОНТЕЙНЕР КОНТЕНТА
   Вертикальный поток секций под интро.
   ══════════════════════════════════════════════════ */
.documents__body {
  padding: 0 10px 60px;
}


/* ══════════════════════════════════════════════════
   СЕКЦИЯ
   Каждая секция = заголовок + текстовый блок, разделяется
   горизонтальной чертой сверху (кроме первой).
   ══════════════════════════════════════════════════ */
.documents__section {
  padding-top: 28px;
  padding-bottom: 80px;
}

/* Разделитель между секциями — 25% прозрачности */
.documents__section + .documents__section {
  border-top: 1px solid var(--color-black-soft-25);
}

/* Разделитель между колонками на мобилке:
   первый col получает border-bottom, второй col
   начинается с padding-top от первой секции (28px). */
.documents__col:first-child {
  border-bottom: 1px solid var(--color-black-soft-25);
}


/* ══════════════════════════════════════════════════
   ПОДБЛОК ВНУТРИ СЕКЦИИ
   Используется когда в макете визуально отдельный заголовок
   (например «Учредитель») является частью той же секции
   (нет разделителя, общий padding-bottom).
   ══════════════════════════════════════════════════ */
.documents__subsection {
  margin-top: 48px;
}


/* ══════════════════════════════════════════════════
   ЗАГОЛОВОК СЕКЦИИ
   Pragmatica Extended Bold, 22px на мобилке.
   ══════════════════════════════════════════════════ */
.documents__heading {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin-bottom: 40px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}


/* ══════════════════════════════════════════════════
   ТЕКСТОВЫЙ БЛОК СЕКЦИИ
   Pragmatica Book, 18px, line-height 1.35.
   Содержит параграфы, ссылки, мета-поля.
   ══════════════════════════════════════════════════ */
.documents__text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
}

/* Отступ между параграфами внутри секции.
   Внутри .documents__field spacing задаётся отдельно (4px). */
.documents__text > p + p {
  margin-top: 24px;
}

/* Внутри field: лейбл→значение = 4px (paragraph spacing из макета) */
.documents__field > p + p {
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════
   МЕТА-ПОЛЕ (лейбл + значение)
   Используется в секции «Наименование» для пар типа
   «Сокращенное наименование: ...», «Юридический адрес: ...»
   ══════════════════════════════════════════════════ */
.documents__field {
  margin-top: 24px;
}

.documents__field-label {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
}

.documents__field-value {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ССЫЛКИ
   Инлайн-ссылки (сайт учредителя) и ссылки на документы.
   ══════════════════════════════════════════════════ */
.documents__link {
  color: var(--color-black-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: opacity var(--duration-fast) ease;
}
.documents__link:hover         { opacity: 0.6; }
.documents__link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }


/* ══════════════════════════════════════════════════
   СПИСОК ДОКУМЕНТОВ
   Вертикальный список PDF-ссылок внутри секции.
   Каждая ссылка — блочный элемент с отступом 16px.
   ══════════════════════════════════════════════════ */
.documents__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.documents__list-link {
  display: inline;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
  transition: opacity var(--duration-fast) ease;
}
.documents__list-link:hover         { opacity: 0.6; }
.documents__list-link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }


/* ══════════════════════════════════════════════════
   БЕЙДЖ ФОРМАТА
   Неактивный индикатор типа файла (PDF, DOC и т.п.).
   Чёрный залитый прямоугольник с белым текстом,
   высота чуть выше одной строки, инлайн рядом с ссылкой.
   ══════════════════════════════════════════════════ */
.documents__format-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px)
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .documents__body {
    padding: 0 16px 80px;
  }
}


/* ══════════════════════════════════════════════════
   НОУТБУК + ДЕСКТОП (≥1024px)
   Две колонки через flex на .documents__col.
   Левая — реквизиты, правая — списки документов.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .documents__body {
    display: flex;
    gap: var(--inner-col-gap);
    padding: 0 var(--inner-pad-x) var(--inner-pad-bottom);
  }

  /* Обе колонки — по 50% */
  .documents__col {
    flex: 1;
    min-width: 0;
    border-bottom: none;
  }

  /* Первая секция в правой колонке — без разделителя сверху */
  .documents__col:last-child > .documents__section:first-child {
    border-top: none;
  }

  .documents__heading {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .documents__text,
  .documents__field-label,
  .documents__field-value,
  .documents__list-link {
    font-size: 20px;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .documents__heading {
    font-size: 26px;
  }
    .documents__col:first-child {
    border-bottom: none;
  }
}