/* How we work "Jak spolupracujeme" (step 4.12, approved variant A): four numbered steps in an ordered list, no cards,
   no photo and no animation. Large numbers, each a slice of the accent gradient, so 01 → 04 run from violet to lime;
   thin lines in the same colours join them. From 768 px two rows of two steps, a line runs from each number to the
   next one in its row; below 768 px the steps stand below each other with a vertical line between the numbers.
   Breakpoints are container queries in em on the section's container (46em = 736 px and 66.75em = 1068 px, i.e. a
   768 and 1100 px window at the usual text size): with enlarged text, by the browser setting or a larger root font
   size, the steps stay in one column longer. Without container query support the steps simply stand below each other.
   The numbers and lines are decoration (aria-hidden, pseudo-elements); the list gives the order. */
/* A word wider than its box (only with strongly enlarged text) breaks instead of sticking out */
.process { padding-block: var(--space-section); overflow-wrap: break-word; }
.process :is(h2, h3) { overflow-wrap: anywhere; }

.process > .container { container-type: inline-size; }
.process-steps { margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.process-step { --num-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); min-width: 0; }
.process-step h3 { margin-top: var(--space-6); font-size: var(--text-h3); }
.process-step p { max-width: 34em; color: var(--color-muted); }

.process-num {
  display: block;
  width: max-content;
  font: 700 var(--num-size) / 1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--color-violet), var(--color-cyan), var(--color-lime)) no-repeat;
  background-size: 400% 100%;
  background-position: var(--slice) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The slice of the gradient for each number and the colours of the line that follows it */
.process-step:nth-child(1) { --slice: 0%; --from: var(--color-violet); --to: color-mix(in srgb, var(--color-violet), var(--color-cyan)); }
.process-step:nth-child(2) { --slice: 33.33%; --from: color-mix(in srgb, var(--color-violet), var(--color-cyan)); --to: var(--color-cyan); }
.process-step:nth-child(3) { --slice: 66.67%; --from: var(--color-cyan); --to: color-mix(in srgb, var(--color-cyan), var(--color-lime)); }
.process-step:nth-child(4) { --slice: 100%; --from: color-mix(in srgb, var(--color-cyan), var(--color-lime)); --to: var(--color-lime); }
/* Browsers with container queries but without color-mix() (Firefox 110–112) would drop the lines: plain token colours */
@supports not (color: color-mix(in srgb, red, blue)) {
  .process-step:nth-child(-n + 2) { --from: var(--color-violet); --to: var(--color-cyan); }
  .process-step:nth-child(n + 3) { --from: var(--color-cyan); --to: var(--color-lime); }
}

/* The number and its line */
.process-mark { display: flex; align-items: center; gap: var(--space-4); }
.process-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--from), var(--to));
  opacity: 0.55;
}

@container (width >= 46em) {
  .process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-12); }
  /* In the left column the line runs across the gap up to the next number */
  .process-step:nth-child(odd) .process-mark::after { margin-right: calc(-1 * var(--space-12) + var(--space-4)); }
  /* The row ends with a short fade instead of a hard stop */
  .process-step:nth-child(even) .process-mark::after { -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
}
@container (width >= 66.75em) {
  .process-steps { column-gap: var(--space-16); }
  .process-step:nth-child(odd) .process-mark::after { margin-right: calc(-1 * var(--space-16) + var(--space-4)); }
  .process-step p { padding-right: var(--space-8); }
}
/* Below 768 px: the numbers in a narrow column (wider if a fallback font draws them wider), the text beside them. The
   number's box spans the heading and the text, its line fills the rest of that height down to the next number. */
@container (width < 46em) {
  .process-step { display: grid; grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr); column-gap: var(--space-4); }
  .process-mark { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 0; }
  .process-mark::after {
    width: 1px;
    height: auto;
    margin: var(--space-3) 0 var(--space-3) 1.0625rem;
    background: linear-gradient(180deg, var(--from), var(--to));
  }
  .process-step:last-child .process-mark::after { display: none; }
  .process-step h3 { grid-column: 2; margin-top: 0.3em; }
  .process-step p { grid-column: 2; }
  .process-step:not(:last-child) p { margin-bottom: var(--space-12); }
}
/* Smaller numbers in a narrow container (below a 768 px window). In px on purpose: the number's size follows the
   window, not the layout, so a wide window with enlarged text in one column keeps the large size and the numbers never
   get smaller as the text grows */
@container (width < 736px) {
  .process-num { font-size: 2rem; }
}
/* A narrow window with enlarged text (an em query follows the text size): the number goes above the text, so the text
   keeps the full width */
@container (width < 18em) {
  .process-step { display: block; }
  .process-mark::after { display: none; }
  .process-step h3 { margin-top: var(--space-3); }
}