/* brokery — обзор брокера (single-br_company.php) и сравнение пары (single-br_compare.php).
   Только раскладка двух страниц: компоненты — в components.css. Mobile-first, медиазапросы 768 и 1200. */

/* ======================================================================
   Обзор брокера
   ====================================================================== */

/* Закреплённая кнопка «На сайт» (до 768px) не должна закрывать подвал */
.br-page-company { padding-bottom: var(--br-gobar-h); }

/* ---------- Шапка обзора: название и четыре главные цифры слева, оценка и переход справа ---------- */
.br-co-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-sp-20); }
.br-co-head__main { min-width: 0; }
.br-co-head__title { display: flex; gap: var(--br-sp-12); align-items: flex-start; }
.br-co-head__title > div { min-width: 0; }
.br-co-head__title .br-lead { margin-top: var(--br-sp-8); }
.br-co-head .br-card__badges { margin-top: var(--br-sp-16); }

.br-co-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--br-sp-16); border-top: var(--br-rule); }
.br-co-fact { min-width: 0; padding: var(--br-sp-12) var(--br-sp-12) var(--br-sp-12) 0; border-bottom: var(--br-border); }
.br-co-fact:nth-child(even) { padding-left: var(--br-sp-12); border-left: var(--br-border); }
.br-co-fact dt { font-size: var(--br-fs-micro); line-height: var(--br-lh-micro); color: var(--br-text-muted); }
.br-co-fact dd { display: flex; flex-direction: column; align-items: flex-start; gap: var(--br-sp-4); margin-top: var(--br-sp-4); }
.br-co-fact__val, .br-co-fact__val .br-num, .br-co-fact__val .br-table__yes { font: var(--br-fw-num-strong) var(--br-fs-num-l)/var(--br-lh-num-l) var(--br-font-mono); letter-spacing: -0.03em; }
.br-co-fact__val .br-unit { font-size: var(--br-fs-small); letter-spacing: 0; }
.br-co-fact__val .br-table__yes { font-family: var(--br-font-body); letter-spacing: 0; }
.br-co-fact__pre { font: var(--br-fw-regular) var(--br-fs-small)/var(--br-lh-small) var(--br-font-body); letter-spacing: 0; color: var(--br-text-muted); }
.br-co-fact__hint { font-size: var(--br-fs-micro); line-height: var(--br-lh-micro); color: var(--br-text-muted); }

.br-co-verdict { min-width: 0; border: var(--br-border-ink); border-top: var(--br-rule); background: var(--br-surface); }
.br-co-verdict > .br-panel__head { padding: var(--br-sp-8) var(--br-sp-16); background: var(--br-bg); border-bottom: var(--br-border-ink); }
.br-co-verdict__body { display: flex; flex-direction: column; gap: var(--br-sp-12); padding: var(--br-sp-16); }
.br-co-verdict__score { display: flex; align-items: baseline; gap: var(--br-sp-8); }
.br-co-verdict__place { font-size: var(--br-fs-small); line-height: var(--br-lh-small); }
.br-co-verdict .br-btn { width: 100%; }

/* ---------- Раскладка: содержание и колонка блоков ---------- */
.br-co-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.br-co-body { min-width: 0; }
.br-co-toc { min-width: 0; margin-top: var(--br-sp-24); }
.br-co-toc__title { display: none; }
.br-co-toc__list { display: flex; gap: var(--br-sp-8); overflow-x: auto; scrollbar-width: none; }
.br-co-toc__list::-webkit-scrollbar { display: none; }
.br-co-toc__list li { flex: none; }
.br-co-toc__link { display: inline-flex; align-items: center; min-height: var(--br-chip-h); padding: 0 var(--br-sp-12); border: var(--br-border-strong); border-radius: var(--br-r-1); font-size: var(--br-fs-small); line-height: var(--br-lh-small); white-space: nowrap; color: var(--br-text); }
.br-co-toc__link:hover { background: var(--br-bg-2); border-color: var(--br-line-ink); }

