/* Блог (blog.php): только то, чего нет у остальных страниц.
   Типографика статьи общая с руководством и справочником API - она в ui.css
   (.hm-doc__body), здесь только ширина колонки и оформление <pre>. */

/* ============ список статей ============ */
/* Колонка уже .hm-wrap и прижата влево: так она выровнена с h1 в шапке страницы,
   а строка анонса не растягивается на 1000px. */
.hm-blog {
    max-width: 780px;
}

.hm-blog__item {
    display: block;
    padding: 17px 20px;
    border: 1px solid var(--hm-border);
    border-radius: 12px;
    background: var(--hm-surface);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.hm-blog__item + .hm-blog__item {
    margin-top: 10px;
}

.hm-blog__item:hover {
    border-color: var(--hm-brand);
    background: var(--hm-surface-2);
    box-shadow: var(--hm-shadow);
}

.hm-blog__item:focus-visible {
    outline: 2px solid var(--hm-brand);
    outline-offset: 2px;
}

.hm-blog__t {
    font-size: 18px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--hm-ink);
    transition: color .15s;
}

.hm-blog__item:hover .hm-blog__t {
    color: var(--hm-brand);
}

/* Анонс обрезан по длине ещё в PHP (blogExcerpt), здесь только вид. */
.hm-blog__x {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--hm-ink-2);
}

.hm-blog__empty {
    color: var(--hm-ink-2);
}

/* ============ статья ============ */
/* Ссылка назад вместо хлебных крошек: цепочка "Главная > Блог > Статья" из старой
   версии на треть состояла из звена, ведущего туда же, где стоит логотип. */
.hm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hm-ink-2);
    transition: color .15s;
}

.hm-back:hover {
    color: var(--hm-brand);
}

.hm-back:focus-visible {
    outline: 2px solid var(--hm-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Та же ширина, что у списка: переход со списка в статью не должен двигать колонку. */
.hm-blog__body {
    max-width: 780px;
    margin-top: 0;
}

/* Блок кода в посте. В базе <pre> приходит с захардкоженным фоном IDE
   (background: rgb(43,43,43) и зелёный текст) - его вырезает blogCleanHtml, иначе в
   светлой теме это тёмная плашка посреди страницы. Здесь возвращаем фон из токенов.

   Своего .hm-code, как у справочника API, не берём: тот требует обёртки с кнопкой
   копирования, а разметку постов пишет визуальный редактор - обёртки в ней нет. */
.hm-blog__body pre {
    margin: 0 0 14px;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--hm-border);
    border-radius: 9px;
    background: var(--hm-surface-2);
    color: var(--hm-ink);
    font-family: var(--hm-mono);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .hm-blog__item { padding: 15px 16px; }
    .hm-blog__t { font-size: 16.5px; }
}