/* ==========================================================================
   ea-prose.css — БРЕНДОВАЯ ТИПОГРАФИКА ТЕЛА для страниц, которые набирают
   через WYSIWYG (CKEditor): статья новости, статьи «Life in Albania» и
   служебные страницы раздела `page`.

   Тело приходит сырым HTML: голые h2/p/ul/li/strong/a/img/blockquote/table
   без единого класса. Поэтому весь файл — селекторы по ТЕГАМ внутри одной
   обёртки `.ea-prose`; классов от редактора не ждём и не требуем. Скоуп
   обязателен и нигде не расширяется: тема отдаёт глобальные правила на
   p/ul/a (Lato 16/24, disc-маркеры, оранжевые ссылки), и любой селектор
   шире обёртки утечёт на весь сайт.

   Кто получает класс — решает разметка, НЕ список страниц:
     * `Elements/Nodes/node.ctp` вешает `.ea-prose` в ветке, где тело НЕ несёт
       своей корневой разметки (`$isSectioned === false`). Страница, свёрстанная
       секциями канона, класс не получает и остаётся ровно такой, как её
       сверстали;
     * `Plugin/News/News/view.ctp` вешает `.ea-prose` рядом с `.news-view-block`.
   Список исключений сознательно не заводится: он развалился бы на первой же
   новой свёрстанной странице.

   ВСЕ ЧИСЛА НИЖЕ — ЗАМЕРЫ ЖИВЫХ СТРАНИЦ (computed, 1440px), не «типографический
   идеал»; происхождение каждого — в комментариях по месту. Правила выделены из
   ea-article.css 08.09 БЕЗ изменения значений: страница новости обязана
   выглядеть ровно как до выделения.

   Подключён в TmSiteHelper::$_css ПОСЛЕ custom.css (оттуда токены) и ПЕРЕД
   ea-article.css (там остаётся только новостное — шапка статьи и её дата).
   ========================================================================== */

.ea-prose{
    /* Колонка чтения. Историю числа не теряем: канон задаёт её как
       `.mkC .mkC-lead{max-width:62ch}` (/page/about-us) = 697.75px при 17px, но
       на теле из редактора `62ch` разъезжается — `ch` считается от кегля КАЖДОГО
       элемента, и h2 в 21px получал 884px, вставая на 93px левее абзацев (замер
       на 1440: h2 left 270.5, p left 363.6). У канона такого нет: там `62ch`
       висит на одном лид-абзаце.
       ponytail: токен оставлен как потолок ЧИТАЕМОЙ строки для будущих правок;
       ширину контента он не задаёт — контент идёт во всю ширину контейнера,
       как на остальных страницах сайта. */
    --art-w:100%;
    --art-fs:17px;
    --art-lh:1.6;

    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    font-size:var(--art-fs);
    line-height:var(--art-lh);
    color:var(--ink);
}
.ea-prose > :first-child{margin-top:0}

/* ---------- заголовки тела ---------- */

/* Одна лестница с коэффициентом ~1.6: h2 28 → h3 21 → h4 18 при тексте 17
   (на странице новости она продолжает титул 46, замер и вывод — в ea-article.css).
   До правки середина шкалы пустовала: 42→21 это ×2.0, а 21→17 всего ×1.24 —
   девять h2 подряд на полосе 1220px читались как жирные абзацы, а не как
   границы глав (на 375px было ещё хуже: 26→21→16).
   Вес 700, а не 800: Montserrat в теме объявлен только в 400/700
   (`css/fonts/montserrat.css` — 7 @font-face на 400, 7 на 700), 800 браузер
   синтезирует поверх 700. */
.ea-prose h2,
.ea-prose h3,
.ea-prose h4,
.ea-prose h5,
.ea-prose h6{
    font-family:inherit;
    font-weight:700;
    color:var(--ink);
    text-transform:none;
    letter-spacing:-.02em;
    text-wrap:pretty;
}