/* ---------- Тарифы: на телефоне строка таблицы становится карточкой ---------- */
.br-co-tar { display: block; min-width: 0; }
.br-co-tar thead { display: none; }
.br-co-tar tbody, .br-co-tar tr, .br-co-tar tbody th, .br-co-tar td { display: block; }
.br-co-tar tr { padding: var(--br-sp-12) 0; border-bottom: var(--br-border); }
.br-co-tar tbody th, .br-co-tar td { padding: 0; border: 0; background: none; }
.br-co-tar tbody th { text-align: left; text-transform: none; letter-spacing: 0; color: var(--br-text); font: var(--br-fw-bold) var(--br-fs-small)/var(--br-lh-small) var(--br-font-body); }
.br-co-tar td { margin-top: var(--br-sp-4); }
.br-co-tar tbody tr:hover td { background: none; }
.br-co-tar__val { font-size: var(--br-fs-num); line-height: var(--br-lh-num); }
.br-co-tar__val .br-delta { margin-top: var(--br-sp-4); }

.br-co-range { margin-top: var(--br-sp-20); padding: var(--br-sp-16); border: var(--br-border); }
.br-co-range > .br-range { margin-top: var(--br-sp-8); }
.br-co-other { margin-top: var(--br-sp-24); max-width: var(--br-measure); }
.br-co-other .br-kv { margin-top: var(--br-sp-8); border-bottom: var(--br-border); }

/* ---------- Мини-калькулятор и его таблица-источник ---------- */
.br-co-calcsrc { margin-top: var(--br-sp-16); }
.br-co-src .br-table__name { font-size: var(--br-fs-table); }
.br-co-src .br-table__name::after { content: none; }
.br-co-src .br-table__name:hover { color: var(--br-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.br-co-cost .br-num { font-weight: var(--br-fw-num-strong); }

/* ---------- ИИС и платформы ---------- */
.br-co-pair { display: grid; grid-template-columns: minmax(0, 1fr); }
.br-co-pair > * { min-width: 0; }
.br-co-pair .br-small { margin-top: var(--br-sp-12); }
.br-co-plat { border-top: var(--br-rule); }
.br-co-plat li { display: grid; gap: 2px; padding: var(--br-sp-12) 0; border-bottom: var(--br-border); }
.br-co-plat__name { font-weight: var(--br-fw-bold); }
.br-co-plat__what { font-size: var(--br-fs-small); line-height: var(--br-lh-small); color: var(--br-text-muted); }
.br-co-plat__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--br-sp-8) var(--br-sp-20); margin-top: var(--br-sp-12); }
.br-co-plat__actions .br-btn--secondary { width: 100%; }

/* ---------- Кому подходит ---------- */
.br-co-fit__no .br-icon { color: var(--br-text-muted); }
.br-co-fit__links { margin-top: var(--br-sp-8); }

/* ---------- Оценка по критериям ---------- */
.br-co-score { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-sp-16) var(--br-sp-32); }
.br-co-score__total { border-top: var(--br-rule); padding-top: var(--br-sp-12); min-width: 0; }
.br-co-score__total p + p { margin-top: var(--br-sp-4); }
.br-co-score__rows { border-top: var(--br-rule); min-width: 0; }
.br-co-score__rows .br-score-full__row:first-child { border-top: 0; }
.br-co-score__rows .br-score-full__row { grid-template-columns: minmax(0, 1fr) auto auto; }
.br-co-score__rows .br-scale { order: 1; }
.br-co-crit__val { display: block; font-size: var(--br-fs-micro); line-height: var(--br-lh-micro); color: var(--br-text-muted); }
.br-co-crit__score { font-weight: var(--br-fw-num-strong); text-align: right; white-space: nowrap; }

/* ---------- Отзывы ---------- */
.br-co-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-sp-16); max-width: var(--br-measure); padding-top: var(--br-sp-16); border-top: var(--br-rule); }
.br-co-review__input, .br-co-review__text { font-family: var(--br-font-body); font-weight: var(--br-fw-regular); }
.br-co-review__text { height: auto; min-height: 112px; padding: var(--br-sp-8) var(--br-sp-12); resize: vertical; }
.br-co-review .br-btn { width: 100%; }

