/* Tijdlijn: een geordende reeks momenten met een doorlopende lijn ernaast.
   Terughoudend en volledig op variabelen met een neutrale fallback, zodat een site 'm
   bijkleurt in plaats van overschrijft. De module staat op zichzelf: zonder site-CSS
   moet dit er nog steeds uitzien als een tijdlijn en niet als een stapel losse blokken. */

.layer--timeline {
  --timeline-line: var(--color-border, #e5e5e5);
  --timeline-dot: var(--color-accent, #1e2a3a);
  --timeline-gap: var(--space-5, 2rem);
  --timeline-muted: var(--color-muted, #6b7280);
  --timeline-radius: var(--radius-2, 8px);
}

.layer--timeline .timeline-head {
  margin-bottom: var(--timeline-gap);
}

/* De lijn is een linkerrand op de lijst; elk moment zet er zelf een punt op. Zo blijft
   het één element in plaats van een pseudo-element dat op de verkeerde hoogte eindigt. */
.layer--timeline .timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-5, 2rem);
  border-left: 2px solid var(--timeline-line);
}

.layer--timeline .timeline__item {
  position: relative;
  display: flex;
  gap: var(--space-4, 1.5rem);
  align-items: flex-start;
  padding-bottom: var(--timeline-gap);
}

.layer--timeline .timeline__item:last-child {
  padding-bottom: 0;
}

.layer--timeline .timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5, 2rem) * -1 - 7px);
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--timeline-dot);
}

.layer--timeline .timeline__media {
  flex: 0 0 auto;
  width: 180px;
  border-radius: var(--timeline-radius);
  overflow: hidden;
}

.layer--timeline .timeline__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.layer--timeline .timeline__body {
  flex: 1 1 auto;
  min-width: 0;
}

.layer--timeline .timeline__title {
  margin: 0 0 0.15em;
}

/* Het jaartal/label: rustiger dan de titel, zodat de titel de regel blijft dragen. */
.layer--timeline .timeline__subtitle {
  margin: 0 0 0.5em;
  color: var(--timeline-muted);
  font-size: 0.9em;
}

.layer--timeline .timeline__text > :first-child {
  margin-top: 0;
}

.layer--timeline .timeline__text > :last-child {
  margin-bottom: 0;
}

/* Smal scherm: beeld boven de tekst in plaats van ernaast — 180px naast een korte
   tekstkolom levert anders twee onleesbaar smalle kolommen op. */
@media (max-width: 40rem) {
  .layer--timeline .timeline__item {
    flex-direction: column;
  }

  .layer--timeline .timeline__media {
    width: 100%;
    max-height: 200px;
  }
}