/* ==========================================================================
   БСК · Дизайн-система — БАЗА
   Сброс, типографика документа, сетка полосы, доступность.
   Подключается ПОСЛЕ tokens.css и ДО components.css.
   ========================================================================== */

/* --- 1. Сброс -------------------------------------------------------- */

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

html {
  /* clip, не hidden: hidden ломает position:sticky у шапки */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* якоря не уезжают под липкую шапку */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Ни одна ячейка сетки с картинкой не должна распирать полосу.
   minmax(0,1fr) вместо голого 1fr — правило, а не рекомендация. */
[class*="bsk-grid"] > * { min-width: 0; }

/* --- 2. Типографика документа ---------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-style: normal;         /* курсивных заголовков в системе нет */
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  overflow-wrap: anywhere;    /* «энергоэффективность» не рвёт полосу на 320 */
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lead); font-family: var(--font-text); font-weight: var(--weight-semibold); }

p  { margin: 0 0 var(--space-md); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--weight-semibold); }

/* Курсив живёт ТОЛЬКО внутри абзаца. В заголовках — запрещён. */
h1 em, h2 em, h3 em, h4 em,
h1 i, h2 i, h3 i, h4 i { font-style: normal; color: var(--color-accent); }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

small { font-size: var(--text-small); color: var(--color-ink-2); }

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
li + li { margin-top: var(--space-xs); }

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--color-line-soft);
  margin: var(--space-2xl) 0;
}

::selection { background: var(--color-surface); color: var(--color-primary); }

/* --- 3. Полоса и сетка ------------------------------------------------ */

.bsk-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bsk-container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.bsk-container--wide   { max-width: none; padding-inline: var(--gutter); }

.bsk-section { padding-block: var(--section-y); }
.bsk-section--surface  { background: var(--color-surface-2); }
.bsk-section--dawn     { background: var(--gradient-dawn); }
.bsk-section--primary  { background: var(--color-primary); color: var(--color-paper); }
.bsk-section--primary :is(h1,h2,h3,h4) { color: var(--color-paper); }
.bsk-section--primary a { color: var(--color-paper); }
.bsk-section--flush    { padding-block: 0; }

/* 12-колоночная сетка. Мобильный — одна колонка, всегда. */
.bsk-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (max-width: 767px) {
  .bsk-grid { grid-template-columns: minmax(0, 1fr); }
  .bsk-grid > [class*="bsk-col-"] { grid-column: auto !important; }
}

.bsk-col-3  { grid-column: span 3; }
.bsk-col-4  { grid-column: span 4; }
.bsk-col-5  { grid-column: span 5; }
.bsk-col-6  { grid-column: span 6; }
.bsk-col-7  { grid-column: span 7; }
.bsk-col-8  { grid-column: span 8; }
.bsk-col-12 { grid-column: span 12; }

@media (min-width: 768px) and (max-width: 1023px) {
  .bsk-col-3, .bsk-col-4 { grid-column: span 6; }
  .bsk-col-5, .bsk-col-7 { grid-column: span 12; }
}

/* Автосетка карточек: сама решает, сколько колонок влезло. */
.bsk-grid-auto {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.bsk-grid-auto > * { min-width: 0; }

.bsk-stack     { display: flex; flex-direction: column; gap: var(--space-md); }
.bsk-stack--lg { gap: var(--space-xl); }
.bsk-row       { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* --- 4. Доступность --------------------------------------------------- */

/* Кольцо фокуса появляется МГНОВЕННО. Анимировать его нельзя. */
:focus-visible {
  outline: var(--border-strong) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

.bsk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ссылка «к содержимому» — первый tab-stop на каждой странице */
.bsk-skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.bsk-skip-link:focus-visible { transform: translateY(0); }