/* ============================================================
   HERO PHOTO BACKGROUND — override для /css/site.css
   Подключать ПОСЛЕ основного site.css?v=4.
   Внутри только переопределения Hero-фона.
   ============================================================ */

/* Современные браузеры: AVIF → WebP → JPEG, cover, без искажений */
.hero__bg {
  background-image:
    image-set(
      url("hero-house-solar.avif") 1x,
      url("hero-house-solar.webp") 1x,
      url("hero-house-solar.jpg")  1x
    ),
    linear-gradient(135deg, rgba(11,15,14,.55) 0%, rgba(20,32,26,.45) 50%, rgba(11,15,14,.55) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: 38% 50%, center;
}

/* Старые браузеры без image-set — fallback на JPEG */
@supports not (background-image: image-set(url("x.avif") 1x)) {
  .hero__bg {
    background-image:
      url("hero-house-solar.jpg"),
      linear-gradient(135deg, rgba(11,15,14,.55) 0%, rgba(20,32,26,.45) 50%, rgba(11,15,14,.55) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 38% 50%, center;
  }
}

/* Чтобы фото не перебивалось сеткой ::after и оверлеем — гасим сетку,
   а оверлей оставляем для читаемости текста. */
.hero__bg::after { opacity: 0; }

/* Усиливаем оверлей, чтобы тёмный текст слева читался поверх фото */
.hero__overlay {
  background:
    linear-gradient(95deg, rgba(11,19,16,.85) 0%, rgba(11,19,16,.55) 50%, rgba(11,19,16,.25) 100%),
    linear-gradient(180deg, rgba(11,19,16,.35) 0%, rgba(11,19,16,0) 35%, rgba(11,19,16,.55) 100%);
}

/* Адаптация: при узких экранах сдвигаем фокус на дом (левая часть) */
@media (max-width: 900px) {
  .hero__bg {
    background-position: 30% 55%, center;
  }
}
@media (max-width: 600px) {
  .hero__bg {
    background-position: 22% 60%, center;
  }
}
@media (max-width: 380px) {
  .hero__bg {
    background-position: 18% 62%, center;
  }
}

/* Уважаем пользователей с reduce-motion — картинку не двигаем */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { background-attachment: scroll; }
}