/* Results-Section — Figma 2001:491 / wide 122:1086, 1440×… */

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

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

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

.results__eyebrow-text {
  word-break: break-word;
}

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

.results__subtitle {
  width: 720px;
  color: var(--c-text-soft);
  text-align: center;
  word-break: break-word;
}

/* --- content row ---------------------------------------------------------- */

.results__content {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  flex-shrink: 0;
}

.results__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
}

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

/* --- card ----------------------------------------------------------------- */

/* Обводка в Figma внутренняя: карточка ровно 302x234 вместе с рамкой,
   поэтому отступ уменьшен на её толщину (1 + 23 = 24 по макету). */
.results__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--c-line-steel);
  border-radius: 16px;
  overflow: hidden;
}

.results__card-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
}

.results__card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.results__card-photo--crop {
  top: -17.52%;
  left: -10.94%;
  right: auto;
  bottom: auto;
  width: 121.89%;
  height: 117.52%;
}

.results__card-photo--bottom {
  object-position: bottom;
}

.results__card-photo--cover {
  object-fit: cover;
}

.results__card-veil {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(236, 243, 245, 0.4) 0%, #ecf3f5 85.173%);
}

.results__card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

/* Белая обводка тоже внутренняя: кружок 40x40 при иконке 16x16. */
.results__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 2px solid var(--c-white);
  border-radius: 100px;
  background: var(--c-primary-tint);
  flex-shrink: 0;
}

.results__glyph {
  position: absolute;
}

.results__glyph > img {
  width: 100%;
  height: 100%;
  max-width: none;
  position: absolute;
}

.results__glyph--face-smile {
  inset: 6.25%;
}

.results__glyph--flame {
  inset: 0 7.81% 6.34% 7.81%;
}

.results__glyph--chevrons {
  inset: 12.52% 12.48%;
}

.results__glyph--shield {
  inset: 6.25% 6.25% 3.13% 6.25%;
}

.results__tag {
  display: flex;
  align-items: flex-start;
  padding: 3px 11px;
  border: 1px solid var(--c-primary-border);
  border-radius: 100px;
  background: var(--c-white);
  filter: drop-shadow(0px 4px 5px rgba(2, 10, 13, 0.15));
  flex-shrink: 0;
}

.results__tag p{
  margin: 0;
}

.results__tag-text {
  color: var(--c-primary);
  white-space: nowrap;
  word-break: break-word;
}

.results__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  word-break: break-word;
}

.results__value {
  width: 100%;
  color: var(--c-text);
}

.results__label {
  width: 100%;
  color: var(--c-text-body);
}

.results__source {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  color: var(--c-text-soft);
  word-break: break-word;

}

/* --- right visual — Figma 122:1136, квадрат 484×484 ---------------------- */

.results__visual-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 484px;
  height: 500px;
  position: relative;
  top: -8px;
}

.results__visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: var(--c-surface-mist);
  box-shadow: 0px 4px 24px 0px rgba(0, 20, 31, 0.08);
  overflow: hidden;
}

.results__lifestyle {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
}

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

/* --- mobile artboard — Figma 50:200 ---------------------------------------
   Одна колонка: фото сверху (квадрат 1:1), затем четыре карточки.
   Карусели у фото нет — один статичный кадр без стрелок и точек.
   -------------------------------------------------------------------------- */

/* --- наведение -------------------------------------------------------------
   У карточки есть overflow: hidden, поэтому кадр можно приблизить — он не
   вылезет за скругление. Масштаб небольшой: снимки здесь уже кадрированы под
   макет, и заметное приближение сдвинуло бы сюжет.
   -------------------------------------------------------------------------- */

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

.results__card:hover {
  transform: translateY(var(--lift));
  border-color: var(--c-line-sky);
  box-shadow: var(--shadow-lift-soft);
}

.results__card-photo {
  transition: transform 0.5s var(--ease);
}

.results__card:hover .results__card-photo {
  transform: scale(1.05);
}

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

@media (max-width: 767px) {
  .results {
    gap: 40px;
    padding: 60px var(--gutter);
  }

  /* Заголовок секции на мобильном набран кеглем H3 (32/40, -2%). */
  .results__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  /* 720px десктопа — это ширина колонки; на мобильном подзаголовок во всю её. */
  .results__subtitle {
    width: 100%;
  }

  /* На мобильном все четыре кадра заданы одинаково — object-cover во всю
     карточку (экспорт 95:1434), без процентных кропов. Десктопные варианты
     --crop и --bottom растягивали снимок: карточка там 302x234, а здесь
     381x250, и заданный процентами бокс менял пропорции вместе с ней. */
  .results__card-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .results__content {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  /* В макете фото стоит над карточками; разметку не переставляем.
     На мобилке тоже квадрат 1:1 — на всю ширину колонки. */
  .results__visual-slot {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .results__visual {
    position: relative;
  }

  .results__grid {
    flex: 0 0 auto;
  }

  /* Две строки по две карточки разворачиваются в одну колонку: шаг между
     строками и внутри строки одинаковый (16), так и получается ряд из четырёх. */
  .results__row {
    flex-direction: column;
  }

  .results__card {
    flex: 0 0 auto;
    width: 100%;
    gap: 32px;
  }
}