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

   Отличие от остальных продуктовых страниц: кадры пришли чистыми —
   без вшитых плашек и без белого фейда слева. Поэтому фейд рисуем
   градиентом, а выноски собираем разметкой (.gcall) и ставим
   в процентах. Ниже 1200px они скрыты — кадр там под вуалью.
   ========================================================= */

/* 1. ПРОДУКТ ------------------------------------------------ */
/* Кадр не во всю ширину: он масштабируется по высоте секции и прижат
   к правому верхнему углу. Так на широком экране аппарат остаётся
   нормального размера, слева освобождается чистое поле под текст,
   а сам первый экран целиком помещается в окно браузера.
   Высота = ширина кадра / 1.75, поэтому 38vw дают кадр в 66.5vw. */
.ghero{
  min-height:38vw;
  background:rgb(var(--seam)) url(../img/filter/hero-bg.jpg) right top / auto 100% no-repeat;
}
.ghero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* своего фейда у кадра нет — под текстом осветляем левую треть */
    /* кадр начинается на 33.5% — левее гасим его полностью, чтобы
       не было видно вертикального шва */
    linear-gradient(90deg,
      rgb(var(--seam)) 33%,
      rgba(var(--seam),.9) 41%,
      rgba(var(--seam),.3) 51%,
      rgba(var(--seam),0) 59%),
    linear-gradient(180deg,
      rgba(var(--seam),0) 88%,
      rgba(var(--seam),.6) 95%,
      rgb(var(--seam)) 100%);
}
/* координаты — доли самого кадра, рамка .gframe повторяет его габарит */
.gframe--hero{aspect-ratio:1659/948}
.gcall--hero-1{left:79%;top:14%}
.gcall--hero-2{left:50.5%;top:42%}
.gcall--hero-3{left:80%;top:53%}
.gcall--hero-4{left:50.5%;top:72%}
.script--ghero{right:5%;bottom:9%;text-align:center;transform:rotate(-5deg)}

/* 2. ПРИНЦИП РАБОТЫ -----------------------------------------
   Аппарат стоит по центру кадра, карточки шагов ложатся на его
   правый край — так и нарисовано в макете. */
/* Тот же приём, но кадр прижат влево: справа освобождается место под
   карточки шагов и панель, и они перестают тесниться на аппарате. */
.gwork{
  min-height:40vw;
  background:rgb(var(--seam)) url(../img/filter/work-bg.jpg) left top / auto 100% no-repeat;
}
.gwork::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* слева текст ложится на аппарат — осветляем; справа гасим кромку
       кадра (он кончается на 70%), иначе виден вертикальный шов */
    linear-gradient(90deg,
      rgba(var(--seam),.92) 0%,
      rgba(var(--seam),.8) 22%,
      rgba(var(--seam),.35) 34%,
      rgba(var(--seam),0) 44%,
      rgba(var(--seam),0) 58%,
      rgba(var(--seam),.85) 67%,
      rgb(var(--seam)) 72%),
    linear-gradient(180deg,
    rgb(var(--seam)) 0%,
    rgba(var(--seam),.9) 4%,
    rgba(var(--seam),.5) 16%,
    rgba(var(--seam),0) 28%,
    rgba(var(--seam),0) 90%,
    rgba(var(--seam),.7) 97%,
    rgb(var(--seam)) 100%);
}
.script--gwork{left:4%;top:44%;text-align:center;transform:rotate(-4deg)}
/* карточки шагов лежат прямо на аппарате — делаем их плотнее */
.gwork .gstep{background:rgba(255,255,255,.97)}

/* 3. ИНДИВИДУАЛЬНОЕ ИСПОЛНЕНИЕ ------------------------------ */
.gfit{
  min-height:42vw;
  background:rgb(var(--seam)) url(../img/filter/fit-bg.jpg) left top / auto 100% no-repeat;
}
.gfit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* кадр кончается на 74.6% — гасим кромку */
    linear-gradient(90deg,
      rgba(var(--seam),.92) 0%,
      rgba(var(--seam),.8) 20%,
      rgba(var(--seam),.35) 34%,
      rgba(var(--seam),0) 44%,
      rgba(var(--seam),0) 64%,
      rgba(var(--seam),.85) 72%,
      rgb(var(--seam)) 77%),
    linear-gradient(180deg,
      rgb(var(--seam)) 0%,
      rgba(var(--seam),.8) 4%,
      rgba(var(--seam),0) 14%,
      rgba(var(--seam),0) 88%,
      rgba(var(--seam),.75) 96%,
      rgb(var(--seam)) 100%);
}
.gframe--fit{aspect-ratio:1672/941}
.gcall--fit-1{left:56%;top:22%}
.gcall--fit-2{left:24%;top:33%}
.gcall--fit-3{left:23%;top:50%}
.gcall--fit-4{left:58%;top:47%}
.gcall--fit-5{left:57%;top:60%}
.script--gfit{left:7%;top:43%;text-align:center;transform:rotate(-6deg)}

