/* Основа темы: сброс, типографика, ОДИН контейнер и ОДНА сетка.

   Правило, которое экономит больше всего времени: ни один компонент не задаёт себе
   максимальную ширину, боковые отступы и раскладку колонок. Он берёт `.container` и
   `.grid`. Иначе «подвинуть контент на 20 пикселей» превращается в обход двадцати
   файлов, в каждом из которых своя ширина, и в трёх она чуть другая. */
@layer theme.base {

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html:lang(ja),
html:lang(zh-CN) {
  line-break: strict;
  word-break: normal;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  /* Подвал прижат к низу окна: на короткой странице (каталог, договор) под ним нет
     пустой белой полосы. Растёт основной контент, шапка и подвал своей высоты. */
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}
body > main { flex: 1 0 auto; }

/* Единая семантическая шкала контента. Компоненты управляют раскладкой и цветом,
   но не изобретают собственный размер для одного и того же уровня заголовка. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); text-wrap: pretty; }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
p { margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-body); text-wrap: pretty; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; }
img { max-inline-size: 100%; block-size: auto; }
section[id] { scroll-margin-block-start: 24px; }

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

/* ── оболочка секции ───────────────────────────────────────────────────────── */

.section { background: var(--color-bg-page); }
.section--grey { background: var(--color-bg-section-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }

/* Единственная обёртка контента на всём сайте: секции, шапка, подвал. */
.container {
  inline-size: 100%;
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.container--section { padding-block: var(--space-section); }
.section--flush-top .container { padding-block-start: 0; }
.section--flush-bottom .container { padding-block-end: 0; }

.section__eyebrow {
  margin-block-end: 12px;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section__title {
  max-inline-size: var(--width-text);
  margin-block-end: 18px;
}
.section__lead { max-inline-size: var(--width-text); color: var(--color-text-body); }

.prose {
  display: flex;
  flex-direction: column;
  max-inline-size: var(--width-text);
  gap: 12px;
  color: var(--color-text-body);
}
.prose a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--color-accent-text); text-decoration-color: currentColor; }

/* ── единственная сетка ────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-grid-row) var(--space-grid-col);
  grid-template-columns: minmax(0, 1fr);
}
.grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--main-aside { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--label { gap: 14px 40px; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.grid--center { align-items: center; }
.grid--start { align-items: start; }
/* Текст и слот формы: слот не шире токена и остаётся сбоку до телефонной ширины,
   как в hero. */
.grid--slot {
  column-gap: var(--space-slot-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--width-slot));
}
.grid--slot-start { grid-template-columns: minmax(0, var(--width-slot)) minmax(0, 1fr); }
/* Текст и изображение пополам, рядом до телефонной ширины. */
.grid--media { column-gap: var(--space-slot-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--media-compact { grid-template-columns: minmax(0, 1fr) var(--width-media-compact); }

/* Одна точка перелома на всю тему. Число повторено здесь и в компонентах потому,
   что медиазапрос не умеет читать переменную, — а не потому, что их два. */
@media (max-width: 860px) {
  .grid--split, .grid--halves, .grid--main-aside, .grid--thirds, .grid--label {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  .grid--slot, .grid--slot-start, .grid--media, .grid--media-compact { grid-template-columns: minmax(0, 1fr); }
}

/* ── иконка (components/icon.html) ───────────────────────────────────────── */
.ge-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  inline-size: var(--size-icon-badge); block-size: var(--size-icon-badge);
  border-radius: var(--radius-md);
  background: var(--color-bg-accent-soft);
  color: var(--color-accent-button);
}
.ge-icon svg { display: block; inline-size: var(--size-icon); block-size: var(--size-icon); }
.section--grey .ge-icon { background: var(--color-bg-page); }

/* ── кнопка ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 42px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  font-weight: 600;
  cursor: pointer;
}
.btn--cta { background: var(--color-accent-button); color: var(--color-text-inverse); }
.btn--cta:hover { background: var(--color-accent-text); color: var(--color-text-inverse); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── фоновый знак бренда ───────────────────────────────────────────────────── */
/* Декоративная подложка, включается данными секции. Рисуется на ::before, чтобы её
   можно было поворачивать; текст всегда остаётся выше. */

.bg-pattern--mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mark-size: 165%; --mark-x: right var(--space-gutter); --mark-y: top 0;
  --mark-rotate: 0deg; --mark-origin: 100% 0%;
}
.bg-pattern--mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../assets/brand-mark.svg") no-repeat var(--mark-x) var(--mark-y) / auto var(--mark-size);
  transform: rotate(var(--mark-rotate));
  transform-origin: var(--mark-origin);
  pointer-events: none;
}
.bg-pattern--mark-side { --mark-size: 140%; --mark-x: left -6%; --mark-rotate: -9deg; --mark-origin: 0% 0%; }
.bg-pattern--mark-side::before { inset: 30% 0 auto 0; block-size: 100%; }
.bg-pattern--mark-bottom { --mark-size: 150%; --mark-x: right 8%; --mark-rotate: 11deg; }
.bg-pattern--mark-bottom::before { inset: 50% 0 auto 0; block-size: 100%; }
.bg-pattern--mark-small { --mark-size: 85%; --mark-x: right calc(var(--width-slot) + var(--space-slot-gap) + var(--space-gutter)); }
.bg-pattern--mark-small::before { inset: 10% 0 auto 0; block-size: 100%; }

@media (max-width: 860px) {
  .bg-pattern--mark { --mark-size: 120%; --mark-x: right -12%; }
  .bg-pattern--mark-side { --mark-x: left -30%; }
  .bg-pattern--mark-small { --mark-size: 85%; --mark-x: right calc(var(--width-slot) + var(--space-slot-gap) + var(--space-gutter)); }
}
/* Слот формы рядом с текстом до 640 px, поэтому и знак уходит вправо только на телефоне. */
@media (max-width: 640px) {
  .bg-pattern--mark-small { --mark-size: 45%; --mark-x: right var(--space-gutter); }
}


/* Соседние секции одного фона: два полных отступа подряд давали 116–128 px пустоты
   между разделами страницы маршрута. Сверху у следующей — малая доля отступа. */
.section:not(.section--grey) + .section:not(.section--grey) > .container--section,
.section--grey + .section--grey > .container--section {
  padding-block-start: calc(var(--space-section) * .15);
}

/* Пустые абзацы, оставшиеся после правок в редакторе, не дают пустого места. */
.prose > p:empty,
.prose > p:has(> br:only-child) { display: none; }

}