/*
Theme Name: Aggregon
Author: Дмитрий Соколов
Description: Блог врача клинической лабораторной диагностики об агрегометрах: методики исследования агрегации тромбоцитов, преаналитика, контроль антиагрегантной терапии и выбор оборудования для лаборатории.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: aggregon
*/

/*
Это шаблон каркаса (wp-theme-starter/), не готовая тема.
Плейсхолдеры {{...}} заполняются при генерации конкретного сайта —
Theme Name/Author/Version/Text Domain рандомизируются на каждом сайте
(см. plans/2026-09-05-design-generation.md — рандомизация generator-тега и метаданных темы).
Пример собранной темы под конкретный сайт — в sites/antresolich/.
*/

/* Хедер использует layout:flex вместо layout:constrained (в отличие от
   футера, где contentSize уже задан на самом alignfull-блоке) — поэтому
   его контент (лого/навигация) растягивается на всю ширину экрана без
   ограничения на широких мониторах, пока цветные alignfull-плашки (фон
   футера и т.п.) корректно тянутся на весь экран. У .pbn-site-header нет
   собственного фона ни на одном сайте сети (только border-bottom) —
   поэтому можно ограничивать сам элемент напрямую, без доп. обёртки:
   заметного цветового разрыва по краям не будет. Берём wide_size сайта —
   он уже осознанно варьируется по сети (1340-1520px), отдельное число
   здесь не нужно.

   !important обязателен: .pbn-site-header сам alignfull и прямой потомок
   .wp-site-blocks, поэтому попадает под правило ".wp-site-blocks >
   .alignfull, ... { margin-left:-20px; margin-right:-20px; }" ниже в этом
   же файле — у него специфичность (0,2,0) против (0,1,0) у одного класса,
   и оно выигрывает вне зависимости от порядка. Без !important хедер
   визуально остаётся прижат к левому краю (margin:auto тихо перезаписан),
   пока сам max-width продолжает работать — баг легко пропустить, если
   проверять только ширину элемента, а не его позицию. */
.pbn-site-header {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Cookie-баннер: компактная плавающая карточка снизу слева (утверждено в макете) */
.pbn-cookie-banner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 999;
    width: min(380px, calc(100vw - 48px));
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(43, 36, 32, 0.22);
    padding: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--text-muted);
}

.pbn-cookie-banner p {
    margin: 0 0 16px;
}

.pbn-cookie-banner__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--wp--preset--color--text-muted);
    cursor: pointer;
    padding: 4px;
}

.pbn-cookie-banner__accept {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--background);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.pbn-cookie-banner__accept:hover {
    background: var(--wp--preset--color--accent-hover);
}

.pbn-breadcrumbs {
    display: block;
    font-size: 13px;
    color: var(--wp--preset--color--text-muted);
}

.pbn-breadcrumbs a {
    color: var(--wp--preset--color--text-muted);
}

.pbn-breadcrumbs a:hover {
    color: var(--wp--preset--color--accent);
}

.pbn-contact-form p {
    margin: 0 0 18px;
}

.pbn-contact-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.pbn-contact-form input,
.pbn-contact-form textarea {
    width: 100%;
    border: 1px solid var(--wp--preset--color--border);
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    background: var(--wp--preset--color--background);
    box-sizing: border-box;
}

.pbn-contact-form button {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--background);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 32px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.pbn-contact-form button:hover {
    background: var(--wp--preset--color--accent-hover);
}

.pbn-contact-form__sent {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    padding: 14px 18px;
    margin: 0 0 24px;
    color: var(--wp--preset--color--text);
}

/* Подвал: колонки выровнены по верхнему краю, не расползаются */
footer.wp-block-group .is-layout-flex {
    align-items: flex-start;
}

