/* ═══════════════════════════════════════════════════════════
   ИЗОБРАЖЕНИЯ: фоны секций и иллюстрации
   Подключается после styles.css. Файлы лежат в папке images/.
   ═══════════════════════════════════════════════════════════ */

/* ── Фоны секций ──────────────────────────────────────────
   Края каждого фона сведены в --bg, переходы между секциями бесшовные.
   Для экранов до 1280 px грузится облегчённая версия @1440. */

/* Hero: сеть агентов справа, слева спокойная зона под заголовок */
.hero {
  background: var(--bg) url("images/bg/bg-hero.webp") 72% center / cover no-repeat;
}
.hero__glow { display: none; }   /* свечение уже нарисовано в фоне */

/* Польза: потоки данных в нижней трети */
#benefits { background: var(--bg) url("images/bg/bg-benefits.webp") center bottom / cover no-repeat; }

/* Доверие: сетка-«фундамент» внизу, соты справа сверху */
#trust { background: var(--bg) url("images/bg/bg-trust.webp") center / cover no-repeat; }

/* Форма: волны-сигналы из углов, центр под форму спокойный */
#form { background: var(--bg) url("images/bg/bg-form.webp") center / cover no-repeat; }

/* Контакты: светящаяся дуга горизонта у нижнего края */
#contacts { background: var(--bg) url("images/bg/bg-contacts.webp") center bottom / cover no-repeat; }

@media (max-width: 1280px) {
  .hero      { background-image: url("images/bg/bg-hero@1440.webp"); }
  #benefits  { background-image: url("images/bg/bg-benefits@1440.webp"); }
  #trust     { background-image: url("images/bg/bg-trust@1440.webp"); }
  #form      { background-image: url("images/bg/bg-form@1440.webp"); }
  #contacts  { background-image: url("images/bg/bg-contacts@1440.webp"); }
}
@media (max-width: 720px) {
  /* вертикальный вариант: визуал внизу, текст сверху */
  .hero { background: var(--bg) url("images/bg/bg-hero-mobile@720.webp") center bottom / cover no-repeat; }
}

/* ── Иллюстрации ─────────────────────────────────────────── */

/* Картинка в верхней части карточки «Пользы» */
.card__media {
  display: block;
  width: calc(100% + 52px);
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: -26px -26px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(120% 90% at 50% 45%, #141a28 0%, var(--surface) 70%);
  border-bottom: 1px solid var(--border);
}

/* Отдельная иллюстрация */
.illus { margin: 0; }
.illus img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Блок «текст + иллюстрация» */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-block: clamp(36px, 5vw, 56px);
}
.feature:first-child { margin-top: 0; }
.feature .section__head { margin-bottom: 0; }
.feature .principles { grid-template-columns: 1fr; }
.feature--reverse > .illus { order: -1; }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse > .illus { order: 0; }
  .feature .illus { max-width: 560px; }
}

/* В карточках с иллюстрацией маленькая иконка не нужна */
.card__media + .card__icon { display: none; }

/* Карточки с иллюстрациями — сетка 2×2 вместо 3+1 */
.grid--cards:has(.card__media) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }