/* ============================================================================
   SIGVIN — Block 6: Proces / Jak Działamy  (Figma 444:7106 + states 279:*)
   Sticky-scroll: блок пинится, по скроллу активный шаг 1→6 — слева плажки
   отмечаются пройденными, справа меняется контент (номер/тайтл/описание/иконка)
   с мягким fade+blur. Логика — process.js.
   ========================================================================== */

.process {
  position: relative;
  z-index: 2;                 /* тёмный блок наезжает ПОВЕРХ белого projects (#5) */
  margin-top: -72px;          /* наезд: тёмный блок налезает на projects ~48px */
}
/* переключение шагов — по КЛИКУ (не по скроллу): секция обычной высоты, без пиннинга */
.has-js .process { height: auto; }
.process__sticky { padding: 24px 0; }
.has-js .process__sticky { position: static; height: auto; overflow: visible; }

.process__block {
  position: relative;
  width: var(--frame-w);
  max-width: 100%;
  height: 768px;
  margin: 0 auto;
  padding: 96px 80px;
  background: var(--dark-black);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}
.process__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/assets/ui/grid-dark.svg') center / 1440px auto no-repeat;
  opacity: .5;                /* тёмная сетка-паттерн, видимая на чёрном блоке */
  pointer-events: none;
}
.process__block > :not(.process__grid) { position: relative; z-index: 1; }

/* ---- header --------------------------------------------------------- */
.process__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.process__heading { color: var(--light-white); white-space: nowrap; }

/* ---- body: rail + list + panel ------------------------------------- */
.process__body { display: flex; gap: 24px; margin-top: 48px; }
.process__nav { display: flex; gap: 20px; }

/* вертикальный рейл с буллетами */
.process__rail {
  position: relative;
  width: 40px;
  display: flex;
  justify-content: center;
}
.proc-line {
  position: absolute;
  top: 42px;
  bottom: 42px;
  width: 2px;
  background: var(--light-16);
}
.proc-bullets {
  display: flex;
  flex-direction: column;
  gap: 46px;
  padding-top: 30px;
}
.proc-bullet {
  position: relative;
  z-index: 1;                 /* поверх линии — заливка перекрывает полоску за точкой */
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--dark-black);   /* цвет фона блока — линия за неактивной точкой не видна */
  border: 2px solid var(--light-16);
  transition: border-width .4s ease, border-color .4s ease;
  box-sizing: border-box;
}
.proc-bullet.is-on { border: 8px solid var(--light-white); }

/* список шагов (белая карточка) */
.process__list {
  width: 266px;
  display: flex;
  flex-direction: column;
  background: var(--light-white);
  border-radius: 24px;
  overflow: hidden;
}
.proc-step {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 12px;
  background: var(--dark-light);            /* upcoming */
  border-bottom: 1px solid var(--light-4);
  cursor: pointer;
  transition: background-color .55s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius .55s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}
.proc-step:last-child { border-bottom: 0; }
.proc-step.is-passed { background: var(--light-64); }
.proc-step.is-active { background: var(--light-white); }
/* плажка СРАЗУ под активной — скругление сверху 24px (как в макете) */
.proc-step.is-active + .proc-step {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.proc-step__num {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--dark-black);
  font: 700 18px/28px "adineue PRO Cyr", sans-serif;
  letter-spacing: 0.01em;
  color: var(--light-48);
  transition: color .55s cubic-bezier(0.4, 0, 0.2, 1);
}
.proc-step.is-active .proc-step__num,
.proc-step.is-passed .proc-step__num { color: var(--light-white); }
/* имя на плажке: цвет «снапает» через серую зону быстрее, чем светлеет фон,
   чтобы текст не растворялся в середине перехода (раньше выглядело рубанно) */
.proc-step__name { color: var(--light-white); transition: color .5s cubic-bezier(0.85, 0, 0.15, 1); }
.proc-step.is-active .proc-step__name,
.proc-step.is-passed .proc-step__name { color: var(--dark-black); }

