/* ============================
   NEWS ARTICLE PAGE
   Дизайн по Figma «Новости/Новостная статья» (Готово ПК)
   ============================ */

.news-article {
  padding: 30px 0 60px;
}

/* Пустая по умолчанию, плавно проявляется когда данные и фото готовы */
.news-article__mainscreen,
.news-article__body {
  opacity: 0;
  transition: opacity 0.35s ease;
}

#naSection.is-ready .news-article__mainscreen,
#naSection.is-ready .news-article__body {
  opacity: 1;
}

.news-article .container {
  max-width: 1440px;
}

.news-article__mainscreen {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ── Кнопка «← Все новости» ── */
.news-article__back {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  text-decoration: none;
  align-self: flex-start;
  font-family: var(--font-golos);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-gray);
  transition: color var(--transition-fast);
}

/* По умолчанию серая (текст + стрелка), при ховере обе синие */
.news-article__back:hover {
  color: var(--color-blue);
}

.news-article__back-icon {
  width: 30px;
  height: 30px;
  transform: rotate(180deg);
  flex-shrink: 0;
  background-color: currentColor;   /* стрелка берёт цвет ссылки (серый → синий) */
  -webkit-mask: url('../assets/icons/ic_arrow_forward_thin.svg') center / contain no-repeat;
  mask: url('../assets/icons/ic_arrow_forward_thin.svg') center / contain no-repeat;
}

.news-article__back--bottom {
  margin-top: 50px;
}

/* ── Заголовок ── */
.news-article__title {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

/* ── Бейдж + дата ── */
.news-article__info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-article__date {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-blue);
}

/* ── Тело: статья + сайдбар ── */
.news-article__body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 50px;
}

/* ── Контент статьи (рендер из Markdown) ── */
.news-article__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-family: var(--font-pt-sans);
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-black);
}

/* Текстовый блок: разделительная линия снизу + отступ (как в Figma) */
.news-article__block {
  padding-bottom: 50px;
  border-bottom: var(--border-gray-light);
}

.news-article__block > *:first-child {
  margin-top: 0;
}

.news-article__block > *:last-child {
  margin-bottom: 0;
}

/* Блок с картинкой */
.news-article__pic {
  display: block;
}

.news-article__pic img,
.news-article__pic video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.news-article__content p {
  margin: 0 0 20px;
}

.news-article__content h2,
.news-article__content h3 {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 30px 0 16px;
}

.news-article__content h2 { font-size: var(--fs-h5); }
.news-article__content h3 { font-size: 20px; }

.news-article__content ul { list-style: disc; }
.news-article__content ol { list-style: decimal; }

.news-article__content ul,
.news-article__content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.news-article__content li {
  margin-bottom: 10px;
}

.news-article__content a {
  color: var(--color-black);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.news-article__content a:hover {
  color: var(--color-orange);
}

.news-article__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.news-article__content hr {
  border: none;
  border-top: var(--border-gray-light);
  margin: 40px 0;
}

.news-article__content strong { font-weight: 700; }
.news-article__content em { font-style: italic; }

.news-article__placeholder {
  color: var(--color-gray);
}

.news-article__lang-notice {
  font-family: var(--font-pt-sans);
  font-size: 14px;
  color: var(--color-gray);
  background: #f0f0f0;
  border-left: 3px solid var(--color-blue);
  padding: 10px 16px;
  margin-bottom: 30px;
  border-radius: 2px;
}

/* ── Сайдбар CTA ── */
.news-article__aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 20px 20px;
}

.news-article__aside-text {
  font-family: var(--font-pt-sans);
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

.news-article__aside-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  text-decoration: none;
  font-family: var(--font-golos);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-blue);
  transition: opacity var(--transition-fast);
}

.news-article__aside-btn:hover {
  opacity: 0.7;
}

.news-article__aside-btn-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}


/* ── Desktop (>= 1024px): 2 колонки ── */
@media (min-width: 1024px) {
  .news-article {
    padding: 80px 0 100px;
  }

  .news-article__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
  }

  .news-article__aside {
    width: 330px;
    flex-shrink: 0;
  }
}


/* ============================================================
   МОБ (≤767px): страница новости
   15 — блок ОС: убрать внутренний боковой отступ
   16 — «ко всем новостям»: синий текст (как стрелка) + по центру
   Десктоп не затрагивается.
   ============================================================ */
@media (max-width: 767px) {
  .news-article__aside {
    padding: 0 0 20px;
  }

  .news-article__back {
    color: var(--color-blue);
  }
  .news-article__back--bottom {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}