.wl-proces {
  padding: var(--space-edge);
}

.wl-proces__inner {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-box);
  overflow: hidden;
  background: var(--color-bg-dark);
  padding-inline: max(calc(var(--space-page-fluid) - var(--space-edge)), calc((100% - var(--container-max)) / 2));
}

.wl-proces__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
}

.wl-proces__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.6;
}

.wl-proces__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12, 54, 92, 0.7);
}

.wl-proces__content {
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.wl-proces__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-sm);
  width: 100%;
}

/**
 * Dobór liczby kolumn wg liczby kroków. Dwa cele naraz:
 *   1) żadna karta nie zostaje samotna w ostatnim rzędzie,
 *   2) karty nie są za wąskie dla długiego tekstu.
 *
 * Dlaczego 8 kroków NIE dostaje 4 kolumn (choć 8 = 4+4, czyli bez sieroty):
 * opisy kroków na stronie Services mają 167–236 znaków. W karcie 378px (przy 1920px)
 * linia tekstu liczyła ~25 znaków, a opis zajmował 11–12 linii — karta stawała się
 * wąskim słupkiem. W 3 kolumnach karta ma 513px (~38 znaków w linii), a opis
 * mieści się w 6–8 liniach.
 * 4 kroki (About: opisy ~60 znaków) zostają w jednym rzędzie 4 kolumn — przy tak
 * krótkim tekście dzielenie nic nie poprawia.
 *
 * Liczby kolumn:  3 -> 3  ·  5 -> 3+2  ·  6 -> 3+3  ·  7 -> 3+3+1  ·  8 -> 3+3+2
 * Niepełny ostatni rząd wyśrodkowujemy: siatka 6-kolumnowa + `span 2`
 * (2 z 6 = dokładnie szerokość karty 1/3). Pierwsza karta ostatniego rzędu
 * startuje w kolumnie 2 (gdy jest sama — w kolumnie 3).
 */
@media (min-width: 1025px) {
  /* 3 kroki -> 3 (jeden pełny rząd) · 6 kroków -> 3+3 (dwa pełne rzędy) */
  .wl-proces__steps:has(> .wl-proces__step:nth-child(3):last-child),
  .wl-proces__steps:has(> .wl-proces__step:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 5 kroków -> 3+2 · 7 kroków -> 3+3+1 · 8 kroków -> 3+3+2 */
  .wl-proces__steps:has(> .wl-proces__step:nth-child(5):last-child),
  .wl-proces__steps:has(> .wl-proces__step:nth-child(7):last-child),
  .wl-proces__steps:has(> .wl-proces__step:nth-child(8):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .wl-proces__steps:has(> .wl-proces__step:nth-child(5):last-child) > .wl-proces__step,
  .wl-proces__steps:has(> .wl-proces__step:nth-child(7):last-child) > .wl-proces__step,
  .wl-proces__steps:has(> .wl-proces__step:nth-child(8):last-child) > .wl-proces__step {
    grid-column: span 2;
  }

  /* Pierwsza karta niepełnego rzędu — start w kolumnie 2 (5 kroków i 8 kroków). */
  .wl-proces__steps:has(> .wl-proces__step:nth-child(5):last-child) > .wl-proces__step:nth-child(4),
  .wl-proces__steps:has(> .wl-proces__step:nth-child(8):last-child) > .wl-proces__step:nth-child(7) {
    grid-column: 2 / span 2;
  }

  /* 7 kroków — ostatnia karta sama w rzędzie, wyśrodkowana. */
  .wl-proces__steps:has(> .wl-proces__step:nth-child(7):last-child) > .wl-proces__step:nth-child(7) {
    grid-column: 3 / span 2;
  }
}

/* 4 kroki -> 4 kolumny dopiero od 1280px (przy 1920 karta ma 378px). */
@media (min-width: 1280px) {
  .wl-proces__steps:has(> .wl-proces__step:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Poniżej 1280px 4 kolumny dają karty ~253px — za wąskie: 4 kroki -> 2+2. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .wl-proces__steps:has(> .wl-proces__step:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wl-proces__step {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.wl-proces__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--fs-step-num);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.wl-proces__title {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--color-primary);
}

.wl-proces__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-primary);
}

.wl-proces .wl-btn-row {
  padding-bottom: 12px;
}

/**
 * Tablet / mały laptop (769–1024px): 2 kolumny zamiast jednej bardzo długiej kolumny
 * (8 kroków w 1 kolumnie = ~2350px wysokości przy połowie szerokości ekranu puste).
 * Przy nieparzystej liczbie kroków ostatnia karta dostaje cały rząd, ale szerokość
 * połowy i jest wyśrodkowana — czyta się jak celowy układ, nie jak „sierota".
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .wl-proces__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wl-proces__steps > .wl-proces__step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - var(--space-sm) / 2);
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .wl-proces__steps {
    grid-template-columns: 1fr;
  }

  .wl-proces__content {
    padding: var(--space-lg) 0;
  }
}

@media (max-width: 768px) {
  .wl-proces {
    padding: 0;
  }

  .wl-proces__inner {
    border-radius: 0;
    padding-inline: var(--space-page-fluid);
  }
}