.med-timeline{
  --mt-line-color:#0b2f6a;
  --mt-line-width:4px;
  --mt-dot-color:#0b2f6a;
  --mt-dot-size:18px;
  --mt-dot-border:4px;
  --mt-dot-fill: #ffffff;  --mt-mobile-card-gap: 12px;

  --mt-card-bg:#fff;
  --mt-card-border-color:#0b2f6a;
  --mt-card-border-width:2px;
  --mt-card-radius:12px;
  --mt-card-padding:22px;

  --mt-year-color:#0b2f6a;
  --mt-year-size:22px;
  --mt-year-weight:700;

  --mt-text-color:#111;
  --mt-text-size:14px;
  --mt-text-weight:400;

  --mt-gap:28px;

  /* cards per view (Auto mode) */
  --mt-visible-items: 4;

  /* Fixed item width (px). 0 = Auto mode */
  --mt-item-width: 0px;

  --mt-arrow-bg:#fff;
  --mt-arrow-color:#0b2f6a;
  --mt-arrow-border-color:#0b2f6a;
  --mt-arrow-size:46px;
  --mt-arrow-padding: 24px; /* extra safe area so cards never go under arrows */

  --mt-connector-gap: 18px;
  --mt-tail-size: 12px;

  --mt-top-h: 240px;
  --mt-bottom-h: 240px;
  --mt-mid-h: 90px;

  --mt-mobile-line-left: 18px;
  --mt-mobile-pad-left: 40px;

  position:relative;
  width:100%;
  --mt-vpad: 24px;
}

.med-timeline__viewport{
  position:relative;
  width:100%;
  --mt-vpad: 24px;
  overflow:hidden;
  padding: var(--mt-vpad) calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
  min-height: calc(var(--mt-top-h) + var(--mt-bottom-h) + var(--mt-mid-h));
}

.med-timeline__track{
  display:flex;
  align-items:stretch;
  gap: var(--mt-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding: 0;
  height: calc(var(--mt-top-h) + var(--mt-bottom-h) + var(--mt-mid-h));
  scrollbar-width: none;
  /* allow full scroll to edges */
  scroll-padding-left: calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
  scroll-padding-right: calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
}
.med-timeline__track::-webkit-scrollbar{ display:none; }

/* Spacers so first/last cards don't go under arrows */
.med-timeline__track::before,
.med-timeline__track::after{
  content:"";
  flex: 0 0 calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
  width: calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
}

/* AUTO width */
.med-timeline__item{
  width: calc((100% - (var(--mt-gap) * (var(--mt-visible-items) - 1))) / var(--mt-visible-items));
  flex: 0 0 calc((100% - (var(--mt-gap) * (var(--mt-visible-items) - 1))) / var(--mt-visible-items));
  height: 100%;
  display:grid;
  grid-template-rows: var(--mt-top-h) var(--mt-mid-h) var(--mt-bottom-h);
  grid-template-columns: 1fr;
  position:relative;
  min-width: 0;
}

/* FIXED width mode */
.med-timeline.has-fixed-width .med-timeline__item{
  width: var(--mt-item-width);
  flex: 0 0 var(--mt-item-width);
}

.med-timeline__line{
  position:absolute;
  left: calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
  right: calc(var(--mt-arrow-size) + var(--mt-arrow-padding));
  top: calc(calc(var(--mt-vpad) + var(--mt-top-h) + (var(--mt-mid-h) / 2)) - (var(--mt-line-width) / 2));
  height: var(--mt-line-width);
  background: var(--mt-line-color);
  transform: translateY(-50%);
  border-radius: 999px;
  z-index: 1;
}

.med-timeline__node {
  position: absolute;
  left: 50%;
  top: calc(var(--mt-vpad) + var(--mt-top-h) + (var(--mt-mid-h) / 6));
  background:#ffffff;
  transform: translate(-50%, -50%);
  width: var(--mt-dot-size);
  height: var(--mt-dot-size);
  border: var(--mt-dot-border) solid var(--mt-dot-color);
  background: var(--mt-dot-fill);
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}

.med-timeline__card{
  background: var(--mt-card-bg) !important;
  border: var(--mt-card-border-width) solid var(--mt-card-border-color);
  border-radius: var(--mt-card-radius);
  padding: var(--mt-card-padding);
  box-sizing:border-box;
  width: 100%;
  max-width: 100%;
  z-index:2;
  position:relative;
}

.med-timeline__item.is-top .med-timeline__card{
  grid-row: 1;
  align-self: end;
  margin-bottom: calc(var(--mt-connector-gap) + (var(--mt-dot-size) / 2));
}
.med-timeline__item.is-bottom .med-timeline__card{
  grid-row: 3;
  align-self: start;
  margin-top: calc(var(--mt-connector-gap) + (var(--mt-dot-size) / 2));
}

/* Desktop tails */
.med-timeline__item.is-top .med-timeline__card::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(-1 * var(--mt-tail-size));
  transform: translateX(-50%);
  width:0;height:0;
  border-left: var(--mt-tail-size) solid transparent;
  border-right:var(--mt-tail-size) solid transparent;
  border-top: var(--mt-tail-size) solid var(--mt-card-border-color);
}
.med-timeline__item.is-top .med-timeline__card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(-1 * (var(--mt-tail-size) - 2px));
  transform: translateX(-50%);
  width:0;height:0;
  border-left: calc(var(--mt-tail-size) - 1px) solid transparent;
  border-right:calc(var(--mt-tail-size) - 1px) solid transparent;
  border-top: calc(var(--mt-tail-size) - 1px) solid var(--mt-card-bg);
}
.med-timeline__item.is-bottom .med-timeline__card::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(-1 * var(--mt-tail-size));
  transform: translateX(-50%);
  width:0;height:0;
  border-left: var(--mt-tail-size) solid transparent;
  border-right:var(--mt-tail-size) solid transparent;
  border-bottom: var(--mt-tail-size) solid var(--mt-card-border-color);
}
.med-timeline__item.is-bottom .med-timeline__card::after{
  content:"";
  position:absolute;
  left:50%;
  top: calc(-1 * (var(--mt-tail-size) - 2px));
  transform: translateX(-50%);
  width:0;height:0;
  border-left: calc(var(--mt-tail-size) - 1px) solid transparent;
  border-right:calc(var(--mt-tail-size) - 1px) solid transparent;
  border-bottom: calc(var(--mt-tail-size) - 1px) solid var(--mt-card-bg);
}

