/* ==========================================================================
   ПРОЦЕСС — таймлайн из четырёх этапов
   Тёмная доска с пунктирными вертикалями и «лесенкой» карточек срока.
   Внутри каждого этапа: номер, название с точкой, белая карточка срока
   со шкалой дней проекта и задачи. На десктопе тела колонок сдвинуты
   «лесенкой»; высота колонок свободная. Шкала (15 дней) и данные этапов
   считаются в index.php ($processSteps).
   ========================================================================== */

.process{
  position:relative;
  overflow:hidden;
  padding-block:40px 44px;
  background:
    radial-gradient(760px 360px at 88% -10%, rgba(255,255,255,.055), transparent 70%),
    var(--dark-1);
}
.process > .container{position:relative;z-index:1}

/* верхняя служебная строка: подпись раздела и общий метаданные */
.process-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 18px;margin-bottom:22px;padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.process-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);
}
.process-eyebrow::before{
  content:"";width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.process-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.46);
}
.process-meta b{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:-.02em;color:#fff;
}
.process-meta i{font-style:normal;color:rgba(255,255,255,.28)}
.process-meta span{display:none;color:rgba(255,255,255,.34)}
.process-meta span::before{content:"·";margin-right:6px;color:rgba(255,255,255,.28)}

/* шапка блока */
.process-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  margin-bottom:26px;
}
.process-head-main{min-width:0}
.process-title{
  font-size:clamp(31px,8.2vw,44px);
  font-weight:800;line-height:1.03;letter-spacing:-.05em;
  text-transform:none;color:#fff;
}
.process-title-dot{color:var(--lime)}
.process-note{
  max-width:42ch;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.58);
}

/* доска этапов */
.process-board{position:relative;display:grid;align-items:start;gap:0;list-style:none}
.process-col{
  position:relative;display:flex;flex-direction:column;
  margin-top:24px;padding-top:24px;
  border-top:1px dashed rgba(255,255,255,.14);
}
.process-col:first-child{margin-top:0;padding-top:0;border-top:0}

.process-col-head{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.process-num{
  display:inline-flex;align-items:baseline;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--lime);
}
.process-num b{font-weight:700}
.process-num i{
  font-style:normal;font-size:9px;font-weight:600;
  letter-spacing:.12em;color:rgba(255,255,255,.34);
}
.process-name{
  font-family:var(--display);
  font-size:clamp(23px,5.8vw,26px);font-weight:700;line-height:1.05;
  letter-spacing:-.04em;text-transform:none;color:#fff;
}
.process-name span{color:var(--lime)}

/* тело колонки: карточка срока и задачи */
.process-body{
  display:flex;flex-direction:column;flex:1 1 auto;
  margin-top:18px;min-height:0;
}

/* карточка срока: срок + позиция на шкале + шкала дней */
.process-pill{
  display:flex;flex-direction:column;gap:10px;
  padding:13px 15px 14px;border-radius:16px;
  background:#fff;color:var(--ink);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.process-pill-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.process-pill-label{
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(18,18,18,.45);
}
.process-pill-range{
  font-size:9.5px;font-weight:600;letter-spacing:.05em;white-space:nowrap;
  color:rgba(18,18,18,.48);
}
.process-pill-term{
  font-family:var(--display);
  font-size:clamp(22px,5.6vw,27px);font-weight:700;line-height:1;
  letter-spacing:-.045em;color:var(--ink);
}
.process-meter{display:flex;gap:3px}
.process-meter i{
  flex:1 1 0;height:4px;border-radius:2px;
  background:rgb(128,128,128);
  transition:background .25s ease;
}
.process-meter i.is-on{background:var(--lime)}

/* при наведении на колонку карточка срока становится акцентной */
.process-col:hover .process-pill{
  transform:translateY(-3px);
  background:var(--lime);
  box-shadow:0 22px 44px rgba(0,0,0,.42);
}
.process-col:hover .process-meter i{background:rgba(18,18,18,.16)}
.process-col:hover .process-meter i.is-on{background:var(--ink)}

