/* ================= */
/* Страница статьи   */
/* ================= */

.image-header {
   width: clamp(150px, 15vw, 220px);
   height: auto;
   display: block;
}

.article-back {
   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(13px, 1.1vw, 16px);
   color: #E56F25;
   text-decoration: none;
}

@media (any-hover: hover) {
   .article-back:hover {
      color: #FFFFFF;
   }
}

.article {
   /* ширина текста статьи – между узкой колонкой и полной шириной */
   max-width: 1100px;
   margin: clamp(16px, 2vw, 32px) auto clamp(28px, 4vw, 56px);
   padding: clamp(22px, 2.6vw, 44px) clamp(18px, 2.6vw, 48px);

   /* Лист под текстом – в языке карточек блога: длинную статью читать на
      подложке легче, чем прямо на фоне страницы, а границы колонки видно
      даже там, где абзац короткий */
   background-color: #414141;
   border-radius: 14px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* Планшеты: текст не во всю ширину экрана – воздух по бокам */
@media (min-width: 700px) and (max-width: 1200px) {
   .article {
      max-width: 88%;
   }
}

/* Телефон: лист во всю ширину, поля поменьше – иначе от текста остаётся
   узкая полоска */
@media (max-width: 560px) {
   .article {
      margin-left: -2%;
      margin-right: -2%;
      padding: 18px 16px;
      border-radius: 12px;
   }
}

.article__title {
   margin-bottom: clamp(16px, 2vw, 28px);

   font-family: 'Raleway SemiBold', sans-serif;
   font-size: clamp(20px, 2vw, 32px);
   line-height: 1.3;
   color: #E56F25;
}

.article__source {
   margin: -8px 0 clamp(16px, 2vw, 28px);

   font-family: 'Open Sans Regular', sans-serif;
   font-size: clamp(13px, 1vw, 15px);
   color: #B3B3B3;
}

.article__source a {
   color: #E56F25;
}

@media (any-hover: hover) {
   .article__source a:hover {
      text-decoration: none;
   }
}

.article__image {
   width: 100%;
   max-height: 420px;
   object-fit: cover;

   border-radius: 14px;
   margin-bottom: clamp(16px, 2vw, 28px);
}

.article__content {
   font-family: 'Open Sans Regular', sans-serif;
   font-size: clamp(15px, 1.15vw, 18px);
   line-height: 1.65;
   color: #E4E4E4;

   overflow-wrap: anywhere;
}

/* Форматирование из редактора админки */
.article__content p { margin: 0 0 .9em; }
.article__content h2 {
   margin: 1.3em 0 .5em;
   font-family: 'Open Sans SemiBold', 'Open Sans Regular', sans-serif;
   font-size: 1.35em;
   color: #E56F25;
}
.article__content h3 {
   margin: 1.1em 0 .4em;
   font-family: 'Open Sans SemiBold', 'Open Sans Regular', sans-serif;
   font-size: 1.15em;
}
.article__content h4 {
   margin: 1em 0 .35em;
   font-family: 'Open Sans SemiBold', 'Open Sans Regular', sans-serif;
   font-size: 1.05em;
}
/* Пятый уровень – уже не размером, а оттенком: мельче основного текста
   заголовок делать нельзя, читать станет труднее, чем сам текст */
.article__content h5 {
   margin: .9em 0 .3em;
   font-family: 'Open Sans SemiBold', 'Open Sans Regular', sans-serif;
   font-size: 1em;
   color: #C9C9C9;
}
.article__content ul,
.article__content ol { margin: 0 0 .9em; padding-left: 1.6em; }
.article__content li { margin: .2em 0; }
.article__content blockquote {
   margin: .9em 0;
   padding: .3em 1em;
   border-left: 3px solid #E56F25;
   color: #cfcfcf;
}
.article__content a { color: #E56F25; }
@media (any-hover: hover) {
   .article__content a:hover { text-decoration: none;
   }
}

/* ======== Большие экраны: лист шире ======== */
/* Ступени те же, что у контейнера в base.css: на 2К лист в 1100 пикселей
   смотрелся полоской посреди экрана. Кегль не трогаем – он и так растёт
   по clamp вместе с шириной окна */
@media (min-width: 2200px) {
   .article {
      max-width: 1500px;
   }
}

@media (min-width: 3400px) {
   .article {
      max-width: 1800px;
   }
}