@charset "UTF-8";
/* ============================================================
   PATTERN: jak-to-dziala (kordit/jak-to-dziala)
   Zdjęcie po lewej (z dashed frame jak hero/empathy/founder),
   vertical timeline po prawej z dashed pionową linią łączącą
   numery kroków (spójność z resztą strony).
   ============================================================ */
.kp-process {
  animation: kp-fadeInUp 0.6s var(--ease-out) both;
}
.kp-process .kp-process__row {
  align-items: stretch;
}
.kp-process .kp-process__body > *:first-child {
  margin-top: 0;
}
.kp-process .kp-process__body > *:last-child {
  margin-bottom: 0;
}
.kp-process .kp-process__head {
  text-align: left;
}
.kp-process .kp-process__head .kp-heading--marker br {
  display: block;
}
.kp-process {
  /* === Zdjęcie po lewej + dashed frame offset (jak founder/empathy) === */
}
.kp-process .kp-process__figure {
  display: flex;
  align-self: stretch;
}
.kp-process .kp-process__photo {
  margin: 0;
  width: 100%;
  position: relative;
  display: block;
}
.kp-process .kp-process__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: block;
}
.kp-process .kp-process__photo {
  /* Dashed frame offset — spójne z hero/empathy/founder */
}
.kp-process .kp-process__photo::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1.5px dashed var(--light);
  border-radius: 22px;
  z-index: -1;
}
.kp-process {
  /* === Timeline po prawej === */
}
.kp-process .kp-process__timeline {
  margin-top: 32px;
  position: relative;
}
.kp-process .kp-step {
  position: relative;
  padding: 0 0 2rem 4.5rem;
  margin: 0 !important;
}
.kp-process .kp-step:last-child {
  padding-bottom: 0;
}
.kp-process .kp-step > * {
  margin: 0;
}
.kp-process .kp-step h3 {
  color: var(--primary);
  line-height: 1.25;
}
.kp-process .kp-step p {
  line-height: 1.55;
}
.kp-process .kp-step {
  /* Numer w kółku — lewy słupek timeline */
}
.kp-process .kp-step .kp-step__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: 0;
  background: var(--trust-soft);
  border: 2px solid var(--trust);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--trust);
  z-index: 2;
}
.kp-process .kp-step {
  /* Dashed pionowa linia łącząca numery — DOKŁADNIE jak inne dashed
     akcenty na stronie (kp-hero__media::before, kp-empathy__photo::before) */
}
.kp-process .kp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 27px;
  /* środek kółka 56/2 - 1 (border) */
  width: 0;
  border-left: 1.5px dashed var(--light);
  z-index: 1;
}
.kp-process {
  /* Krok 4 — Gotówka — zielony numer + zielony heading + zielony border */
}
.kp-process .kp-step--final .kp-step__num {
  background: var(--trust);
  border-color: var(--trust);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.25);
}
.kp-process .kp-step--final h3 {
  color: var(--trust);
}
@media (max-width: 900px) {
  .kp-process .kp-process__row {
    flex-direction: column;
  }
  .kp-process .kp-process__figure {
    display: none;
  }
  .kp-process .kp-process__photo {
    max-width: 480px;
    margin-inline: auto;
  }
  .kp-process .kp-process__photo img {
    aspect-ratio: 4/3;
    height: auto;
    min-height: 0;
  }
  .kp-process .kp-process__photo::before {
    display: none;
  }
}

/*# sourceMappingURL=jak-to-dziala.css.map */