/* Зазоры между колонками подвала (160px/88px в footer.html) заданы через
   blockGap — а blockGap задаёт ОДНО значение gap сразу для строк и колонок.
   На узких экранах, где flex-wrap переносит колонки друг под друга, тот же
   большой горизонтальный зазор становится вертикальным между "рядами" —
   между блоками подвала образуются огромные пустые промежутки. Разводим
   column-gap (горизонтальный, оставляем как задано) и row-gap (вертикальный,
   всегда небольшой) — работает на любой ширине экрана без брейкпоинтов. */
footer.wp-block-group .is-layout-flex {
    column-gap: var(--wp--style--spacing--blockGap, 32px);
    row-gap: 32px;
}

/* Отступы между пунктами главного меню в шапке */
.pbn-site-header .wp-block-navigation {
    gap: 36px;
}

.pbn-site-header .wp-block-navigation .wp-block-navigation-item {
    padding: 0;
}

/* Ссылки в выпадающем меню "Рубрики" — обычный line-height, а не унаследованный от текста тела (1.7) */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation-submenu .wp-block-navigation-item__content {
    line-height: 1.4;
}

/* Выпадающее меню "Рубрики" — шире, чтобы названия категорий не переносились на 2 строки.
   !important обязателен: у ядра WP есть более специфичные правила на :hover/:focus-within
   (.wp-block-navigation .has-child:hover > .submenu-container и т.п.), которые сами
   задают min-width:200px и перебивают простой селектор по специфичности. */
.wp-block-navigation__submenu-container {
    min-width: 380px !important;
}

/* Сетки постов (похожие посты, категория): auto-fit схлопывает пустые треки,
   когда постов меньше, чем колонок. Максимум трека — фиксированные 420px
   (а не 1fr), поэтому непустые треки не разрастаются на всю строку сами по
   себе — так одна-единственная карточка не превращается в широкий баннер,
   и при этом не остаётся отдельного правила на max-width самой карточки:
   именно оно давало разрыв после каждой карточки, когда трек (280-1fr) был
   шире 420px, а сама карточка внутри — обрезана до 420px. */
.wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 420px)) !important;
}

/* Карточки поста в сетке — одинаковая высота в ряду независимо от длины
   заголовка/анонса (иначе более короткие карточки "проваливаются" и нижний
   край ряда получается рваным). Заголовок и анонс обрезаются по строкам. */
.wp-block-post-template.is-layout-grid > li {
    display: flex;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Внутренняя обёртка с паддингом (заголовок/анонс/дата) тоже должна быть
   flex-контейнером — иначе margin-top:auto на дате ниже не имеет эффекта
   (родитель не flex, значит "прижать к низу" некуда), и дата "плавает"
   по вертикали в зависимости от того, сколько строк занял анонс. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group > .wp-block-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wp-block-post-template.is-layout-grid .wp-block-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wp-block-post-template.is-layout-grid .wp-block-post-date {
    margin-top: auto;
    padding-top: 8px;
}

.wp-block-post-template.is-layout-grid.columns-4 > li > .wp-block-group {
    min-height: 480px;
}

/* Главная "Последние статьи" — жёстко 4 карточки в ряд (не auto-fit: auto-fit считает
   по фактической ширине окна и на обычном экране схлопывается до 2-3, что не даёт
   гарантированных 4). На планшете/мобильном — свои брейкпоинты вместо авто-подстройки. */
.wp-block-post-template.is-layout-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1100px) {
    .wp-block-post-template.is-layout-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-post-template.is-layout-grid.columns-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Hero-картинка растягивается на всю высоту колонки, а не фиксированная высота */
.pbn-hero-image {
    height: 100%;
    margin: 0;
}

.pbn-hero-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Картинка в SEO-блоке на главной — тянется на всю высоту своей колонки,
   как hero-картинка, а не сидит мелким квадратиком с фиксированной высотой */
.pbn-seo-block-image {
    height: 100%;
    margin: 0;
    min-height: 260px;
}

.pbn-seo-block-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Отступы у изображений, вставленных прямо в текст статьи.
   Внешний отступ — на figure, а не на img, чтобы подпись под фото
   (figcaption) была прижата к самому фото, а не оторвана от него. */
.entry-content .wp-block-image {
    margin: 32px 0;
}

.entry-content .wp-block-image img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

.entry-content .wp-block-image figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wp--preset--color--text-muted);
    text-align: center;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.entry-content table th,
