/* ============================================================
   NOSSA HISTÓRIA — linha do tempo editorial (página Sobre nós)
   Coluna única de leitura em largura confortável (~66ch) — sem
   caixas/sombras — acompanhada por um trilho fixo (sticky) que
   funciona ao mesmo tempo como índice de navegação e barra de
   progresso: régua vertical no desktop, pílulas horizontais no
   mobile/tablet. O item "ativo" é detectado via
   IntersectionObserver (mais barato que recalcular a posição de
   cada card a cada frame de scroll).
   ============================================================ */
.timeline-intro { margin-bottom: clamp(1.6rem,3vw,2.2rem); }
.timeline__eyebrow {
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate-400);
}

.timeline {
  position:relative;
  max-width:1120px;
  margin-inline:auto;
  display:grid;
  grid-template-columns: 224px minmax(0,1fr);
  gap: clamp(2rem,4vw,3.6rem);
  align-items:start;
}

/* ---- Trilho / navegação por período: régua com pontos + título de cada
   capítulo no desktop (espaço de sobra na coluna lateral); no mobile os
   títulos ficariam grandes demais para uma barra fixa, então viram
   marcadores sem rótulo visível — o nome continua disponível para leitor
   de tela via .timeline-nav__label (sr-only nesse breakpoint). ---- */
.timeline-nav {
  position:sticky;
  top: 104px;
  z-index:4;
  display:flex;
  flex-direction:column;
}
.timeline-nav__rail {
  position:absolute;
  top:8px; bottom:8px; left:5px;
  width:2px;
  border-radius:999px;
  background:var(--slate-200);
  overflow:hidden;
}
.timeline-nav__fill {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--orange), var(--blue-500) 30%, var(--blue-700) 55%, var(--blue-800) 78%, var(--ink));
  border-radius:999px;
  transform-origin:top;
  transform:scaleY(var(--tl-progress,0));
  transition:transform .12s linear;
}
.timeline-nav__item {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.6rem 0;
  text-align:left;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--muted);
  transition:color .25s var(--ease);
}
.timeline-nav__item::before {
  content:"";
  width:12px; height:12px;
  margin-top:3px;
  flex:none;
  border-radius:50%;
  background:var(--paper,#fff);
  border:2px solid var(--slate-300);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.timeline-nav__item:hover { color:var(--tl-color); }
.timeline-nav__item:hover::before { border-color:var(--tl-color); }
.timeline-nav__item.is-active { color:var(--tl-color); }
.timeline-nav__item.is-active::before {
  background:var(--tl-color);
  border-color:var(--tl-color);
  transform:scale(1.25);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tl-color) 16%, transparent);
}
.timeline-nav__item:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* ---- Fluxo de conteúdo: coluna única, largura de leitura confortável ---- */
.timeline-stream { display:flex; flex-direction:column; min-width:0; }

.timeline__item {
  max-width:66ch;
  border-left:3px solid transparent;
  margin-left:-1.15rem;
  padding-left:1.15rem;
  transition:border-color .4s var(--ease);
}
.timeline__item.is-active { border-left-color:var(--tl-color); }

.timeline__item + .timeline__item {
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding-top:clamp(1.2rem,2.5vw,1.6rem);
  border-top:1px solid var(--line);
}

/* ---- Data em destaque: âncora numérica grande, só quando o fato existe
   na copy original (ver git log — rótulos inventados já foram removidos
   uma vez a pedido do cliente; nunca inventar um ano/rótulo aqui). ---- */
.timeline__date {
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--tl-color);
  margin-bottom:.4rem;
}

.timeline__title { font-size:var(--step-1); color:var(--ink); margin-bottom:.5rem; }

.timeline__summary { color:var(--slate-700); font-size:var(--step-0); line-height:1.7; max-width:60ch; margin-bottom:.9rem; }

/* ---- "Saiba mais": revela o texto integral do período, sem cortar
   nem resumir mais que isso — mesmo mecanismo de grid-rows do FAQ. ---- */
.timeline__toggle {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tl-color);
  padding:.2rem 0;
}
.timeline__toggle .ico { width:16px; height:16px; flex:none; position:relative; }
.timeline__toggle .ico::before, .timeline__toggle .ico::after { content:""; position:absolute; inset:50% 0 auto; height:2px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease); }
.timeline__toggle .ico::before { transform:translateY(-50%); }
.timeline__toggle .ico::after { transform:translateY(-50%) rotate(90deg); }
.timeline__toggle[aria-expanded="true"] .ico::after { transform:translateY(-50%) rotate(0); }
.timeline__toggle:hover { opacity:.75; }
.timeline__toggle:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

.timeline__detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.timeline__detail.is-open { grid-template-rows:1fr; }

.timeline__body { overflow:hidden; display:flex; flex-direction:column; gap:1rem; padding-top:1.1rem; }
.timeline__body p { color:var(--muted); font-size:var(--step-0); line-height:1.75; }

/* ---- Mobile/tablet: os títulos ficariam grandes demais para uma barra
   fixa sob o header, então viram marcadores sem rótulo visível ---- */
@media (max-width:900px) {
  .timeline { grid-template-columns:1fr; gap:clamp(2rem,6vw,3rem); }

  .timeline-nav {
    top:76px;
    flex-direction:row;
    justify-content:center;
    gap:clamp(.4rem,3vw,1rem);
    padding:.7rem var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    background:rgba(246,247,249,.94);
    backdrop-filter:saturate(160%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .timeline-nav__rail {
    top:50%; bottom:auto; left:var(--gutter); right:var(--gutter);
    width:auto; height:2px;
    transform:translateY(-50%);
  }
  .timeline-nav__fill { transform-origin:left; transform:scaleX(var(--tl-progress,0)); }
  .timeline-nav__item { padding:0; }
  .timeline-nav__item::before { margin-top:0; }
  .timeline-nav__label {
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }

  .timeline__item { margin-left:-.9rem; padding-left:.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-nav__fill, .timeline-nav__item, .timeline-nav__item::before, .timeline__item,
  .timeline__detail, .timeline__toggle .ico::before, .timeline__toggle .ico::after { transition:none; }
}