/* =========================================================
   ECOPLAST — страница «Септики»
   Каркас из product.css; здесь только кадры, их пропорции и вуали.
   Кадры 1672×941, у всех свой белый фейд слева или справа.
   ========================================================= */

/* 1. ПРОДУКТ ------------------------------------------------
   Нижние 8% кадра в макете занимала полоса обещаний, её вынесли
   в отдельную секцию — низ кадра срезаем через cover. */
.ghero{
  min-height:52vw;
  background:#fff url(../img/septic/hero-bg.jpg) center top / cover no-repeat;
}
.ghero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--seam),0) 91%,
    rgba(var(--seam),.6) 97%,
    rgb(var(--seam)) 100%);
}

/* 2. ПРИНЦИП РАБОТЫ -----------------------------------------
   Изделие занимает левые 57%, справа чистое поле под панель. */
.gwork{
  min-height:56.3vw;
  background:#fff url(../img/septic/work-bg.jpg) center top / cover no-repeat;
}
/* верх кадра — кроны деревьев: под лидом держим лёгкую вуаль, иначе
   вторая строка теряется в листве */
.gwork::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--seam)) 0%,
    rgba(var(--seam),.9) 4%,
    rgba(var(--seam),.6) 18%,
    rgba(var(--seam),0) 30%,
    rgba(var(--seam),0) 88%,
    rgba(var(--seam),.75) 96%,
    rgb(var(--seam)) 100%);
}
/* Колонки задаём только на десктопе: без min-width эти правила лежат
   ниже мобильных из product.css и перебивали одноколоночную раскладку. */
@media (min-width:1201px){
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  /* заголовок в макете шире колонки жироуловителей — иначе он в три строки */
  .gwork__copy{max-width:880px}
  /* панель встаёт на 76% ширины, как в макете: левее она резала вшитые
     выноски «Рабочий объём» и «Размер корпуса» */
  .gfit__in{grid-template-columns:minmax(0,1fr) minmax(0,296px)}
  /* карточки не должны доезжать до выносок «Вход и выход» на кадре */
  .gcards{max-width:480px}
  .ghero__feats--stack{max-width:520px}
}
.script--gwork{text-align:right;transform:rotate(-4deg)}

/* 3. ПОДБОР ПОД ОБЪЕКТ -------------------------------------- */
.gfit{
  min-height:56.3vw;
  background:#fff url(../img/septic/fit-bg.jpg) center top / cover no-repeat;
}
.gfit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--seam)) 0%,
    rgba(var(--seam),.85) 3%,
    rgba(var(--seam),0) 12%,
    rgba(var(--seam),0) 86%,
    rgba(var(--seam),.8) 95%,
    rgb(var(--seam)) 100%);
}
/* Секция не должна становиться выше кадра: cover тогда подрезает его
   по бокам и вшитые выноски уезжают под панель. Держим панель в габарите. */
.gpanel{margin-top:0;padding:22px 22px 18px}
.gpanel__list li{padding:9px 0}
.gpanel__hint{margin-top:12px;padding:13px 15px}

/* 4. РАСЧЁТ -------------------------------------------------
   Кадр с разрезом грунта занимает левые 57%, справа у него свой
   белый фейд — на нём и стоит форма. */
.gcalc{
  min-height:56.3vw;
  /* не cover: форма делает секцию выше кадра, cover раздувал бы его */
  background:#fff url(../img/septic/calc-bg.jpg) center top / 100% auto no-repeat;
}
.gcalc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,.75) 56%,
      #fff 66%),
    /* кадр ниже секции не достаёт: гасим его в белый раньше, чем он кончится,
       иначе снизу видна горизонтальная линия обреза */
    linear-gradient(180deg,
      rgb(var(--seam)) 0%,
      rgba(255,255,255,.7) 7%,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.6) 64%,
      rgba(255,255,255,.95) 74%,
      #fff 80%);
}
.script--gcalc{margin-top:22px;text-align:left;transform:rotate(-4deg)}

/* АДАПТИВ --------------------------------------------------- */
@media (min-width:1201px) and (max-width:1400px){
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .gfit__in{grid-template-columns:minmax(0,1fr) minmax(0,286px)}
}

@media (max-width:1200px){
  /* на узком экране вшитые в фото плашки просвечивают сквозь текст */
  .ghero{background-size:cover;background-position:right top}
  .ghero::before{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.97) 46%,rgb(var(--seam)) 92%)}

  .gwork::before,.gfit::before{
    background:linear-gradient(180deg,
      rgb(var(--seam)) 0%,rgba(var(--seam),.94) 10%,rgba(var(--seam),.94) 90%,rgb(var(--seam)) 100%);
  }
  .script--gwork{text-align:left}

  /* форма встаёт на композицию, кадр под ней только мешает */
  .gcalc{background-image:none}
  .gcalc::before{background:linear-gradient(180deg,rgb(var(--seam)),#eef6fc 30%,#fff)}
  .script--final{display:none}
}