/* Статья блога онлайн-сайта (newpage.php): та же типографика, что у статьи
   основного сайта, — колонка для чтения, ритм, списки, строка «рубрика ·
   дата · время чтения».

   Это КОПИЯ двух блоков из robolatory/style.css (типографика статьи и
   колонка .rbl-art). Отдельным файлом, а не в корневом style.css: у
   онлайн-темы корневой файл — только заголовок темы, а своя таблица стилей
   на 6000 строк живёт в css/style.css, и статью в ней не найти. Пути к
   шрифтам — от css/, отсюда «../fonts/». Меняется парой с оригиналом:
   тест сверяет, что правила совпадают. */

/* Фирменный Cinta для статьи. Во всей теме объявления шрифта написаны с
   типографскими кавычками (font-family: “Cinta-Regular”) — такое объявление
   браузер считает невалидным и отбрасывает вместе с @font-face, поэтому
   шрифты из fonts/ не грузятся вовсе и сайт рисуется системным. Здесь
   объявляем одно валидное семейство с правильными кавычками и применяем его
   только к статье: остальные страницы остаются как были, их облик не меняем.
   Путь относителен этого файла (он лежит в корне темы). */
@font-face {
  font-family: "CintaArticle";
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/Cinta-Regular/Cinta-Regular.woff2") format("woff2"),
       url("../fonts/Cinta-Regular/Cinta-Regular.woff") format("woff"),
       url("../fonts/Cinta-Regular/Cinta-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "CintaArticle";
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/Cinta-Medium/Cinta-Medium.woff2") format("woff2"),
       url("../fonts/Cinta-Medium/Cinta-Medium.woff") format("woff"),
       url("../fonts/Cinta-Medium/Cinta-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "CintaArticle";
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/Cinta-Bold/Cinta-Bold.woff2") format("woff2"),
       url("../fonts/Cinta-Bold/Cinta-Bold.woff") format("woff"),
       url("../fonts/Cinta-Bold/Cinta-Bold.ttf") format("truetype");
}
/* Начертания объявлены одним семейством с разными font-weight: браузер сам
   возьмёт нужное для <strong> и заголовков, без отдельных классов */
.article-page .school__title,
.article-page .date-news,
.news-content {
  font-family: "CintaArticle", system-ui, -apple-system, sans-serif;
}

/* ===== Типографика статьи блога (newpage.php) =====
   Строка раньше тянулась на всю ширину контейнера (78% экрана — под 1500px),
   а межстрочный интервал был жёстко 24px при кегле 20px. На длинной строке
   глаз не находит начало следующей: текст выглядел сплошной плитой, а
   промежутки — случайными. Задаём читаемую колонку и единый ритм: интервалы
   считаем от кегля (em), поэтому на телефоне пропорции сохраняются. */
.article-page .school__title,
.article-page .date-news,
.article-page .news-content {
  max-width: 46em;
}
.article-page .school__title {
  font-size: 44px;
  line-height: 1.15;
  margin-bottom: 14px;
}
.article-page .date-news {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 32px;
}
.news-content {
  font-size: 20px;
  line-height: 1.7;
  color: #2a241f;
}
.news-content p {
  margin: 0 0 1.15em;
  line-height: 1.7;
}
/* Перед заголовком отступ заметно больше, чем после: так виден блок, к
   которому заголовок относится. Одинаковые margin сверху и снизу «отрывали»
   заголовок от собственного текста. */
.news-content h2 {
  font-size: 32px;
  line-height: 1.25;
  margin: 1.9em 0 0.55em;
}
.news-content h3 {
  font-size: 25px;
  line-height: 1.3;
  margin: 1.6em 0 0.5em;
}
.news-content h2:first-child,
.news-content h3:first-child {
  margin-top: 0;
}
.news-content ul,
.news-content ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
}
.news-content li {
  margin-bottom: 0.5em;
  line-height: 1.65;
}
.news-content li:last-child {
  margin-bottom: 0;
}
.news-content blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 4px solid #ED6B10;
  color: #4a4139;
}
.news-content a {
  color: #E63612;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-content a:hover {
  text-decoration: none;
}
/* Картинка — смысловая пауза, поэтому воздуха вокруг больше, чем между абзацами */
.news-content figure {
  margin: 1.8em 0;
}
.news-content figcaption {
  margin-top: 0.6em;
  font-size: 0.8em;
  line-height: 1.45;
  color: #7c736b;
}
@media (max-width: 768px) {
  .article-page .school__title { font-size: 30px; }
  .article-page .date-news { margin-bottom: 22px; }
  .news-content { font-size: 17px; }
  .news-content h2 { font-size: 24px; }
  .news-content h3 { font-size: 20px; }
}