/* Волосок `--hair` (тот же токен, что у линеек таблицы ниже) на всю полосу —
   вместо снятого градиентного «тика» 30x3. Причина замены: тик был уменьшенной
   копией `.ea-divider`, и на девяти h2 подряд брендовый градиент из знака
   превращался в орнамент. Волосок же делает работу, которой тик не делал: на
   полосе 1220px читателю нужен разрыв во всю ширину, иначе граница главы не
   видна. Он структурный и тихий (8% чернил), градиент остаётся один — в шапке.
   Разрыв над главой = 56 сверху + волосок + 26 отбивки.

   Цвет текста — брендовый КРАСНЫЙ. ВАЖНО про происхождение приёма: живого
   прецедента на сайте у него НЕТ, и ссылка на `.ea-badge-note__title`
   (custom.css:2300-2304), стоявшая здесь раньше, была ошибкой — это правило
   мёртвое: 0 вхождений класса в `.ctp`/`.twig`/`.php` и 0 на шести живых
   страницах. Единственный живой красный у заголовков — мелкий `.ea-eyebrow`
   (custom.css:832-835) над нейтральным крупным титулом.
   Красный здесь стоит по ЯВНОМУ ВЫБОРУ ПОЛЬЗОВАТЕЛЯ 08.09: ему показали мокап
   с четырьмя вариантами на реальной статье (A — нейтральный + градиентная
   черта, канон секций; B — полностью нейтральный; C — этот; D — нейтральный +
   красный номер раздела как eyebrow), он выбрал C. Основание в брендбуке § 2:
   красный — главный идентификатор, «когда хотим сказать это мы — заливаем
   максимум площади».
   Следствие для будущих правок: страница новостей — ПЕРВОЕ место с красными
   заголовками; это не отклонение от канона, а новая точка отсчёта. Не «чинить»
   обратно в нейтральный без пользователя; распространять на другие текстовые
   страницы — тоже спросив.

   Почему это НЕ возврат к забракованным девяти «тикам»: тик был ДОБАВЛЕННОЙ
   графикой, одинаковой у всех разделов и не несущей ничего сверх «здесь
   заголовок». Цвет же — свойство самого текста и признак УРОВНЯ: красное = h2,
   и по нему раздел опознаётся с любого места полосы, не считая линеек.
   Ниже по лестнице акцент СЛАБЕЕТ (h3 — нейтральный текст с оранжевым штрихом,
   h4 и глубже — без акцента), поэтому уровни не сливаются в один приём. */
.ea-prose h2{
    margin-block:56px 16px;
    padding-top:26px;
    border-top:1px solid var(--hair);
    font-size:28px;
    line-height:1.2;
    color:var(--brand-red);
}
/* Редактор кладёт в заголовок и `<strong>`, и ссылку. Оба ниже по файлу имеют
   свой цвет со специфичностью (0,2,0) и перебили бы красный h2 — внутри
   заголовка цвет наследуем, иначе слово выпадает из строки другим цветом. */
.ea-prose h2 strong,
.ea-prose h2 b,
.ea-prose h2 a:not(.img-block){color:inherit}

/* Подраздел: текст нейтральный, акцент вынесен в оранжевый штрих слева. Приём
   ДРУГОЙ, чем у h2, сознательно — одинаковый акцент на двух уровнях вернул бы
   ту же монотонность, за которую сняли девять «тиков».
   Оранжевым красится именно ГРАФИКА, а не текст, и это расчёт, а не вкус:
   контраст к белому #BE151B = 6.34:1 (AA для текста любого кегля),
   #F26921 = 3.08:1 (для текста проходит только как «крупный», впритык — значит
   текстом не красим; для нефонового элемента порог 3.0 — штрих проходит),
   #F7921E = 2.31:1 (на белом не проходит нигде, поэтому жёлтый на этой странице
   живёт только внутри градиента черты в шапке).
   Штрих стоит В отступе заголовка, а не в поле контейнера (`left:-16px` вылез бы
   за `.container` — его padding всего 15px, а на 375px это упёрлось бы в край
   экрана). Отступ 18px заодно работает сам по себе: h2 стоит на оси текста,
   h3 сдвинут вправо — вложенность видна и без цвета. */
