/* Geschiedenis: verticale tijdlijn. Links de intro met de oude foto (blijft staan tijdens het scrollen),
   rechts alle periodes onder elkaar: jaartal, lijn met stip, naam en eigenaren. Laatste regel "Nu" als witte kaart. */
.tijdlijn {
  background-color: var(--secondary);
  padding: var(--space-2xl) var(--space-m);
}
.tijdlijn__binnen {
  width: var(--max-screen-width);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.tijdlijn__intro { position: sticky; top: calc(var(--header-hoogte, 12rem) + var(--space-m)); }
.tijdlijn__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.tijdlijn__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-s); }
.tijdlijn__tekst { margin: 0 0 var(--space-m); color: var(--text-body); }
.tijdlijn__foto { margin: 0; }
.tijdlijn__foto img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); filter: sepia(.15); }
.tijdlijn__foto figcaption { margin-top: .6rem; font-size: var(--text-s); color: var(--dark-60); font-style: italic; }

.tijdlijn__lijst { list-style: none; margin: 0; padding: 0; }
.tijdlijn__item {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  column-gap: var(--space-m);
}
.tijdlijn__jaar {
  margin: 0;
  padding-top: .15rem;
  text-align: right;
  font-family: "Bearmen";
  font-size: var(--text-m);
  color: var(--primary-tekst);
  white-space: nowrap;
}
.tijdlijn__inhoud {
  position: relative;
  border-left: 2px solid var(--dark-20);
  padding: 0 0 var(--space-l) var(--space-m);
}
.tijdlijn__inhoud::before {
  content: "";
  position: absolute;
  left: -.75rem;
  top: .35rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--primary);
  border: .35rem solid var(--secondary);
}
.tijdlijn__naam { margin: 0 0 .25rem; font-family: "Bearmen"; font-size: var(--text-l); color: var(--dark); line-height: 1.2; }
.tijdlijn__wie { margin: 0; color: var(--text-body); }

.tijdlijn__item--nu .tijdlijn__inhoud {
  border-left-color: transparent;
  padding-bottom: 0;
}
.tijdlijn__item--nu .tijdlijn__inhoud::before { background: var(--primary-tekst); }
.tijdlijn__item--nu .tijdlijn__naam,
.tijdlijn__item--nu .tijdlijn__wie,
.tijdlijn__item--nu .bricks-button { position: relative; }
.tijdlijn__item--nu .tijdlijn__inhoud {
  background: #fff;
  border-radius: var(--radius-m);
  padding: var(--space-m);
  margin-left: var(--space-s);
}
.tijdlijn__item--nu .tijdlijn__inhoud::before { left: calc(-1 * var(--space-s) - .75rem); }
.tijdlijn__item--nu .tijdlijn__wie { margin-bottom: var(--space-m); }

@media (max-width: 991px) {
  .tijdlijn__binnen { grid-template-columns: 1fr; gap: var(--space-xl); }
  .tijdlijn__intro { position: static; }
  .tijdlijn__foto { max-width: 36rem; }
}
@media (max-width: 767px) {
  .tijdlijn__item { grid-template-columns: 1fr; }
  .tijdlijn__jaar {
    text-align: left;
    border-left: 2px solid var(--dark-20);
    padding: 0 0 .2rem var(--space-m);
  }
  .tijdlijn__inhoud::before { top: -1.6rem; }
  .tijdlijn__item--nu .tijdlijn__jaar { border-left-color: var(--dark-20); }
  .tijdlijn__item--nu .tijdlijn__inhoud { margin: var(--space-2xs) 0 0; }
  .tijdlijn__item--nu .tijdlijn__inhoud::before { display: none; }
}