/* ======================================================================
   Сравнение двух брокеров
   ====================================================================== */
.br-cm-head h1 { margin-bottom: var(--br-sp-8); max-width: 960px; }
.br-cm-head .br-lead { margin-bottom: var(--br-sp-16); max-width: 960px; }
.br-cm-head .br-hero__meta { margin-top: var(--br-sp-12); text-align: left; }

/* ---------- Вывод ---------- */
.br-verdict__list { margin-top: var(--br-sp-8); font-size: var(--br-fs-body); line-height: var(--br-lh-body); }
.br-verdict__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--br-sp-16); padding: var(--br-sp-8) 0; border-top: var(--br-border); }
.br-verdict__row > * { min-width: 0; }
.br-verdict__q { font-size: var(--br-fs-small); line-height: var(--br-lh-small); color: var(--br-text-muted); }
.br-verdict__num { font-size: var(--br-fs-small); line-height: var(--br-lh-small); white-space: normal; }

/* ---------- Две карточки соперников ---------- */
.br-duel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--br-sp-20); border: var(--br-border-ink); border-top: var(--br-rule); max-width: 960px; }
.br-duel__card { display: flex; flex-direction: column; gap: var(--br-sp-8); min-width: 0; padding: var(--br-sp-12); }
.br-duel__card + .br-duel__or + .br-duel__card { border-left: var(--br-border-ink); }
.br-duel__head { display: flex; flex-direction: column; gap: var(--br-sp-8); }
.br-duel__head > div { min-width: 0; }
.br-duel__name { font-size: var(--br-fs-h3); line-height: var(--br-lh-h3); }
.br-duel__name a { color: var(--br-text); }
.br-duel__name a:hover { color: var(--br-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.br-duel__kind { margin-top: 2px; font-size: var(--br-fs-micro); line-height: var(--br-lh-micro); color: var(--br-text-muted); }
.br-duel__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-sp-8); margin-top: auto; }
.br-duel__actions .br-btn { padding: 0 var(--br-sp-8); }
.br-duel__or { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 2px 6px; background: var(--br-text); color: var(--br-on-dark); font: var(--br-fw-semibold) var(--br-fs-caps)/var(--br-lh-caps) var(--br-font-heading); letter-spacing: var(--br-ls-caps); text-transform: uppercase; }

/* ---------- Таблица «бок о бок»: на телефоне параметр — подзаголовок, значения — колонками ---------- */
.br-cmp { display: block; width: 100%; border-top: var(--br-rule); font-size: var(--br-fs-table); line-height: var(--br-lh-table); }
.br-cmp thead { display: block; position: sticky; top: var(--br-header-h); z-index: var(--br-z-sticky); background: var(--br-bg); }
.br-cmp tbody { display: block; }
.br-cmp__head, .br-cmp__row { display: grid; grid-template-columns: repeat(var(--cmp-n, 2), minmax(0, 1fr)); }
.br-cmp__th { min-width: 0; padding: var(--br-sp-8) var(--br-sp-12); border-bottom: var(--br-rule); text-align: left; font-weight: var(--br-fw-bold); }
.br-cmp__th--param { display: none; }
.br-cmp__th + .br-cmp__th { border-left: var(--br-border); }
.br-cmp__th--param + .br-cmp__th { border-left: 0; }
.br-cmp__brand { display: flex; align-items: center; gap: var(--br-sp-8); min-width: 0; }
.br-cmp__name { min-width: 0; color: var(--br-text); font-size: var(--br-fs-small); line-height: var(--br-lh-micro); }
.br-cmp__name:hover { color: var(--br-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.br-cmp__param { grid-column: 1 / -1; min-width: 0; padding: var(--br-sp-8) var(--br-sp-12); background: var(--br-surface); border-bottom: var(--br-border); text-align: left; font-weight: var(--br-fw-bold); }
.br-cmp__hint { display: block; font-weight: var(--br-fw-regular); font-size: var(--br-fs-micro); line-height: var(--br-lh-micro); color: var(--br-text-muted); }
.br-cmp__cell { min-width: 0; padding: var(--br-sp-12); border-bottom: var(--br-border); vertical-align: top; overflow-wrap: anywhere; }
.br-cmp__cell + .br-cmp__cell { border-left: var(--br-border); }
.br-cmp__cell::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--br-fs-caps); line-height: var(--br-lh-caps); color: var(--br-text-muted); }
.br-cmp__cell .br-num { font-size: var(--br-fs-num); }
.br-cmp__cell.is-best { background: var(--br-accent-tint); }
.br-cmp__mark { display: flex; width: fit-content; margin-top: var(--br-sp-4); }
.br-cmp .br-cmp__mark.br-delta--chip { background: var(--br-bg); }
.br-cmp__cell .br-table__list li + li { margin-top: 2px; }
.br-cmp__actions { display: grid; gap: var(--br-sp-8); }
.br-cmp__actions .br-btn { padding: 0 var(--br-sp-8); }

