/* ==========================================================================
   «Наши продукты помогают…» + три карточки показателей (63 / 200 / 7)
   Макет: карточки 467×468, сетка 3 колонки, зазор 20.
   ========================================================================== */

.kpi {
  padding-block: 12.5rem 12.5rem;
  background: var(--c-white);
  color: var(--c-spruce-deep);
}

.kpi__title { max-width: 75rem; }

.kpi__desc {
  max-width: 33.25rem;
  margin-top: 2.25rem;
}

.kpi__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: 4.5625rem;
}

.kpi__card {
  position: relative;
  aspect-ratio: 467 / 468;
  border-radius: var(--r-card);
  background: var(--c-spruce);
  overflow: hidden;
  isolation: isolate;
}

/* Число и подписи позиционируются как в макете — карточка фиксированной пропорции */
.kpi__num {
  position: absolute;
  top: 6%;
  left: 4%;
  font-size: 45cqw;
  line-height: 0.9;
  z-index: 2;
}

/* Колонка подписи у каждой карточки своя — в макете она начинается сразу
   за числом, а ширина числа разная (узлы 1:301, 1:306, 1:295). */
.kpi__meta {
  position: absolute;
  top: 5.3%;
  z-index: 2;
}

.kpi__card--effect .kpi__meta   { left: 45.2%; width: 46.7%; }  /* 63 */
.kpi__card--projects .kpi__meta { left: 61.7%; width: 32%; }    /* 200 */
.kpi__card--own .kpi__meta      { left: 29.1%; width: 46.7%; }  /* 7 */

/* У двухстрочной подписи текст идёт ближе — иначе он уезжает на 3D-объект */
.kpi__card--projects .kpi__label { min-height: 4.125rem; }

.kpi__label {
  min-height: 6.4375rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.58vw, 1.5rem);
  line-height: 1.17;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.kpi__label b {
  display: block;
  font-weight: inherit;
  color: var(--c-mint);
}

.kpi__text {
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--t-white-60);
}

/* 3D-объект внизу карточки.
   Рамка и кадрирование внутри неё — по макету (узлы 1:308, 1:309, 1:310):
   в Figma картинка увеличена и смещена внутри своей рамки, поэтому
   тянуть её целиком по ширине нельзя — получается другой кадр. */
.kpi__art {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.kpi__art img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* «63» — рамка 467×287 у нижнего края */
.kpi__art--effect { left: 0; top: 38.68%; width: 100%; height: 61.32%; }
.kpi__art--effect img { left: -21.49%; top: -6.17%; width: 165.52%; height: 151.58%; }

/* «200» — рамка 434×266 со скруглением, в макете отзеркалена по горизонтали */
.kpi__art--drones {
  left: 7.28%;
  top: 43.16%;
  width: 92.93%;
  height: 56.84%;
  border-radius: 0.875rem;
  transform: scaleX(-1);
}
.kpi__art--drones img { left: -37.25%; top: 8.76%; width: 149.24%; height: 157.1%; }

/* «7» — рамка 467×329 */
.kpi__art--own { left: 0; top: 29.7%; width: 100%; height: 70.3%; }
.kpi__art--own img { left: -21.49%; top: 7.39%; width: 165.52%; height: 132.23%; }

/* Контейнерные единицы, чтобы кегль числа жил от ширины карточки */
.kpi__card { container-type: inline-size; }

@media (max-width: 1024px) {
  .kpi { padding-block: 6rem; }
  .kpi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3.5rem; }
  .kpi__card:last-child { grid-column: span 2; aspect-ratio: 954 / 468; }
  .kpi__card:last-child .kpi__num { font-size: 22cqw; }
  .kpi__card:last-child .kpi__meta { width: 32%; }
}

/* Планшет (681–1180px). В макетной карточке текст стоит поверх 3D-объекта:
   на ширине десктопа они расходятся, а в узкой карточке описание ложится
   прямо на картинку. Поэтому карточка собирается потоком, как на телефоне:
   число, подпись, текст сверху, объект в отведённом поле снизу.
   Диапазон закрыт с обеих сторон — десктоп и телефон этот блок не видят.
   Селекторы с :last-child повторяют врезку на 1024px: без равной силы
   её правила побеждают (см. HANDOFF, 4.3). */
@media (min-width: 681px) and (max-width: 1180px) {
  .kpi { padding-block: 6rem; }
  .kpi__grid { margin-top: 3.5rem; }

  .kpi__card,
  .kpi__card:last-child {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    /* нижнее поле — под рамку объекта: её высота 62% ширины карточки */
    padding: 1.5rem 1.5rem calc(62% + 0.75rem);
  }

  .kpi__num,
  .kpi__meta,
  .kpi__card--effect .kpi__meta,
  .kpi__card--projects .kpi__meta,
  .kpi__card--own .kpi__meta,
  .kpi__card:last-child .kpi__meta {
    position: static;
    left: auto;
    width: auto;
  }

  .kpi__num,
  .kpi__card--projects .kpi__num,
  .kpi__card:last-child .kpi__num { font-size: min(44cqw, 9.375rem); }
  .kpi__meta { margin-top: 0.75rem; }
  .kpi__label,
  .kpi__card--projects .kpi__label { min-height: 0; margin-bottom: 0.625rem; font-size: 1.25rem; }

  .kpi__art,
  .kpi__art--effect,
  .kpi__art--drones,
  .kpi__art--own {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 62;
  }
}

/* Портретный планшет: третья карточка идёт во всю ширину под двумя первыми.
   Объект в ней встаёт справа на всю высоту, текст — слева. */
@media (min-width: 681px) and (max-width: 1024px) {
  .kpi__card:last-child { padding: 1.5rem 52% 1.75rem 1.5rem; }

  .kpi__card:last-child .kpi__art {
    left: auto;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* На телефоне накладка числа на подпись неизбежна — переходим на обычный поток:
   число, подпись, текст сверху вниз, 3D-объект внизу под зарезервированным полем. */
@media (max-width: 680px) {
  .kpi { padding-block: 4rem; }
  .kpi__desc { margin-top: 1.5rem; }
  /* Горизонтальная раскладка приходит из slider.css; здесь снимаем сетку
     и выравниваем карточки по высоте самой длинной. */
  .kpi__grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }

  .kpi__card,
  .kpi__card:last-child {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    grid-column: auto;
    padding: 1.5rem 1.5rem 13.125rem;
  }

  .kpi__num,
  /* Селекторы с модификатором карточки — иначе макетные `width: 46.7%`
     остаются сильнее и подпись жмётся в колонку шириной в два слова. */
  .kpi__meta,
  .kpi__card--effect .kpi__meta,
  .kpi__card--projects .kpi__meta,
  .kpi__card--own .kpi__meta {
    position: static;
    left: auto;
    width: auto;
  }

  /* Селектор с :last-child обязателен: во врезке на 1024px у последней
     карточки кегль 22cqw, и без равной силы он побеждал — «7» выходила
     вдвое мельче, чем «63» и «200». */
  .kpi__num,
  .kpi__card--projects .kpi__num,
  .kpi__card:last-child .kpi__num { font-size: 44cqw; }
  .kpi__meta { margin-top: 0.625rem; }
  .kpi__label { min-height: 0; margin-bottom: 0.625rem; }

  /* В потоке рамка встаёт под зарезервированное поле снизу, кадр сохраняем */
  .kpi__art,
  .kpi__art--effect,
  .kpi__art--drones,
  .kpi__art--own {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 12.5rem;
  }
}