.entry-content table td {
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--wp--preset--color--border);
}

.entry-content table th {
    background: var(--wp--preset--color--surface);
}

.entry-content hr {
    border: none;
    border-top: 1px solid var(--wp--preset--color--border);
    margin: 40px 0;
}

/* Врезка "мысль автора" — фото + текст рядом, с отступом между ними */
.pbn-author-note {
    gap: 16px;
    align-items: flex-start;
}

.pbn-author-note__avatar {
    flex-shrink: 0;
    margin: 0 !important;
}

.pbn-author-note p {
    margin: 0 0 6px;
}

.pbn-author-note p:last-child {
    margin-bottom: 0;
}

/* Шапка статьи: аватар автора + имя + дата + время чтения в одну строку,
   элементы разделены точкой-разделителем с явным отступом, а не жмутся друг к другу */
.pbn-post-meta {
    align-items: center;
    gap: 0;
    row-gap: 8px;
    flex-wrap: wrap;
    color: var(--wp--preset--color--text-muted);
}

.pbn-post-meta > * {
    margin: 0 !important;
}

.pbn-post-meta > *:not(:first-child) {
    position: relative;
    margin-left: 20px !important;
}

.pbn-post-meta > *:not(:first-child)::before {
    content: "•";
    position: absolute;
    left: -14px;
    color: var(--wp--preset--color--border);
}

.pbn-post-meta .wp-block-post-author {
    gap: 8px;
    align-items: center;
}

.pbn-post-meta .wp-block-post-author__avatar {
    margin: 0;
}

.pbn-post-meta .wp-block-post-author__avatar img {
    border-radius: 50%;
    display: block;
}

.pbn-post-meta .wp-block-post-author__name {
    font-weight: 600;
}

/* Иконка домика с антресолью рядом с названием сайта в подвале —
   тот же мотив, что в лого шапки, но линией в цвет текста подвала (светлая на тёмном) */
.pbn-footer-brand {
    align-items: center;
    gap: 10px;
}

.pbn-footer-brand__icon {
    flex-shrink: 0;
    display: block;
    color: var(--wp--preset--color--footer-text);
}

/* Заголовки колонок подвала (Рубрики/Информация) — засечки в верхнем регистре
   с разрядкой смотрятся тяжело, переключаем на тот же шрифт, что в тексте,
   и чуть увеличиваем */
.wp-block-group.has-footer-bg-background-color h6.wp-block-heading {
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px !important;
    font-weight: 600;
    /* h6 has no margin reset anywhere in theme.json (only the site-title
       next to it, which renders level:0 = no heading tag = no default
       margin), so the browser's own ~2.3em UA margin was pushing these
       column headers well below the logo/site-name row next to them. */
    margin: 0;
}

/* Списки в подвале (рубрики, информация) — без маркеров-точек */
.wp-block-group.has-footer-bg-background-color .wp-block-categories-list,
.wp-block-group.has-footer-bg-background-color .wp-block-page-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ссылки в подвале наследуют глобальный акцентный цвет ссылок
   (theme.json → elements.link), подобранный под ЧИТАЕМОСТЬ на светлом
   фоне сайта — на тёмном фоне подвала он выходит неконтрастным и плохо
   читается. Явно задаём цвет ссылок в подвале = footer-text (обычно
   светлый, уже подобран парой к footer-bg под контраст). */
.wp-block-group.has-footer-bg-background-color a {
    color: var(--wp--preset--color--footer-text) !important;
}

.wp-block-group.has-footer-bg-background-color a:hover {
    opacity: 0.8;
}

/* Оглавление статьи */
html {
    scroll-behavior: smooth;
}

.entry-content h2,
.entry-content h3 {
    scroll-margin-top: 24px;
}

.pbn-toc {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: 16px 20px;
}

