/* ============================================================
   B07 · CTA1 + Welcome kit
   figma: node-id=15:68
   ============================================================ */

.sc-kit {
  --sc-cta-gap: var(--stack-gap-lg); /* шаг колонки: остальное добавит правило в base.css */
  /* Поле внутри плиты: 80 в макете (897:248) = поле страницы на 1440. Было зашито 80 —
     на планшете не уменьшалось вместе с остальными полями (замечание 2026-11-10) */
  --kit-plate-pad: var(--page-margin-x);

  box-sizing: border-box;
  /* Пересборка 2026-09-13: блок стал островом. Раньше это была синяя полоса
     во всю ширину; теперь тёмная плита 1280 в полосе, вокруг — цвет страницы. */
  /* Снизу полный шаг --section-padding-y (160 / 80): ниже синяя полоса «Науки»,
     перед сменой фона везде один шаг; 80 читались как недорезанный край.
     Сверху поле снимает стык в base.css (.sc-cases + .sc-kit) — плита в рамке
     160 / 160 (правка 2026-09-28; в макете было 80 со всех сторон) */
  padding: var(--page-margin-x) var(--sc-pad-x) var(--section-padding-y); /* сверху 80 на 1440, дальше вместе с полем страницы */
  background: var(--background);
  color: var(--foreground);
}

.sc-kit *,
.sc-kit *::before,
.sc-kit *::after { box-sizing: border-box; }

/* Плита: тёмный фон, поля 80, копия 544 + квадрат 520 через 56 (макет) */
.sc-kit__inner {
  display: grid;
  grid-template-columns: 544fr 520fr;
  gap: var(--section-gap);
  align-items: start;
  padding: var(--kit-plate-pad);
  background: var(--background);
  color: var(--foreground);
}

.sc-kit__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
  min-inline-size: 0;
}

.sc-kit__kicker {
  margin: 0;
  color: var(--accent-foreground);
}

.sc-kit__title {
  margin: 0;
  max-inline-size: var(--sc-measure);
}

.sc-kit__note {
  margin: 0;
  max-inline-size: var(--sc-measure);
  /* NB: на accent inverse (blue/800 с 2026-09-08) muted-foreground даёт 4.56:1 —
     AA проходит впритык; если accent посветлеет, заметку переводить на accent-foreground. */
  color: var(--muted-foreground);
}

/* Button · primary */
.sc-kit__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--control-padding-y) var(--control-padding-x);
  border: var(--sc-line) solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  text-transform: uppercase;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: opacity var(--sc-dur) var(--sc-ease);
}

/* В Figma состояний нет — обязательны по CLAUDE.md */
.sc-kit__cta:hover { background: var(--sc-primary-hover); }

.sc-kit__cta:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.sc-kit__cta:active { opacity: 0.7; }

.sc-kit__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
}

.sc-kit__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .sc-kit__cta { transition: none; }
}

@media (max-width: 640px) {
  .sc-kit { padding: var(--section-padding-y-tight) var(--page-margin-x) var(--section-padding-y); }

  .sc-kit__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--page-margin-x);
  }

  .sc-kit__cta { inline-size: 100%; }
}