/* ===========================================================================
   CE-38 · Proces – duże słowa (process in large words)
   Root:     section.ce-process
   Design:   Figma crear-v2.0, frame 608:1127, node 608:1188 (26.09.2026), a
             1440 px frame: 160 px padding; the eyebrow „• PROCES”, 28 px,
             the H2 in 40 px Expanded Regular (line 1.22, −1.6 px, #1D1D1E,
             809 px); 104 px to the body – on the left (575 px) the five
             stages as large words, 80 px Expanded Regular (line 1.12,
             −3.2 px, 23 px apart), each with its index „(01)” (17 px TT
             Hoves Pro Medium, 32 px wide, 16 px down, 23 px before the
             word); the current one #1D1D1E, the rest #E9E9E9 – as the list
             of CE-29; 242 px further (473 px) the description of the
             current stage in 20 px TT Hoves Pro (line 1.4, −0.2 px,
             #0A2526), level with the top of the list.
   Parts:    __head (__eyebrow with .lf-eyebrow, __title H2 with .lf-h2),
             __list (ol: a two-column grid; its li are display: contents),
             __step (li; .is-current), __row (index + name, left column),
             __num („(01)”, aria-hidden – the <ol> numbers them), __name
             (H3; its inner span rises in with data-reveal-text="rise"),
             __text (the description; all of them share one cell of the
             right column, only the current one is shown)
   States:   .is-current on one __step (the markup marks the first state –
             the design shows the third stage); .is-ready on the root once
             ce/CE-38-process-words.js runs
   Mechanics (ce/CE-38-process-words.js): the stage under the mouse is
             current; without the mouse over the list – scrolling, touch –
             the stage nearest the middle of the window. The words change
             colour in 450 ms; the new description rises 12 px and fades in
             (500 ms) while the old one fades out. Scroll-in: the eyebrow
             fades in, the H2 letter by letter, the words rise out of their
             masks one after another (site.js kit).
   Layout:   1:1 at 1440 px, proportionally below; ≤ 900 px every stage
             shows its word (smaller, dark) with its description under it –
             no current stage.
   Base:     o-nas.html#proces · registry: ce-registry.js → CE-38
   =========================================================================== */

.ce-process {
  --pw-size: clamp(2.5rem, 5.556vw, 80px);          /* the words: 80 px at 1440 */
  padding-block: clamp(96px, 11.11vw, 160px);
}

/* ---- head --------------------------------------------------------------------- */
.ce-process__head { margin-bottom: clamp(56px, 7.22vw, 104px); }
.ce-process__eyebrow { margin-bottom: clamp(20px, 1.94vw, 28px); }
.ce-process__title {
  max-width: 20.2em;                     /* 809 px at 40 px */
  font-size: clamp(1.625rem, 2.778vw, 40px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.04em;                /* −1.6 px at 40 px */
  color: var(--ui-ink);
}

/* ---- list and descriptions ------------------------------------------------------ */
.ce-process__list {
  display: grid;
  grid-template-columns: minmax(0, min(575px, 39.93vw)) minmax(0, min(473px, 32.85vw));
  grid-template-rows: repeat(5, auto);
  column-gap: clamp(40px, 16.8vw, 242px);
  row-gap: calc(var(--pw-size) * .2875);             /* 23 px at 80 px */
}
.ce-process__step { display: contents; }

.ce-process__row {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pw-size) * .2875);                 /* 23 px at 80 px */
  color: #E9E9E9;
  transition: color .45s var(--ease-out-quart);
}
.ce-process__step.is-current .ce-process__row { color: var(--ui-ink); }
.ce-process.is-ready .ce-process__row { cursor: default; }

.ce-process__num {
  flex: none;
  width: 2em;                                        /* 32 px at 16–17 px */
  padding-top: calc(var(--pw-size) * .2);            /* 16 px at 80 px */
  font-size: clamp(.875rem, 1.18vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ce-process__name {
  min-width: 0;
  font-size: var(--pw-size);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;                            /* −3.2 px at 80 px */
  white-space: nowrap;
}

.ce-process__text {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  font-size: clamp(1.0625rem, 1.389vw, 20px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out-quart), transform .5s var(--ease-out-quart);
}
.ce-process__step.is-current .ce-process__text {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .5s var(--ease-out-quart) .12s, transform .6s var(--ease-out-expo) .12s;
}

@media (prefers-reduced-motion: reduce) {
  .ce-process__row, .ce-process__text,
  .ce-process__step.is-current .ce-process__text { transition: none; }
}

/* ---- narrow: every stage with its description ------------------------------------- */
@media (max-width: 900px) {
  .ce-process { --pw-size: clamp(2rem, 8.5vw, 3.5rem); }
  .ce-process__list { display: block; }
  .ce-process__step { display: block; }
  .ce-process__step + .ce-process__step { margin-top: 32px; }
  .ce-process__row { color: var(--ui-ink); gap: 12px; }
  .ce-process__num { width: 2.2em; padding-top: calc(var(--pw-size) * .18); }
  .ce-process__name { white-space: normal; }
  .ce-process__text,
  .ce-process__step.is-current .ce-process__text {
    margin-top: 10px;
    padding-left: calc(2.2 * clamp(.875rem, 1.18vw, 17px) + 12px);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}