.pbn-toc__title {
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 15px;
}

.pbn-toc__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pbn-toc__list > li {
    font-size: 15px;
    padding-left: 2px;
}

.pbn-toc__list > li::marker {
    color: var(--wp--preset--color--accent);
    font-weight: 600;
}

.pbn-toc a {
    color: var(--wp--preset--color--text);
    text-decoration: none;
    line-height: 1.35;
}

.pbn-toc a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
}

.pbn-toc__sublist {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pbn-toc__sublist li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: var(--wp--preset--color--text-muted);
}

.pbn-toc__sublist li::before {
    content: "–";
    position: absolute;
    left: 0;
}

.pbn-toc__sublist a {
    color: inherit;
}

/* Featured-картинка статьи и её подпись */
.wp-block-post-featured-image figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wp--preset--color--text-muted);
    text-align: center;
}

/* Глобальный боковой отступ страницы. theme.json settings.useRootPaddingAwareAlignments
   в этой версии WP не проставляет класс has-global-padding на самописных
   шаблонах (не через редактор), поэтому переменная из theme.json не применялась
   вообще — контент шёл впритык к краю экрана на мобильном. Задаём отступ
   напрямую и явно "пробиваем" его у секций с полнобитным фоном (шапка,
   подвал, SEO-блок, полоса категории), которые должны быть край-в-край. */
.wp-site-blocks {
    padding-left: 20px;
    padding-right: 20px;
}

.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-template-part > .alignfull {
    margin-left: -20px;
    margin-right: -20px;
}

/* Мобильная адаптация: шапка/подвал раньше имели фиксированные 48px боковых
   отступа на любом экране — на узких телефонах (320-400px) это забирает
   четверть ширины экрана впустую. Плюс общий вертикальный воздух между
   секциями слишком большой для маленького экрана — тоже ужимаем. */
@media (max-width: 600px) {
    .pbn-site-header,
    .wp-block-group.has-footer-bg-background-color {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #stati,
    .pbn-related-posts-section,
    .wp-block-group.has-surface-background-color {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .pbn-toc {
        padding: 14px 16px;
    }

    /* Hero на мобиле: картинка идёт первой (над текстом), заголовок мельче,
       без большого воздуха сверху под самой шапкой сайта */
    .pbn-hero-section {
        padding-top: 20px !important;
    }

    .pbn-hero-image-col {
        order: -1;
    }

    .pbn-hero-image {
        min-height: 220px;
    }

    h1.has-xx-large-font-size {
        font-size: 32px !important;
    }

    .wp-block-post-template.is-layout-grid.columns-4 > li > .wp-block-group {
        min-height: 0;
    }
}

/* Кнопки — hover-эффект. Утилитарный класс has-accent-background-color задаёт
   фон через !important, поэтому обычное поведение WP на hover не срабатывает
   без своего правила такой же специфичности. */
.wp-block-button__link.has-accent-background-color {
    transition: background-color 0.15s ease;
}

.wp-block-button__link.has-accent-background-color:hover {
    background-color: var(--wp--preset--color--accent-hover) !important;
}

/* Кнопка "наверх" — маленькая, фиксированная в углу, скроллит страницу
   плавно (scroll-behavior:smooth уже включён глобально выше) */
.pbn-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 998;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(43, 36, 32, 0.35);
    transition: background-color 0.15s ease;
}

.pbn-back-to-top:hover {
    background: var(--wp--preset--color--accent-hover);
}

@media (max-width: 600px) {
    .pbn-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Комментарии под статьёй — карточки с отступом друг от друга, а не сплошной
   текст встык. Дата рядом с именем автора. */
.wp-block-comment-template {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wp-block-comment-template li {
    background: var(--wp--preset--color--surface);
    border-radius: 8px;
    padding: 18px 20px;
}

.pbn-comment-meta {
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.pbn-comment-meta .wp-block-comment-author-name {
    font-weight: 600;
}

.pbn-comment-meta .wp-block-comment-date {
    color: var(--wp--preset--color--text-muted);
}

.wp-block-comment-content p {
    margin: 0;
}

/* Вложенные ответы (в т.ч. ответы автора блога) — свой отступ слева и
   список без стандартных маркеров/margin */
.wp-block-comment-template li > ol {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 2px solid var(--wp--preset--color--border);
}

/* Ответ автора блога — WP сам добавляет класс bypostauthor комментарию,
   если он от пользователя, совпадающего с автором поста. Выделяем цветом
   и бейджем "Автор блога", чтобы сразу было видно, кто ответил. */
.wp-block-comment-template li.bypostauthor {
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--accent);
}

.wp-block-comment-template li.bypostauthor .wp-block-comment-author-name {
    color: var(--wp--preset--color--accent);
}

.wp-block-comment-template li.bypostauthor .wp-block-comment-author-name::after {
    content: "Автор блога";
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--wp--preset--color--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* Цитата — аккуратный пулл-квот с большим декоративным кавычкой вместо
   голой цветной черты вплотную к тексту */
.wp-block-quote {
    position: relative;
    border: none !important;
    margin: 32px 0;
    padding: 4px 0 4px 48px;
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
}

.wp-block-quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -14px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-size: 64px;
    line-height: 1;
    color: var(--wp--preset--color--accent);
}

.wp-block-quote p {
    margin: 0;
}

.wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 14px;
    color: var(--wp--preset--color--text-muted);
}

/* Текст на странице контактов — по левому краю, без центрирования в узкой
   колонке (раньше "плавал" по центру широкой страницы под H1/лого) */
.pbn-contact-text {
    max-width: 640px;
}

/* Кнопки "Поделиться" под статьёй */
.pbn-share-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--wp--preset--color--border);
}

