/* ── Shared timeline styles (Projects & Speaking) ──────────────── */

.tl-wrapper {
  position: relative;
  margin: 2.5rem 0 1rem;
}

/* Vertical line */
.tl-wrapper::before {
  content: '';
  position: absolute;
  left: 82px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, #007BFF 0%, #cce4ff 100%);
}

.tl-entry {
  position: relative;
  padding-left: 128px;
  margin-bottom: 1.6rem;
}

/* Dot */
.tl-entry::before {
  content: '';
  position: absolute;
  left: 75px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007BFF;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #007BFF;
  z-index: 1;
}

/* Upcoming state */
.tl-entry.tl-upcoming::before {
  background: #fff;
  box-shadow: 0 0 0 2px #b0c8e8;
}
.tl-entry.tl-upcoming .tl-date { color: #aaa; }
.tl-entry.tl-upcoming .tl-card {
  border-color: #e8e8e8;
  background: #fafafa;
}

/* Date label */
.tl-date {
  position: absolute;
  left: 0;
  top: 7px;
  width: 70px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: #007BFF;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Card */
.tl-card {
  background: #fff;
  border: 1px solid #ddeeff;
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.tl-card:hover {
  box-shadow: 0 3px 14px rgba(0, 123, 255, 0.10);
  border-color: #b3d4ff;
}

/* Type badges */
.tl-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tl-type-talk     { background: #e0eeff; color: #0062cc; }
.tl-type-poster   { background: #e0f4f0; color: #0a9080; }
.tl-type-upcoming { background: #f0f0f0; color: #aaa;    }

/* Title */
.tl-title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.45;
}
.tl-title a {
  color: #1a1a2e;
  text-decoration: none;
}
.tl-title a:hover { color: #007BFF; }

/* Venue */
.tl-venue {
  font-size: 12px;
  color: #999;
  font-style: italic;
  margin-bottom: 0.55rem;
}

/* Link buttons */
.tl-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.tl-links a {
  font-size: 11.5px;
  color: #007BFF;
  text-decoration: none;
  border: 1px solid #cce0ff;
  padding: 2px 9px;
  border-radius: 4px;
  background: #f4f9ff;
  transition: background 0.15s;
}
.tl-links a:hover { background: #dbeeff; }

/* Award link — gold style */
.tl-links a.tl-award {
  color: #b8860b;
  border-color: #e6d49e;
  background: #fdf8ec;
}
.tl-links a.tl-award:hover { background: #f7edcf; }
.tl-links a.tl-award::before {
  content: '🏆 ';
}

/* Expand toggle */
.tl-toggle {
  background: none;
  border: none;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  padding: 0;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tl-toggle:hover { color: #007BFF; }
.tl-toggle::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s;
}
.tl-toggle.open::before { transform: rotate(90deg); }

/* Summary (animated expand) */
.tl-summary {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 13.5px;
  line-height: 1.65;
  color: #444;
}
.tl-summary.open {
  max-height: 300px;
  padding-top: 0.75rem;
  border-top: 1px solid #e8f2ff;
  margin-top: 0.6rem;
}

/* Highlight animation (triggered from map link) */
@keyframes tl-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0,123,255,0.5); }
  40%  { box-shadow: 0 0 0 8px rgba(0,123,255,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
}
.tl-entry.tl-highlight .tl-card {
  border-color: #007BFF;
  animation: tl-flash 2s ease-out;
}

/* Year divider */
.tl-year-divider {
  position: relative;
  padding-left: 128px;
  margin-bottom: 1.2rem;
  margin-top: 0.4rem;
}
.tl-year-divider span {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  color: #007BFF;
  letter-spacing: 0.02em;
  background: #fff;
  padding: 0 0.1rem;
}
/* Small dash on the timeline line */
.tl-year-divider::before {
  content: '';
  position: absolute;
  left: 72px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: #007BFF;
  transform: translateY(-50%);
}

/* Mobile */
@media (max-width: 600px) {
  .tl-wrapper::before { left: 10px; }
  .tl-entry { padding-left: 30px; }
  .tl-entry::before { left: 3px; }
  .tl-date {
    position: static;
    width: auto;
    text-align: left;
    display: block;
    margin-bottom: 0.3rem;
    font-size: 11px;
  }
  .tl-year-divider { padding-left: 30px; }
  .tl-year-divider::before { left: 0; width: 22px; }
}