/* ============================================================
   06 · Процесс — «Из цветка — в специю»
   Таймлайн 4 шагов с золотой линией-нитью + факт-плашка.
   Все селекторы — под .section--process
   ============================================================ */

.section--process {
  background:
    radial-gradient(900px 600px at 82% 24%, rgba(227, 164, 41, .045), transparent 70%),
    linear-gradient(180deg, var(--bg-0) 0%, #120F0A 50%, var(--bg-0) 100%);
}
.section--process::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1360px, calc(100% - 2 * var(--pad-x)));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ---------- Декор: линейный крокус справа от заголовка ---------- */
.section--process .process-crocus {
  position: absolute;
  top: clamp(36px, 5vh, 72px);
  right: clamp(32px, 9vw, 160px);
  width: clamp(150px, 16vw, 230px);
  opacity: .32;
  pointer-events: none;
}
.section--process .process-crocus svg {
  width: 100%;
  height: auto;
}

/* ---------- Сетка: фото слева, таймлайн справа ---------- */
.section--process .process-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
}

/* ---------- Фото ---------- */
.section--process .process-photo {
  position: sticky;
  top: clamp(80px, 10vh, 128px);
  margin: 0;
}
.section--process .process-photo__frame {
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .8);
}
.section--process .process-photo__frame::after {
  background:
    linear-gradient(180deg, rgba(13, 11, 8, .25), transparent 30%, transparent 55%, rgba(13, 11, 8, .65)),
    linear-gradient(90deg, rgba(13, 11, 8, .2), transparent 40%);
}
.section--process .process-photo__cap {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ivory-35);
}
.section--process .process-photo__cap::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 1px;
  margin-right: 14px;
  background: var(--line-gold);
}

/* ---------- Таймлайн ---------- */
.section--process {
  --step-gap: clamp(52px, 7vh, 88px);
  /* геометрия номера: размер, сдвиг вверх (cap-height к верху фото),
     старт нити = низ crimson-точки (сдвиг + высота номера + отступ точки + точка) */
  --num-size: clamp(2.8rem, 4vw, 4.2rem);
  --num-shift: calc(var(--num-size) * -.38);
  --dot-gap: 16px;
  --num-h: calc(var(--num-shift) + var(--num-size) + var(--dot-gap) + 2px);
}
.section--process .process-steps {
  position: relative;
}

.section--process .process-step {
  position: relative;
  padding-left: clamp(72px, 7.5vw, 118px);
}
.section--process .process-step + .process-step {
  margin-top: var(--step-gap);
}

/* сегмент золотой нити: от точки под номером — до номера следующего шага */
.section--process .process-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--num-h);
  bottom: calc(-6px - var(--step-gap) - var(--num-shift));
  width: 1px;
  background: linear-gradient(180deg, var(--line-gold), rgba(227, 164, 41, .22));
}
.section--process .process-step:last-child::before {
  bottom: 4px;
  background: linear-gradient(180deg, var(--line-gold), transparent);
}

.section--process .process-step__num {
  position: absolute;
  left: 0;
  top: var(--num-shift);
  transform: translateX(-50%);
  display: block;
  text-align: center;
}
.section--process .process-step__num > span {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--num-size);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* рыльце-точка под номером — дозированный crimson */
.section--process .process-step__num::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: var(--dot-gap) auto 0;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 10px rgba(195, 74, 42, .55);
}

.section--process .process-step__title {
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  font-weight: 400;
  margin-bottom: 14px;
}
.section--process .process-step__body p {
  max-width: 52ch;
  font-weight: 300;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ---------- Факт-плашка ---------- */
.section--process .process-fact {
  position: relative;
  margin-top: clamp(80px, 11vh, 140px);
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 76px);
  /* честный резерв под SVG-нити справа — вместо магического margin у тега */
  padding-right: clamp(220px, 26vw, 360px);
  border: 1px solid var(--line-gold);
  border-radius: 24px;
  background: linear-gradient(115deg, var(--bg-1) 0%, var(--bg-2) 70%);
  overflow: hidden;
  isolation: isolate;
}
.section--process .process-fact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(560px 320px at 8% 100%, rgba(227, 164, 41, .09), transparent 70%);
  pointer-events: none;
}
.section--process .process-fact__num {
  flex: none;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.6rem, 7vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--process .process-fact__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--ivory);
  max-width: 22ch;
  text-wrap: balance;
}
.section--process .process-fact__threads {
  position: absolute;
  right: clamp(-40px, -1vw, 0px);
  bottom: -24px;
  width: clamp(260px, 30vw, 400px);
  height: auto;
  pointer-events: none;
  opacity: .85;
}
.section--process .process-fact__tag {
  margin-left: auto;
  margin-right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.section--process .process-fact__tag::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 1px;
  margin-right: 14px;
  background: var(--line-gold);
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (min-width: 769px) {
  /* низ колонок: шаги растягиваются, чтобы хвост нити шага 04
     не обрывался заметно выше низа фото с каптионом */
  .section--process {
    --step-gap: clamp(48px, 7vh, 112px);
  }
}
@media (min-width: 1280px) {
  .section--process {
    --step-gap: clamp(64px, 9vh, 112px);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* фото выше — чтобы колонна под ним не пустовала рядом с шагом 04 */
  .section--process .process-photo__frame {
    aspect-ratio: 3 / 4.6;
  }
}

@media (max-width: 1024px) {
  .section--process .process-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(40px, 5vw, 72px);
  }
  /* колоночная раскладка факт-плашки уже с 1024px:
     на 900px строка ломалась на 4 строки с висячими словами */
  .section--process .process-fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 40px 28px 48px;
  }
  .section--process .process-fact__tag {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .section--process .process-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .section--process .process-photo {
    position: static;
  }
  .section--process .process-photo__frame {
    aspect-ratio: 4 / 3;
  }
  .section--process {
    --step-gap: 56px;
    --num-size: 2.3rem;
    --dot-gap: 12px;
  }
  .section--process .process-crocus {
    display: none;
  }
  .section--process .process-steps {
    margin-left: 30px;
  }
  .section--process .process-step {
    padding-left: 52px;
  }
  /* нити меньше и правее — чтобы тег «Ручная работа · 100%»
     не ложился на декор (зазор ≥16px) */
  .section--process .process-fact {
    padding-right: 88px;
  }
  .section--process .process-fact__threads {
    right: -48px;
    bottom: -24px;
    width: 160px;
    opacity: .5;
  }
}

@media (max-width: 480px) {
  .section--process .process-steps {
    margin-left: 24px;
  }
  .section--process .process-step {
    padding-left: 44px;
  }
  .section--process {
    --num-size: 2rem;
  }
  .section--process .process-fact__text {
    max-width: 18ch;
  }
}