.ea-prose h3{
    position:relative;
    margin-block:38px 10px;
    padding-left:18px;
    font-size:21px;
    line-height:1.28;
}
.ea-prose h3::before{
    content:"";
    position:absolute;
    left:0;top:.16em;bottom:.16em;
    width:3px;
    border-radius:var(--r-pill);
    background:var(--brand-orange);
}
.ea-prose h4{margin-block:30px 8px;font-size:18px;line-height:1.35}
/* h5/h6 не уходят ниже кегля текста — иначе подзаголовок мельче абзаца, что он
   же и подчиняет. Отличаются приглушённым цветом, а не размером. */
.ea-prose h5,
.ea-prose h6{margin-block:26px 8px;font-size:17px;line-height:1.4;letter-spacing:-.01em;color:var(--ink-60)}

/* ---------- абзацы и инлайн ---------- */

.ea-prose p{
    margin-block:0 16px;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
}
.ea-prose > p:last-child{margin-bottom:0}

/* Редактор набирает `<strong>` и подзаголовками («Olga Bondarik:»), и обычным
   выделением. Чуть более тёмный, чем текст, — структура интервью читается,
   но абзац не превращается в лестницу из жирных строк. */
.ea-prose strong,
.ea-prose b{font-weight:700;color:var(--ink)}
.ea-prose em,
.ea-prose i{font-style:italic}

/* Ссылка остаётся брендово-оранжевой, как на всём сайте, но получает
   подчёркивание: внутри сплошного текста цвет — единственный признак ссылки,
   а этого недостаточно (WCAG 1.4.1). `.img-block` исключён — он не текст. */