.med-timeline__year{
  margin:0 0 10px;
  color: var(--mt-year-color);
  font-size: var(--mt-year-size);
  font-weight: var(--mt-year-weight);
  line-height:1.1;
}

.med-timeline__list{
  margin:0;
  padding-left: 18px;
  color: var(--mt-text-color);
  font-size: var(--mt-text-size);
  font-weight: var(--mt-text-weight);
  line-height: 1.55;
}
.med-timeline__list li{ margin: 6px 0; }

.med-timeline__nav{
  position:absolute;
  top: calc(var(--mt-top-h) + (var(--mt-mid-h) / 2));
  width: var(--mt-arrow-size);
  height: var(--mt-arrow-size);
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid var(--mt-arrow-border-color);
  background: var(--mt-arrow-bg);
  color: var(--mt-arrow-color);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  user-select:none;
}
.med-timeline__nav span{ font-size: 28px; line-height: 1; }
.med-timeline__nav--prev{ left: 6px; }
.med-timeline__nav--next{ right: 6px; }
.med-timeline__nav.is-disabled{ opacity: .35; cursor: not-allowed; }

/* ===== MOBILE (vertical) ===== */
@media (max-width: 767px){
  .med-timeline__viewport{ overflow:visible; padding: 0; min-height: unset; }
  .med-timeline__nav, .med-timeline__line{ display:none; }
  .med-timeline__track{ display:block; overflow:visible; padding: 0; height:auto; }
  .med-timeline__track::before,
  .med-timeline__track::after{ display:none; }

  .med-timeline{ padding-left: 0; }
  .med-timeline::before{
    content:"";
    position:absolute;
    left: var(--mt-mobile-line-left);
    top: 0;
    bottom: 0;
    width: var(--mt-line-width);
    background: var(--mt-line-color);
    border-radius: 999px;
  }

  .med-timeline__item{ display:block; width: 100%; height:auto; margin: 0 0 26px 0; position:relative; }

  /* dot center exactly on the line center */
  .med-timeline__node{
    position:absolute;
    left: calc(var(--mt-mobile-line-left) + (var(--mt-line-width) / 6));
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .med-timeline__card{
    position:relative;
    width: 100%;
    max-width: calc(100% - var(--mt-mobile-line-left) - var(--mt-mobile-card-gap) - 12px);
    margin-left: 40px;
    margin-right: 6px;
  }

  /* force LEFT tail only on mobile */
  .med-timeline__item.is-top .med-timeline__card::before,
  .med-timeline__item.is-bottom .med-timeline__card::before{
    content:"";
    position:absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width:0;height:0;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid var(--mt-card-border-color);
  }
  .med-timeline__item.is-top .med-timeline__card::after,
  .med-timeline__item.is-bottom .med-timeline__card::after{
    content:"";
    position:absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width:0;height:0;
    border-top: 9px solid transparent;
    border-bottom:9px solid transparent;
    border-right:9px solid var(--mt-card-bg);
  }

  .med-timeline__item.is-top .med-timeline__card,
  .med-timeline__item.is-bottom .med-timeline__card{
    margin-top: 0;
    margin-bottom: 0;
  }
}