/**
 * Второй экран главной: чем я занимаюсь.
 * Токены, сброс и поверхности — в base.css.
 */

.intro {
  padding: 56px 24px;
  background: var(--paper);
}

/* мобильный порядок: тезис, заголовок, абзац, итоговая формула */
.intro__grid {
  display: grid;
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
}

.intro__kicker,
.intro__title,
.intro__formula {
  margin: 0;
  text-transform: uppercase;
}

/* итоговая строка: типографика — общий стиль приписки .u-caption */

.intro__kicker {
  text-wrap: balance;       /* строки равной длины: без одинокого слова в хвосте */
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  line-height: calc(0.95 * var(--lh-display));
  letter-spacing: -0.01em;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 8vw, 2.9rem);   /* ≈ ¾ заголовка первого экрана */
  line-height: calc(0.9 * var(--lh-display));
  letter-spacing: -0.02em;
}

.intro__text {
  max-width: 62ch;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

.intro__formula { margin-top: 8px; }

/* в тезисе «ОСНОВАННЫЙ» стоит под «НАД», «ЧЁТКОЙ» под «ПРОДУКТОМ»: хвост «Д»
   садится на «Й» и «Ё» при межстрочном ниже 0,92 — общий множитель тут тесен */
:lang(ru) .intro__kicker { line-height: 1.05; }

/* ── Десктоп ──────────────────────────────────────────────── */
/*
 * Тексты разнесены по углам карточки: слева вверху тезис, слева внизу формула,
 * справа вверху заголовок, справа внизу абзац. Правая пара выровнена
 * по правому краю.
 */
@media (min-width: 900px) {
  /* высота по содержимому: углы задаёт сетка, а не пустота посередине */
  .intro {
    padding: clamp(48px, 4.4vw, 76px) clamp(32px, 2.9vw, 52px);   /* как у заявления в первом экране */
  }

  /* правая колонка по ширине заголовка или абзаца, но не шире 58% —
     на узком десктопе тезису слева иначе не остаётся места */
  .intro__grid {
    max-width: none;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) fit-content(58%);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kicker  title"
      "formula text";
    column-gap: clamp(32px, 3vw, 48px);
    row-gap: clamp(48px, 5vw, 88px);             /* верхняя пара отделена от нижней */
  }

  .intro__kicker {
    grid-area: kicker;
    align-self: start;
    max-width: 14em;                             /* блок в 2–3 строки, а не одна строка через полкарточки */
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);     /* не крупнее «DSGN DNA» на видео */
    /* верх тезиса на одной линии с верхом заголовка: у заголовка строка ниже */
    padding-top: 0.12em;
  }

  /* правая пара прижата к правому краю карточки */
  .intro__title {
    grid-area: title;
    align-self: start;
    text-align: right;
    font-size: clamp(2.4rem, 3.8vw, 4.6rem);     /* ≈ ¾ заголовка первого экрана: h2 не громче h1 */
  }

  .intro__text {
    grid-area: text;
    justify-self: end;
    align-self: end;
    text-align: right;
    margin: 0;
    font-size: clamp(16px, 1.05vw, 17px);
    line-height: 1.45;
  }

  .intro__formula {
    grid-area: formula;
    align-self: end;
    margin: 0;
  }
}

/* смайлик держится одной строкой с последним словом — не отрывается на свою строку */
.intro__smile { white-space: nowrap; }