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

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

/* 2. КАК РАБОТАЕТ -------------------------------------------
   Правый край кадра дотянут его же пикселями (1659 → 1900), иначе
   карточки шагов резали вшитую выноску «Выход очищенной воды». */
.gwork{
  min-height:42vw;
  background:rgb(var(--seam)) url(../img/grease/work-bg.jpg) center top / auto 100% no-repeat;
}
.gwork::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* Вуаль только под текстом — в левом верхнем углу. Линейной по всей
       высоте гасило бы и вшитую выноску «Вход стоков», которая лежит
       ниже текста. */
    radial-gradient(130% 58% at 0% 0%,
      rgba(var(--seam),.92) 0%,
      rgba(var(--seam),.55) 42%,
      rgba(var(--seam),0) 72%),
    /* кромки кадра: он занимает 8–92% ширины секции */
    linear-gradient(90deg,
      rgb(var(--seam)) 6%,
      rgba(var(--seam),0) 12%,
      rgba(var(--seam),0) 86%,
      rgb(var(--seam)) 93%),
    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%);
}
.script--gwork{left:42%;bottom:3%;text-align:center;transform:rotate(-5deg)}

/* 3. ПОДБОР ПОД ОБЪЕКТ -------------------------------------- */
.gfit{
  min-height:44vw;
  background:rgb(var(--seam)) url(../img/grease/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(120% 55% at 0% 0%,
      rgba(var(--seam),.92) 0%,
      rgba(var(--seam),.55) 40%,
      rgba(var(--seam),0) 70%),
    /* правая кромка кадра — он кончается на 78% ширины секции */
    linear-gradient(90deg,
      rgba(var(--seam),0) 70%,
      rgba(var(--seam),.85) 76%,
      rgb(var(--seam)) 81%),
    linear-gradient(180deg,
    rgb(var(--seam)) 0%,
    rgba(var(--seam),.8) 3%,
    rgba(var(--seam),0) 12%,
    rgba(var(--seam),0) 89%,
    rgba(var(--seam),.7) 96%,
    rgb(var(--seam)) 100%);
}
/* фон в этом кадре — бетонный цех, серая метка на нём теряется */
.gfit__copy .eyebrow{color:#2b7cb4}

/* 4. РАСЧЁТ -------------------------------------------------
   Кадр кухни занимает левые 57%, справа у него три вшитые миниатюры —
   их гасим горизонтальным фейдом, на нём же лежит форма. */
.gcalc{
  min-height:58vw;
  /* не cover: форма делает секцию выше кадра, и cover раздувал бы его
     на четверть, превращая изделие в макро-фото */
  background:#fff url(../img/grease/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) 36%,
      rgba(255,255,255,.6) 47%,
      rgba(255,255,255,.96) 56%,
      #fff 63%),
    /* кадр ниже секции не достаёт: гасим его в белый раньше, чем он кончится,
       иначе снизу видна горизонтальная линия обреза */
    linear-gradient(180deg,
      rgb(var(--seam)) 0%,
      rgba(255,255,255,.93) 22%,
      rgba(255,255,255,0) 31%,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,.7) 76%,
      #fff 85%);
}

/* АДАПТИВ --------------------------------------------------- */
@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) 44%,rgb(var(--seam)) 92%)}

  .ghero,.gwork,.gfit{background-size:cover}
  .gwork,.gfit{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%);
  }
  .script--gwork{display:none}

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