/* ============================================================
   ОФОРМЛЕНИЕ ТЕКСТА ИЗ РЕДАКТОРА

   Один файл на две стороны: его подключают и админка, и сайт.
   Всё, что редактор умеет включить кнопкой, описано здесь —
   поэтому в поле ввода текст выглядит ровно так же, как на странице,
   и не может разъехаться при правке одной из сторон.

   Классы намеренно короткие и с приставкой t-: они попадают
   в сохранённый html и остаются в базе надолго.
   ============================================================ */

/* ---------- Размер абзаца ---------- */

/*
| Размер редактор задаёт ЧИСЛОМ прямо в style — так можно поставить любой,
| а не выбирать из заранее описанных. Эти два класса остались от прежнего
| списка «крупный / мелкий»: они держат вид уже набранного текста, пока
| его не тронут. Стоит поменять размер такому абзацу — класс уходит,
| остаётся число.
|
| Имя продублировано намеренно: размер в блоках задан селекторами вида
| «.about__intro p», они весомее одиночного класса, и до абзаца размер
| не доходил. Повтор поднимает вес, не привязываясь к порядку подключения
| файлов — их читают и сайт, и админка, а порядок у них разный.
*/
.t-lead.t-lead { font-size: 19px; line-height: 1.7; }
.t-small.t-small { font-size: 15px; line-height: 1.65; opacity: .85; }

/* ---------- Выделение ---------- */

.t-red { color: #DC143C; }

/* ---------- Выравнивание ---------- */

.t-center { text-align: center; }
.t-right { text-align: right; }

/* ---------- Плашка с пояснением ---------- */

.t-note {
    padding: 14px 18px;
    border-left: 3px solid #DC143C;
    border-radius: 0 8px 8px 0;
    background: rgba(220, 20, 60, .06);
}

/* ---------- Цитата ---------- */

.t-quote {
    padding: 4px 0 4px 18px;
    border-left: 3px solid rgba(128, 128, 128, .35);
    font-style: italic;
}

/* ---------- Разделитель ---------- */

.t-hr {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: rgba(128, 128, 128, .28);
}

/* На тёмной теме админки заливка плашки на красном фоне не читается */
[data-theme="dark"] .t-note { background: rgba(220, 20, 60, .13); }
[data-theme="dark"] .t-red { color: #FF5470; }