/* ============================================================
   css/content.css — оформление "богатого" текста записи/статьи
   (.prose): абзацы, заголовки внутри текста и утилитарные классы
   для картинок. Не в /modules/journal — этим же будут пользоваться
   курсы и материалы, когда до них дойдёт дело.

   Использование классов у картинки в body_md (комбинируются):
     Размер:       img-half (1/2) · img-third (1/3) · img-quarter (1/4)
     Расположение: img-center · img-left (обтекание слева) · img-right (обтекание справа)
   Пример: <img src="..." class="img-third img-right">

   Ниже — семантические стили текста (definition, formula, keyPoint,
   additionalMaterial, pictureCaption, tableCaption). Они выставляются из
   выпадающего списка "Стили" в визуальном редакторе, см. style_formats
   в admin/widgets/rich-editor.js.
   ============================================================ */

/* Кегль и интервал текста для чтения. 1rem — это 16px, то есть ровно 12pt:
   базовый размер шрифта браузера нигде не переопределён, поэтому «пункты»
   из привычек Word здесь честно превращаются в rem. Меньше 12pt для
   лекции на десяток страниц не берём.

   line-height: 1.5 — полуторный интервал, как в Word. Раньше стояло 1.7:
   при мелком кегле воздух между строками компенсировал размер, а с 12pt
   он больше не нужен. */
.prose {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    overflow-wrap: break-word;
}
.prose::after { content: ""; display: table; clear: both; }

.prose p { margin-bottom: .9rem; }
.prose p:last-child { margin-bottom: 0; }

.prose h2, .prose h3 {
    font-family: 'Inter', -apple-system, sans-serif;
    margin: 1.25rem 0 .5rem;
    font-weight: 600;
}

/* Отступ и маркер/номер списка обнуляет общий сброс *{margin:0;padding:0}
   в journal.css (он на странице обязателен — оттуда токены цвета и
   [data-theme], без него у content.css не от чего брать var(--accent)).
   В окне редактора это же правило не подключено, поэтому там список
   выглядел нормально за счёт стилей браузера по умолчанию, а на публичной
   странице — плашмя. Задаём отступ явно, чтобы совпадало и там, и там. */
.prose ul, .prose ol {
    margin: 0 0 .9rem;
    padding-left: 1.4rem;
}
.prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose li + li { margin-top: .3rem; }
.prose li > ul, .prose li > ol { margin-top: .3rem; margin-bottom: 0; }

.prose a { color: var(--color-it); border-bottom: 1px dotted var(--color-it); }

/* Таблицы. border-collapse обязателен: без него границы соседних ячеек
   встают рядом и «1px» превращается в 2px с зазором. Отступ внутри ячейки
   задаём явно — общий сброс *{padding:0} в journal.css обнуляет и его. */
.prose table {
    border-collapse: collapse;
    margin: .9rem 0;
    max-width: 100%;
}
.prose th,
.prose td {
    border: 1px solid var(--color-muted);
    padding: .35rem .5rem;
    vertical-align: top;
}

.prose img {
    max-width: 100%;
    display: block;
    border-radius: 6px;
    margin: .5rem 0;
}

/* ===== Размер ===== */
.prose img.img-half    { width: 50%; }
.prose img.img-third   { width: 33.333%; }
.prose img.img-quarter { width: 25%; }

/* ===== Расположение ===== */
.prose img.img-center { margin-left: auto; margin-right: auto; }
/* Без класса размера ширина остаётся собственной, и auto-поля центрируют
   картинку как есть — это вариант «как в файле · по центру» в редакторе. */
.prose img.img-left    { float: left;  margin: .25rem 1.25rem 1rem 0; }
.prose img.img-right   { float: right; margin: .25rem 0 1rem 1.25rem; }

/* ===== Выключка по центру ===== */
/* Класс, а не инлайновый style: оформление в проекте задают только классы,
   и style чистка не сохраняет (см. ALLOWED_ATTRS в rich-editor.js). Кнопка
   «по центру» в редакторе ставит именно его, и в него же переводится
   центрирование, приехавшее из Word.

   Второе правило — для картинки внутри центрированного абзаца: у .prose img
   display:block, на неё text-align родителя не действует, нужны auto-поля. */
.prose .align-center { text-align: center; }
.prose .align-center img { margin-left: auto; margin-right: auto; }

@media (max-width: 480px) {
    /* На узком экране плавающие/дольные картинки почти не оставляют места под текст */
    .prose img.img-half,
    .prose img.img-third,
    .prose img.img-quarter { width: 100%; float: none; margin: .5rem 0; }
}

