/* Длинный текст из админки: пост блога и описание события.
   Отдельный файл по той же причине, что и events.css: style.css собирается
   из LESS-проекта (d:\my_projects\helpingersLESS), и правки в нём затрутся
   при следующей сборке.

   Разметка внутри .article-text приходит из админки как есть (обычные <p>,
   списки, заголовки), поэтому стили навешиваются на теги, а не на классы.
   Базовый шрифт сайта - 14px: для абзаца в карточке это нормально, а для
   статьи мелко и тесно, отсюда свой размер и межстрочный интервал. */

.article-text {
  max-width: 44em;          /* ~85 символов в строке; длиннее читать тяжело */
  margin-top: 18px;         /* отбивка от даты/картинки над текстом */
  font-size: 17px;
  line-height: 1.75;
  color: #1c1c1c;
  /* текст приходит из админки, там может оказаться длинная ссылка или
     слово без пробелов: без переноса такая строка уводит всю страницу
     вправо и на телефоне появляется горизонтальная прокрутка */
  overflow-wrap: anywhere;
}

/* крайние отступы убираем, чтобы блок не отрывался от того, что рядом */
.article-text > *:first-child {
  margin-top: 0;
}

.article-text > *:last-child {
  margin-bottom: 0;
}

.article-text p,
.article-text ul,
.article-text ol,
.article-text blockquote,
.article-text table,
.article-text pre {
  margin: 0 0 1.15em;
}

.article-text h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
}

.article-text h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 1.6em 0 0.5em;
}

.article-text h4 {
  font-size: 17px;
  line-height: 1.4;
  margin: 1.5em 0 0.5em;
}

.article-text ul,
.article-text ol {
  padding-left: 22px;
}

.article-text li {
  margin-bottom: 0.5em;
}

.article-text a {
  color: #3ebde6;
  text-decoration: underline;
}

.article-text img {
  max-width: 100%;
  height: auto;
  border-radius: 7px;
  margin: 0.5em 0 1em;
}

.article-text blockquote {
  margin-left: 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid rgba(188, 188, 188, 0.5);
  color: #444444;
}

.article-text hr {
  border: 0;
  border-top: 1px solid rgba(188, 188, 188, 0.4);
  margin: 2em 0;
}

/* Широкая таблица прокручивается внутри себя, а не тащит за собой страницу.
   width: max-content нужен, чтобы узкая таблица осталась по содержимому. */
.article-text table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
}

.article-text th,
.article-text td {
  /* внутри таблицы слова не ломаем: пусть лучше сама таблица
     прокрутится, чем колонки схлопнутся в столбик по букве */
  overflow-wrap: normal;
  padding: 8px 10px;
  border: 1px solid rgba(188, 188, 188, 0.5);
  text-align: left;
}

/* на телефоне строка и так короткая - размер чуть меньше, интервал тот же */
@media (max-width: 767px) {
  .article-text {
    font-size: 16px;
    line-height: 1.7;
  }

  .article-text h2 {
    font-size: 21px;
  }

  .article-text h3 {
    font-size: 18px;
  }
}

/* то же для блоков кода: пусть прокручиваются сами */
.article-text pre {
  overflow-x: auto;
}

/* Вставки из админки (видео, карты, виджеты) приходят со своими width=560
   и т.п. На телефоне это шире экрана, а Safari на iPhone вдобавок тянет
   iframe по содержимому - отсюда та же пара width: 1px + min-width: 100%. */
.article-text iframe,
.article-text video,
.article-text embed,
.article-text object {
  display: block;
  width: 1px;
  min-width: 100%;
  max-width: 100%;
  margin: 0.5em 0 1em;
}