.ea-prose a:not(.img-block){
    color:var(--brand-orange);
    font-weight:600;
    text-decoration:underline;
    text-decoration-color:rgba(242,105,33,.4);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.ea-prose a:not(.img-block):hover,
.ea-prose a:not(.img-block):focus{
    color:var(--brand-red);
    text-decoration-color:currentColor;
}
.ea-prose a:not(.img-block):focus-visible{
    outline:3px solid rgba(242,105,33,.55);
    outline-offset:2px;
    border-radius:3px;
}

/* ---------- списки ---------- */

/* Готового маркера на сайте нет: на /page/about-us и в карточке объекта у `li`
   стоит `list-style:none` без псевдоэлемента — перечисления там оформлены
   раскладкой. Поэтому маркер рисуем сами, но размерами садимся на шкалу
   токенов: отступ пункта = `--gap` (30px на десктопе, 20px на 375px), цвет —
   `--brand-orange`, скругление — как у мелких элементов карточки.
   Псевдоэлемент, а не list-style: браузерный disc не бывает брендового цвета,
   а иконочных шрифтов на публичном сайте нет. Заодно длинные пункты получают
   висячий отступ — маркер стоит в поле, строки выравниваются между собой. */
.ea-prose ul,
.ea-prose ol{
    margin-block:14px 22px;
    padding-left:0;
    list-style:none;
}
/* Список почти всегда идёт продолжением вводной строки («For comparison:») —
   зазор между ними меньше, чем между абзацами, иначе связка распадается. */
.ea-prose p + ul,
.ea-prose p + ol{margin-top:2px}

.ea-prose li{
    position:relative;
    padding-left:var(--gap);
}
.ea-prose li + li{margin-top:9px}
/* Редактор кладёт в пункт то голый текст, то `<p>` — вид должен быть один. */
.ea-prose li > p{margin:0}
.ea-prose li > p + p{margin-top:.6em}
/* Вложенный список стоит от текста родителя, а не от его маркера. */
.ea-prose li > ul,
.ea-prose li > ol{margin:9px 0 0;padding-left:4px}

/* top = половина строки минус половина маркера. .8em — половина
   line-height 1.6, поэтому маркер держится центра ПЕРВОЙ строки при любом
   кегле, включая мобильный. */
.ea-prose ul > li::before{
    content:"";
    position:absolute;
    left:4px;
    top:calc(.8em - 4px);
    width:8px;height:8px;
    border-radius:3px;
    background:var(--brand-orange);
}
/* Второй уровень — тот же квадрат контуром: вложенность видна без смены цвета. */
.ea-prose ul ul > li::before{
    background:transparent;
    box-shadow:inset 0 0 0 2px var(--brand-orange);
}
/* Третий — нейтральное тире: три оранжевых уровня подряд перегружают колонку. */
.ea-prose ul ul ul > li::before{
    width:10px;height:2px;
    top:calc(.8em - 1px);
    border-radius:var(--r-pill);
    background:var(--ink-40);
    box-shadow:none;
}

.ea-prose ol{counter-reset:ea-ol}
.ea-prose ol > li{counter-increment:ea-ol;padding-left:calc(var(--gap) + 8px)}
.ea-prose ol > li::before{
    content:counter(ea-ol) ".";
    position:absolute;
    left:0;top:0;
    width:var(--gap);
    text-align:right;
    font-weight:700;
    color:var(--brand-red);
    /* цифры одной ширины — колонка номеров не «дышит» на 9→10 */
    font-variant-numeric:tabular-nums;
}
.ea-prose ol ol > li::before{content:counter(ea-ol,lower-alpha) ")"}

/* ---------- цитата, разделитель, медиа в теле ---------- */

.ea-prose blockquote{
    margin-block:26px;
    padding:2px 0 2px 22px;
    border-left:3px solid var(--brand-orange);
    font-size:1.06em;
    line-height:1.55;
    color:var(--ink-60);
}
.ea-prose blockquote > :first-child{margin-top:0}
.ea-prose blockquote > :last-child{margin-bottom:0}

/* Ровно `.ea-divider`: 64x4, скругление `--r-pill`, тот же градиент. Отличается
   только вертикальный отступ — в тексте черта разделяет части, а не подпирает
   заголовок секции. */
.ea-prose hr:not(.ea-divider){
    width:64px;height:4px;
    margin:36px auto;
    border:0;
    border-radius:var(--r-pill);
    background:linear-gradient(90deg,var(--brand-red),var(--brand-orange) 55%,var(--brand-yellow));
}

/* Картинка, вставленная в текст редактором (без `.img-block`). Радиус `--r-md`
   и `--shadow-1` — шкала мелких поверхностей из custom.css. */
.ea-prose p > img,
.ea-prose > img,
.ea-prose figure img{
    display:block;
    height:auto;
    max-width:100%;max-height:none;
    margin:20px auto;
    border-radius:var(--r-md);
    box-shadow:var(--shadow-1);
}
.ea-prose figure{margin-block:26px}
.ea-prose figcaption{
    margin-top:10px;
    font-size:13px;line-height:1.4;
    font-weight:600;letter-spacing:.02em;
    color:var(--ink-40);
}

/* ---------- таблица ---------- */

/* display:block + overflow-x — единственный способ дать широкой таблице
   собственную прокрутку без обёртки: разметку из редактора мы не меняем.
   Линейки — `--hair`, тот же волосок, что у полей формы и разделителей. */
.ea-prose table{
    display:block;
    width:100%;
    margin-block:24px;
    overflow-x:auto;
    font-size:.94em;
}
.ea-prose th,
.ea-prose td{
    padding:11px 14px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--hair);
}
.ea-prose th{font-weight:700;color:var(--ink);white-space:nowrap}
.ea-prose tr:last-child td{border-bottom:0}

