/* Дополнения сайта к дизайн-системе «Табло» (LAB-35).
   Только раскладка и мелкие варианты существующих компонентов. Значения — из токенов «Табло», новых цветов нет.
   Сама система лежит без изменений в public/design/system/css/system.css. */

/* ---------- общие ---------- */
.more-link { margin-top: var(--sp-4); }
.cards > li > .card { height: 100%; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gate__row { justify-content: space-between; }
/* в макетах было inline-стилем */
.notin--acc { border-color: var(--accent); }
.price--hl .label { color: var(--tile-ink-2); }
.mstep__h .btn--text { justify-self: start; }
.svc__price { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.15; text-transform: uppercase; }
.cmp-t--2 { min-width: 0; }
.prose > section { display: grid; gap: var(--sp-3); }

/* ---------- «код → интерфейс» на первом экране: сайт, карточка CRM, окно приложения ---------- */
.hero-fig { display: grid; gap: var(--sp-2); align-content: start; }
.hero-fig .ui-note { margin-top: 0; }
.mc__ui--trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.mc__ui--trio > .ui:first-child { grid-column: 1 / -1; }

/* ---------- подвал: бренд · услуги с ценами · страницы · связь ---------- */
.ft .label, .ft__h { color: var(--tile-ink-2); }
.ft__h { margin-bottom: var(--sp-2); }
.ft__in--site > .ft__brand { grid-column: 1 / span 4; }
.ft__in--site > .ft__svc { grid-column: 5 / span 4; }
.ft__in--site > .ft__nav { grid-column: 9 / span 2; }
.ft__in--site > .ft__side { grid-column: 11 / span 2; }
.ft__svc ul { display: grid; }
.ft__svc li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); border-bottom: var(--bw-hair) solid var(--tile-line); }
.ft__svc a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--tile-ink); }
.ft__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--tile-ink-2); }
.ft__ph { font-size: var(--fs-sm); color: var(--tile-ink-2); }

@media (max-width: 64rem) {
  .ft__in--site > .ft__brand { grid-column: 1 / -1; }
  .ft__in--site > .ft__svc { grid-column: 1 / span 6; }
  .ft__in--site > .ft__nav { grid-column: 7 / span 3; }
  .ft__in--site > .ft__side { grid-column: 10 / span 3; }
}
@media (max-width: 48rem) {
  .split--even, .mc__ui--trio { grid-template-columns: minmax(0, 1fr); }
}

/* Знак SolveBase в шапке и подвале: две плитки табло S и B (components/Logo.tsx). */
.wm .logo { font-family: var(--font-display); font-weight: 600; font-size: 1.625rem; line-height: 1; }
.wm .logo .fl { transition: transform var(--dur-2, 240ms) var(--ease-out, ease-out); }
@media (hover: hover) { .wm:hover .logo .fl--acc { transform: translateY(-0.08em); } }
.ft__brand .wm .logo { font-size: 3rem; }
.wm__name { text-transform: none; }
@media (prefers-reduced-motion: reduce) { .wm .logo .fl { transition: none; } }
/* Подвал: знак, имя и подпись переносятся, чтобы не заходить на колонку «Услуги». */
.ft__brand { min-width: 0; }
.ft__brand .wm { flex-wrap: wrap; row-gap: var(--sp-2, 0.5rem); }
.ft__brand .wm .logo { font-size: 2.25rem; }
.ft__brand .wm__name { font-size: 2.5rem; }
.ft__brand .wm__desc { flex-basis: 100%; white-space: normal; }
.ft__brand .btn { max-width: 100%; }