/* Who-It-Is-For-Section — Figma 2001:569, 1440x850 */

.who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  padding: 120px var(--gutter);
  background: var(--c-white);
}

/* --- header --------------------------------------------------------------- */

.who__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-shrink: 0;
}

/* Ширина «хаг»-подписей взята из макета: сборка Geist на вебе отрисовывает
   кириллицу на доли пикселя уже, поэтому боксы пилюль фиксируем явно, а текст
   центрируем, чтобы поля пилюли остались симметричными. */
.who__eyebrow-text,
.who__tag-text {
  flex-shrink: 0;
  text-align: center;
}

.who__eyebrow-text {
  width: 210px;
}

.who__title {
  width: 100%;
  color: var(--c-text);
  text-align: center;
  word-break: break-word;
}

/* --- grid ----------------------------------------------------------------- */

.who__grid {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  flex-shrink: 0;
}

.who__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
  height: 450px;
  border-radius: 20px;
  background: var(--c-surface-mist);
  box-shadow: 0 4px 24px 0 rgba(0, 20, 31, 0.08);
  overflow: clip;
}

.who__image {
  position: relative;
  width: 100%;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
}

.who__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.who__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  padding: 24px;
}

/* Стек текста в макете на 2px выше свободного места — карточка его подрезает. */
.who__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.who__tag {
  display: inline-flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.who__card:nth-child(1) .who__tag-text {
  width: 173px;
}

.who__card:nth-child(2) .who__tag-text {
  width: 89px;
}

.who__card:nth-child(3) .who__tag-text {
  width: 115px;
}

.who__card:nth-child(4) .who__tag-text {
  width: 122px;
}

/* Heading/H5 — 24/32, -2% */
.who__card-title {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  color: var(--c-text);
  word-break: break-word;
}

/* Paragraph/Regular/SM — 15/24, -2% */
.who__card-text {
  width: 100%;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.3px;
  color: var(--c-text-body);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Mobile artboard — Figma 50:276, 461x2060
   Ряд из четырёх карточек становится колонкой; сама карточка ниже (420 против
   450), потому что заголовок в более широком контенте укладывается в строку.
   ========================================================================== */

/* --- наведение -------------------------------------------------------------
   Карточка обрезана по скруглению (overflow: clip), поэтому снимок можно
   приблизить. Тень у неё есть и в покое — на наведении она просто становится
   глубже, а не появляется из ниоткуда.
   -------------------------------------------------------------------------- */

.who__card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.who__card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

.who__image > img {
  transition: transform 0.55s var(--ease);
}

.who__card:hover .who__image > img {
  transform: scale(1.06);
}

/* Широкий экран: фон секции во всю ширину, колонка — по центру. */
.who__header,
.who__grid {
  max-width: var(--content-w);
  margin-inline: auto;
}

@media (max-width: 767px) {
  /* Отбивка секции 120 → 60; gap 56 между шапкой и сеткой тот же. */
  .who {
    padding: 60px var(--gutter);
  }

  /* Heading/H3 — 32/40, -2%: на мобильном артборде заголовки секций мельче. */
  .who__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .who__eyebrow-text {
    width: 209px;
  }

  .who__grid {
    flex-direction: column;
    gap: 24px;
  }

  /* 420 — высота карточки на опорных 461px. Ниже по ширине подписи набирают
     лишние строки, поэтому высота задана минимумом: карточка растёт, а не
     подрезает текст. */
  .who__card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 420px;
  }

  /* 420 − 220 картинки = 200: контент занимает остаток карточки и тянется
     дальше, если текст не уложился. */
  .who__content {
    flex: 1 0 auto;
  }

  /* Chrome набирает Geist примерно на 1% уже, чем Figma (см. CONVENTIONS.md).
     На колонке в 333px это ~3px, и подпись четвёртой карточки успевает влезть
     в две строки вместо трёх. Резервируем эти пиксели паддингом: внешний бокс
     остаётся 333px, а перенос встаёт туда же, где он в макете. */
  .who__card-text {
    padding-right: 4px;
  }

  .who__card:nth-child(1) .who__tag-text {
    width: 170px;
  }

  .who__card:nth-child(2) .who__tag-text {
    width: 87px;
  }

  .who__card:nth-child(3) .who__tag-text {
    width: 112px;
  }

  .who__card:nth-child(4) .who__tag-text {
    width: 120px;
  }
}