.ns-historia{
  --ns-line-x: 200px;
  --ns-line-w: 2px;
  --ns-dot: 12px;
  --ns-dot-featured: 16px;

  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:80px 20px;
}

/* pionowa linia osi */
.ns-historia__line{
  position:absolute;
  left:var(--ns-line-x);
  top:0;
  bottom:0;
  width:var(--ns-line-w);
  background:linear-gradient(to bottom, transparent, #1EA7FF, transparent);
  opacity:.9;
}

/* kropki na osi – pozycjonowane względem sekcji (ten sam układ co linia) */
.ns-historia__dot{
  position:absolute;
  top:0;
  left:0;
  width: var(--ns-dot);
  height: var(--ns-dot);
  border-radius:50%;
  background:#1EA7FF;
  box-shadow:0 0 12px #1EA7FF;
  transform: translate(-50%, 0);
  pointer-events:none;
  z-index: 2;
}
.ns-historia__dot.is-featured{
  width: var(--ns-dot-featured);
  height: var(--ns-dot-featured);
  box-shadow:0 0 18px #1EA7FF;
}


/* element */
.ns-historia__item{
  position:relative;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-bottom:80px;
  align-items:start;

  /* animacja startowa */
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}

/* kropka NA OSI (ten sam układ co linia) */
.ns-historia__item.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* data po lewej */
.ns-historia__date{
  text-align:right;
  font-size:20px;
  font-weight:800;
  color:#1EA7FF;
  letter-spacing:.2px;
  line-height:1.2;
  padding-top:2px;
  padding-right:18px; /* więcej luzu od linii */
}

/* prawa kolumna */
.ns-historia__content{
  position:relative;
  color:#EAF6FF;
  font-size:16px;
  line-height:1.65;
  padding:18px 20px;
  padding-left:18px; /* luz od kropki */
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(30,167,255,.14);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.ns-historia__item.is-featured .ns-historia__content{
  border-color: rgba(30,167,255,.28);
  background: rgba(30,167,255,.06);
}

/* kropka NA LINII */



.ns-historia__subtitle{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  color:#EAF6FF;
}

/* żeby nie rozjeżdżały długie ciągi bez spacji */
.ns-historia__text,
.ns-historia__text *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Mobile */
@media (max-width:768px){
  .ns-historia{
    padding:60px 16px;
    --ns-line-x: 12px;
  }

  .ns-historia__line{ left:var(--ns-line-x); }

  .ns-historia__item{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:52px;
  }

  .ns-historia__date{
    text-align:left;
    font-size:18px;
    padding-right:0;
    padding-left:26px; /* wyrównanie do treści (po prawej od linii) */
  }

  .ns-historia__content{
    padding-left:26px;
  }

}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ns-historia__item{
    transition:none;
    transform:none;
    opacity:1;
  }
}


/* ===== Intro (ACF) ===== */
.ns-historia__intro{
  max-width: 860px;
  margin: 0 auto 40px;
  padding: 0 16px;
  font-size: 18px;
  line-height: 1.7;
}
@media (max-width: 768px){
  .ns-historia__intro{font-size:16px;margin-bottom:24px;}
}