/* ═══ BLOG — вигляд статті (епік BLOG, П1.2) ═════════════════════════════════
 * Один стиль для трьох місць: область редактора в адмінці (клас .blog-article на
 * контейнері Editor.js), попередній перегляд (/blog/preview.php) і публічна сторінка
 * статті на сайті (П2 — цей файл переїде в www без змін).
 * ПРАВИЛО ТОКЕНІВ: кольори, радіуси, тіні — лише var(--bf-*) або власні токени статті,
 * визначені нижче в одному місці (.blog-article). Розмітку генерує сервер
 * (admin/core/BlogRender.php) — класи blog-*.
 */
.blog-article {
    --blog-fs: 17px;
    --blog-lh: 1.72;
    --blog-measure: 720px;
    --blog-gap: 1.1em;
    --blog-done: var(--bf-success);
    --blog-done-bg: var(--bf-success-bg);
    --blog-progress: var(--bf-accent);
    --blog-progress-bg: var(--bf-accent-soft);
    --blog-planned: var(--bf-text-faint);
    --blog-planned-bg: var(--bf-bg-elevated);
    max-width: var(--blog-measure);
    margin: 0 auto;
    color: var(--bf-text);
    font-family: var(--bf-font);
    font-size: var(--blog-fs);
    line-height: var(--blog-lh);
    overflow-wrap: anywhere;
}

/* ── Шапка статті ── */
.blog-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-size: 13px; color: var(--bf-text-muted); }
.blog-crumbs span + span::before { content: "›"; margin-right: 6px; color: var(--bf-text-faint); }
.blog-article__cat { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: var(--bf-radius-full); background: var(--bf-accent-soft); color: var(--bf-accent); font-size: 13px; font-weight: 600; line-height: 1.4; }
.blog-article__title { margin: 0 0 14px; font-size: clamp(28px, 4.6vw, 40px); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: var(--bf-text); }
.blog-article__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; font-size: 14px; color: var(--bf-text-muted); }
.blog-article__lead { margin: 0 0 26px; font-size: 1.12em; line-height: 1.6; color: var(--bf-text-muted); }
.blog-article__cover { margin: 0 0 34px; }
.blog-article__cover img { display: block; width: 100%; height: auto; border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-md); }
.blog-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--bf-border); }
.blog-tag { padding: 5px 12px; border-radius: var(--bf-radius-full); background: var(--bf-bg-elevated); border: 1px solid var(--bf-border); font-size: 13px; color: var(--bf-text-muted); }

/* ── Тіло ── */
.blog-article p { margin: 0 0 var(--blog-gap); }
.blog-article a { color: var(--bf-accent); font-weight: 500; text-decoration: none; }
.blog-article a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-article b, .blog-article strong { font-weight: 700; }
.blog-article h2, .blog-article .blog-h2 { margin: 1.9em 0 0.6em; font-size: 1.55em; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; color: var(--bf-text); }
.blog-article h3, .blog-article .blog-h3 { margin: 1.6em 0 0.5em; font-size: 1.25em; font-weight: 700; line-height: 1.3; color: var(--bf-text); }
.blog-article ul, .blog-article ol { margin: 0 0 var(--blog-gap); padding-left: 1.5em; }
.blog-article li { margin: 0.3em 0; padding-left: 0.2em; }
.blog-article li > ul, .blog-article li > ol { margin: 0.3em 0 0; }
.blog-article ul > li::marker { color: var(--bf-accent); }
.blog-article ol > li::marker { color: var(--bf-text-muted); font-weight: 600; }

.blog-figure { margin: 1.8em 0; }
.blog-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--bf-radius-lg); }
.blog-figure--wide img { width: 100%; }
.blog-figure--border img { border: 1px solid var(--bf-border); }
.blog-figure--bg { padding: 22px; border-radius: var(--bf-radius-lg); background: var(--bf-bg-elevated); }
.blog-figure--bg img { max-width: 70%; }
.blog-figure__caption { margin: 10px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--bf-text-muted); }

.blog-quote { margin: 1.8em 0; padding: 18px 22px; border-left: 3px solid var(--bf-accent); border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); }
.blog-quote p { margin: 0; font-size: 1.08em; font-style: italic; }
.blog-quote--center { border-left: 0; text-align: center; }
.blog-quote__cite { display: block; margin: 10px 0 0; font-size: 14px; font-style: normal; font-weight: 600; color: var(--bf-text-muted); }
.blog-quote__cite::before { content: "— "; }