/* ============================================================
   СЕМАНТИЧЕСКИЕ СТИЛИ ТЕКСТА

   Логика родом из модуля курсов (определение, тезис, формула), но живут
   они здесь, а не в modules/courses: журналу они пригодятся не меньше.

   Цветовой акцент НЕ задаётся здесь напрямую — берётся из --accent,
   который объявлен по категориям в modules/journal/journal.css
   (`[data-theme="it"] { --accent: ... }`) и достаётся сюда по
   наследованию: data-theme стоит на <article> страницы курса, лекции и
   записи журнала, а .prose — его потомок. Поэтому одно и то же
   определение внутри курса по ИТ синее, а внутри курса по праву зелёное,
   и ни строчки на это тут не потрачено.

   У каждого var() есть нейтральный фallback: если .prose однажды
   окажется вне тематического блока, стиль не должен покраситься в
   случайный цвет — он просто останется без акцента.

   Имена классов camelCase, а не kebab-case, как остальной проект: это
   осознанно, они же будут именами стилей в Word для будущего импортёра —
   лишний слой перевода имён никому не нужен.
   ============================================================ */

/* Определение — внутри текста (span), не блок */
.prose .definition {
    font-weight: 600;
    font-style: italic;
    color: var(--accent, var(--color-text));
}

/* Формула — внутри текста (span), не блок: центрирование и отступы убраны
   намеренно, формула стоит там, где её поставил автор, хоть посреди фразы.

   Отдельная гарнитура ровно ради одного: STIX Two Text рисовался для
   научной вёрстки, и переменные в его курсиве выглядят как в учебнике, а
   не как наклонный текст абзаца.

   Кегль не задаётся — формула идёт тем же размером, что окружающий текст.
   У STIX ниже строчные, чем у PT Serif, поэтому выглядеть она будет чуть
   мельче соседних букв; это осознанно.

   Если STIX не загрузился, откат на PT Serif — у него теперь тоже
   настоящий курсив (см. ital-ось в @import/<link>). */
.prose .formula {
    font-family: 'STIX Two Text', 'PT Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .01em;
}

/* Код — имя файла, команда, фрагмент кода внутри текста (span), не блок.

   Кегль чуть меньше окружающего намеренно: у моноширинных шрифтов крупнее
   строчные, и в одной строке с PT Serif они иначе выглядят великанами.

   Тег <code> оформляем тем же правилом: он разрешён в тексте (ALLOWED_TAGS
   в rich-editor.js), и набранный им фрагмент должен выглядеть так же, как
   размеченный стилем из выпадающего списка. */
.prose .code,
.prose code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9em;
}

/* Листинг — несколько строк кода подряд, каждая отдельным абзацем с классом
   code на самом <p> (стиль «Листинг» в редакторе; кнопка «Очистить» переводит
   в этот вид и абзацы, целиком набранные инлайновым «Кодом»). Между такими
   абзацами обычный отступ .9rem снимается: строки идут одна под другой с тем
   же интервалом, что строки внутри абзаца. Отступ после последней строки
   листинга остаётся. Класс на <p>, а не «span — единственный ребёнок»:
   CSS не видит текстовых узлов, и абзац «команда ls посреди фразы» иначе
   считался бы строкой кода. :has() есть во всех актуальных браузерах; в
   старых правило не сработает и отступ останется обычным. */
.prose p.code:has(+ p.code) { margin-bottom: 0; }

/* Ключевой тезис — воздух со всех сторон и черта под текстом. Боковой
   отступ — margin, а не padding: тогда рамка снизу идёт по краю самого
   блока, то есть с теми же отступами, а не во всю ширину .prose. */
.prose .keyPoint {
    margin: 1.5rem 2rem;
    padding: .4rem 0 1rem;
    border-bottom: 2px solid var(--accent, var(--color-border));
    font-size: 1.05em;
    font-weight: 700;
    font-style: italic;
    color: var(--accent, var(--color-text));
}

/* Дополнительный материал — отступ слева и мелкий кегль.
   Селекторы не завязаны на тег: когда научим сворачиваться, достаточно
   заменить <div class="additionalMaterial"> на <details> с тем же
   классом, стили подхватятся как есть. */
.prose .additionalMaterial {
    margin: 1rem 0;
    padding-left: 2rem;
    font-size: .875em;
    color: var(--color-body);
}
.prose .additionalMaterial > :last-child { margin-bottom: 0; }
.prose details.additionalMaterial > summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Подписи к рисунку и таблице — пока одинаковые, поэтому одним правилом.
   Разъедутся — развести на два, ради этого они и названы по-разному. */
.prose .pictureCaption,
.prose .tableCaption {
    font-style: italic;
    font-size: .85em;
    text-align: center;
    color: var(--accent, var(--color-muted));
    margin: -.25rem 0 1rem; /* подтянуть к картинке/таблице над подписью */
}

@media (max-width: 480px) {
    .prose .keyPoint { margin: 1.5rem .75rem; padding: .4rem 0 .75rem; }
    /* Раз левой границы больше нет, весь сигнал «это врезка» несёт отступ —
       поэтому на узком экране он тоже подрос, хотя и остаётся меньше 2rem:
       на 480px такой отступ съел бы заметную часть строки. */
    .prose .additionalMaterial { padding-left: 1.25rem; }
}