/* Proces współpracy — blok feuer/proces-wspolpracy (task03.11; punkt wyjścia: makieta K13, task01.30).
   Wg FeuerDS: „Proces wspolpracy" 7:6504 (desktop, 4 kroki), „Proces wspolpracy mobile" 7:6567.
   Liczba kroków 2 / 3 / 4 / 6: rząd równych kolumn z gutterem siatki — szerokości równe kolumnom
   kol-6 / kol-4 / kol-3 / kol-2 (jak „Dla kogo", dla-kogo.css).
   Numer „01." z licznika CSS; ikona kroku opcjonalna (img z biblioteki mediów) — poświata z CSS
   tylko przy ikonie. Tablet (640–1023) bez projektu — układ mobile.
   Wartości px z Figmy zapisane w rem (baza 16). */

.proces {
  max-width: 90rem;                       /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  padding-block: var(--odstep-8);         /* 64/64 — ramka desktop 84/82 ujednolicona (task01.30) */
  /* bez dolnej linii sekcji — obrys tła na ramce mobile jest wyłączony */
}

.proces-tytul {
  margin: 0;
  font-size: var(--tekst-32);             /* H2 32/44.8 ExtraBold */
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

/* ---- Kroki ---- */

/* Desktop: wszystkie kroki w jednym rzędzie równych kolumn; krok to podsiatka 3 wierszy
   (numer + ikona / tytuł / linia + opis) — wiersz tytułu ma jedną wysokość w całym rzędzie,
   więc linie ze strzałkami leżą w jednej linii także przy tytule dwuwierszowym (task01.30). */
.proces-kroki {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--odstep-4);            /* gutter siatki 32 */
  row-gap: 0;                             /* odstępy wewnątrz kroku ustawia sam krok */
  margin: var(--odstep-6) 0 0;            /* 48 pod H2 (ramka 51 — task01.30) */
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.proces-kroki:first-child { margin-top: 0; }   /* blok bez nagłówka (opcjonalny — task03.46) */

.proces-krok {
  counter-increment: krok;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}

/* Wiersz numer + ikona: 48 wys., numer 36/24 Light w kolorze tekstu (pole 24 wycentrowane —
   glify wystają), odstęp 9, ikona ilustracyjna 48. */
.proces-ikona {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  justify-self: start;                    /* desktop (grid) */
  align-self: flex-start;                 /* mobile (flex column) — inaczej poświata ucieka na prawy brzeg */
  height: 3rem;
}

.proces-ikona::before {
  content: counter(krok, decimal-leading-zero) ".";
  font-size: var(--tekst-36);
  line-height: 1.5rem;
  font-weight: var(--waga-cienka);
}

.proces-ikona img {
  display: block;
  width: 3rem;
  height: 3rem;
}

/* Poświata: kółko 32 w prawym górnym rogu pola ikony, nad ikoną (kolejność warstw w Figmie);
   poza plikiem ikony. Krok bez ikony — sam numer, bez poświaty. */
.proces-ikona:has(img)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--kolor-marki-poswiata);
}

.proces-krok h3 {
  margin: var(--odstep-05) 0 0;           /* 4 pod wierszem numeru */
  font-size: var(--tekst-20);             /* 20/28 — kanon H4 (ramka 20/32; task01.30) */
  line-height: var(--interlinia-20);
  font-weight: var(--waga-gruba);
}

/* Opis 16/24; nad nim linia 1 px marki ze strzałką: 24 pod tytułem, 24 nad opisem.
   Linia i grot z pseudoelementów — markup kroku to tylko ikona, h3 i p. */
.proces-opis {
  position: relative;
  margin: 0;
  padding-top: calc(var(--odstep-3) * 2 + 1px);
  line-height: 1.5rem;                    /* w Figmie 24, nie 22.4 — jak w „Dla kogo" */
}

.proces-opis::before {
  content: "";
  position: absolute;
  top: var(--odstep-3);
  left: 0;
  right: 0;
  border-top: 1px solid var(--kolor-marki);
}

.proces-opis::after {                     /* grot → : 6 px chevron obrócony, wierzchołek na końcu linii */
  content: "";
  position: absolute;
  top: calc(var(--odstep-3) + 0.5px);
  right: 0.1rem;
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1px solid var(--kolor-marki);
  border-right: 1px solid var(--kolor-marki);
  transform: translateY(-50%) rotate(45deg);
}

.proces-lista .proces-opis::after { content: none; }   /* odmiana „Lista": sama linia, bez grotu (task03.60) */

/* ---- Tablet i mobile: jedna kolumna (ramka 7:6567) ---- */

@media (max-width: 1023px) {
  .proces-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold (ramka 38 — kanon) */
    line-height: var(--interlinia-28);
  }

  .proces-kroki {
    grid-auto-flow: row;
    margin-top: var(--odstep-4);          /* 32 pod H2 */
    row-gap: var(--odstep-4);             /* kroki jeden pod drugim co 32 */
  }

  .proces-krok {                          /* bez podsiatki — nie ma rzędu do wyrównania */
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
}