/* ─────────────────────────────────────────────────────────────
   Секция «История клиники» — горизонтальный таймлайн 2000–2023
   Геометрия при 1440px (координаты от начала секции):
   надзаголовок y=0, h2 y=37, линия таймлайна по центру y=357,
   карточки над линией y=154, под линией y=392, высота секции 724.
   ───────────────────────────────────────────────────────────── */
.history {
  /* Локальные значения: в токенах таких оттенков нет, сняты с сайта */
  --history-teal: #3c8f92;   /* rgb(60,143,146) — линия, точки, иконки, рамки */
  --history-year: #2c3e50;   /* rgb(44,62,80)  — год в карточке */
  --history-note: #555;      /* rgb(85,85,85)  — подпись в карточке */
  /* Карточки таймлайна набраны системным шрифтом, а не Mulish */
  --history-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* 76 (заголовки) + 38 + 486 (таймлайн) + 124 = 724px общей высоты */
  padding-bottom: 124px;
}

/* ─── Заголовки ─────────────────────────────────────────────── */

/* Надзаголовок с иконкой: иконка 18px + 10px зазор → текст с x=100 */
.history__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 27px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
  color: rgba(var(--ink-rgb), 0.6);
}

.history__eyebrow-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.history__title {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 37px;
  line-height: 38.85px;
  font-weight: 700;
  color: var(--ink);
}

/* ─── Обёртка таймлайна ─────────────────────────────────────── */
.history__timeline {
  position: relative;
  margin-top: 38px;
}

/* Лента прокрутки: скрытый скроллбар + затухание по краям */
.history__track {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0;                /* воздух под тени карточек */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.history__track::-webkit-scrollbar { display: none; }

/* Высота 446px: две равные строки по 223px, линия ровно посередине */
.history__list {
  display: flex;
  height: 446px;
}

.history__item {
  position: relative;
  flex: 0 0 300px;                /* шаг 300px: карточка 270 + по 15 полей */
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 0 15px;
}

/* Горизонтальная линия таймлайна (у крайних элементов — половина) */
.history__item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--history-teal);
  transform: translateY(-50%);
  z-index: 1;
}
.history__item:first-child::before { left: 50%; width: 50%; }
.history__item:last-child::before { width: 50%; }

/* Вертикальный «поводок» от линии к карточке — 35px */
.history__item::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 4px;
  height: 35px;
  background: var(--history-teal);
  transform: translateX(-50%);
  z-index: 1;
}
.history__item:nth-child(odd)::after { bottom: 50%; }
.history__item:nth-child(even)::after { top: 50%; }

/* Точка на линии: 18×18 с рамкой 4px */
.history__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 4px solid var(--history-teal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* ─── Карточка года ─────────────────────────────────────────── */
.history__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: max-content;            /* карточка по контенту, не тянется */
  padding: 20px;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(60, 143, 146, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Нечётные — над линией, чётные — под линией */
.history__item:nth-child(odd) .history__card {
  grid-row: 1;
  align-self: end;
  margin-bottom: 35px;
}
.history__item:nth-child(even) .history__card {
  grid-row: 2;
  align-self: start;
  margin-top: 35px;
}

.history__item:hover .history__card {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(60, 143, 146, 0.2);
  border-color: var(--history-teal);
}

.history__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: var(--history-teal);
}

.history__year {
  margin-bottom: 8px;
  font-family: var(--history-font);
  font-size: 22px;
  line-height: 27px;
  font-weight: 800;
  color: var(--history-year);
}

.history__text {
  font-family: var(--history-font);
  font-size: 14px;
  line-height: 1.4;               /* 19.6px */
  font-weight: 400;
  color: var(--history-note);
}

/* ─── Кнопки-стрелки ────────────────────────────────────────── */
.history__nav {
  position: absolute;
  top: 50%;                       /* центр совпадает с линией: y=357 */
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--line);
  border: 2px solid var(--history-teal);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  user-select: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.history__nav:hover {
  background: var(--history-teal);
  color: var(--white);
}
.history__nav--prev { left: 5px; }
.history__nav--next { right: 5px; }

/* ─── Планшет ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .history { padding-bottom: 80px; }

  .history__title {
    font-size: 30px;
    line-height: 1.15;
  }

  .history__timeline { margin-top: 28px; }

  .history__item { flex: 0 0 280px; }

  .history__nav { width: 56px; }
}

/* ─── Телефон: таймлайн разворачивается в одну колонку ──────── */
@media (max-width: 767px) {
  .history { padding-bottom: 48px; }

  .history__eyebrow {
    height: auto;
    gap: 8px;
    font-size: 18px;
    line-height: 24px;
  }
  .history__eyebrow-icon { width: 16px; height: 16px; }

  .history__title {
    margin-top: 6px;
    font-size: 24px;
    line-height: 1.2;
  }

  .history__timeline { margin-top: 20px; }

  .history__nav { display: none; }

  .history__track {
    overflow: visible;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .history__list {
    display: block;
    height: auto;
  }

  .history__item {
    display: block;
    flex: none;
    width: 100%;
    padding: 0 0 22px 34px;
  }

  /* Линия становится вертикальной, слева от карточек */
  .history__item::before,
  .history__item:first-child::before,
  .history__item:last-child::before {
    top: 0;
    left: 8px;
    width: 4px;
    height: 100%;
    transform: none;
  }
  .history__item:last-child::before { height: 24px; }

  .history__item::after { display: none; }

  .history__dot {
    top: 22px;
    left: 10px;
    width: 16px;
    height: 16px;
    border-width: 3px;
    transform: translate(-50%, 0);
  }

  .history__card,
  .history__item:nth-child(odd) .history__card,
  .history__item:nth-child(even) .history__card {
    margin: 0;
    padding: 16px 18px;
    align-items: flex-start;
    text-align: left;
    border-radius: var(--radius-btn);
  }

  .history__item:hover .history__card { transform: none; }

  .history__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }

  .history__year {
    margin-bottom: 6px;
    font-size: 20px;
  }

  .history__text {
    font-size: 15px;
    line-height: 1.45;
  }
}