/* ==========================================================================
   moTimeline – layout + theme CSS
   ========================================================================== */

/* ── Core layout ─────────────────────────────────────────────────────────── */
.mo-timeline { display: block; list-style: none; margin: 0; padding: 0; position: relative; width: 100%; }
.mo-timeline::after { content: ''; display: table; clear: both; }
.mo-timeline.mo-twocol::before { background: var(--mo-line-color); bottom: 0; content: ''; left: 50%; margin-left: -1.5px; position: absolute; top: 0; width: 3px; z-index: 0; }
.mo-timeline > .mo-item { box-sizing: border-box; display: block; float: left; position: relative; width: 50%; }
.mo-timeline:not(.mo-twocol) > .mo-item { float: none; width: 100%; }
.mo-timeline > .mo-item.mo-inverted { float: right; }
.mo-timeline.mo-twocol > .mo-item.mo-fullwidth { clear: both; float: none; width: 100%; }
.mo-theme > .mo-item.mo-fullwidth .mo-card { margin: var(--mo-card-margin-fullwidth, 0.5rem); }
.mo-timeline.mo-twocol > .mo-item.mo-fullwidth .mo-badge,
.mo-timeline.mo-twocol > .mo-item.mo-fullwidth .mo-arrow { display: none; }

/* ── Badge ───────────────────────────────────────────────────────────────── */
.mo-badge { align-items: center; background: var(--mo-badge-bg); border-radius: 50%; color: var(--mo-badge-color); display: flex; font-size: 12px; font-weight: 700; height: var(--mo-badge-size); justify-content: center; min-width: var(--mo-badge-size); overflow: hidden; position: absolute; top: 18px; z-index: 2; }
.mo-badge .mo-badge-icon { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.mo-timeline.mo-twocol > .mo-item:not(.mo-inverted) .mo-badge { left: auto; right: calc(var(--mo-badge-size) / -2); }
.mo-timeline.mo-twocol > .mo-item.mo-inverted        .mo-badge { left: calc(var(--mo-badge-size) / -2); right: auto; }
.mo-timeline.mo-twocol > .mo-item.mo-offset .mo-badge { top: calc(18px + var(--mo-badge-size) + 10px); }
.mo-timeline.mo-twocol > .mo-item.mo-offset .mo-arrow { top: calc(26px + var(--mo-badge-size) + 10px); }
.mo-timeline:not(.mo-twocol) > .mo-item .mo-badge { display: none; }

/* ── Arrow ───────────────────────────────────────────────────────────────── */
.mo-arrow { border: 8px solid transparent; display: block; height: 0; position: absolute; top: 26px; width: 0; z-index: 1; }
.mo-timeline.mo-twocol > .mo-item:not(.mo-inverted) .mo-arrow { border-left: 8px solid var(--mo-arrow-color); border-right: none; left: auto; right: 0; }
.mo-timeline.mo-twocol > .mo-item.mo-inverted        .mo-arrow { border-right: 8px solid var(--mo-arrow-color); border-left: none; left: 0; right: auto; }
.mo-timeline:not(.mo-twocol) > .mo-item .mo-arrow { display: none; }

/* ── Theme ───────────────────────────────────────────────────────────────── */
.mo-theme { --mo-arrow-color: #fff; }
.mo-theme > .mo-item .mo-card { background: #fff; border-radius: var(--mo-card-border-radius, 8px); box-shadow: 0 2px 14px rgba(0,0,0,.09); margin: var(--mo-card-margin, 0.5rem 1.25rem 0.5rem 0.5rem); position: relative; }
.mo-theme > .mo-item.mo-inverted .mo-card { margin: var(--mo-card-margin-inverted, 0.5rem 0.5rem 0.5rem 1.25rem); }
.mo-theme > .mo-item .mo-banner { border-radius: var(--mo-card-border-radius, 8px) var(--mo-card-border-radius, 8px) 0 0; display: block; max-height: 240px; object-fit: cover; width: 100%; }
.mo-theme > .mo-item .mo-card-image { overflow: visible; position: relative; }
.mo-theme > .mo-item .mo-avatar { border: 3px solid #fff; border-radius: 50%; bottom: calc(var(--mo-avatar-size, 50px) * -0.44); box-shadow: 0 2px 8px rgba(0,0,0,.18); height: var(--mo-avatar-size, 50px); object-fit: cover; position: absolute; right: 14px; width: var(--mo-avatar-size, 50px); z-index: 1; }
.mo-theme > .mo-item .mo-card-body { padding: 1rem; }
.mo-theme > .mo-item .mo-card-body h3 { color: #1e293b; font-size: 0.9rem; font-weight: 700; margin: 0 0 0.2rem; }
.mo-theme > .mo-item .mo-card-body .mo-meta { color: #9ca3af; font-size: 0.72rem; margin-bottom: 0.25rem; }
.mo-theme > .mo-item .mo-card-body p { color: #6b7280; font-size: 0.83rem; line-height: 1.5; margin: 0; }
.mo-theme.mo-twocol > .mo-item:not(.mo-inverted) .mo-arrow { border-left-color: var(--mo-arrow-color); right: 12px; }
.mo-theme.mo-twocol > .mo-item.mo-inverted        .mo-arrow { border-right-color: var(--mo-arrow-color); left: 12px; }
.mo-theme .mo-badge { background: #fff; border: 2px solid var(--mo-line-color); box-shadow: 0 2px 6px rgba(0,0,0,.1); color: #374151; }

/* ── Animate ─────────────────────────────────────────────────────────────── */
.mo-timeline.mo-animate > .mo-item { transition: opacity var(--mo-animate-duration, 0.5s) ease, transform var(--mo-animate-duration, 0.5s) ease; }
.mo-timeline.mo-animate-fade > .mo-item { opacity: 0; }
.mo-timeline.mo-animate-slide > .mo-item:not(.mo-inverted) { opacity: 0; transform: translateX(-40px); }
.mo-timeline.mo-animate-slide > .mo-item.mo-inverted { opacity: 0; transform: translateX(40px); }
.mo-timeline:not(.mo-twocol).mo-animate-slide > .mo-item { transform: translateX(-40px); }
.mo-timeline > .mo-item.mo-filtered-out { display: none; }
.mo-timeline.mo-animate > .mo-item.mo-visible { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   Portfolio overrides
   ========================================================================== */
#projectsTimeline {
  --mo-line-color:   #e2e8f0;
  --mo-badge-bg:     #1e293b;
  --mo-badge-color:  #fff;
  --mo-badge-size:   28px;
  margin-top: 2rem;
}

/* Featured pill (Own Product / Open Source / etc.) */
.tl-featured {
  background: #dc2626;
  border-radius: 99px;
  color: #fff;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
  padding: 0.18rem 0.6rem;
  text-transform: uppercase;
}

/* Role */
.tl-role {
  color: #374151 !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  margin: 0.15rem 0 0.1rem !important;
}

/* Client */
.tl-client {
  color: #9ca3af !important;
  font-size: 0.72rem !important;
  margin-bottom: 0.55rem !important;
}

/* Tags */
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.tl-tag {
  background: #f1f5f9;
  border-radius: 4px;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
}