/* ===== Статья блога: колонка для чтения (newpage.php, .rbl-art) =====
   Ориентир — лонгриды медиа вроде DTF: узкая колонка ~680px, текст 19px с
   межстрочным 1.6, абзацы разделены воздухом в одну строку, у списков свой
   маркер и висячий отступ. Прежний межстрочный 1.7 на длинных абзацах
   рассыпал текст на отдельные строки, а у абзацев с размером из редактора
   (.has-medium-font-size) кегль и вовсе был свой — соседние абзацы одной
   статьи читались разным шрифтом.
   Фирменный Cinta остаётся: меняются пропорции, а не шрифт. */
.rbl-art {
  max-width: 700px;
  margin: 0 auto;
}
.article-page .rbl-art .school__title,
.article-page .rbl-art .news-content {
  max-width: none;
}
.article-page .rbl-art .school__title {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

/* Рубрика · дата · время чтения */
.rbl-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 32px;
  /* Служебная строка — системным шрифтом: у Cinta на мелком кегле буква «т»
     стоит с просветом («чт ения»), а на 19px в тексте статьи всё ровно */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #7c736b;
}
.rbl-art-meta__rubric {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  background: #FFF1E3;
  color: #C4520B;
  font-weight: 600;
  font-size: 14px;
}
.rbl-art-meta__line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.rbl-art-meta__dot { color: #C9C0B6; }

/* Текст */
.article-page .rbl-art .news-content,
.article-page .rbl-art .news-content p,
.article-page .rbl-art .news-content li {
  font-family: "CintaArticle", system-ui, -apple-system, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: #1f1a17;
}
/* Размер из редактора («средний», «крупный») абзацу статьи не нужен: вся
   статья одним кеглем, иначе соседние абзацы выглядят разными шрифтами */
.article-page .rbl-art .news-content p[class*="-font-size"] {
  font-size: 19px !important;
}
.article-page .rbl-art .news-content p {
  margin: 0 0 1em;
}
.article-page .rbl-art .news-content > :last-child { margin-bottom: 0; }
.article-page .rbl-art .news-content strong,
.article-page .rbl-art .news-content b { font-weight: 700; color: #000; }

/* Подзаголовки ближе к своему тексту, чем к предыдущему */
.article-page .rbl-art .news-content h2 {
  font-family: "CintaArticle", system-ui, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.25;
  margin: 1.5em 0 0.45em;
  color: #000;
}
.article-page .rbl-art .news-content h3 {
  font-family: "CintaArticle", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  margin: 1.3em 0 0.4em;
  color: #000;
}

/* Списки: свой маркер и висячий отступ — строка пункта начинается ровно
   под текстом, а не под маркером */
.article-page .rbl-art .news-content ul,
.article-page .rbl-art .news-content ol {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  line-height: 1.6;
}
.article-page .rbl-art .news-content li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 0.55em;
}
.article-page .rbl-art .news-content li:last-child { margin-bottom: 0; }
.article-page .rbl-art .news-content ul > li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ED6B10;
}
.article-page .rbl-art .news-content ol { counter-reset: rbl-ol; }
.article-page .rbl-art .news-content ol > li { counter-increment: rbl-ol; }
.article-page .rbl-art .news-content ol > li::before {
  content: counter(rbl-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #ED6B10;
}

/* Вводная строка рубрики — вставкой, а не курсивным абзацем того же размера */
.article-page .rbl-art .news-content p.rbl-lead,
.article-page .rbl-art .news-content > p:first-child:has(> em:only-child) {
  margin: 0 0 1.6em;
  padding: 14px 18px;
  border-left: 4px solid #ED6B10;
  border-radius: 0 14px 14px 0;
  background: #FFF6EC;
  font-size: 17px !important;
  line-height: 1.5;
  color: #5b4a3c;
}
.article-page .rbl-art .news-content p.rbl-lead em,
.article-page .rbl-art .news-content > p:first-child:has(> em:only-child) em { font-style: normal; }

/* Цитата */
.article-page .rbl-art .news-content blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid #ED6B10;
  font-size: 21px;
  line-height: 1.5;
  color: #2a241f;
}
.article-page .rbl-art .news-content blockquote p { font-size: inherit; margin: 0 0 0.5em; }

/* Картинки и подписи */
.article-page .rbl-art .news-content figure { margin: 1.6em 0; }
.article-page .rbl-art .news-content img { display: block; max-width: 100%; height: auto; border-radius: 20px; margin: 0; }
.article-page .rbl-art .news-content figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #7c736b; text-align: left; }