/* ---- правая панель -------------------------------------------------- */
.process__panel {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 432px;
  background: var(--dark-light);
  border-radius: 24px;
  overflow: hidden;          /* обводка — дефолтный gframe (Linear 8%) */
}
.process__details {
  position: absolute;
  left: 47px;
  top: 47px;
  width: 471px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.process__detail-top { display: flex; flex-direction: column; gap: 32px; }
.process__num {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--dark-black);
  color: var(--light-white);
  font: 700 32px/32px "adineue PRO Cyr", sans-serif;
  letter-spacing: 0.02em;
}
.process__text { display: flex; flex-direction: column; gap: 8px; }
.process__title { color: var(--light-white); font: 700 32px/40px "adineue PRO Cyr", sans-serif; }
.process__desc { color: var(--light-64); }

/* анимация смены контента: fade + blur */
.process__num, .process__title, .process__desc, .process__photo {
  transition: opacity .4s ease, filter .4s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.process__panel.is-switching .process__num,
.process__panel.is-switching .process__title,
.process__panel.is-switching .process__desc,
.process__panel.is-switching .process__photo {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
}

/* попап с фотографией шага справа */
.process__popup {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 314px;
  height: 408px;
  background: var(--dark-black);
  border-radius: 12px;
  overflow: hidden;          /* обводка — дефолтный gframe (Linear 8%) */
}
.process__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .process { height: auto; }
  .has-js .process__sticky { position: static; height: auto; }
  .proc-bullet, .proc-step, .process__num, .process__title, .process__desc, .process__photo { transition: none; }
}

/* ---- мобайл (≤767, фрейм 375 — node 446:7489): АККОРДЕОН ----
   Белый контейнер: активный шаг (белый) + описание + картинка ВНУТРИ него,
   свёрнутые шаги тёмные (#1b1b1b). Панель переносит под активный шаг process.js. */
@media (max-width: 1024px) {
  .process { margin-top: 0; }
  .has-js .process { height: auto; }
  .has-js .process__sticky { position: static; height: auto; display: block; padding: 0; }
  .process__block { width: 100%; height: auto; padding: 48px 16px; border-radius: 32px; }   /* #5 чёрный фон — углы 32 */
  .process__heading { white-space: normal; font-size: 40px; line-height: 48px; }
  .process__body { flex-direction: column; gap: 16px; margin-top: 32px; }
  .process__rail { display: none; }
  .process__nav { flex-direction: column; gap: 16px; }

  /* контейнер-аккордеон: белый, rounded-32 (Figma 446:7485), обрезает тёмные шаги по углам */
  .process__list {
    width: 100%; background: var(--light-white);
    border-radius: 32px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  /* первый тёмный шаг после раскрытой панели — скругление сверху 32 (тёмный «под-панель») */
  .process__panel + .proc-step { border-top-left-radius: 32px; border-top-right-radius: 32px; }

  /* раскрытая панель: внутри белого контейнера, под активным шагом */
  .process__panel {
    flex: none;                 /* НЕ flex:1 0 0 (десктоп) — иначе схлопывается в контейнере */
    width: 100%; height: auto; min-height: 0;
    background: var(--light-white); border-radius: 0; overflow: visible;
    padding: 4px 12px 12px; gap: 12px;
    display: flex; flex-direction: column;
  }
  .process__panel::before { display: none; }    /* gframe-кольцо панели */
  .process__panel > .corner { display: none; }   /* уголки панели */
  .process__details { position: static; left: auto; top: auto; width: auto; padding: 0; gap: 0; }
  .process__detail-top { gap: 0; }
  .process__num { display: none; }               /* дубль номера шага */
  .process__title { display: none; }             /* дубль названия шага */
  .process__panel .btn-split { display: none; }  /* в макете кнопки нет */
  .process__desc {
    padding: 0 12px;
    font: 300 14px/20px "Geologica Cursive", sans-serif; letter-spacing: -0.05em;
    color: var(--dark-64);
  }

  /* картинка-карточка (тёмная, rounded-12) — высота 128 (Figma/скрин клиента) */
  .process__popup {
    flex: none;                 /* не ужиматься в flex-колонке панели */
    display: block; position: relative; right: auto; top: auto;   /* relative → фото внутри карточки, а не панели */
    width: 100%; height: 128px; border-radius: 12px;
    background: var(--dark-black); overflow: hidden;
  }
  /* новые картинки (01.png… 957×384 = аспект карточки 2.49) заполняют карточку целиком */
  .process__photo {
    inset: 0; margin: 0;
    width: 100%; height: 100%;
    object-fit: cover; padding: 0;
  }
}