/* WP добавляет всем прямым детям flow-контейнера, кроме первого,
   margin-block-start:24px через глобальное :where()-правило — внутри
   нашего flex-ряда это визуально сдвигает кнопки вниз от подписи. Обнуляем. */
.pbn-share-wrapper > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.pbn-share__label {
    font-size: 14px;
    color: var(--wp--preset--color--text-muted);
    margin-right: 4px;
}

.pbn-share__link {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pbn-share__link:hover {
    background: var(--wp--preset--color--accent);
    color: #fff !important;
}

/* "Последние комментарии на сайте" на главной — 4 карточки комментарий+ответ */
.pbn-recent-comments {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pbn-recent-comments .pbn-recent-comment-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* WP's default flow spacing (margin-block-start:24px on every child
       except :first-child) leaks into this grid and only pushes cards
       2-4 down, leaving card 1 sitting 24px higher than the rest of the
       row — reset it explicitly here since gap already handles spacing. */
    margin-top: 0;
}

/* Тот же owl-selector эффект — но теперь между ВНУТРЕННИМИ элементами
   одной карточки (автор/текст комментария/ответ), а не между карточками.
   Не проявлялось, пока не было реальных комментариев для рендера. */
.pbn-recent-comments .pbn-recent-comment-card > * {
    margin-top: 0 !important;
}

.pbn-recent-comment-card__post-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--accent) !important;
    text-decoration: none !important;
}

.pbn-recent-comment-card__author {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
}

.pbn-recent-comment-card__comment p:last-child,
.pbn-recent-comment-card__reply p:last-child {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: var(--wp--preset--color--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pbn-recent-comment-card__reply {
    border-top: 1px solid var(--wp--preset--color--border);
    padding-top: 12px;
    /* карточки в ряду одной высоты (grid растягивает их сам), но текст
       комментария/ответа не одинаковой длины — прижимаем ответ автора
       к низу, чтобы он начинался на одной высоте во всех 4 колонках,
       а не сразу за текстом переменной длины */
    margin-top: auto;
}

.pbn-recent-comment-card__badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    background: var(--wp--preset--color--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

@media (max-width: 1100px) {
    .pbn-recent-comments {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pbn-recent-comments {
        grid-template-columns: 1fr;
    }
}