/**
 * @file
 * Vertical Timeline — source.ag-style two-column alternating layout.
 * Replaces the old bento-masonry grid CSS.
 */

/* ── Hide scrollbar ─────────────────────────────────────────────────── */
.vt-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.vt-scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Fade overlays (gradient from page bg to transparent) ───────────── */
.vt-fade--top {
  background: linear-gradient(to bottom, var(--color-white, #fff) 0%, color-mix(in srgb, var(--color-white, #fff) 0%, transparent) 100%);
}
.vt-fade--bottom {
  background: linear-gradient(to top, var(--color-white, #fff) 0%, color-mix(in srgb, var(--color-white, #fff) 0%, transparent) 100%);
}

/* ── Entry wrapper ──────────────────────────────────────────────────── */
.vt-entry-wrap {
  cursor: default;
}

/* ── Description: always visible (no collapse behaviour) ────────────── */
.vt-desc {
  display: block;
}

/* ── Timeline dot marker ─────────────────────────────────────────────── */
/* ds-exception: dot uses primary brand colour */
.vt-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  /* ds-exception: circular dot marker — border-radius: 9999px is intentional */
  border-radius: 9999px;
  background: var(--color-primary, #bbb629);
  border: 3px solid var(--color-white, #fff);
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.vt-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  /* ds-exception: circular inner dot — border-radius: 9999px is intentional */
  border-radius: 9999px;
  background: var(--color-white, #fff);
}

/* ── Dot positioning: centred on the vertical centre line ────────────────
   The centre line is a 1px border-r / border-l.
   Dot width = 24px → half = 12px. Negative offset of 12px centres the dot.
   vt-dot--right: dot inside the right column  (left: −12px)
   vt-dot--left:  dot inside the left  column  (right: −12px on ≥md, left: −12px on mobile)
   ─────────────────────────────────────────────────────────────────────── */
.vt-dot--right {
  left: -12px;
}
.vt-dot--left {
  left: -12px;
}
@media (min-width: 768px) {
  .vt-dot--left {
    left: auto;
    right: -12px;
  }
}