/* Хронология событий: лента дат справа от слайдера */

/* Плашка не растёт от числа записей: лента прокручивается внутри неё.
   Высота прокрутки равна слайдеру за вычетом полей, поэтому колонки стоят вровень. */
.timeline { display: flex; min-height: 33.125rem; }
.timeline__scroll {
  flex: 1;
  min-height: 0;
  max-height: 34.9375rem;          /* 559 — высота слайдера за вычетом полей плашки */
  padding-right: 1.25rem;          /* 20 до полосы прокрутки */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) #e0e8f2;
}
.timeline__scroll::-webkit-scrollbar { width: .375rem; }
.timeline__scroll::-webkit-scrollbar-track { border-radius: var(--radius); background: #e0e8f2; }
.timeline__scroll::-webkit-scrollbar-thumb { border-radius: var(--radius); background: var(--orange); }
.timeline__scroll:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Ось с кружками — та же, что в биографии руководителя (.bio-list):
   черта на всю ленту, кружок напротив каждой даты. Новый элемент из CMS — ещё один
   пункт списка, кружок и продолжение черты появляются вместе с ним. */
.timeline__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;                   /* 30 между событиями */
  margin: 0;
  padding: .625rem 0 0;
  list-style: none;
}
.timeline__list::before {
  content: '';
  position: absolute;
  left: 1.25rem;                   /* центр колонки 40 — он же центр кружка */
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -.5px;
  background-color: var(--orange);
  pointer-events: none;
}
.timeline__item {
  position: relative;
  padding-left: 3.6875rem;         /* 59, как в биографии */
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: .625rem;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: url('../../../img/icon-bio-dot.svg') no-repeat center / contain;
}
/* дата — как подзаголовок в текстовых блоках: полужирная, оранжевая */
.timeline__date { margin: 0 0 .625rem; font-weight: 600; color: var(--orange); }
.timeline__text { margin: 0; }
.timeline__text + .timeline__text { margin-top: .625rem; }
.timeline__points { margin: .625rem 0 0; padding-left: 1.875rem; list-style: disc; }
.timeline__points li + li { margin-top: .25rem; }
.timeline__points li::marker { color: var(--orange); }

/* Планшет (< 1280): колонка одна, лента ниже слайдера */
@media (max-width: 1279px) {
  .timeline { min-height: 0; }
  .timeline__scroll { max-height: 25rem; padding-right: 1rem; }
  .timeline__list { gap: 1.25rem; }
  .timeline__item { padding-left: 2.5rem; }
  .timeline__item::before { left: .25rem; top: .125rem; width: 1rem; height: 1rem; }
  .timeline__list::before { left: .75rem; }
}

/* Мобильная (< 768) */
@media (max-width: 767px) {
  /* по правке заказчика лента на телефоне вдвое выше: за раз видно 3–4 события */
  .timeline__scroll { max-height: 640px; padding-right: 16px; }
  .timeline__list { gap: 20px; }
  .timeline__item { padding-left: 34px; }
  .timeline__item::before { left: 2px; top: 1px; width: 16px; height: 16px; }
  .timeline__list::before { left: 10px; }
  .timeline__date { margin-bottom: 8px; }
  .timeline__text + .timeline__text { margin-top: 8px; }
  .timeline__points { margin-top: 8px; padding-left: 20px; }
}