/* полоса гарантий с чертежом в правом углу */
.fband{position:relative;overflow:hidden;padding-bottom:10px}
.fband > .container{position:relative;z-index:1}
.fband .promises{padding-right:210px}
.fband__draft{
  position:absolute;right:-24px;bottom:-62px;width:400px;max-width:none;
  pointer-events:none;mix-blend-mode:multiply;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 42%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 42%);
}

/* 4. РАСЧЁТ -------------------------------------------------
   У кадра свой белый фейд справа — форма ложится прямо на него. */
.gcalc{
  min-height:52vw;
  /* не cover: форма делает секцию выше кадра, cover раздувал бы его */
  background:#fff url(../img/filter/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) 40%,
      rgba(255,255,255,.75) 54%,
      #fff 64%),
    /* кадр ниже секции не достаёт: гасим его в белый раньше, чем он
       кончится, иначе снизу видна горизонтальная линия обреза */
    linear-gradient(180deg,
      rgb(var(--seam)) 0%,
      rgba(255,255,255,.75) 6%,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.6) 62%,
      rgba(255,255,255,.95) 72%,
      #fff 78%);
}
/* Плашки вшиты в кадр пустыми — накрываем их своими, с текстом.
   Кадр стоит не через cover, а по ширине секции, поэтому его высота
   равна 66.67vw и вертикаль считаем от неё, а не в процентах секции. */
/* Всё в долях кадра — и положение, и габарит: иначе вшитая пустая
   плашка вылезает из-под своей. */
.gframe--calc{aspect-ratio:1536/1024}
.gcall--calc-1{left:17%;top:30.3%;min-width:10.6%;min-height:6.05%}
.gcall--calc-2{left:47.6%;top:39.1%;min-width:11%;min-height:5.66%}
.gcall--calc-3{left:46.2%;top:64.5%;min-width:12.6%;min-height:7.03%}
.script--gcalc{margin-top:22px;text-align:left;transform:rotate(-4deg)}

.fband--last{background:#fff;padding-top:0}

/* колонки шагов и панели ------------------------------------
   Задаём только на десктопе: файл страницы подключается после
   product.css и безусловными правилами перебил бы мобильные. */
@media (min-width:1201px){
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,660px)}
  /* колонка текста кончается раньше, чтобы не залезать на рабочую зону кадра */
  .gwork__copy{max-width:520px}
  .gwork__right{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:24px}
  .gfit__in{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  /* текст не должен доезжать до крышки аппарата */
  .gfit__copy{max-width:480px}
  /* форма начинается там же, где в макете (60%): левее она накрывала бы
     вшитую плашку «Собственное производство» */
  .gcalc__in{grid-template-columns:minmax(0,1fr) minmax(0,530px)}
  /* Колонка текста должна кончаться левее аппарата (он начинается на 53%),
     иначе на широком экране выноски наезжают на преимущества. */
  .ghero__feats{max-width:600px}
}

@media (min-width:1500px){
  /* В кадре четвёртого экрана стоят выноски; центрированный по вертикали
     текст наехал бы на них — оставляем его наверху. */
  .gcalc{justify-content:flex-start}
}

@media (min-width:1201px) and (max-width:1400px){
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
  .gwork__right{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .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,.95) 0%,rgba(255,255,255,.96) 46%,rgb(var(--seam)) 92%)}
  .script--ghero{display:none}

  /* на узком экране кадр по высоте секции раздулся бы в разы —
     возвращаем обычное заполнение по ширине */
  .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%);
  }
  .script--gwork,.script--gfit{display:none}

  .fband .promises{padding-right:8px}
  .fband__draft{display:none}

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