/* задачи */
.process-tags-label{
  margin-top:17px;
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.process-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;
}
.process-tag{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.035);
  font-size:13px;font-weight:500;line-height:1.15;color:rgba(255,255,255,.8);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.process-tag:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.1);
  color:#fff;
}

/* подвал: примечание и переход к заявке */
.process-foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.55;font-weight:500;
  color:rgba(255,255,255,.55);
}
.process-foot p{display:flex;gap:8px;max-width:74ch}
.process-foot p span{flex:none;color:var(--lime)}
.process-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 20px;border-radius:999px;
  background:var(--lime);color:var(--ink);
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease;
}
.process-cta svg{width:16px;height:16px;transition:transform .18s ease}
.process-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,255,255,.24)}
.process-cta:hover svg{transform:translateX(3px)}

/* ==========================================================================
   ПЛАНШЕТ 768+
   ========================================================================== */
@media (min-width:768px){
  .process{padding-block:54px 58px}
  .process-meta span{display:inline}
  .process-head{
    flex-direction:row;align-items:flex-end;justify-content:space-between;
    gap:36px;margin-bottom:40px;
  }
  .process-head-main{flex:1 1 auto}
  .process-title{font-size:clamp(44px,5.9vw,58px);max-width:16ch}
  .process-note{
    flex:none;max-width:27ch;padding-bottom:4px;
    text-align:right;font-size:14px;
  }

  .process-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-col{
    margin-top:0;padding:0 24px 32px 26px;border-top:0;
  }
  .process-col::before{
    content:"";position:absolute;left:0;top:0;bottom:0;
    border-left:1px dashed rgba(255,255,255,.14);
  }
  .process-board::after{
    content:"";position:absolute;right:0;top:0;bottom:0;
    border-right:1px dashed rgba(255,255,255,.14);
  }
  .process-col::after{
    content:"";position:absolute;left:-3.5px;top:0;
    width:7px;height:7px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 0 4px rgba(255,255,255,.1);
  }
  .process-col:nth-child(n+3){padding-top:52px}
  .process-col:nth-child(n+3)::after{top:52px}
  .process-col:nth-child(2n) .process-body{margin-top:52px}

  .process-name{font-size:25px}
  .process-pill{padding:15px 17px 16px}
  .process-pill-term{font-size:clamp(24px,3vw,27px)}
  .process-tag{font-size:12.5px}

  .process-foot{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:32px;margin-top:36px;
  }
  .process-cta{width:auto;flex:none}
}

/* ==========================================================================
   ДЕСКТОП 1280+
   ========================================================================== */
@media (min-width:1280px){
  .process{padding-block:74px 84px}
  .process-head{margin-bottom:48px}
  .process-title{font-size:clamp(56px,4.7vw,70px);max-width:none}
  .process-note{max-width:24ch;font-size:14px}

  .process-board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .process-col{padding:0 20px 8px 24px}
  .process-col:nth-child(n+3){padding-top:0}
  .process-col:nth-child(n+3)::after{top:0}
  .process-col:nth-child(2n) .process-body{margin-top:22px}
  .process-col:nth-child(2) .process-body{margin-top:62px}
  .process-col:nth-child(3) .process-body{margin-top:102px}
  .process-col:nth-child(4) .process-body{margin-top:142px}

  .process-name{font-size:28px}
  .process-tag{font-size:12.5px}
}

/* ==========================================================================
   СВЕРХШИРОКИЕ 1921+
   ========================================================================== */
@media (min-width:1921px){
  .process{padding-block:90px 98px}
  .process-title{font-size:82px}
  .process-name{font-size:32px}
  .process-col{padding:0 24px 10px 30px}
  .process-col:nth-child(2) .process-body{margin-top:70px}
  .process-col:nth-child(3) .process-body{margin-top:118px}
  .process-col:nth-child(4) .process-body{margin-top:166px}
  .process-pill-term{font-size:29px}
  .process-tag{font-size:13px}
}