/* ---------- Linha do tempo (timeline, lab 9, "O edifício") ----------
   Lista ordenada de anos; cada ano é um título (nível escolhido no bloco, h3 por omissão)
   seguido da lista de acontecimentos, sempre à vista (antes: um acordeão por ano).
   Desktop (a partir de 1024px): ano em Lora nas colunas 1 a 3, alinhado à direita, a 48px da
   linha; linha vertical de 2px (texto a 20%) no início da coluna 4, com um ponto em cada ano;
   acontecimentos em texto normal, a 48px da linha, até 6 colunas (limitados por --measure).
   Telemóvel: linha à esquerda, ano por cima dos acontecimentos.
   Ao descer (timeline.js), a linha enche-se de amarelo até 60% da altura do ecrã, o ponto de cada
   ano que passou acende e o ano activo cresce 25% para o lado da linha. Com movimento reduzido a
   linha não enche e o ano muda de tamanho sem animação. Sem JS: linha fixa, todos iguais.
   O ano tem só a largura do texto (fit-content): ao crescer não passa da largura da página
   (revisto no lab 9: com a largura da coluna, crescia para fora e criava scroll horizontal).
   No tema claro, o amarelo passa à cor do texto (o amarelo sobre branco não se vê).
   Tudo o que é linha e ponto é decorativo (aria-hidden). */
.timeline__list { margin: 0; padding: 0; list-style: none; }
.timeline__item { display: grid; grid-template-columns: var(--border-width) minmax(0, 1fr); column-gap: var(--space-4); }
/* A linha vai do centro da primeira bola ao centro da última (decisões 2.39, ponto 3, chat 27):
   cada ano desenha só o troço do centro da sua bola ao centro da bola seguinte (::after, que passa
   por baixo da bola seguinte, desenhada depois), e o último não desenha troço. O enchimento segue
   os troços. */
.timeline { --timeline-dot-top: 10px; --timeline-dot-center: calc(var(--timeline-dot-top) + var(--space-3) / 2); }
.timeline__rail { position: relative; grid-column: 1; grid-row: 1 / span 2; }
.timeline__rail::after { content: ""; position: absolute; top: var(--timeline-dot-center); bottom: calc(-1 * var(--timeline-dot-center)); left: 0; width: 100%; background: var(--color-divider); }
.timeline__item:last-child .timeline__rail::after, .timeline__item:last-child .timeline__fill { display: none; }
.timeline__rail::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--timeline-dot-top);
  left: -7px;
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 40%, transparent);
  border-radius: var(--radius-round);
  background: var(--color-bg);
  transition: background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.timeline__fill { position: absolute; top: var(--timeline-dot-center); bottom: calc(-1 * var(--timeline-dot-center)); left: 0; width: 100%; background: var(--color-accent); transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; }
.timeline__item.is-active .timeline__rail::before { border-color: var(--color-accent); background: var(--color-accent); }
[data-theme="light"] .timeline__fill { background: var(--color-text); }
[data-theme="light"] .timeline__item.is-active .timeline__rail::before { border-color: var(--color-text); background: var(--color-text); }
.timeline__year { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; width: fit-content; margin: 0; padding-bottom: var(--space-3); font-size: var(--text-h2); transform-origin: left center; }
.timeline__item.is-current .timeline__year { transform: scale(1.25); }
@media (prefers-reduced-motion: no-preference) { .timeline__year { transition: transform calc(var(--duration-hover) / 2) var(--ease-hover); } }
.timeline__events { grid-column: 2; grid-row: 2; max-width: var(--measure); margin: 0; padding: 0 0 var(--space-6) 1.5em; list-style-type: disc; }
.timeline__item:last-child .timeline__events { padding-bottom: 0; }
.timeline__events li { margin-block: 0 var(--space-2); }
.timeline__events li::marker { font-size: 1.25em; line-height: 1; color: var(--color-text-subtle); }
@media (min-width: 64em) {
  .timeline__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .timeline__year { grid-column: 1 / span 3; grid-row: 1; justify-self: end; margin-right: var(--space-6); padding-bottom: 0; line-height: 1; text-align: end; transform-origin: right center; }
  .timeline__rail { grid-column: 4; grid-row: 1; justify-self: start; width: var(--border-width); }
  .timeline__events { grid-column: 4 / span 6; grid-row: 1; padding-left: var(--space-6); }
}