:root {
  --menv-bg: #ffffff;
  --menv-surface: #ffffff;
  --menv-surface-2: #f4f6f8;
  --menv-text: #111827;
  --menv-text-muted: #6b7280;
  --menv-border: #e5e9ee;
  --menv-accent: #00b894;
  --menv-accent-soft: color-mix(in srgb, var(--menv-accent) 14%, transparent);
  --menv-line: color-mix(in srgb, var(--menv-accent) 35%, var(--menv-border));
  --menv-dot: 18px;
}
:root[data-menv-theme="dark"] {
  --menv-bg: #12151f;
  --menv-surface: #1a1f2b;
  --menv-surface-2: #232a38;
  --menv-text: #f1f5f9;
  --menv-text-muted: #9ca3af;
  --menv-border: #2f3747;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

.menv-timeline { padding: 16px 12px; color: var(--menv-text); }

.menv-timeline-loading, .menv-timeline-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--menv-text-muted);
  font-size: 0.9rem;
}
.menv-timeline-error {
  text-align: center;
  padding: 24px 12px;
  color: #dc2626;
  font-size: 0.9rem;
}

.menv-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* ─── Shared pieces ───────────────────────────────────────────────────── */
.menv-timeline-item { position: relative; }

.menv-timeline-dot {
  position: absolute;
  width: var(--menv-dot);
  height: var(--menv-dot);
  border-radius: 50%;
  background: var(--menv-surface);
  border: 4px solid var(--menv-accent);
  box-shadow: 0 0 0 5px var(--menv-accent-soft);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menv-timeline-dot.has-icon {
  --menv-dot: 38px;
  border-width: 2px;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--menv-surface);
}

.menv-timeline-card {
  background: var(--menv-surface);
  border: 1px solid var(--menv-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .06);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.menv-timeline-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--menv-accent) 45%, var(--menv-border));
  box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
}
.menv-timeline-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.menv-timeline-content { padding: 16px 18px 18px; }

.menv-timeline-date {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--menv-accent);
  background: var(--menv-accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.menv-timeline-title { font-weight: 700; color: var(--menv-text); font-size: 1.02rem; line-height: 1.35; margin: 0 0 6px; }
.menv-timeline-desc { color: var(--menv-text-muted); font-size: 0.87rem; line-height: 1.55; margin: 0; }

/* ─── Single column (also the phone layout of "alternating") ──────────── */
.menv-timeline[data-layout="left"] .menv-timeline-list,
.menv-timeline[data-layout="alternating"] .menv-timeline-list { padding-left: 34px; }

.menv-timeline[data-layout="left"] .menv-timeline-list::before,
.menv-timeline[data-layout="alternating"] .menv-timeline-list::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--menv-accent), var(--menv-line) 40%, var(--menv-line) 85%, transparent);
}
.menv-timeline[data-layout="left"] .menv-timeline-item,
.menv-timeline[data-layout="alternating"] .menv-timeline-item { padding-bottom: 22px; }
.menv-timeline-item:last-child { padding-bottom: 0 !important; }

.menv-timeline[data-layout="left"] .menv-timeline-dot,
.menv-timeline[data-layout="alternating"] .menv-timeline-dot {
  left: calc(-34px + 13.5px - var(--menv-dot) / 2);
  top: 18px;
}

/* ─── Alternating (zig-zag) on wider screens ──────────────────────────── */
@media (min-width: 640px) {
  .menv-timeline[data-layout="alternating"] .menv-timeline-list { padding-left: 0; }
  .menv-timeline[data-layout="alternating"] .menv-timeline-list::before { left: calc(50% - 1.5px); }
  .menv-timeline[data-layout="alternating"] .menv-timeline-item {
    width: 50%;
    padding-right: 36px;
  }
  .menv-timeline[data-layout="alternating"] .menv-timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 36px;
  }
  .menv-timeline[data-layout="alternating"] .menv-timeline-dot { left: auto; right: calc(var(--menv-dot) / -2); }
  .menv-timeline[data-layout="alternating"] .menv-timeline-item:nth-child(even) .menv-timeline-dot { right: auto; left: calc(var(--menv-dot) / -2); }
  .menv-timeline[data-layout="alternating"] .menv-timeline-item:nth-child(odd) .menv-timeline-content { text-align: right; }
  /* Overlap the next card a little so the zig-zag reads as one flow */
  .menv-timeline[data-layout="alternating"] .menv-timeline-item + .menv-timeline-item { margin-top: -40px; }
}

/* ─── Horizontal (swipe) ─────────────────────────────────────────────── */
.menv-timeline[data-layout="horizontal"] .menv-timeline-track { position: relative; }
.menv-timeline[data-layout="horizontal"] .menv-timeline-list {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 36px 4px 10px;
}
.menv-timeline[data-layout="horizontal"] .menv-timeline-list::-webkit-scrollbar { display: none; }
.menv-timeline[data-layout="horizontal"] .menv-timeline-item {
  flex: 0 0 min(260px, 82%);
  scroll-snap-align: start;
}
/* The line runs through every dot, card by card */
.menv-timeline[data-layout="horizontal"] .menv-timeline-item::before {
  content: '';
  position: absolute;
  top: -27px;
  left: 0;
  right: -18px;
  height: 3px;
  background: var(--menv-line);
}
.menv-timeline[data-layout="horizontal"] .menv-timeline-item:last-child::before { right: 50%; }
.menv-timeline[data-layout="horizontal"] .menv-timeline-dot {
  top: calc(-25.5px - var(--menv-dot) / 2);
  left: 18px;
}

.menv-timeline-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.menv-timeline-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--menv-border);
  background: var(--menv-surface);
  color: var(--menv-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.menv-timeline-nav button:hover:not(:disabled) { background: var(--menv-accent); border-color: var(--menv-accent); color: #fff; }
.menv-timeline-nav button:disabled { opacity: .35; cursor: default; }

/* ─── Scroll reveal ───────────────────────────────────────────────────── */
.menv-timeline.is-animated .menv-timeline-item .menv-timeline-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.menv-timeline.is-animated .menv-timeline-item .menv-timeline-dot { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; }
.menv-timeline.is-animated .menv-timeline-item.is-visible .menv-timeline-card { opacity: 1; transform: none; }
.menv-timeline.is-animated .menv-timeline-item.is-visible .menv-timeline-dot { transform: none; opacity: 1; }
.menv-timeline.is-animated .menv-timeline-item.is-visible .menv-timeline-card:hover { transform: translateY(-3px); }

/* A long word with no spaces breaks instead of spilling out of its box */
.menv-timeline-title,
.menv-timeline-desc { overflow-wrap: anywhere; }