/* Готовый текст из редактора: церковные новости и молодёжные статьи.
   Пара к /js/blocks.js — какие классы он ставит, такие здесь и описаны.

   Файл общий для двух сайтов, а токены у них называются по-разному
   (--ink-3 у молодёжи, --ink-soft у церкви), поэтому цвета берутся
   цепочкой var(…, var(…, #цвет)) — работает в обоих и в тёмной теме. */

.blk {
  --blk-ink: var(--ink, #1f2420);
  --blk-mute: var(--ink-3, var(--ink-soft, #6b736c));
  --blk-line: var(--line, #e2e0d9);
  --blk-accent: var(--accent, var(--ochre, #2f6b4f));
  --blk-card: var(--card, var(--sand-deep, #f1f0ea));
  color: var(--blk-ink);
  font: 400 17px/1.65 var(--font-sans, sans-serif);
  overflow-wrap: break-word;
}
@media (max-width: 900px) { .blk { font-size: 16.5px; } }

.blk > *:first-child { margin-top: 0; }
.blk > *:last-child { margin-bottom: 0; }

.blk .blk-p { margin: 0 0 1.1em; }
.blk .blk-h { margin: 1.7em 0 .5em; font-family: var(--font-serif, var(--font-sans, sans-serif)); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.blk .blk-h2 { font-size: 1.42em; }
.blk .blk-h3 { font-size: 1.2em; }
.blk .blk-h4 { font-size: 1.06em; }

.blk a { color: var(--blk-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.blk a:hover { text-decoration-thickness: 2px; }
/* Упоминание человека (@Имя) и песни (#12 Название) — метка, а не
   обычная ссылка. */
.blk a.blk-mention,
.blk a.blk-songref { text-decoration: none; background: color-mix(in srgb, var(--blk-accent) 12%, transparent); border-radius: 5px; padding: 0 3px; }
.blk a.blk-mention:hover,
.blk a.blk-songref:hover { background: color-mix(in srgb, var(--blk-accent) 20%, transparent); }
/* Место Писания в тексте — нажмёшь, и над ним стих. Подчёркнуто
   пунктиром: видно, что тут что-то есть, но это не ссылка «уйти». */
.blk .blk-verse { text-decoration: underline dotted; text-decoration-color: var(--blk-accent); text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
.blk .blk-verse:hover { color: var(--blk-accent); }
.blk .blk-verse:focus-visible { outline: 2px solid var(--blk-accent); outline-offset: 2px; }
.blk b { font-weight: 600; }
.blk mark { background: color-mix(in srgb, #f3d34a 42%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.blk code { font: 500 .88em/1.4 var(--font-mono, monospace); background: var(--blk-card); padding: 2px 5px; border-radius: 5px; }

.blk .blk-list { margin: 0 0 1.1em; padding-left: 1.3em; display: flex; flex-direction: column; gap: .35em; }
.blk .blk-list .blk-sub { margin: .35em 0 0; }
.blk .blk-list li { padding-left: .2em; }
.blk .blk-list li::marker { color: var(--blk-mute); }
.blk .blk-checklist { list-style: none; padding-left: 0; }
.blk .blk-check { display: flex; align-items: flex-start; gap: 10px; }
.blk .blk-check .blk-box { flex: none; width: 18px; height: 18px; margin-top: .18em; border: 1.5px solid var(--blk-line); border-radius: 5px; }
.blk .blk-check.on .blk-box { background: var(--blk-accent); border-color: var(--blk-accent); position: relative; }
.blk .blk-check.on .blk-box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid var(--on-accent, #fff); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.blk .blk-check.on .blk-li-text { color: var(--blk-mute); }

.blk .blk-quote { margin: 1.5em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--blk-accent); }
.blk .blk-quote blockquote { margin: 0; font: 400 1.06em/1.55 var(--font-serif, var(--font-sans, sans-serif)); }
.blk .blk-quote figcaption { margin-top: .5em; font: 500 .8em/1.4 var(--font-sans, sans-serif); color: var(--blk-mute); }

.blk .blk-img { margin: 1.6em 0; }
/* Маленькое фото не растягиваем: снимок 200 пикселей шириной, раздутый
   на всю колонку, выглядит как ошибка загрузки. */
.blk .blk-img img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 14px; }
/* Фото, которое автор ужал за уголок в редакторе. На узком экране не даём
   ему стать совсем крошечным — как и видео. */
.blk .blk-img.sized img { width: min(100%, max(var(--blk-img-w, 100%), 160px)); }
.blk .blk-img.bordered img { border: 1px solid var(--blk-line); }
.blk .blk-img.padded { background: var(--blk-card); padding: 14px; border-radius: 16px; }
.blk .blk-img.padded img { border-radius: 8px; }
.blk .blk-img figcaption,
.blk .blk-embed figcaption { margin-top: .6em; font: 400 .8em/1.45 var(--font-sans, sans-serif); color: var(--blk-mute); text-align: center; }

.blk .blk-embed { margin: 1.6em 0; }
.blk .blk-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; background: var(--blk-card); }

.blk .blk-table-wrap { margin: 1.5em 0; overflow-x: auto; border: 1px solid var(--blk-line); border-radius: 12px; }
.blk .blk-table { border-collapse: collapse; width: 100%; font-size: .92em; }
.blk .blk-table th,
.blk .blk-table td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--blk-line); border-right: 1px solid var(--blk-line); }
.blk .blk-table th { font-weight: 600; background: var(--blk-card); }
.blk .blk-table tr:last-child th,
.blk .blk-table tr:last-child td { border-bottom: 0; }
.blk .blk-table th:last-child,
.blk .blk-table td:last-child { border-right: 0; }

.blk .blk-delim { margin: 1.8em 0; text-align: center; letter-spacing: .5em; color: var(--blk-mute); user-select: none; }

.blk .blk-code { margin: 1.4em 0; padding: 14px 16px; background: var(--blk-card); border-radius: 12px; overflow-x: auto; }
.blk .blk-code code { background: none; padding: 0; font-size: .86em; }

/* ── Цвет, размер и начертание внутри строки ───────────────────
   Ставятся в редакторе классами (см. /js/editor.js), а не стилями:
   в базу попадает «chv-c-red», а не чужой кусок CSS. Значения живут
   здесь — и статья, и редактор берут их отсюда, поэтому «как вижу,
   так и будет» остаётся правдой. Для тёмной темы цвета свои: те же
   краски на тёмном фоне выглядят грязью. */
:root {
  --chv-c-red: #b8392c;
  --chv-c-orange: #a9700f;
  --chv-c-green: #2f7d4f;
  --chv-c-blue: #2b6cb0;
  --chv-c-violet: #6b46c1;
  --chv-c-mute: #7c8279;
}
:root[data-theme="dark"] {
  --chv-c-red: #f0907f;
  --chv-c-orange: #e2ad63;
  --chv-c-green: #79c99c;
  --chv-c-blue: #86bbef;
  --chv-c-violet: #bda8f2;
  --chv-c-mute: #9aa39a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chv-c-red: #f0907f;
    --chv-c-orange: #e2ad63;
    --chv-c-green: #79c99c;
    --chv-c-blue: #86bbef;
    --chv-c-violet: #bda8f2;
    --chv-c-mute: #9aa39a;
  }
}

.chv-c-red { color: var(--chv-c-red); }
.chv-c-orange { color: var(--chv-c-orange); }
.chv-c-green { color: var(--chv-c-green); }
.chv-c-blue { color: var(--chv-c-blue); }
.chv-c-violet { color: var(--chv-c-violet); }
.chv-c-mute { color: var(--chv-c-mute); }
.chv-fs-s { font-size: .84em; }
.chv-fs-l { font-size: 1.22em; }
.chv-ff-serif { font-family: var(--font-serif, Georgia, serif); }
.chv-ff-mono { font-family: var(--font-mono, monospace); font-size: .92em; }

/* Видео. Ширину задаёт автор в редакторе (в процентах от колонки), высота
   идёт за ней сама: у видео своя пропорция. На узком экране не даём окну
   стать совсем маленьким — смотреть на четверть телефона нечего. */
.blk .blk-embed iframe { width: min(100%, max(var(--blk-embed-w, 100%), 240px)); margin: 0 auto; }

/* Приложенный файл. Ссылка сразу на скачивание: открывать docx в соседней
   вкладке браузер всё равно не умеет. */
.blk .blk-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.2em 0;
  padding: 11px 14px 11px 11px;
  border: 1px solid var(--blk-line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.blk .blk-file:hover { border-color: var(--blk-accent); background: var(--blk-card); }
.blk .blk-file .blk-file-ext {
  flex: none;
  width: 38px;
  height: 44px;
  border-radius: 7px;
  background: var(--blk-file-color, var(--blk-mute));
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
  font: 600 9.5px/1 var(--font-sans, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
}
/* Картинка, приложенная файлом: в значке — она сама. */
.blk .blk-file .blk-file-ext.has-thumb { padding: 0; background: var(--blk-card); }
.blk .blk-file .blk-file-ext.has-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blk .blk-file .blk-file-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blk .blk-file .blk-file-name { font: 500 .94em/1.35 var(--font-sans, sans-serif); overflow-wrap: anywhere; }
.blk .blk-file .blk-file-size { font: 400 .78em/1.2 var(--font-sans, sans-serif); color: var(--blk-mute); }
.blk .blk-file .blk-file-go { margin-left: auto; flex: none; color: var(--blk-mute); }
.blk .blk-file:hover .blk-file-go { color: var(--blk-accent); }