/* Плашка доверия — компонент UI-кита.
   ------------------------------------------------------------------
   Живёт отдельным файлом, потому что её показывают две разные сборки с
   несовместимыми стилями: SEO-посадочные (свой seo-landings.css с глобальными
   сбросами) и страницы моделей (Tailwind). Пока правила лежали внутри
   seo-landings.css, на страницы моделей их было не принести: вместе с ними
   приехали бы глобальные body/a/*, которые ломают Tailwind.

   Разметку даёт tools/ui/trust-strip.mjs — файл и модуль правятся вместе.

   Переменные берём с запасным значением: на посадочных --line и --muted
   объявлены в :root, на страницах моделей их нет. */
.sl-trust {
  --sl-line: var(--line, #262626);
  --sl-muted: var(--muted, #a3a3a3);
  padding: 36px 0;
}

.sl-trust-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--sl-line);
  border-radius: 20px;
  background: linear-gradient(145deg, #151515, #101010);
  overflow: hidden;
}

.sl-trust-item {
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid var(--sl-line);
}

.sl-trust-item:last-child { border-right: 0 }

/* b — флекс со значком, поэтому текст внутри обёрнут в span: без обёртки на
   переносе значок уезжает от строки. */
.sl-trust-item b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.sl-trust-item p {
  margin: 0;
  color: var(--sl-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sl-trust-ico { flex: 0 0 auto; width: 17px; height: 17px; fill: currentColor }
.sl-trust-ico-claude { color: #d97757 }

/* Внутри узкой колонки (страницы моделей — 760px) четыре колонки дают по
   185px, и заголовки ломаются на две строки. Там переходим на 2x2 заранее. */
.sl-trust-card--narrow { grid-template-columns: 1fr 1fr }
.sl-trust-card--narrow .sl-trust-item:nth-child(2n) { border-right: 0 }
.sl-trust-card--narrow .sl-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--sl-line) }

@media (max-width: 650px) {
  .sl-trust { padding: 26px 0 }
  .sl-trust-card { grid-template-columns: 1fr 1fr }
  .sl-trust-item { padding: 22px 12px }
  .sl-trust-item:nth-child(2n) { border-right: 0 }
  .sl-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--sl-line) }
  .sl-trust-item b { gap: 7px; font-size: 15px }
}