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

/* 1. ПРОДУКТ ------------------------------------------------ */
/* Кадр масштабируется по высоте секции и прижат вправо, а не растянут
   на всю ширину: иначе на широком мониторе установка раздувается, текст
   в контейнере 1440 рядом с ней теряется, а вшитая выноска «Вход
   загрязнённой воды» наезжает на блок преимуществ. */
.ghero{
  min-height:40vw;
  background:rgb(var(--seam)) url(../img/oil/hero-bg.jpg) right top / auto 100% no-repeat;
}
/* дальше начинается изделие — три преимущества в него упираются */
.ghero__feats{max-width:660px}
.ghero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* вуаль только под текстом: линейная по всей высоте гасила бы и вшитые
       выноски, которые лежат ниже */
    radial-gradient(115% 62% at 0% 0%,
      rgba(var(--seam),.9) 0%,
      rgba(var(--seam),.5) 40%,
      rgba(var(--seam),0) 68%),
    linear-gradient(180deg,
    rgba(var(--seam),0) 90%,
    rgba(var(--seam),.6) 96%,
    rgb(var(--seam)) 100%);
}

/* 2. ПРИНЦИП РАБОТЫ ----------------------------------------- */
/* кадр по высоте секции и прижат влево: установка перестаёт раздуваться,
   а вшитая выноска «Выход очищенной воды» уходит из-под панели */
.gwork{
  min-height:42vw;
  background:rgb(var(--seam)) url(../img/oil/work-bg.jpg) left top / auto 100% no-repeat;
}
.gwork::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* вуаль только под текстом — выноски лежат ниже и должны остаться видны */
    radial-gradient(118% 52% at 0% 0%,
      rgba(var(--seam),.9) 0%,
      rgba(var(--seam),.5) 42%,
      rgba(var(--seam),0) 70%),
    /* правая кромка кадра: он кончается на 75% ширины секции */
    linear-gradient(90deg,
      rgba(var(--seam),0) 68%,
      rgba(var(--seam),.85) 74%,
      rgb(var(--seam)) 79%),
    linear-gradient(180deg,
    rgb(var(--seam)) 0%,
    rgba(var(--seam),.85) 3%,
    rgba(var(--seam),0) 13%,
    rgba(var(--seam),0) 88%,
    rgba(var(--seam),.75) 96%,
    rgb(var(--seam)) 100%);
}
/* карточки шагов прижаты к низу секции: меньше нижний отступ —
   ниже карточки, и они перестают резать выноску «Осаждение частиц» */
.gwork{padding-bottom:34px}
/* Колонки задаём только на десктопе: без min-width эти правила лежат
   ниже мобильных из product.css и перебивали одноколоночную раскладку. */
@media (min-width:1201px){
  /* панель начинается там же, где в макете (72% ширины): левее она резала
     вшитые в кадр выноску «Выход очищенной воды» и рукописную подпись */
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,349px)}
  .gfit__in{grid-template-columns:minmax(0,1fr) minmax(0,390px)}
}

/* 3. ПОДБОР ПОД ОБЪЕКТ -------------------------------------- */
.gfit{
  min-height:42vw;
  background:rgb(var(--seam)) url(../img/oil/fit-bg.jpg) left top / auto 100% no-repeat;
}
.gfit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(118% 50% at 0% 0%,
      rgba(var(--seam),.9) 0%,
      rgba(var(--seam),.5) 42%,
      rgba(var(--seam),0) 70%),
    linear-gradient(90deg,
      rgba(var(--seam),0) 68%,
      rgba(var(--seam),.85) 74%,
      rgb(var(--seam)) 79%),
    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%);
}
/* 4. РАСЧЁТ -------------------------------------------------
   Здесь кадр наоборот — фото справа, чистое поле слева, и форма
   стоит слева. Горизонтальную вуаль гасим до 53%, чтобы вшитая
   рукописная подпись осталась читаемой. */
.gcalc{
  min-height:56.3vw;
  /* не cover: форма делает секцию выше кадра, cover раздувал бы его */
  background:#fff url(../img/oil/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,
      #fff 0%,
      rgba(255,255,255,.95) 40%,
      rgba(255,255,255,0) 53%),
    /* кадр ниже секции не достаёт: гасим его в белый раньше, чем он кончится,
       иначе снизу видна горизонтальная линия обреза */
    linear-gradient(180deg,
      rgb(var(--seam)) 0%,
      rgba(255,255,255,.7) 8%,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.55) 62%,
      rgba(255,255,255,.95) 72%,
      #fff 78%);
}

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

@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,.gfit{background-size:cover;background-position:center}
  .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%);
  }

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