.br-cmp-add { margin-top: var(--br-sp-20); max-width: var(--br-measure); }
.br-cmp-add__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--br-sp-8); }
.br-cmp-add__chips { display: flex; flex-wrap: wrap; gap: var(--br-sp-8); }
.br-cmp-add__chips .br-icon { display: inline-block; width: var(--br-icon-s); height: var(--br-icon-s); }

.br-cmp-range__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-sp-4) var(--br-sp-16); margin-top: var(--br-sp-12); align-items: center; }
.br-cmp-range__name { font-weight: var(--br-fw-bold); font-size: var(--br-fs-small); line-height: var(--br-lh-small); }

/* ---------- Плюсы и минусы двух брокеров ---------- */
.br-cm-pcs { gap: var(--br-sp-32) var(--br-sp-40); }
.br-cm-pc__name { display: flex; align-items: center; gap: var(--br-sp-8); margin-bottom: var(--br-sp-12); }

/* ---------- Оценки по критериям ---------- */
.br-cm-sc tbody th { background: none; border-bottom: var(--br-border); vertical-align: middle; text-align: left; text-transform: none; letter-spacing: 0; color: var(--br-text); font: var(--br-fw-bold) var(--br-fs-table)/var(--br-lh-table) var(--br-font-body); }
.br-cm-sc__cell { min-width: 180px; }
.br-cm-sc__n { display: block; font-size: var(--br-fs-num); font-weight: var(--br-fw-num-strong); }
.br-cm-sc__cell .br-scale { max-width: 200px; margin: var(--br-sp-4) 0; }
.br-cm-sc tbody .br-cm-sc__total th, .br-cm-sc tbody .br-cm-sc__total td { border-bottom: 0; border-top: var(--br-rule); }

/* ---------- Кому какой ---------- */
.br-cm-choose__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--br-sp-8); margin-top: var(--br-sp-12); }

