/* =================================================
   mod_timeline – FINAL 1:1 (naprawa: oś połączona z markerami)
   Wersja: 2.0.0
   Kluczowa poprawka: .timeline-item ma width:100%,
   a kafelek ma margin-right = rezerwacja na oś+etykiety.
   Dzięki temu marker/etykieta liczą się w tej samej osi X co pionowa linia.
================================================= */

.timeline[data-timeline]{
  --axis-right: 42px;     /* od prawej krawędzi kontenera timeline */
  --label-gap: 30px;      /* od osi do tekstu */ 
  --label-space: 50px;    /* rezerwacja na "Krok 10" itp. */
  --reserve: calc(var(--axis-right) + var(--label-gap) + var(--label-space));
  max-width: 100%;
  margin: 50px auto;
  position: relative;
  box-sizing: border-box;
}

/* pionowa oś */
.timeline[data-timeline]::before{
  content:"";
  position:absolute;
  top:0;
  right: var(--axis-right);
  width:2px;
  height:100%;
  background:#2b2b2b;
}

/* element – MUSI mieć pełną szerokość kontenera,
   inaczej marker liczy się od szerokości kafelka (i "odjeżdża"). */
.timeline[data-timeline] .timeline-item{
  position: relative;
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
}

/* marker na osi */
.timeline[data-timeline] .timeline-item::after{
  content:"";
  position:absolute;
  top:22px;
  right: var(--axis-right);
  transform: translateX(50%);
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:2px solid #2b2b2b;
  box-sizing:border-box;
  z-index: 4;
}

/* kafelek – zostaw miejsce na prawą część */
.timeline[data-timeline] .timeline-content{
  /*background:#f6efea;*/
  border:1px solid #eadfd8;
  border-radius:10px;
  padding:18px 22px 18px 74px; /* miejsce na ikonę */
  box-shadow:0 10px 26px rgba(0,0,0,0.10);
  margin-right: var(--reserve);
  box-sizing: border-box;
}

/* tytuł */
.timeline[data-timeline] .timeline-content h3{
  font-size:18px;
  margin:0 0 6px 0;
  font-weight:600;
  color:#1e1e1e;
}

/* opis */
.timeline[data-timeline] .timeline-text{
  font-size:13.5px;
  line-height:1.65;
  color:#4a4a4a;
}
.timeline[data-timeline] .timeline-text p{ margin:0 0 10px 0; }

/* złota ikona w kafelku */
.timeline[data-timeline] .timeline-icon{
  position:absolute;
  left:22px;
  top:18px;
  width:34px;
  height:34px;
  background:#c7a15a;
  border-radius:50%;
  color:#fff;
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.18);
  z-index: 2;
}

/* etykieta Krok X – po PRAWEJ od osi */
.timeline[data-timeline] .timeline-step{
  position:absolute;
  top:21px;
  left: calc(100% - var(--axis-right) + var(--label-gap));
  font-size:14px;
  font-weight:600;
  color:#1e1e1e;
  line-height:1;
  white-space:nowrap;
  z-index: 4;
}

/* kreska łącząca: od osi do etykiety */
.timeline[data-timeline] .timeline-step::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--label-gap));
  top:50%;
  transform:translateY(-50%);
  width: var(--label-gap);
  height:2px;
  background:#2b2b2b;
}

/* ===== animacja (bezpieczna) ===== */
.timeline[data-timeline] .timeline-animate{ opacity:1; transform:none; }
.timeline[data-timeline].timeline--js .timeline-animate{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.timeline[data-timeline].timeline--js .timeline-animate.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .timeline[data-timeline].timeline--js .timeline-animate{ transition:none; transform:none; opacity:1; }
}

/* mobile */
@media (max-width:768px){
  .timeline[data-timeline]{
    --reserve: 0px;
  }
  .timeline[data-timeline]::before{ display:none; }
  .timeline[data-timeline] .timeline-item::after{ display:none; }
  .timeline[data-timeline] .timeline-content{ margin-right: 0; }
  .timeline[data-timeline] .timeline-step{
    position:static;
    display:inline-block;
    margin-top:10px;
  }
  .timeline[data-timeline] .timeline-step::before{ display:none; }
  .timeline[data-timeline] .timeline-icon{ left:16px; }
  .timeline[data-timeline] .timeline-content{ padding-left:70px; }
}