/* ============================================================
   ABM Laboratory — Base
   Reset + типографика + utility-классы.
   Подключается ПОСЛЕ tokens.css, ДО components.css.
   ============================================================ */

/* ---------- RESET ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* см. комментарий у body — обрезаем горизонтальное переполнение на обоих уровнях */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Декоративные псевдо-элементы (hero-свечения и т.п.) выступают за левый/правый
     край вьюпорта и давали горизонтальный скролл. clip (а не hidden), чтобы
     не ломать position: sticky — clip не создаёт скролл-контейнер. */
  overflow-x: clip;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); }

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

ul, ol { padding: 0; margin: 0; list-style: none; }

p { margin: 0; }

/* ---------- ТИПОГРАФИКА ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.abm-prose p { text-wrap: pretty; }
.abm-prose p + p { margin-top: var(--sp-4); }
.abm-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* eyebrow — маленькая надпись над H2 */
.abm-eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #2E4A73;   /* было var(--color-accent) #4FA3E3 (2.7:1) → читаемый навотемный ~7:1 */
}

.abm-lead {
  font-size: var(--fs-body-l);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: pretty;
}

/* ---------- LAYOUT UTILITIES ---------- */

.abm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.abm-section {
  padding-block: var(--section-gap);
}

.abm-section--surface { background: var(--color-surface); }
.abm-section--dark    { background: var(--color-primary); color: var(--color-on-primary); }
.abm-section--dark h1,
.abm-section--dark h2,
.abm-section--dark h3,
.abm-section--dark h4 { color: var(--color-on-primary); }
.abm-section--dark .abm-eyebrow { color: var(--color-accent-soft); }

.abm-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
}

.abm-stack > * + * { margin-top: var(--sp-4); }
.abm-stack-lg > * + * { margin-top: var(--sp-6); }
.abm-stack-xl > * + * { margin-top: var(--sp-7); }

/* Заголовок секции (eyebrow + h2 + лид) */
.abm-section-head {
  max-width: 56ch;
  margin-bottom: var(--sp-7);
}
.abm-section-head__eyebrow { margin-bottom: var(--sp-3); }
.abm-section-head__lead { margin-top: var(--sp-4); color: var(--color-muted); }

/* ---------- ACCESSIBILITY ---------- */

.abm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.abm-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.abm-skip-link:focus { top: var(--sp-4); color: var(--color-on-primary); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}