/* ---------- код ---------- */

.ea-prose code,
.ea-prose kbd,
.ea-prose samp{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-size:.9em;
    padding:.15em .4em;
    border-radius:var(--r-sm);
    background:var(--page-2);
}
.ea-prose pre{
    margin-block:24px;
    padding:16px 18px;
    overflow-x:auto;
    border-radius:var(--r-md);
    background:var(--page-2);
    font-size:.9em;line-height:1.6;
}
.ea-prose pre code{padding:0;border-radius:0;background:none}

/* ---------- нейтрализация редакторского инлайна ---------- */

/* Тела, набранные копипастом из Word/Google Docs, тащат инлайн-стили: замер по
   всем 11 страницам без своей вёрстки — `font-family` ×66 (times new roman ×36,
   arial ×17), `font-size` ×48 (medium ×32, 11px ×15), `color` ×33 (в 30 случаях
   чёрный rgb(0,0,0)), плюс единичные `line-height`, `letter-spacing`,
   `text-size-adjust`, `caret-color`. Инлайн сильнее любого селектора, поэтому
   без этого блока страница остаётся в Times New Roman независимо от слоя.

   Снимаем ТОЛЬКО типографику, которую задаёт слой; осмысленное форматирование
   не трогаем: `width`/`height` (в телах это youtube-iframe 600x315 и картинки),
   `text-align` (в телах 0 вхождений, но правило его не заденет и впредь),
   `font-weight` (редактор выделяет им по смыслу), `position`/`display`.
   Контент в БД при этом НЕ правится — чистка тел патчем, если понадобится,
   отдельная задача; правило работает и на страницах, которые ещё напишут.

   `!important` здесь — единственный способ перебить инлайн, и он ограничен
   скоупом `.ea-prose` + атрибутом `[style]`: элемент без инлайна правило не
   видит вовсе. */
.ea-prose [style]:not(a):not(code):not(pre):not(kbd):not(samp){
    font-family:inherit!important;
    color:inherit!important;
}
/* Ссылке цвет не наследуем — у неё свой брендовый оранжевый ниже по каскаду. */
.ea-prose a[style]{font-family:inherit!important}
/* Метрику снимаем только у элементов, которым слой её НЕ задаёт: у заголовков,
   цитаты, таблицы и подписи свои кегль и интерлиньяж, и `inherit` их бы стёр. */
.ea-prose p[style],
.ea-prose span[style],
.ea-prose div[style],
.ea-prose li[style],
.ea-prose a[style],
.ea-prose strong[style],
.ea-prose b[style],
.ea-prose em[style],
.ea-prose i[style]{
    font-size:inherit!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
}

@media (prefers-reduced-motion:reduce){
    .ea-prose a{transition:none}
}

/* ---------- узкие экраны ---------- */

/* Кегль текста 16px и сжатая лестница заголовков: 22 → 19 → 17 при тексте 16,
   тот же коэффициент ~1.15-1.4, что и на десктопе. */
@media (max-width:767px){
    .ea-prose{--art-fs:16px}

    .ea-prose h2{margin-block:40px 12px;padding-top:20px;font-size:22px}
    .ea-prose h3{margin-block:28px 8px;font-size:19px}
    .ea-prose h4{margin-block:24px 8px;font-size:17px}
    .ea-prose h5,
    .ea-prose h6{font-size:16px}

    /* `--gap` на 375px = 20px, и отступ пункта по нему становится тесноват для
       маркера в 8px: держим 24px явно. */
    .ea-prose li{padding-left:24px}
    .ea-prose ul > li::before{left:1px}
    .ea-prose ol > li{padding-left:30px}
    .ea-prose ol > li::before{width:22px}

    .ea-prose blockquote{padding-left:18px}
    .ea-prose th,
    .ea-prose td{padding:9px 11px}
}