/* The blog (modules/blog, doc/blog.md) — on the theme's tokens, so it reads as the theme's own. */
.blog-wrap { width: min(100% - 2 * var(--s-5, 1.25rem), var(--w-container, 72rem)); margin: 0 auto; padding-block: var(--s-6, 2rem) var(--s-8, 3rem); }
.blog-post { width: min(100% - 2 * var(--s-5, 1.25rem), 48rem); }
.blog-head { display: grid; gap: var(--s-4, 1rem); margin-bottom: var(--s-6, 2rem); }
.blog-head__title { margin: 0; font-family: var(--font-display); font-size: var(--t-3xl, 2.25rem); line-height: 1.15; color: var(--c-text-strong); }
.blog-head__lead { margin: 0; max-width: 46rem; color: var(--c-text-muted); font-size: var(--t-lg, 1.125rem); }
.blog-search { display: flex; gap: var(--s-2, 0.5rem); max-width: 32rem; }
.blog-search__input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--c-border); border-radius: var(--r-md, 0.5rem); background: var(--c-surface, #fff); color: var(--c-text); font: inherit; }
.blog-chips { display: flex; flex-wrap: wrap; gap: var(--s-2, 0.5rem); margin: 0; }
.blog-chip { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--c-accent-soft, #eef2ff); color: var(--c-accent, inherit); font-size: var(--t-sm, 0.875rem); font-weight: 600; text-decoration: none; }
.blog-chip:hover, .blog-chip.is-current { background: var(--c-accent); color: var(--c-accent-contrast, #fff); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--s-5, 1.25rem); }
.blog-pinned { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-5, 1.25rem); margin-bottom: var(--s-6, 2rem); }
.blog-pinned .blog-card--lg { grid-row: span 2; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg, 0.75rem); background: var(--c-surface, #fff); box-shadow: 0 0 0 1px var(--c-border); }
.blog-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface-sunk, #f3f4f6); }
.blog-card--lg .blog-card__media { aspect-ratio: 16 / 10; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card__img { transform: scale(1.03); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--s-2, 0.5rem); padding: var(--s-4, 1rem) var(--s-5, 1.25rem) var(--s-5, 1.25rem); }
.blog-card__title { margin: 0; font-size: var(--t-lg, 1.125rem); line-height: 1.3; }
.blog-card--lg .blog-card__title { font-size: var(--t-2xl, 1.5rem); }
.blog-card__title a { color: var(--c-text-strong); text-decoration: none; }
.blog-card__title a:hover { color: var(--c-link); }
.blog-card__lead { margin: 0; color: var(--c-text-muted); font-size: var(--t-sm, 0.9rem); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: auto 0 0; color: var(--c-text-faint, #888); font-size: var(--t-xs, 0.8rem); }
.blog-meta--lg { margin: 0; font-size: var(--t-sm, 0.9rem); }
.blog-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-text); font-weight: 600; text-decoration: none; }
.blog-avatar { width: 2rem; height: 2rem; border-radius: 999px; object-fit: cover; }
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: var(--s-6, 2rem); }
.blog-pager__item { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem; border-radius: var(--r-md, 0.5rem); box-shadow: 0 0 0 1px var(--c-border); color: var(--c-text); text-decoration: none; }
.blog-pager__item.is-current { background: var(--c-accent); color: var(--c-accent-contrast, #fff); box-shadow: none; }
.blog-empty, .blog-found { color: var(--c-text-muted); }
.blog-rss { margin-top: var(--s-6, 2rem); font-size: var(--t-sm, 0.875rem); }
.blog-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--s-4, 1rem); color: var(--c-text-faint, #888); font-size: var(--t-sm, 0.875rem); }
.blog-crumbs a { color: var(--c-text-muted); }
.blog-post__head { display: grid; gap: var(--s-3, 0.75rem); margin-bottom: var(--s-5, 1.25rem); }
.blog-post__title { margin: 0; font-family: var(--font-display); font-size: var(--t-3xl, 2.25rem); line-height: 1.15; color: var(--c-text-strong); }
.blog-post__lead { margin: 0; font-size: var(--t-lg, 1.2rem); color: var(--c-text-muted); }
.blog-post__cover { margin: 0 0 var(--s-6, 2rem); overflow: hidden; border-radius: var(--r-lg, 0.75rem); }
.blog-post__cover img { display: block; width: 100%; height: auto; }
.blog-post__body { font-size: 1.0625rem; }
.blog-post__body :is(h2, h3) { scroll-margin-top: 6rem; }
.blog-toc { margin: 0 0 var(--s-6, 2rem); padding: var(--s-4, 1rem) var(--s-5, 1.25rem); border-radius: var(--r-lg, 0.75rem); background: var(--c-surface-sunk, #f6f7f9); }
.blog-toc__title { margin: 0 0 var(--s-2, 0.5rem); font-weight: 700; color: var(--c-text-strong); }
.blog-toc__list { display: grid; gap: 0.3rem; margin: 0; padding-left: 1.2rem; }
.blog-toc__item--h3 { margin-left: 1rem; list-style: circle; font-size: 0.95em; }
.blog-toc a { color: var(--c-link); text-decoration: none; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-6, 2rem) 0 0; }
.blog-faq { margin-top: var(--s-7, 2.5rem); }
.blog-faq__title, .blog-related__title { font-size: var(--t-2xl, 1.5rem); color: var(--c-text-strong); }
.blog-faq__item { border-bottom: 1px solid var(--c-border); }
.blog-faq__item summary { padding: var(--s-3, 0.75rem) 0; font-weight: 650; cursor: pointer; color: var(--c-text-strong); }
.blog-faq__answer { padding-bottom: var(--s-4, 1rem); color: var(--c-text); }
.blog-author { display: flex; gap: var(--s-4, 1rem); align-items: flex-start; margin-top: var(--s-7, 2.5rem); padding: var(--s-5, 1.25rem); border-radius: var(--r-lg, 0.75rem); background: var(--c-surface-sunk, #f6f7f9); }
.blog-author__photo { width: 4rem; height: 4rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.blog-author__name { margin: 0; font-weight: 700; }
.blog-author__name a { color: var(--c-text-strong); text-decoration: none; }
.blog-author__position { margin: 0.15rem 0 0.4rem; color: var(--c-text-muted); font-size: var(--t-sm, 0.875rem); }
.blog-author__bio { margin: 0; font-size: var(--t-sm, 0.9rem); }
.blog-related { margin-top: var(--s-7, 2.5rem); }
.blog-profile { display: flex; gap: var(--s-5, 1.25rem); align-items: center; margin-bottom: var(--s-5, 1.25rem); }
.blog-profile__photo { width: 7rem; height: 7rem; border-radius: 999px; object-fit: cover; }
.blog-profile__position { margin: 0.3rem 0 0.6rem; color: var(--c-text-muted); }
.blog-profile__bio { max-width: 46rem; margin-bottom: var(--s-6, 2rem); }
@media (max-width: 47.99rem) {
    .blog-pinned { grid-template-columns: 1fr; }
    .blog-pinned .blog-card--lg { grid-row: auto; }
    .blog-head__title, .blog-post__title { font-size: var(--t-2xl, 1.6rem); }
    .blog-profile { flex-direction: column; align-items: flex-start; }
}
.blog-block__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.blog-block__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--c-border); }
.blog-block__list a { color: var(--c-text-strong); font-weight: 600; text-decoration: none; }
.blog-block__list a:hover { color: var(--c-link); }
.blog-block__list time { flex-shrink: 0; color: var(--c-text-faint, #888); font-size: var(--t-sm, 0.875rem); }
.blog-block__more { margin-top: var(--s-5, 1.25rem); text-align: center; }
.blog-pinned:has(> :only-child) { grid-template-columns: 1fr; }
.blog-wrap :is(.blog-faq__title, .blog-related__title) { margin: 0 0 var(--s-4, 1rem); font-size: var(--t-2xl, 1.5rem); line-height: 1.25; }
.blog-related .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s-4, 1rem); }
.blog-related .blog-card__title { font-size: var(--t-base, 1rem); }

/* «Товары из статьи», «Услуги из статьи» (fields products, services). */
.blog-linked { margin-top: var(--s-7, 2.5rem); }
.blog-linked__title { margin: 0 0 var(--s-4, 1rem); font-size: var(--t-2xl, 1.5rem); line-height: 1.25; color: var(--c-text-strong); }
.blog-linked__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.blog-linked__grid--services { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* Comments (blog/comments.twig). */
.blog-comments { margin-top: var(--s-7, 2.5rem); }
.blog-comments__title { margin: 0 0 var(--s-4, 1rem); font-size: var(--t-2xl, 1.5rem); line-height: 1.25; color: var(--c-text-strong); }
.blog-comments__count { color: var(--c-text-muted); font-weight: 400; }
.blog-comments__notice { padding: var(--s-3, .75rem) var(--s-4, 1rem); border-radius: var(--r-md, 8px); background: var(--c-surface-2, #f3f4f6); }
.blog-comments__notice--invalid, .blog-comments__notice--closed { background: color-mix(in srgb, #dc2626 10%, transparent); }
.blog-comments__list, .blog-comments__replies { list-style: none; margin: 0; padding: 0; }
.blog-comments__replies { margin: var(--s-3, .75rem) 0 0 var(--s-5, 1.5rem); padding-left: var(--s-4, 1rem); border-left: 2px solid var(--c-border, #e5e7eb); }
.blog-comment { padding: var(--s-4, 1rem) 0; border-bottom: 1px solid var(--c-border, #e5e7eb); }
.blog-comment--reply { border-bottom: 0; padding-bottom: 0; }
.blog-comment__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .35rem; }
.blog-comment__name { font-weight: 600; color: var(--c-text-strong); }
.blog-comment__staff { font-size: .8em; padding: 0 .4em; border-radius: 4px; background: var(--c-accent-soft, #e0f2fe); }
.blog-comment__date { font-size: .85em; color: var(--c-text-muted); }
.blog-comment__body { line-height: 1.6; overflow-wrap: anywhere; }
.blog-comment__reply { margin-top: .5rem; }
.blog-comment__reply > summary { cursor: pointer; font-size: .9em; color: var(--c-accent, inherit); }
.blog-comment-form { display: grid; gap: var(--s-3, .75rem); margin-top: var(--s-5, 1.5rem); }
.blog-comment-form__row { display: grid; gap: var(--s-3, .75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.blog-comment-form__field { display: grid; gap: .3rem; font-size: .95em; }
.blog-comment-form__field input, .blog-comment-form__field textarea { width: 100%; font: inherit; padding: .6rem .75rem; border: 1px solid var(--c-border, #d1d5db); border-radius: var(--r-md, 8px); background: var(--c-surface, #fff); color: inherit; }
.blog-comment-form__hint { margin: 0; font-size: .85em; color: var(--c-text-muted); }
.blog-comment-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blog-comment-form > button { justify-self: start; }