@media (min-width: 768px) {
  .br-page-company { padding-bottom: 0; }

  .br-co-head__title { gap: var(--br-sp-16); }
  .br-co-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .br-co-fact, .br-co-fact:nth-child(even) { padding: var(--br-sp-12) var(--br-sp-16); border-left: var(--br-border); }
  .br-co-fact:first-child { padding-left: 0; border-left: 0; }
  .br-co-verdict .br-btn { width: auto; align-self: flex-start; }
  .br-co-verdict__body { padding: var(--br-sp-20); }

  .br-co-tar { display: table; min-width: 560px; }
  .br-co-tar thead { display: table-header-group; }
  .br-co-tar tbody { display: table-row-group; }
  .br-co-tar tr { display: table-row; padding: 0; border: 0; }
  .br-co-tar tbody th, .br-co-tar td { display: table-cell; padding: var(--br-sp-12); border-bottom: var(--br-border); vertical-align: top; }
  .br-co-tar td { margin-top: 0; }
  .br-co-tar tbody th { width: 22%; }
  .br-co-tar__val { width: 24%; }
  .br-co-tar td:last-child { width: 14%; white-space: nowrap; }

  .br-co-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--br-sp-32); }
  .br-co-plat__actions .br-btn--secondary { width: auto; }
  .br-co-score { grid-template-columns: 200px minmax(0, 1fr); }
  .br-co-score__rows .br-score-full__row { grid-template-columns: minmax(0, 260px) 48px minmax(0, 1fr) 72px; }
  .br-co-score__rows .br-scale { order: 0; }
  .br-co-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-co-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-co-review__wide { grid-column: 1 / -1; }
  .br-co-review .br-btn { width: auto; }

  .br-verdict__row { grid-template-columns: 240px 200px minmax(0, 1fr); align-items: baseline; }
  .br-verdict__q, .br-verdict__num { font-size: var(--br-fs-ui); line-height: var(--br-lh-body); }
  .br-duel__card { padding: var(--br-sp-16) var(--br-sp-20); gap: var(--br-sp-12); }
  .br-duel__head { flex-direction: row; gap: var(--br-sp-12); }
  .br-duel__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .br-cmp { display: table; table-layout: fixed; }
  .br-cmp thead { display: table-header-group; }
  .br-cmp tbody { display: table-row-group; }
  .br-cmp__head, .br-cmp__row { display: table-row; }
  .br-cmp__th { display: table-cell; background: var(--br-bg); }
  .br-cmp__th--param { display: table-cell; width: 280px; padding-left: 0; color: var(--br-text-muted); font: var(--br-fw-semibold) var(--br-fs-caps)/var(--br-lh-caps) var(--br-font-heading); letter-spacing: var(--br-ls-caps); text-transform: uppercase; vertical-align: bottom; }
  .br-cmp--wide .br-cmp__th--param { width: 200px; }
  .br-cmp__th--param + .br-cmp__th { border-left: var(--br-border); }
  .br-cmp__name { font-size: var(--br-fs-body); line-height: var(--br-lh-ui); }
  .br-cmp__param { display: table-cell; padding: var(--br-sp-12) var(--br-sp-12) var(--br-sp-12) 0; background: none; vertical-align: top; }
  .br-cmp__cell { display: table-cell; border-left: var(--br-border); }
  .br-cmp__cell::before { content: none; }
  .br-cmp__row:hover .br-cmp__param, .br-cmp__row:hover .br-cmp__cell:not(.is-best) { background: var(--br-surface); }
  .br-cmp__row--actions:hover .br-cmp__param, .br-cmp__row--actions:hover .br-cmp__cell:not(.is-best) { background: none; }
  .br-cmp__mark { display: inline-flex; margin: 0 0 0 var(--br-sp-8); vertical-align: 1px; }
  .br-cmp__cell .br-score + .br-cmp__mark { vertical-align: 4px; }
  .br-cmp__actions { display: flex; flex-wrap: wrap; }
  .br-cmp__actions .br-btn { padding: 0 var(--br-sp-12); }
  .br-cmp-add__row .br-select { width: 360px; }

  .br-cmp-range__row { grid-template-columns: 200px minmax(0, 1fr); }
  .br-cm-choose__actions { display: flex; }
}

@media (min-width: 1200px) {
  .br-co-head { grid-template-columns: minmax(0, 1fr) var(--br-aside-w); gap: var(--br-sp-32); align-items: start; }
  .br-co-verdict .br-btn { width: 100%; align-self: stretch; }

  .br-co-layout { grid-template-columns: minmax(0, 1fr) 232px; column-gap: var(--br-sp-48); align-items: start; }
  .br-co-body { grid-column: 1; grid-row: 1; }
  .br-co-toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--br-header-h) + var(--br-sp-16)); margin-top: var(--br-section); border-top: var(--br-rule); padding-top: var(--br-sp-8); }
  .br-co-toc__title { display: block; margin-bottom: var(--br-sp-4); color: var(--br-text-muted); }
  .br-co-toc__list { display: block; overflow: visible; }
  .br-co-toc__link { display: block; min-height: 0; padding: 6px 0 6px var(--br-sp-12); border: 0; border-left: var(--br-bw) solid var(--br-line); border-radius: 0; white-space: normal; }
  .br-co-toc__link:hover { background: none; border-left-color: var(--br-line-ink); color: var(--br-accent-deep); }

  .br-co-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .br-cm-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}