/* =========================================================================
   process.css - "שלושה שלבים לעור חלק לצמיתות:" (#process).
   Figma frame 1:4, y 3500-4740. Mobile/tablet first: stacked steps with
   hairline separators. From 1280px: the Figma composition in --u units.
   ========================================================================= */

#process {
  position: relative;
  background: var(--fg-paper, #fff);
  color: var(--fg-brown);
  padding-block: 56px 72px;
  --pr-pad: 20px;
  padding-inline: var(--pr-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#process .process__heading {
  inline-size: 100%;
  max-inline-size: 560px;
  margin: 0;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: clamp(40px, 10.5vw, 72px);
  line-height: .8;
  text-align: right;
  color: var(--fg-brown);
}

/* Hairlines are desktop-only; the stacked layout uses step borders. */
#process .process__line { display: none; }

/* Oval + English label. Mobile: label runs horizontally above the oval. */
#process .process__art {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 560px;
  margin-block-start: 36px;
}
#process .process__oval {
  order: 2;
  display: block;
  inline-size: min(56%, 240px);
  block-size: auto;
}
#process .process__vlabel {
  order: 1;
  margin-block-end: -.18em;
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 15vw, 96px);
  line-height: .74;
  text-align: center;
  color: var(--fg-brown);
  white-space: nowrap;
  user-select: none;
}
#process .process__vlabel br { display: none; }

#process .process__steps {
  inline-size: 100%;
  max-inline-size: 560px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
#process .process__step {
  position: relative;
  padding-block: 28px 32px;
  border-block-start: 1px solid var(--fg-brown);
  text-align: right;
}
#process .process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(110px, 32vw, 170px);
  line-height: .59;
  color: rgba(93, 40, 9, .28);
  user-select: none;
  pointer-events: none;
}
#process .process__step-title {
  position: relative;
  margin: -.35em 0 0;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .15em;
  color: var(--fg-brown);
}
#process .process__step-body {
  margin: 12px 0 0;
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg-brown);
}

/* Stadium photo: bleeds off the right edge on every size (rounded left end). */
#process .process__stadium {
  display: block;
  align-self: flex-start;            /* RTL: physical right */
  inline-size: min(88%, 480px);
  block-size: auto;
  margin-block-start: 8px;
  margin-right: calc(-1 * var(--pr-pad));   /* bleed off the right edge */
}
#process .process__cta {
  align-self: flex-end;              /* RTL: physical left */
  margin-block-start: 36px;
}

@media (min-width: 768px) {
  #process { --pr-pad: 48px; padding-block: 88px 96px; }
  #process .process__heading,
  #process .process__art,
  #process .process__steps { max-inline-size: 640px; }
  #process .process__step-body { font-size: 19px; line-height: 1.4; }
  #process .process__step-title { font-size: 20px; }
  #process .process__art { margin-block-start: 64px; }
}

/* ---- Figma composition (>= 1280px) -------------------------------------- */
@media (min-width: 1280px) {
  #process {
    display: block;
    block-size: calc(1240 * var(--u));
    padding: 0;
  }
  #process .process__heading {
    position: absolute;
    top: calc(51 * var(--u));
    right: calc(179 * var(--u));
    inline-size: calc(732 * var(--u));
    max-inline-size: none;
    font-size: var(--t-h2);
    line-height: .74;
  }

  #process .process__line {
    display: block;
    position: absolute;
    background: var(--fg-brown);
  }
  /* 1:139 is slightly slanted: x 805 at y 3139 -> x 792 at y 4514 (0.54deg). */
  #process .process__line--v-long { left: calc(801.6 * var(--u)); top: 0; inline-size: 1px; block-size: calc(1014 * var(--u)); transform: rotate(.5417deg); transform-origin: 0 0; }
  #process .process__line--h-top  { left: calc(799 * var(--u)); right: 0; top: calc(230 * var(--u)); block-size: 1px; }
  #process .process__line--v-mid  { left: calc(1294 * var(--u)); top: calc(230 * var(--u)); inline-size: 1px; block-size: calc(937 * var(--u)); }
  #process .process__line--h-mid  { left: calc(795 * var(--u)); top: calc(730 * var(--u)); inline-size: calc(1123 * var(--u)); block-size: 1px; }
  #process .process__line--h-left { left: calc(181 * var(--u)); top: calc(1014 * var(--u)); inline-size: calc(611 * var(--u)); block-size: 1px; }

  #process .process__art {
    display: block;
    position: static;
    margin: 0;
    max-inline-size: none;
  }
  #process .process__oval {
    position: absolute;
    top: calc(230 * var(--u));
    left: calc(356 * var(--u));
    inline-size: calc(389 * var(--u));
  }
  /* 1:78 - box 591 x 188, rotated 90deg (reads bottom-to-top), right-aligned. */
  #process .process__vlabel {
    position: absolute;
    top: calc(917 * var(--u));
    left: calc(200 * var(--u));
    inline-size: calc(591 * var(--u));
    block-size: calc(188 * var(--u));
    margin: 0;
    font-size: var(--t-display);
    line-height: .59;
    text-align: right;
    transform: rotate(-90deg);
    transform-origin: 0 0;
  }
  #process .process__vlabel br { display: inline; }

  #process .process__steps { margin: 0; max-inline-size: none; }
  #process .process__step { position: static; padding: 0; border: 0; }
  #process .process__num,
  #process .process__step-title,
  #process .process__step-body { position: absolute; margin: 0; }

  #process .process__num {
    font-size: calc(302 * var(--u));
    line-height: .59;
    white-space: nowrap;
  }
  /* Chrome adds the 15% tracking after the first (rightmost) glyph in RTL;
     right offsets below are Figma x minus 3.6 to compensate. */
  #process .process__step-title {
    font-size: var(--t-body);
    line-height: 1.2;
    white-space: nowrap;
  }
  #process .process__step-body {
    font-size: var(--t-body);
    line-height: 1.2;
  }

  #process .process__step--1 .process__num        { top: calc(329 * var(--u)); right: calc(157 * var(--u)); }
  #process .process__step--1 .process__step-title { top: calc(478 * var(--u)); right: calc(175.4 * var(--u)); }
  #process .process__step--1 .process__step-body  { top: calc(515 * var(--u)); right: calc(177 * var(--u)); inline-size: calc(325 * var(--u)); }

  #process .process__step--2 .process__num        { top: calc(329 * var(--u)); right: calc(661 * var(--u)); }
  #process .process__step--2 .process__step-title { top: calc(478 * var(--u)); right: calc(672.4 * var(--u)); }
  #process .process__step--2 .process__step-body  { top: calc(532 * var(--u)); right: calc(676 * var(--u)); inline-size: calc(408 * var(--u)); }

  #process .process__step--3 .process__num        { top: calc(829 * var(--u)); right: calc(661 * var(--u)); }
  #process .process__step--3 .process__step-title { top: calc(978 * var(--u)); right: calc(674.4 * var(--u)); }
  #process .process__step--3 .process__step-body  { top: calc(1028 * var(--u)); right: calc(678 * var(--u)); inline-size: calc(383 * var(--u)); }

  #process .process__stadium {
    position: absolute;
    top: calc(793 * var(--u));
    left: calc(1337 * var(--u));
    inline-size: calc(583 * var(--u));
    margin: 0;
  }
  #process .process__cta {
    position: absolute;
    top: calc(1134 * var(--u));
    left: calc(181 * var(--u));
    margin: 0;
  }
}