/* ─────────────────────────────────────────────────────────────
   s3 — три сервисные карточки в ряд
   Эталон: секция 758px, карточки 419×478 на y=100 (x = 72 / 511 / 949)
   ───────────────────────────────────────────────────────────── */
.promo {
  /* 100px до карточек сверху, 180px воздуха снизу: 100 + 478 + 180 = 758 */
  padding: 100px 0 180px;
}

/* Сетка подстраивается под число карточек: их было три, стало две
   (карточку мобильного приложения убрали). Жёсткие три колонки оставили
   бы справа пустое место. */
.promo__list {
  display: grid;
  /* Колонок ровно столько, сколько карточек, и все одинаковые.
     repeat(auto-fit, …) здесь плодил бы полсотни пустых колонок. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 19.5px;
}

/* ─── Карточка ─── */
.promo__card {
  display: flex;
  gap: 31px;                 /* 30 (паддинг) + 40 (иконка) + 31 = 101 → текст на x=173 */
  padding: 50px 30px 70px;   /* высоту задаёт содержимое — как на боевом сайте */
  background: var(--white);
  border-radius: 16px;       /* в эталоне 16px, а не общий --radius */
  /* Тень из карты: rgba(0,0,0,0.2) -30px 30px 100px 0 */
  box-shadow: -30px 30px 100px 0 rgba(0, 0, 0, 0.2);
}

/* Средняя карточка — бирюзовая заливка */
.promo__card--accent {
  background: var(--brand);
}

/* ─── Иконка ─── */
.promo__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Светло-сизый цвет иконок из эталона, в токенах такого оттенка нет */
  color: #ced6eb;
}
.promo__card--accent .promo__icon {
  color: var(--white);
}

/* ─── Текстовая колонка: ширина 288px ─── */
.promo__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.promo__title {
  font-family: var(--font-ui);
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  color: var(--ink);
}
.promo__card--accent .promo__title {
  color: var(--white);
}

.promo__text {
  margin-top: 20px;          /* низ заголовка + 20 → y=195 / 220 / 245 */
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 27px;
  font-weight: 400;
  color: var(--muted);
}
.promo__card--accent .promo__text {
  color: var(--white);
}

/* ─── Ссылка со стрелкой, прижата к низу карточки (y=481) ─── */
.promo__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 27px;
  font-weight: 500;
  color: var(--ink);
  transition: opacity 0.2s;
}
.promo__card--accent .promo__link {
  color: var(--white);
}
.promo__link:hover {
  opacity: 0.75;
}

.promo__link-icon {
  flex: 0 0 auto;
  transition: transform 0.2s;
}
.promo__link:hover .promo__link-icon {
  transform: translateX(4px);
}

/* ─── Третья карточка: QR + бейджи сторов (низ контента на y=508) ─── */
.promo__apps {
  display: flex;
  align-items: center;
  justify-content: center;   /* вся группа — по центру карточки */
  gap: 50px;                 /* одинаковый зазор слева и справа от линии */
  margin-top: auto;
  padding-top: 36px;         /* воздух между текстом и группой QR + кнопки */
}

.promo__qr {
  flex: none;
  display: flex;
  align-items: center;
}

/* Разделитель — самостоятельный элемент, поэтому стоит ровно
   посередине между QR-кодом и кнопками магазинов */
.promo__divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: #cfd3de;   /* оттенок из эталона, в токенах отсутствует */
}
.promo__qr img {
  width: 113px;
  height: 114px;
}

.promo__stores {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.promo__store img {
  width: 117px;
  height: 34px;
}
.promo__store {
  transition: opacity 0.2s;
}
.promo__store:hover {
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────
   Планшет: колонки схлопываются в одну
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .promo {
    padding: 70px 0 90px;
  }
  .promo__list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 560px;
    margin-inline: auto;
  }
  .promo__card {
    min-height: 0;
    padding: 40px 30px 45px;
    box-shadow: -14px 16px 44px 0 rgba(0, 0, 0, 0.14);
  }
  .promo__link {
    margin-top: 28px;
  }
  .promo__apps {
    margin-top: 28px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Телефон: иконка над текстом, меньше отступы
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .promo {
    padding: 48px 0 60px;
  }
  .promo__card {
    flex-direction: column;
    gap: 18px;
    padding: 30px 24px 34px;
  }
  .promo__title {
    font-size: 22px;
    line-height: 28px;
  }
  .promo__text {
    margin-top: 14px;
  }
  /* QR и бейджи — в столбик, без вертикального разделителя */
  .promo__apps {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .promo__qr {
    justify-content: flex-start;
  }
  .promo__stores {
    flex: 0 0 auto;
    background: none;
  }
}