/* Страница статьи блога (scripts/blog_template.py).
   Цвета сайта: бирюзовый #235d6e (заголовки, шапка), коралловый #ff8562
   (ссылки, кнопки), текст #1d2024, шрифт статьи — Nunito. */

/* окно ленты Тильды показывается как обычная страница: без полосы
   «← Блог» и с отступом под фиксированную шапку сайта */
.qa-blogpost .t-feed__post-popup__close-wrapper { display: none !important; }
.qa-blogpost .t-feed__post-popup { position: static !important; overflow: visible !important; height: auto !important; }
.qa-blogpost .t-feed__post-popup__container { padding-top: 110px !important; }
@media (max-width: 960px) {
  .qa-blogpost .t-feed__post-popup__container { padding-top: 84px !important; }
}

/* Обложка в статье не нужна — она для ленты и превью ссылки (og:image).
   Рубрика капсом над заголовком, дата и автор внизу — тильдовские
   строки; их заменяет одна строка «рубрика · дата · время чтения». */
.qa-blogpost .t-feed__post-popup__cover-wrapper,
.qa-blogpost .t-feed__post-popup__date-parts-wrapper,
.qa-blogpost .t-feed__post-popup__author-link { display: none !important; }

/* рубрика · дата · время чтения */
.qa-post-meta {
  margin: 14px 0 0;
  font: 400 15px/1.4 Arial, sans-serif;
  color: #6b7176;
}

/* оглавление */
.qa-toc {
  margin: 24px 0 8px;
  padding: 18px 22px;
  background: #f1f5f6;
  border-radius: 14px;
  font-family: 'Nunito', Arial, sans-serif;
}
.qa-toc__title { font-weight: 700; font-size: 17px; color: #235d6e; margin-bottom: 8px; }
.qa-toc ol { margin: 0; padding-left: 20px; }
.qa-toc li { font-size: 16px; line-height: 1.5; margin: 2px 0; }
.qa-blogpost .qa-toc a { color: #1d2024 !important; text-decoration: none !important; border-bottom: 1px solid #c9d6da; }
.qa-blogpost .qa-toc a:hover { color: #235d6e !important; border-color: #235d6e; }
.qa-blogpost .t-redactor__h2[id] { scroll-margin-top: 100px; }

/* блок «что дальше» */
.qa-cta { margin: 36px 0; display: grid; gap: 16px; font-family: 'Nunito', Arial, sans-serif; }
.qa-cta_two { grid-template-columns: 1fr 1fr; }
.qa-cta__card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 24px;
  background: #235d6e;
  border-radius: 16px;
  color: #ffffff;
}
.qa-cta_two .qa-cta__card + .qa-cta__card { background: #f1f5f6; color: #1d2024; }
.qa-cta__title { font-weight: 700; font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.qa-cta__text { font-size: 16px; line-height: 1.5; margin-bottom: 18px; opacity: .92; flex: 1; }
.qa-blogpost .qa-cta__btn,
.qa-blogpost .qa-cta__btn:visited {
  display: inline-block;
  padding: 12px 22px;
  background: #ff8562;
  color: #ffffff !important;
  border-radius: 12px;
  font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none !important;
  border: 0;
}
.qa-blogpost .qa-cta__btn:hover { background: #f26f4a; }
@media (max-width: 640px) {
  .qa-cta_two { grid-template-columns: 1fr; }
  .qa-cta__card { padding: 18px; }
}

/* читайте также */
.qa-related { margin: 44px 0 0; font-family: 'Nunito', Arial, sans-serif; }
.qa-related__title { font-weight: 700; font-size: 24px; color: #1d2024; margin-bottom: 16px; }
.qa-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qa-blogpost .qa-related__item { display: block; color: #1d2024 !important; text-decoration: none !important; }
.qa-related__img {
  display: block; aspect-ratio: 16 / 9;
  background: #eef1f2 center / cover no-repeat;
  border-radius: 12px; margin-bottom: 10px;
}
.qa-related__name { display: block; font-weight: 700; font-size: 16px; line-height: 1.35 !important; }
.qa-related__item:hover .qa-related__name { color: #235d6e; }
@media (max-width: 640px) {
  .qa-related__grid { grid-template-columns: 1fr; }
  .qa-related__img { aspect-ratio: 16 / 9; }
}

/* карточка школы вместо списка адресов */
.qa-school {
  margin: 40px 0 0; padding: 20px 0 0;
  border-top: 1px solid #e3e7e9;
  font-family: 'Nunito', Arial, sans-serif;
}
.qa-school__name { font-weight: 700; font-size: 17px; color: #235d6e; margin-bottom: 10px; }
.qa-school__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.qa-blogpost .qa-school__links a { color: #1d2024 !important; text-decoration: none; border-bottom: 1px solid #c9d6da; }
.qa-blogpost .qa-school__links a:hover { color: #ff8562 !important; border-color: #ff8562; }
.qa-blogpost .qa-school__links a.qa-school__main { color: #235d6e !important; font-weight: 700; border-color: #235d6e; }

/* тильдовский блок «Смотрите также» — дублирует наш «Читайте также»;
   после карточки школы в статье больше ничего нет */
.qa-blogpost [class*="t-feed__post-popup__relevants"] { display: none !important; }

/* обложка статьи в общем стиле (assets/blogmedia/covers) — над названием */
.qa-post-cover { display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; margin: 0 0 28px; }

/* блок «Коротко» в начале статьи — та же карточка, что «что дальше» */
.qa-short { margin: 24px 0 28px; }

/* таблицы в тексте статьи; на телефоне прокручиваются вбок */
.qa-table { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: 'Nunito', Arial, sans-serif; }
.qa-table table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 1.4; color: #1d2024; }
.qa-table th { background: #235d6e; color: #ffffff; font-weight: 700; text-align: left; padding: 10px 12px; }
.qa-table td { padding: 10px 12px; border-bottom: 1px solid #e3e7e9; vertical-align: top; }
.qa-table tbody tr:nth-child(even) td { background: #f1f5f6; }
.qa-blogpost .qa-table a { color: #235d6e !important; }

/* видео YouTube вставлено с width="560" — на телефоне страница уезжала вбок */
.qa-blogpost iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* блоки кода из Markdown (scripts/new_post.py) */
.qa-blogpost .qa-code { margin: 20px 0; padding: 16px 18px; background: #1d2024; color: #e6edf3; border-radius: 12px; overflow-x: auto; font: 15px/1.5 Menlo, Consolas, monospace; white-space: pre; }
.qa-blogpost .qa-code code { background: none; color: inherit; padding: 0; }
.qa-blogpost .t-redactor__text code { background: #f1f5f6; padding: 1px 6px; border-radius: 4px; font: 0.92em Menlo, Consolas, monospace; }