/**
 * Бренд-бар — 8 марок равными секциями во всю ширину, с логотипами.
 * Источник размеров/правил — content/brand-marks-standard.md.
 * Два режима: nav (навигация, тёмный фон) / filter (плитка-переключатель, светлый фон).
 */

.bb-brand-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.bb-brand-bar .bb-nav-link {
  flex: 1 1 12.5%; /* 1/8 ширины на десктопе — 8 марок в ряд */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  text-decoration: none;
  color: inherit;
}

/* --- Режим nav: тёмная навигационная полоса (brand-marks-standard.md §1) --- */
.bb-brand-bar--nav {
  background: #0f2d5e;
}
.bb-brand-bar--nav .bb-logo {
  height: 28px;
  width: auto;
  background: #fff;
  border-radius: var(--radius, 4px);
  padding: 2px 6px;
  opacity: 0.9;
  transition: opacity 0.2s;
  /* НЕ invert-фильтр: SVG в brand-logos/ непрозрачные (белый фон внутри самого
     файла), invert превращал всю картинку в сплошной блок — найдено на живом
     сайте 2026-08-09 (оператор: "картинки в новом формате"). Логотип показывается
     как есть, на белой подложке — тот же приём, что уже работает в режиме filter. */
}
.bb-brand-bar--nav .bb-nav-link:hover .bb-logo {
  opacity: 1;
}
.bb-brand-bar--nav .bb-brand-name {
  color: #fff;
  font-size: 12px;
  opacity: 0.75;
}
.bb-brand-bar--nav .bb-nav-link:hover .bb-brand-name {
  opacity: 1;
}

/* --- Режим filter: плитка-переключатель (brand-marks-standard.md §2) --- */
.bb-brand-bar--filter .bb-nav-link {
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius, 4px); /* платформенный токен, tokens.css --radius:4px — было хардкод 12px */
  margin: 4px;
  cursor: pointer;
}
.bb-brand-bar--filter .bb-logo {
  max-height: 32px;
  max-width: 80px;
  object-fit: contain;
}
.bb-brand-bar--filter .bb-brand-name {
  font-size: 13px;
  color: #1a1a1a;
}
.bb-brand-bar--filter .bb-nav-link.is-active {
  border-color: #0f2d5e;
  background: #f5f7fa;
}

/* --- Адаптив: мобильный — перестраивается в 2 строки по 4, не в 8 в ряд --- */
@media (max-width: 767px) {
  .bb-brand-bar .bb-nav-link {
    flex: 1 1 25%; /* 4 в ряд на мобильном */
  }
}