/* Ссылки */
.article-page .rbl-art .news-content a {
  color: #E63612;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-page .rbl-art .news-content a:hover { text-decoration-color: transparent; }

/* Таблица и разделитель из редактора */
.article-page .rbl-art .news-content .wp-block-table { margin: 1.6em 0; overflow-x: auto; }
.article-page .rbl-art .news-content table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.article-page .rbl-art .news-content th,
.article-page .rbl-art .news-content td { padding: 10px 12px; border-bottom: 1px solid #EFE7DF; text-align: left; vertical-align: top; }
.article-page .rbl-art .news-content th { font-weight: 700; background: #FFF6EC; }
.article-page .rbl-art .news-content hr,
.article-page .rbl-art .news-content .wp-block-separator { border: 0; height: 1px; background: #EFE7DF; margin: 2em 0; }

/* Приглашение в конце статьи — карточкой, а не двумя абзацами текста */
.article-page .rbl-art .news-content .rbl-cta {
  margin: 2em 0 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #FFF1E3;
}
.article-page .rbl-art .news-content .rbl-cta p { margin: 0 0 0.4em; }
.article-page .rbl-art .news-content .rbl-cta p:last-child { margin: 0; font-weight: 600; color: #000; }

@media (max-width: 640px) {
  /* Тема центрирует .school__title на телефоне; у статьи заголовок встаёт
     по левому краю вместе с текстом — иначе он «плавает» над колонкой */
  .article-page .rbl-art .school__title { font-size: 28px; text-align: left; }
  .article-page .rbl-art .news-content p,
  .article-page .rbl-art .news-content li { line-height: 1.55; }
  .rbl-art-meta { margin-bottom: 24px; font-size: 14px; }
  .article-page .rbl-art .news-content,
  .article-page .rbl-art .news-content p,
  .article-page .rbl-art .news-content li,
  .article-page .rbl-art .news-content p[class*="-font-size"] { font-size: 17px !important; }
  .article-page .rbl-art .news-content h2 { font-size: 22px; }
  .article-page .rbl-art .news-content h3 { font-size: 19px; }
  .article-page .rbl-art .news-content blockquote { font-size: 18px; }
}

/* Код в статье (блок «Код» редактора) — тёмная панель с шапкой: язык слева,
   «Копировать» справа (js/article-code.js). Серым абзацем моноширинным
   шрифтом он сливался с текстом, и где кончается программа, было не видно,
   а статьи с кодом пишутся затем, чтобы его скопировали и запустили.
   Без скрипта шапки нет, но панель, шрифт и прокрутка — те же. */
.article-page .rbl-art .news-content .rbl-code {
  margin: 1.6em 0;
  border-radius: 20px;
  background: #1E1A17;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.article-page .rbl-art .news-content .rbl-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 20px;
  background: #2A2420;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}
.article-page .rbl-art .news-content .rbl-code__lang { color: #FFB27A; text-transform: none; }
.article-page .rbl-art .news-content .rbl-code__copy {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .08);
  color: #F3EDE6;
  font: inherit;
  cursor: pointer;
  transition: background .15s;
}
.article-page .rbl-art .news-content .rbl-code__copy:hover { background: rgba(255, 255, 255, .16); }
.article-page .rbl-art .news-content .rbl-code__copy:focus-visible { outline: 2px solid #FFB27A; outline-offset: 2px; }
.article-page .rbl-art .news-content .rbl-code__copy.is-done { background: #ED6B10; color: #fff; }
/* Сама программа. Моноширинный шрифт системы: свой пришлось бы грузить ради
   пары блоков на статью. Строки не переносятся — перенесённая строка Python
   читается как новая с другим отступом, — длинная прокручивается вбок */
.article-page .rbl-art .news-content pre {
  margin: 1.6em 0;
  padding: 18px 20px;
  border-radius: 20px;
  background: #1E1A17;
  color: #F3EDE6;
  font: 15px/1.65 ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}
.article-page .rbl-art .news-content .rbl-code pre { margin: 0; border-radius: 0; padding-top: 16px; }
.article-page .rbl-art .news-content pre code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  /* Стиль блока «Код» из ядра WordPress ставит <code> перенос (pre-wrap,
     break-word), а правило кода в строке ниже — word-break: без отмены
     длинная строка всё равно ломалась посреди программы */
  white-space: inherit;
  word-break: normal;
  overflow-wrap: normal;
}
/* Код внутри строки: «Наберите print(2 + 2)» — видно, что именно набирать */
.article-page .rbl-art .news-content code {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  padding: .12em .4em;
  border-radius: 6px;
  background: #FFF1E3;
  color: #B4440F;
  word-break: break-word;
}
/* Цвета разбора: ключевые слова — фирменный оранжевый, строки — зелёный,
   комментарии приглушены: их читают, но они не программа */
.rbl-tok-k { color: #FF9F5A; }
.rbl-tok-s { color: #B5D98A; }
.rbl-tok-c { color: #8C8279; font-style: italic; }
.rbl-tok-n { color: #F2C94C; }
.rbl-tok-f { color: #7FC8F8; }
.rbl-tok-v { color: #F3A6C8; }
@media (max-width: 640px) {
  .article-page .rbl-art .news-content pre { font-size: 13.5px; padding: 14px 16px; border-radius: 14px; }
  .article-page .rbl-art .news-content .rbl-code { border-radius: 14px; }
  .article-page .rbl-art .news-content .rbl-code__head { padding: 8px 10px 8px 16px; }
}