/* =====================================
   TIMELINE
===================================== */
.timeline{
  display: grid;
  gap: 14px;
}

/* cada linha */
.timeline__item{
  display: grid;
  grid-template-columns: 64px 18px 1fr; /* data | linha/dot | conteúdo */
  gap: 10px;
  align-items: start;
}

/* coluna da data */
.timeline__date{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink-400);
  text-transform: uppercase;
  line-height: 1.1;
  padding-top: 6px;
}

/* coluna do eixo vertical */
.timeline__rail{
  position: relative;
  display: grid;
  justify-items: center;
}

/* linha vertical */
.timeline__rail::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tl-rail);
  border-radius: 99px;
}

/* dot */
.timeline__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tl-dot);
  box-shadow: 0 0 0 4px var(--tl-dot-ring);
  margin-top: 6px;
  z-index: 1;
}

/* balão / card */
.timeline__bubble{
  background: var(--tl-bubble-bg);
  border: 1px solid var(--tl-bubble-border);

  border-radius: 6px 12px 12px 6px;
  padding: 12px 14px;

  box-shadow: var(--tl-shadow-1), var(--tl-shadow-2);

  transition: box-shadow .2s ease, transform .2s ease;
}

/* título opcional dentro do balão */
.timeline__title{
  margin: 0 0 4px;
  font-size: .95rem;
  font-weight: 750;
  color: var(--ink-900);
}

/* texto */
.timeline__text{
  margin: 0;
  font-size: .95rem;
}

/* último item: corta a linha em baixo para não “passar” do último dot */
.timeline__item.is-last .timeline__rail::before{
  bottom: 50%;
}

/* variações de estado (opcional) */
.timeline__item.is-active .timeline__dot{
  background: var(--tl-dot-active);
  box-shadow: 0 0 0 4px var(--tl-dot-active-ring);
}

.timeline__item.is-muted .timeline__bubble{
  opacity: .8;
}

/* mobile estreito */
@media (max-width: 360px){
  .timeline__item{
    grid-template-columns: 56px 16px 1fr;
    gap: 8px;
  }
}