/* Оформление контента статей блога и карточек ленты (задача 21, 2026-09-18).
   Статьи содержат только контентные теги без классов и стилей; всё оформление —
   здесь, через контейнер .blog-content и наследование от стилей темы (style.css). */

.blog-content { font-size: 16px; line-height: 27px; color: #545454; }
.blog-content p { margin: 0 0 18px; }
.blog-content h2 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 26px; line-height: 32px; text-transform: uppercase; color: #1f1f1f; margin: 38px 0 16px; }
.blog-content h3 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 20px; line-height: 26px; color: #1f1f1f; margin: 28px 0 12px; }
.blog-content h2:first-child, .blog-content h3:first-child { margin-top: 0; }
.blog-content strong { font-weight: 600; color: #333; }
.blog-content a { color: #1f1f1f; border-bottom: 1px solid #f5c518; transition: color .2s, border-color .2s; }
.blog-content a:hover { color: #c99a00; border-bottom-color: transparent; }
.blog-content ul, .blog-content ol { margin: 0 0 20px 0; padding-left: 26px; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin: 0 0 8px; }
.blog-content li::marker { color: #f5c518; font-weight: 600; }
.blog-content blockquote { margin: 28px 0; padding: 18px 24px; border-left: 4px solid #f5c518; background: #fafafa; font-size: 18px; line-height: 29px; color: #333; }
.blog-content blockquote p { margin: 0; }
.blog-content blockquote p + p { margin-top: 12px; }

/* Обложка статьи и картинки в тексте */
.blog-details-img img, .blog-content img { max-width: 100%; height: auto; display: block; }

/* Карточка в ленте: обложка одной высоты, обрезка по центру */
.blog-list .blog-img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.blog-list-details p { color: #545454; }

@media (max-width: 767px) {
    .blog-content { font-size: 15px; line-height: 25px; }
    .blog-content h2 { font-size: 22px; line-height: 28px; }
    .blog-content blockquote { padding: 14px 16px; font-size: 16px; line-height: 26px; }
}

/* Комментарии к статье */
.comments-main h5 { margin-bottom: 30px; }
.comment-avatar { display: inline-block; width: 64px; height: 64px; line-height: 64px; text-align: center; background: #f5c518; color: #111; font-weight: 700; font-size: 26px; border-radius: 100%; margin-bottom: 10px; }

/* Заголовок карточки — абзац со стилями темы для h3 (Labrika: доля заголовков на странице ленты была 16 %) */
.blog-list-details .card-title { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 100; font-size: 18px; line-height: 25px; text-transform: uppercase; color: #000; }
.blog-list-details .card-title a { color: #000; transition: opacity .2s; }
.blog-list:hover .card-title a { opacity: 0.5; }

/* Доступность (PageSpeed, задача 28): заголовки блока комментариев без пропуска уровней (h2/h3 вместо h5),
   вид прежний; дата комментария темнее — контраст не ниже 4.5:1 */
.comments-title { font-size: 18px; line-height: 24px; margin: 0 0 10px; text-transform: none; }
.comments-details .date { color: #6b6b6b; }
/* Хлебные крошки и даты в сайдбаре: контраст не ниже 4.5:1, ссылки в тексте подчёркнуты */
.breadcrumbs, .blog-top .breadcrumbs { color: #6b6b6b; }
.breadcrumbs a { color: #555; text-decoration: underline; }
.breadcrumbs a:hover { color: #1f1f1f; }
.sidebar-block .date { color: #6b6b6b; }
/* Заголовки сайдбара — h2 (в ленте после h1 сразу шёл h3), вид как у h3 темы */
.blog-right h2.sidebar-title { font-size: 16px; line-height: 22px; margin: 0 0 20px; }
/* Даты в карточках ленты и ссылка на комментарии в них */
.blog-list-details .date { color: #6b6b6b; }
.blog-list-details .date a { text-decoration: underline; }