/* ==========================================================================
   Главная — статистика и «Как мы работаем?»

   Статистика — макет 1:348 (1839×688, отступ 32): фото 877.5×624 слева,
   справа 2×2 плитки 428.75×302 с зазором 20. Значение 96 Medium синим,
   подпись 24 Regular.

   «Как мы работаем?» — макет 1:531 (1840×500, отступ 64): заголовок,
   подзаголовок, пять шагов, соединённых пунктиром на высоте 285.
   ========================================================================== */

/* --- Статистика ----------------------------------------------------------- */

.stats__inner {
  display: flex;
  gap: 20px;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.stats__photo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 624px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stats__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Шторка под текстом — тот же градиент, что в макете накрывает фото. */
.stats__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-48);
  color: var(--color-text-invert);
  background: linear-gradient(to top, rgba(14, 21, 52, .85) 0%, rgba(14, 21, 52, 0) 100%);
}

.stats__since {
  font-size: var(--fs-96);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-96);
}

.stats__since-text {
  max-width: 417px;
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  min-height: 302px;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
}

.stat-tile__value {
  font-size: var(--fs-96);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-96);
  color: var(--color-brand);
}

.stat-tile__label {
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

/* --- «Как мы работаем?» --------------------------------------------------- */

.how__panel {
  /* Панель в макете 1840×500 (нода 1:531). */
  height: 500px;
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.how__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-48);
}

.how__subtitle {
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

/* Пунктир между шагами: в макете это одна линия на всю ширину под
   иконками (нода 1:532, y=285). Рисуем фоном контейнера, чтобы линия
   не разрывалась между шагами. */
.how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-24);
}

.how__steps::before {
  content: '';
  position: absolute;
  top: 41px;
  left: 41px;
  right: 41px;
  border-top: 1px dashed var(--color-border);
}

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.how-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  padding: 17px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  color: var(--color-brand);
}

.how-step__icon svg { width: 48px; height: 48px; }

.how-step__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.how-step__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* --- Ниже 1920 px --------------------------------------------------------- */

@media (max-width: 1500px) {
  .stats__since { font-size: var(--fs-48); }
  .stat-tile__value { font-size: 64px; }
  .how__panel { padding: var(--space-32); }
  .how__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
  .how__steps::before { display: none; }
}

@media (max-width: 900px) {
  .stats__inner { flex-direction: column; }
  .stats__photo { min-height: 320px; }
  .how__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat-tile { min-height: 0; }
  .how__steps { grid-template-columns: 1fr; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 1100px) {
  /* Шаги складываются в колонку — фиксированная высота панели 500
     из десктопной раскладки контент не вмещает. */
  .how__panel { height: auto; }
}

@media (max-width: 700px) {
  .stat-tile__value { font-size: var(--fs-40); letter-spacing: var(--ls-40); }
  .stat-tile__label { font-size: var(--fs-16); }

  .stats__since { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .stats__since-text { font-size: var(--fs-18); }
  .stats__caption { padding: var(--space-24); }

  .how__subtitle { font-size: var(--fs-18); }
  .how__head { gap: var(--space-12); margin-bottom: var(--space-24); }

  /* Шаги в колонку по одному растягивали панель на два экрана: иконка,
     заголовок и текст стояли друг под другом с макетными зазорами.
     Компактный ряд: иконка слева, заголовок и текст справа в две строки. */
  .how__steps { gap: var(--space-16); }

  .how-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--space-16);
    row-gap: var(--space-4);
    align-items: start;
  }

  .how-step__icon {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    padding: var(--space-8);
  }

  .how-step__icon svg { width: 28px; height: 28px; }

  .how-step__title { font-size: var(--fs-18); letter-spacing: var(--ls-18); }
  .how-step__text { font-size: var(--fs-16); }
}

/* --- Телефон: панели во весь экран (см. пояснение в front-hero.css) --------
   Разворачивается сама серая панель .stats__inner; плитки и фото внутри
   неё остаются карточками со скруглениями — как стеклянные строки внутри
   панели «Партнёрам». */
@media (max-width: 700px) {
  .stats__inner,
  .how__panel {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
    padding-inline: var(--side-padding);
  }
}