/* ==========================================================================
   Главная — «Не нашли нужную позицию?», тёмная панель, строка-CTA

   Макет: группа 1:638.
   Карточка-строка: bg_white-grey, радиус 24, отступ 32, зазор 47,
   круг иконки 140×140 на #E6EDFF.
   Тёмная панель: градиент bg_blue_gradient_2, отступ 64, радиус 32,
   карточки на белом 12 %, радиус 24, круг иконки 82×82 синий.

   Классы .feature-row и .glass-panel переиспользуются на внутренних
   страницах (партнёрам, доставка), поэтому лежат в этом файле.
   ========================================================================== */

/* Единственный разрыв на главной, который не равен 190: «Наша продукция»
   (1:292) кончается на 2491, а эта группа (1:638) начинается на 2713 —
   222. Остальные девять промежутков ровно 190, поэтому добираем 32 здесь,
   а не трогаем общий ритм. */
.request { padding-top: calc(var(--section-gap) / 2 + var(--space-32)); }

/* Заголовок с подзаголовком в макете занимает 169 до сетки (нода 1:668):
   58 + 24 + 68 + 20. Общий .section-head даёт 48 снизу — здесь нужно 20. */
.section-head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: 20px;
}

.request__subtitle { max-width: 645px; }

/* Сетка в макете 1840×588 (нода 1:669): две строки по 284 с зазором 20.
   Без фиксированной высоты строки карточки сжимаются по тексту, и вся
   секция уезжает вверх на сотню пикселей. */
.request__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 284px;
  gap: 20px;
  margin-bottom: 20px;
}

/* --- Карточка-строка ------------------------------------------------------ */

.feature-row {
  display: flex;
  align-items: center;
  gap: 47px;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.feature-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  padding: var(--space-32);
  border-radius: var(--radius-pill);
  background: #E6EDFF;
}

.feature-row__icon svg { width: 100%; height: 100%; }

.feature-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 auto;
  min-width: 0;
}

.feature-row__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.feature-row__line {
  display: block;
  height: 1px;
  background: var(--color-border);
}

.feature-row__desc {
  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);
}

/* Строка-CTA: круг иконки 82 на синем, справа кнопка 376. */
.feature-row--cta {
  gap: var(--space-32);
}

.feature-row--cta .feature-row__icon {
  width: 82px;
  height: 82px;
  padding: 17px;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.feature-row--cta .feature-row__icon svg { width: 48px; height: 48px; }
.feature-row--cta .feature-row__text { gap: var(--space-16); }

.feature-row__btn {
  width: 376px;
  flex-shrink: 0;
}

/* --- Тёмная панель со стеклянными карточками ------------------------------ */

/* Тёмная панель в макете 1840×481 при отступе 64 — карточки внутри
   ровно 353 (нода 1:639). */
.glass-panel {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  min-height: 481px;
  padding: var(--space-64);
  margin-bottom: 20px;
  border-radius: var(--radius-xl);
  background: linear-gradient(to left, #0E1534 0%, #4867BF 50%, #0E1534 100%);
}

.glass-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12);
  color: var(--color-text-invert);
}

.glass-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  padding: 17px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.glass-card__icon svg { width: 48px; height: 48px; }

.glass-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.glass-card__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.glass-card__desc {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* --- Ниже 1920 px --------------------------------------------------------- */

@media (max-width: 1500px) {
  .feature-row { gap: var(--space-24); }
  .feature-row__icon { width: 96px; height: 96px; padding: var(--space-16); }
  .glass-panel { padding: var(--space-32); flex-wrap: wrap; }
  .glass-card { flex-basis: calc(50% - var(--space-16)); }
}

@media (max-width: 1100px) {
  .request__grid { grid-template-columns: 1fr; }
  .feature-row--cta { flex-wrap: wrap; }
  .feature-row__btn { width: 100%; }
}

@media (max-width: 700px) {
  .feature-row { flex-direction: column; align-items: flex-start; padding: var(--space-24); }
  .feature-row__title { font-size: var(--fs-24); }
  .glass-card { flex-basis: 100%; }
  .glass-card__title { font-size: var(--fs-24); }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  .glass-panel {
    min-height: 0;
    padding: var(--space-24);
  }

  /* Карточки в колонку не должны держать десктопные 284 по высоте. */
  .request__grid { grid-auto-rows: auto; }

  .feature-row__icon { width: 64px; height: 64px; padding: var(--space-12); }
  .feature-row--cta .feature-row__icon svg { width: 32px; height: 32px; }
}

/* --- Телефон: панели во весь экран (см. пояснение в front-hero.css) -------- */
@media (max-width: 700px) {
  .glass-panel,
  .feature-row {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
    padding-inline: var(--side-padding);
  }
}
