/* Третий экран портфолио — ценность.
   Композиция по референсу: слева у самого края мелкая подпись в скобках,
   справа широкая колонка текста. Колонка не доходит до правого края,
   а первая строка утоплена вправо — от этого блок читается как разворот
   в журнале, а не как обычный абзац. */

/* Колонка текста и правое поле заданы в vw, потому что на референсе они
   отмеряны от края экрана, а не от полосы набора. Правое поле взято
   с референса — пустые 11%, но ужато до 8%: так весь текстовый блок
   сдвигается правее, ближе к середине экрана. Сама колонка расширена
   влево с референсных 54.5% до 71%: переносы заданы вручную, и строка
   «Помогаю командам с сильным продуктом» в узкую колонку не влезает.
   Левая колонка забирает остаток — подпись стоит по левому отступу
   страницы. Сумма колонок меньше экрана, поэтому вертикальная полоса
   прокрутки ничего не ломает. */
.value {
  display: grid;
  grid-template-columns: 1fr var(--value-column);
  align-items: start;
  /* Нижний отступ вдвое меньше верхнего: карточки под текстом читаются
     как его продолжение, а не как отдельный экран, — поэтому подтянуты
     к нему ближе. Сверху отступ прежний, он отбивает блок от заявления. */
  padding: clamp(4rem, 10vw, 9rem) var(--value-inset) clamp(1.5rem, 3.5vw, 3rem) var(--gutter);
}

/* Подпись слева. Та же, что над фразой предыдущего экрана: мелкий кегль,
   приглушённый тон. Иконку из референса не берём — Руслан просил без неё.
   Верхняя строка подписи выравнивается по первой строке текста: подпись
   мельче, поэтому её строка ниже, и разницу компенсируем отступом. */
.value__label {
  margin: 0;
  padding-top: calc((var(--value-size) * var(--value-leading) - var(--subtitle-size) * 1.2) / 2);
  color: var(--color-text-muted);
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.value__text {
  margin: 0;
  font-size: var(--value-size);
  font-weight: 700;
  line-height: var(--value-leading);
  letter-spacing: var(--statement-tracking);
  /* Утопленная первая строка — как в референсе. */
  text-indent: var(--value-indent);
}

/* Строка заданного переноса. Блочная — значит следующая строка всегда
   начинается с новой, независимо от ширины экрана. Отступ первой строки
   лежит на абзаце и наследуется каждой строкой-блоком, поэтому у всех,
   кроме первой, его гасим. */
.value__line {
  display: block;
  text-indent: 0;
}

.value__line:first-child {
  text-indent: var(--value-indent);
}

/* Вторая половина фразы приглушена — тот же приём, что в заголовке
   первого экрана и в референсе: сначала обещание, потом как оно
   выполняется. Граница проходит внутри строки, поэтому класс вешается
   и на целую строку, и на кусок внутри неё. */
.value__muted {
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  /* На телефоне две колонки не помещаются: подпись уходит над текстом,
     утопленная первая строка теряет смысл — строки и так короткие. */
  .value {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
    padding-right: var(--gutter);
  }

  .value__label {
    padding-top: 0;
  }

  /* Заданные переносы рассчитаны на широкий экран: в ширину телефона
     такие строки не влезают. Возвращаем текст в общий поток — пусть
     переносится сам. */
  .value__text,
  .value__line:first-child {
    text-indent: 0;
  }

  .value__line {
    display: inline;
  }
}