/* =========================================================
   Task #110 — ФОНОВАЯ СИСТЕМА НА РЕАЛЬНЫХ ФОТО КЕЙСОВ.
   Идея: не «фотообои», а очень светлая дуотон-фактура
   (фирменный серо-зелёный по белому), подчинённая контенту.

   Уровень A — hero страниц (.ss-hero / .ss-single-hero):
     фото-подложка + белые градиенты со стороны текста.
   Уровень B — редкие широкие полосы (.ss-bgband) в больших
     обзорных секциях.
   Уровень C — карточки/таблицы остаются на чистом белом
     (этот файл их не трогает).

   Ассеты: /assets/bg/*.webp — дуотон запечён в картинку
   (осветление+обесцвечивание+лёгкий blur), поэтому CSS
   не использует opacity/фильтры: дёшево для рендера.
   Назначение фона по шаблонам — через body-классы WP и
   кастомные свойства (--ss-hero-img / --ss-hero-img-m).
   ========================================================= */

/* --- Уровень A: hero --- */
.ss-hero,
.ss-single-hero{position:relative;isolation:isolate}
.ss-hero::before,
.ss-single-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 28%,rgba(255,255,255,.5) 55%,rgba(255,255,255,.08) 80%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 62%,rgba(255,255,255,.82) 100%),
    var(--ss-hero-img,url(../assets/bg/bg-hero-home.webp));
  background-size:auto,auto,cover;
  background-position:center,center,var(--ss-hero-pos,center 40%);
  background-repeat:no-repeat;
}
.ss-hero>*,
.ss-single-hero>*{position:relative;z-index:1}

/* --- Назначение фото по шаблонам (body-классы WP) --- */
body.home{--ss-hero-img:url(../assets/bg/bg-hero-home.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-home-m.webp)}
body.page-id-8{--ss-hero-img:url(../assets/bg/bg-hero-catalog.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-catalog-m.webp)}          /* /septiki/ */
body.page-id-12{--ss-hero-img:url(../assets/bg/bg-hero-prices.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-prices-m.webp)}          /* /ceny/ */
body.page-id-13{--ss-hero-img:url(../assets/bg/bg-hero-cases.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-cases-m.webp)}            /* /cases/ */
body.page-id-7{--ss-hero-img:url(../assets/bg/bg-hero-services.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-services-m.webp)}       /* /uslugi/ */
body.page-id-11{--ss-hero-img:url(../assets/bg/bg-hero-services.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-services-m.webp)}      /* /problemy/ */
body.page-id-10{--ss-hero-img:url(../assets/bg/bg-hero-cases.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-cases-m.webp)}            /* /geografiya/ */
body.page-id-9{--ss-hero-img:url(../assets/bg/bg-band-station.webp);--ss-hero-img-m:url(../assets/bg/bg-band-station-m.webp)}         /* /dlya-kogo/ */
body.page-id-14{--ss-hero-img:url(../assets/bg/bg-hero-prices.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-prices-m.webp)}          /* /contacts/ */
body.single-cases{--ss-hero-img:url(../assets/bg/bg-hero-cases.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-cases-m.webp)}
body.single-septic_models{--ss-hero-img:url(../assets/bg/bg-hero-catalog.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-catalog-m.webp)}
body.tax-geo,
body.tax-object_type{--ss-hero-img:url(../assets/bg/bg-hero-cases.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-cases-m.webp)}
body.tax-septic_brands{--ss-hero-img:url(../assets/bg/bg-hero-catalog.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-catalog-m.webp)}
body.tax-service_type,
body.tax-problem_type{--ss-hero-img:url(../assets/bg/bg-hero-services.webp);--ss-hero-img-m:url(../assets/bg/bg-hero-services-m.webp)}

/* Юридические страницы — нейтрально, без декоративного фото. */
body.page-id-3,
body.page-id-293,
body.page-id-295{--ss-hero-img:none;--ss-hero-img-m:none}

/* --- Уровень B: широкая мягкая фото-полоса для больших секций --- */
.ss-bgband{position:relative;isolation:isolate}
.ss-bgband::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.3) 26%,rgba(255,255,255,.3) 74%,#fff 100%),
    var(--ss-band-img,url(../assets/bg/bg-band-trench.webp));
  background-size:auto,cover;
  background-position:center,center 45%;
  background-repeat:no-repeat;
}
.ss-bgband>*{position:relative;z-index:1}
.ss-bgband--station{--ss-band-img:url(../assets/bg/bg-band-station.webp)}

/* --- Mobile: своя (меньшая) картинка + более плотная белая вуаль,
       текст в одну колонку ложится прямо на фон --- */
@media (max-width:820px){
  .ss-hero::before,
  .ss-single-hero::before{
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.72) 55%,#fff 100%),
      var(--ss-hero-img-m,url(../assets/bg/bg-hero-home-m.webp));
    background-size:auto,cover;
    background-position:center,var(--ss-hero-pos,center 40%);
  }
  .ss-bgband::before{
    background-image:
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.45) 28%,rgba(255,255,255,.45) 72%,#fff 100%),
      var(--ss-band-img-m,url(../assets/bg/bg-band-trench-m.webp));
  }
  .ss-bgband--station{--ss-band-img-m:url(../assets/bg/bg-band-station-m.webp)}
}