/* ==========================================================================
   Блог: лента, боковая колонка и страница статьи
   Раздел вынесен из layout.css: правила нужны только адресам `/blog/`,
   `/blog/category/<slug>/` и `/blog/<slug>/`. Файл подключает
   BlogController через View::useStyle(). Общая карточка статьи
   (`.post-card`) осталась в layout.css — её печатает блок главной.
   ========================================================================== */

/* ==========================================================================
   17. Блог: лента, карточка статьи и боковая колонка
   Лента слева в две колонки, рубрики и популярное — справа. Колонка липкая,
   как фильтр каталога; ниже 1024px она уходит под ленту.
   ========================================================================== */

.blog__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--grid-gap);
    align-items: start;
}

.blog__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
    --stack-gap: var(--space-3);
}

.blog-aside__title {
    margin: 0;
    font-size: var(--font-size-eyebrow);
    line-height: var(--line-height-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.blog-aside__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-aside__list--posts {
    gap: var(--space-2);
}

/* Ссылка рубрики: название слева, число статей справа. Активная подсвечена
   акцентом — посетитель видит, в какой рубрике находится. */
.blog-aside__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-aside__link:hover,
.blog-aside__link:focus-visible {
    color: var(--color-accent);
}

.blog-aside__link.is-current {
    color: var(--color-accent);
    font-weight: 600;
}

.blog-aside__count {
    flex: none;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    font-variant-numeric: tabular-nums;
}

.blog-aside__post {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-aside__post:hover .blog-aside__post-title,
.blog-aside__post:focus-visible .blog-aside__post-title {
    color: var(--color-accent);
}

.blog-aside__post-title {
    display: block;
    font-weight: 500;
    transition: color var(--transition);
}

.blog-aside__post-date {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* У призыва в колонке заголовок обычным кеглем: надзаголовок акцентом
   тут читался бы как ещё один служебный ярлык списка. */
.blog-aside__cta-title {
    margin: 0;
    font-weight: 600;
}

.blog-aside__cta-text {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* ==========================================================================
   18. Статья блога
   Одна колонка по центру: у длинного текста боковая колонка только уводит
   глаз. Обложка, метаданные, оформление тела и карточки «читайте также»
   собраны из готовых классов (`.container--narrow`, `.prose`, `.post-cover`,
   `.post-card`), поэтому своего здесь всего два правила.
   ========================================================================== */

/* Ширину строки держит сам текст, а не контейнер: в узком контейнере
   помещается 800px, а читается спокойно не больше 72 символов. */
.post-body {
    max-width: var(--measure);
}

/* Карточка по умолчанию складывает содержимое столбиком — подписи автора
   нужна строка: кружок с буквой слева, имя и роль справа. */
.post-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

/* ==========================================================================
   Поведение по брейкпоинтам
   ========================================================================== */

@media (max-width: 1024px) {
    /* Блог: колонка рубрик и популярного перестаёт помещаться рядом с лентой
       и уходит под неё во всю ширину — липкость там уже не нужна. */
    .blog__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Под лентой колонка встаёт рядами: три полосы во всю ширину экрана
       выглядели бы как оборванный подвал. Ширину раздаёт auto-fit, поэтому
       ряд подстраивается и под две карточки, и под одну. */
    .blog__aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--grid-gap);
        align-items: start;
    }
}