/* Страница кейса: сам рассказ — абзацы, подзаголовки и снимки
   с подписями. Кегли общесайтовые: текст тот же, что в карточках
   «О проекте» и «Задача» выше, подзаголовки — что заголовки в них.

   Блок стоит по колонке снимка, но строка текста в такую ширину
   читается плохо, поэтому абзацу задан свой потолок в em — он растёт
   вместе с кеглем и держит строку примерно в 65 знаков.
   Подпись под снимком мельче текста и приглушена — она подписывает
   картинку, а не продолжает рассказ. */

.case-story {
  width: min(calc(var(--case-media) + var(--gutter) * 2), 100%);
  margin-inline: auto;
  /* Снизу отбивку задаёт футер — у него своё верхнее поле, здесь
     остаётся только небольшой запас. */
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter) clamp(1rem, 3vw, 2.5rem);
}

.case-story__text {
  max-width: 36em;
  margin-block: 0 1.15em;
  font-size: var(--case-text-size);
  font-weight: 500;
  line-height: 1.45;
}

/* Подзаголовок отбит сверху заметно сильнее, чем идут абзацы между
   собой: он делит рассказ на части. */
.case-story__subtitle {
  margin-block: 2.4em 0.9em;
  font-size: var(--project-title-size);
  font-weight: 700;
  line-height: 1.15;
}

/* Первый подзаголовок после абзаца не удваивает отбивку — нижний
   margin абзаца схлопывается с верхним у заголовка сам, но после
   снимка схлопывания нет, поэтому отбивку задаём здесь. */
.case-story__figure + .case-story__subtitle {
  margin-top: 1.8em;
}

/* Снимок в рассказе — во всю ширину блока, с подписью под ним. */
.case-story__figure {
  margin: 1.8em 0;
}

.case-story__photo {
  width: 100%;
  border-radius: var(--case-photo-radius);
}

/* Под одной подписью бывает два снимка — отбиваем их друг от друга. */
.case-story__photo + .case-story__photo {
  margin-top: 0.9em;
}

.case-story__caption {
  margin-top: 0.9em;
  color: var(--color-text-soft);
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.45;
}

/* Вынос на правое поле: важная цифра из абзаца, продублированная
   крупно, и подпись под ней. Лежит внутри абзаца и всплывает вправо
   за его правый край — колонка снимка шире колонки текста, и это
   пустое поле как раз под такие выносы.
   По умолчанию (узкий экран) вынос идёт обычным блоком в потоке:
   поля там нет. */
.case-story__aside {
  display: block;
  margin-block: 1.4em;
}

.case-story__value {
  display: block;
  font-size: var(--case-stat-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.case-story__label {
  display: block;
  margin-top: 0.7em;
  color: var(--color-text-soft);
  font-size: var(--card-text-size);
  font-weight: 500;
  line-height: 1.4;
}

/* Справка о проекте — тот же вынос, но вместо крупной цифры пара
   строк «метка — значение». Стоит у первого абзаца: читатель понимает,
   о ком кейс, ещё не начав читать. */
.case-story__meta {
  display: block;
}

.case-story__meta + .case-story__meta {
  margin-top: 1.1em;
}

.case-story__meta-key {
  display: block;
  margin-bottom: 0.35em;
  color: var(--color-text-soft);
  font-size: var(--card-text-size);
  font-weight: 500;
  line-height: 1.4;
}

.case-story__meta-value {
  display: block;
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.35;
}

/* Поле справа появляется только там, где оно есть: колонка снимка
   минус колонка текста. Порог выше обычного 1024px: у́же кегль текста
   упирается в нижнюю границу clamp, колонка перестаёт сжиматься
   вместе с экраном, и вынос вылезает за край. */
@media (min-width: 1200px) {
  .case-story__aside {
    float: right;
    /* Соседний вынос не наезжает на предыдущий. */
    clear: right;
    width: var(--case-stat-width);
    /* Отрицательное поле выносит блок за правый край колонки текста —
       иначе он вставал бы внутрь неё и обтекался. */
    margin: 0.2em calc(-1 * (var(--case-stat-width) + var(--case-stat-gap))) 1.5em 0;
  }
}

@media (max-width: 767px) {
  /* Колонка снимается, как и у карточек выше: на телефоне рассказ
     идёт во всю ширину экрана и стоит с ними по одной линии. */
  .case-story {
    width: 100%;
  }
}