/* ==========================================================================
   Hero — Figma 3:3894 (425×288), 3:3580 (576×288), 3:3621 (768×288),
          3:3686 (1024×340), 3:3739 (1280×340), 3:3804 (4362×340)
   320–1023: 80 (pt) + 96 (H1) + 48 (gap) + 40 (подписи) + 24 (pb) = 288
   1024+:    80      + 144      + 48      + 44           + 24      = 340

   Разметка одна на все брейкпоинты. До 1024 они отличаются только шириной
   подписей (92 / 81 / 88) — растягивается расстояние между ними. На 1024
   вырастает сама шкала шрифта (H1 32 → 48, подписи 14 → 16), и высоты блоков
   меняются сами: правится только фиксированный средний блок. На 1280 макет
   повторяет 1024 до числа (те же 340, тот же средний блок 94×40, те же 106
   и 100 по краям) — своего медиазапроса не требует. На 1920 то же самое:
   контейнер упирается в 1872 и центрируется, подписи разъезжаются по краям
   этих 1872 (в макете 0 / 892 / 1772 при ширинах 106 / 94 / 100).
   ========================================================================== */

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4xl);
  padding-block: var(--spacing-6xl) var(--spacing-xl);
}

.hero__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-uppercase);
  text-align: center;
  white-space: nowrap;
}

.hero__title-accent {
  font-style: italic;
  font-weight: var(--font-weight-medium);
}

/* --- Подписи под заголовком --------------------------------------------- */

.hero__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.hero__meta-item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

/* Средний блок в макете — фрейм фиксированных 81×34 с текстом,
   выровненным по его геометрическому центру (40; 17) */
.hero__meta-item--center {
  position: relative;
  width: 81px;
  height: 34px;
}

.hero__meta-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text);
}

/* Строки подписи выровнены каждая по-своему — так они стоят в макете, и так
   же встают на любом языке. Раньше это делали пробелы внутри текста, но
   перевод их не повторял: на русской главной подписи стояли иначе, чем на
   английской (tools/build-home.mjs, metaText).

   Ширина колонки — из макета (92 и 88, на 1024+ 106 и 100); она минимальная,
   а не жёсткая: перевод длиннее раздвинет колонку, а не полезет на вторую
   строку. Поэтому же у строк nowrap — подпись из двух строк остаётся
   двухстрочной. */
.hero__meta-line {
  display: block;
  white-space: nowrap;
}

/* Слева: верхняя строка по центру колонки, нижняя растянута на всю её ширину
   (в макете «Design     Studio» с ручной разрядкой — это она). */
.hero__meta-item--start .hero__meta-text {
  min-inline-size: 92px;
}

.hero__meta-item--start .hero__meta-line:last-child {
  text-align: justify;
  text-align-last: justify;
}

.hero__meta-item--start .hero__meta-line:first-child,
.hero__meta-item--start .hero__meta-line--single {
  text-align: center;
}

/* Справа: ступенька — верхняя строка от левого края колонки, нижняя по
   правому. Когда строка одна, побеждает правило ниже: она встаёт по правому
   краю, как и весь блок. */
.hero__meta-item--end .hero__meta-text {
  min-inline-size: 88px;
}

.hero__meta-item--end .hero__meta-line:first-child {
  text-align: start;
}

.hero__meta-item--end .hero__meta-line:last-child {
  text-align: end;
}

.hero__meta-item--center .hero__meta-text {
  position: absolute;
  inset-block-start: 17px;
  inset-inline-start: 40px;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* 1024–1279 · Figma 3:3693 — тот же приём, фрейм 94×40, центр (47; 20).
   Крайние подписи (106 и 100) растут из размера шрифта сами. */
@media (min-width: 1024px) {
  .hero__meta-item--center {
    width: 94px;
    height: 40px;
  }

  .hero__meta-item--center .hero__meta-text {
    inset-block-start: 20px;
    inset-inline-start: 47px;
  }

  .hero__meta-item--start .hero__meta-text {
    min-inline-size: 106px;
  }

  .hero__meta-item--end .hero__meta-text {
    min-inline-size: 100px;
  }
}