.blog-table-wrap { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-md); }
.blog-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.92em; line-height: 1.5; }
.blog-table th, .blog-table td { padding: 10px 14px; border-bottom: 1px solid var(--bf-border); text-align: left; vertical-align: top; }
.blog-table tr:last-child td { border-bottom: 0; }
.blog-table th { background: var(--bf-bg-elevated); font-weight: 700; }

.blog-hr { height: 0; margin: 2.4em auto; border: 0; text-align: center; }
.blog-hr::before { content: "• • •"; letter-spacing: 0.6em; color: var(--bf-text-faint); }

/* ── Графік робіт ── */
.blog-timeline { margin: 2em 0; padding: 22px 22px 8px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.blog-article .blog-timeline__title { margin: 0 0 16px; font-size: 1.1em; font-weight: 700; }
.blog-article .blog-timeline__list { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; }
.blog-timeline__list::before { content: ""; position: absolute; top: 8px; bottom: 18px; left: 7px; width: 2px; background: var(--bf-border); }
.blog-article .blog-timeline__item { position: relative; margin: 0 0 18px; padding: 0; }
.blog-timeline__item::before { content: ""; position: absolute; top: 3px; left: -30px; width: 12px; height: 12px; border: 3px solid var(--bf-card); border-radius: 50%; background: var(--blog-planned); }
.blog-timeline__item--done::before { background: var(--blog-done); }
.blog-timeline__item--progress::before { background: var(--blog-progress); }
.blog-timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; }
.blog-timeline__date { font-size: 13px; font-weight: 600; color: var(--bf-text-muted); }
.blog-timeline__status { padding: 2px 10px; border-radius: var(--bf-radius-full); background: var(--blog-planned-bg); color: var(--blog-planned); font-size: 12px; font-weight: 700; }
.blog-timeline__item--done .blog-timeline__status { background: var(--blog-done-bg); color: var(--blog-done); }
.blog-timeline__item--progress .blog-timeline__status { background: var(--blog-progress-bg); color: var(--blog-progress); }
.blog-timeline__stage { display: block; font-size: 1em; font-weight: 700; line-height: 1.4; }
.blog-article .blog-timeline__text { margin: 4px 0 0; font-size: 0.93em; line-height: 1.55; color: var(--bf-text-muted); }

/* ── Кнопка ── */
.blog-article .blog-cta { margin: 1.8em 0; }
.blog-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: var(--bf-radius-md); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.blog-article a.blog-cta__btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Текст на акцентному тлі: токена в tokens.css ще немає — var() з запасним значенням (з'явиться токен — підхопиться сам). */
.blog-cta__btn--primary { background: var(--bf-accent-gradient); color: var(--bf-on-accent, #ffffff); box-shadow: var(--bf-shadow-md); }
.blog-article a.blog-cta__btn--primary { color: var(--bf-on-accent, #ffffff); }
.blog-cta__btn--secondary { border: 1.5px solid var(--bf-border-input); background: var(--bf-card); color: var(--bf-text); }
.blog-article a.blog-cta__btn--secondary { color: var(--bf-text); }

/* ── Сторінка перегляду (адмінка) ── */
.blog-pv-body { margin: 0; background: var(--bf-bg); color: var(--bf-text); font-family: var(--bf-font); }
.blog-page { padding: 40px 20px 80px; }
.blog-pv-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 20px; border-bottom: 1px solid var(--bf-border); background: var(--bf-card); font-size: 13px; color: var(--bf-text-muted); }
.blog-pv-bar__label { font-weight: 800; color: var(--bf-text); }
.blog-pv-bar__status { padding: 2px 10px; border-radius: var(--bf-radius-full); background: var(--bf-warning-bg); color: var(--bf-text); font-weight: 600; }
.blog-pv-bar__note { flex: 1 1 260px; }
.blog-article__body > :first-child { margin-top: 0; }
.blog-pv-bar__link { margin-left: auto; color: var(--bf-accent); font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
    .blog-article { --blog-fs: 16px; }
    .blog-page { padding: 24px 16px 60px; }
    .blog-timeline { padding: 16px 14px 4px; }
    .blog-figure--bg img { max-width: 100%; }
    .blog-pv-bar__link { margin-left: 0; }
}