/* ============================================================
   03 · Решение — «свет и надежда» после проблемы.
   Смена ритма: тёплый рассветный подсвет, editorial-композиция
   текст ↔ вертикальная ферма, три пронумерованных тезиса.
   ============================================================ */

.section--solution {
  background:
    radial-gradient(58% 42% at 22% -4%, rgba(227, 164, 41, .07), transparent 72%),
    linear-gradient(180deg, var(--bg-0) 0%, #14110C 52%, var(--bg-0) 100%);
  border-top: 1px solid var(--line);
  overflow: clip;
}

/* ---------- Декор: концентрические кольца за фото ---------- */
.section--solution .solution-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* центр окружностей вынесен за верхнюю кромку: внутрь секции
   опускаются пологие нижние дуги — две-три читаются в пустой зоне
   над заголовком, а не прячутся за фото. Alpha задана в stroke,
   поэтому элемент без дополнительной прозрачности */
.section--solution .solution-decor__rings {
  position: absolute;
  top: -840px;
  left: -120px;
  width: 1000px;
  max-width: none; /* глобальный max-width:100% сжимал svg до ширины декора */
  height: auto;
}

/* ---------- Сетка: текст слева, вертикальная ферма справа ---------- */
.section--solution .solution-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
  gap: clamp(48px, 6vw, 104px);
  align-items: stretch;
}

.section--solution .section-head {
  margin-bottom: clamp(40px, 6vh, 72px);
}
/* курсивный вынос «не нужно» даёт лишний воздух перед «солнце» */
.section--solution h2 em {
  margin-right: -.04em;
}

/* ---------- Три тезиса ---------- */
.section--solution .solution-item {
  display: grid;
  grid-template-columns: clamp(56px, 5.2vw, 84px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  padding-block: clamp(26px, 3.8vh, 40px);
  border-top: 1px solid var(--line);
}
.section--solution .solution-item:last-child {
  border-bottom: 1px solid var(--line);
}

/* крупная Cormorant-цифра с золотым градиентом — фирменный ход
   (см. DESIGN §4 «числа-статистика»), список перестаёт быть шаблонным */
.section--solution .solution-item__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: .84;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: clamp(2px, .3vw, 5px);
  position: relative;
  transition: filter .5s var(--ease);
}
.section--solution .solution-item__num::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 1px;
  background: var(--grad-gold);
  transform: translateY(calc(-1 * clamp(26px, 3.8vh, 40px)));
  opacity: .9;
  transition: width .6s var(--ease);
}
.section--solution .solution-item:hover .solution-item__num { filter: brightness(1.18); }
.section--solution .solution-item:hover .solution-item__num::after { width: 64px; }

.section--solution .solution-item__title {
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  margin-bottom: .45em;
}
.section--solution .solution-item__body p {
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: var(--ivory-70);
  max-width: 52ch;
}

/* ---------- Фото фермы ---------- */
.section--solution .solution-photo {
  position: relative;
  border-radius: 24px;
  min-height: 560px;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .7);
}
.section--solution .solution-photo img {
  position: absolute;
  inset: -7% 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  /* saturate .55 + sepia .24: глушим сине-бирюзовую листву
     нижней трети к оливково-золотой гамме палитры */
  filter: saturate(.55) contrast(1.06) brightness(.8) sepia(.24);
  will-change: transform;
}
/* тёплая вуаль + врастание в фон слева; снизу фейд мягче,
   а inset-hairline даёт кромке чёткую линию — она резолвится
   с border-bottom последнего тезиса в одну горизонталь */
.section--solution .solution-photo__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(227, 164, 41, .10), transparent 42%),
    linear-gradient(90deg, rgba(13, 11, 8, .45), transparent 34%),
    linear-gradient(0deg, rgba(13, 11, 8, .42), transparent 26%);
  box-shadow: inset 0 -1px 0 rgba(242, 236, 223, .18);
}
/* тёплый золотой грейд снизу (multiply): добивает остаточную
   бирюзу нижней трети фото в сторону палитры */
.section--solution .solution-photo__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(169, 107, 20, .3), transparent 44%);
  mix-blend-mode: multiply;
}
/* смягчаем нижнее затемнение из базового .ph::after,
   чтобы нижняя кромка фото не растворялась в фоне */
.section--solution .solution-photo::after {
  background: linear-gradient(180deg, rgba(13, 11, 8, .12), transparent 35%, transparent 68%, rgba(13, 11, 8, .38));
}
/* графический крокус — золотой line-art на стыке тёмного поля
   и левой кромки фото: ось смещена влево, ~70% силуэта лежит
   на тёмном поле, остальное — на фейде фото.
   Позиционируется от правого края сетки: ширина фото-колонки
   (100% − gap) × .47 минус половина svg (ось цветка) —
   правый лепесток заходит на фейд фото, ~70% силуэта на тёмном */
.section--solution .solution-crocus {
  position: absolute;
  right: calc((100% - clamp(48px, 6vw, 104px)) * .47 - clamp(80px, 8.5vw, 120px));
  bottom: clamp(48px, 9vh, 96px);
  z-index: 2;
  display: block;
  width: clamp(160px, 17vw, 240px);
  pointer-events: none;
  will-change: transform;
}
/* локальная тёмная подложка: гасит пёструю листву за силуэтом,
   чтобы line-art не читался наклейкой */
.section--solution .solution-crocus::before {
  content: "";
  position: absolute;
  inset: -16%;
  background: radial-gradient(closest-side, rgba(13, 11, 8, .55), transparent);
}
.section--solution .solution-crocus__art {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: .75;
}
.section--solution .solution-photo__cap {
  position: absolute;
  left: clamp(20px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 26px);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-50);
}

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  .section--solution .solution-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 7vw, 64px);
  }
  /* порядок: голова → фото → список */
  .section--solution .solution-main {
    display: contents;
  }
  .section--solution .section-head {
    order: -2;
    margin-bottom: 0;
  }
  .section--solution .solution-photo {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  /* центр ниже, чем на десктопе: дуги должны выйти из-под
     фиксированной шапки в пустую зону над лейблом */
  .section--solution .solution-decor__rings {
    top: -360px;
    left: -160px;
    width: 640px;
  }
  /* в одноколоночной раскладке нет тёмного поля рядом с фото —
     поверх пёстрой листвы line-art читается наклейкой, убираем */
  .section--solution .solution-crocus {
    display: none;
  }
}

@media (max-width: 480px) {
  .section--solution .solution-photo {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
  }
  .section--solution .solution-item {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
  }
  .section--solution .solution-photo__cap {
    right: 20px;
    font-size: 11px;
    letter-spacing: .18em;
  }
}