/* ============================================================
   ACADEMIC SECTION
   ============================================================ */
#academic { background: var(--bg-primary); }

.timeline { position:relative;max-width:820px;margin:0 auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 18px; /* Perfectly centered for 38px dots (19px center - 1px line radius) */
  top: 19px;
  bottom: 19px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent-primary) 15%, var(--accent-secondary) 85%, transparent);
  border-radius: 1px;
  opacity: 0.8;
  box-shadow: 0 0 15px var(--accent-glow);
}

/* Interesting animated energy pulse traveling down the line */
.timeline::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 19px;
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  border-radius: 1px;
  box-shadow: 0 0 12px #fff, 0 0 20px var(--accent-secondary);
  animation: energyFlow 3s infinite ease-in-out;
  z-index: 2;
  opacity: 0;
}

@keyframes energyFlow {
  0% { top: 19px; opacity: 0; transform: scaleY(0.5); }
  15% { opacity: 1; transform: scaleY(1); }
  85% { opacity: 1; transform: scaleY(1); }
  100% { top: calc(100% - 79px); opacity: 0; transform: scaleY(0.5); }
}

.timeline-item { display:flex;gap:1rem;margin-bottom:0.8rem;position:relative; }

.timeline-dot-wrap { flex-shrink:0;z-index:1; }
.timeline-dot {
  width:38px;height:38px;border-radius:50%;
  background:var(--gradient-hero);display:flex;align-items:center;
  justify-content:center;color:#fff;box-shadow:var(--shadow-glow);flex-shrink:0;
}

.timeline-content {
  background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:12px;padding:0.8rem 1rem;flex:1;transition:all 0.32s ease;
}
.timeline-content:hover { border-color:var(--border-hover);box-shadow:var(--shadow-card);transform:translateX(4px); }

.timeline-date { font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--accent-secondary);font-weight:600;letter-spacing:0.04em;margin-bottom:0.25rem; }
.timeline-title { font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:0.15rem; }
.timeline-subtitle { font-size:0.8rem;color:var(--accent-primary);font-weight:600;margin-bottom:0.4rem; }
.timeline-body { color:var(--text-secondary);font-size:0.8rem;line-height:1.5; }
.timeline-tags { display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.6rem; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .timeline {
    padding: 0 0.5rem;
  }
  .timeline-item {
    gap: 0.85rem;
    margin-bottom: 1.2rem;
  }
  .timeline-content {
    padding: 1rem;
  }
  .timeline-title {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .timeline {
    padding: 0;
  }
  .timeline::before {
    left: 15px;
    top: 16px;
    bottom: 16px;
  }
  .timeline::after {
    left: 15px;
    top: 16px;
  }
  .timeline-item {
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .timeline-dot {
    width: 32px;
    height: 32px;
  }
  .timeline-dot svg {
    width: 16px;
    height: 16px;
  }
  .timeline-content {
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
  }
  .timeline-content:hover {
    transform: none;
  }
  .timeline-title {
    font-size: 0.9rem;
  }
  .timeline-subtitle {
    font-size: 0.75rem;
  }
  .timeline-body {
    font-size: 0.75rem;
  }
}

@media (max-width: 360px) {
  .timeline-item {
    gap: 0.5rem;
  }
  .timeline::before,
  .timeline::after {
    left: 13px;
  }
  .timeline-dot {
    width: 28px;
    height: 28px;
  }
  .timeline-dot svg {
    width: 14px;
    height: 14px;
  }
  .timeline-content {
    padding: 0.7rem 0.75rem;
  }
}