/* BFC S67-A · реакции-эмодзи на карточках (16→17.08.2026)
 *
 * Ряд пилюль дорисовывает bfc-reactions.js — разметка целей не меняется, поэтому
 * все селекторы здесь якорятся на СВОИ классы .bfc-react*, а не на чужие карточки.
 * Единственное исключение — три правила «где ряд стоит», они читают чужой класс
 * карточки, но только чтобы задать отступ СВОЕМУ ряду; чужие свойства не трогаются.
 *
 * Анимация только transform/opacity: обе считаются композитором, ряд стоит в потоке
 * карточки и при «поп»-нажатии ничего не перекладывает (CLS = 0).
 *
 * Тап-зона. На 375 пилюля 40x40 — нижняя граница, ниже которой палец промахивается.
 * На десктопе 34 — брифом задан коридор 32–36.
 *
 * Roboto Condensed самохостится (bfc-fonts.css, S59-B), но стек фолбэков всё равно
 * прописан: пилюля тянется по содержимому (padding + min-width, без фиксированной
 * ширины), поэтому подмена шрифта её не разорвёт — только сделает чуть шире.
 */

.bfc-react {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0;
    padding: 0 8px 2px;
    line-height: 1;
}

.bfc-react__pill {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border: 1px solid rgba(246, 146, 30, .35);
    border-radius: 999px;
    background: #fff4ea;
    color: #1e2a3a;
    font-family: 'Roboto Condensed', 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
    will-change: transform;
}

.bfc-react__pill:hover {
    border-color: rgba(246, 146, 30, .7);
}

.bfc-react__pill:focus-visible {
    outline: 2px solid #f6921e;
    outline-offset: 2px;
}

/* Отреагировал — пилюля залита фирменным оранжевым и больше не нажимается. */
.bfc-react__pill.is-done {
    background: #f6921e;
    border-color: #f6921e;
    color: #fff;
    cursor: default;
}

.bfc-react__pill[disabled] {
    pointer-events: none;
}

.bfc-react__emo {
    font-size: 15px;
    line-height: 1;
    /* эмодзи-шрифт системный: у Roboto Condensed своих глифов эмодзи нет */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bfc-react__cnt {
    font-variant-numeric: tabular-nums;
    min-width: 8px;
}

/* Ноль не показываем — пустая карточка не должна выглядеть отвергнутой. */
.bfc-react__cnt:empty {
    display: none;
}

/* «Поп» на 250 мс: только масштаб, ничего в потоке не двигается. */
@keyframes bfc-react-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.bfc-react__pill.is-pop {
    animation: bfc-react-pop .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bfc-react__pill { transition: none; }
    .bfc-react__pill.is-pop { animation: none; }
}

/* --- где ряд стоит внутри чужих карточек (свойства правим только у своего узла) --- */

/* Лента «Примеры установок»: .gal-item — overflow:hidden и скруглена,
   поэтому ряду нужен свой нижний отступ, иначе он прижмётся к срезу. */
.gal-item > .bfc-react {
    margin: 8px 0 10px;
}

/* Карточки роликов: подпись figcaption уже даёт свой margin-top. */
.vid-card > .bfc-react {
    margin-top: 8px;
}

/* Отзывы: снимок стоит последним, ряд идёт под ним. */
.testim-card > .bfc-react {
    margin-top: 10px;
    justify-content: flex-start;
}

@media (max-width: 560px) {
    .bfc-react {
        gap: 8px;
    }
    .bfc-react__pill {
        height: 40px;
        min-width: 44px;
        padding: 0 12px;
    }
    .bfc-react__emo {
        font-size: 16px;
    }

    /* Тап-зона под ЧУЖИМ масштабом карусели.
       Лента роликов держит нецентральные карточки в transform:scale(.9)
       (bfc-s60d-video.php) — масштабируется вся карточка целиком вместе с подписью,
       и наш ряд вместе с ней. Компоновочные 40 px превращаются в ВИДИМЫЕ 36, а палец
       промахивается по видимым, а не по компоновочным (готча S62-B: rect у .vid-card
       врёт ровно на этот множитель).
       Поэтому у пилюль в НЕцентральной карточке ролика компоновочный размер поднят
       ровно на обратный множитель: 45*0.9 = 40.5 и 49*0.9 = 44.1 — видимая тап-зона
       не проваливается под 40 нигде. Побочный эффект приятный: при центрировании
       карточки видимый размер меняется на полпикселя, то есть на глаз ряд пилюль
       остаётся одного размера, пока лента листается.
       Правило читает чужой класс, но задаёт свойства ТОЛЬКО своему узлу. */
    .vid-card:not(.is-center) > .bfc-react .bfc-react__pill {
        height: 45px;
        min-width: 49px;
    }
}