/* ============================================================
   experience.css
   ============================================================ */

.exp-layout {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 48px;
  align-items: start;
}

.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  margin-bottom: 4px;
}
.timeline-marker {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 22px;
}
.timeline-dot {
  width: 10px; height: 10px;
  background: var(--accent-primary);
  border: 2px solid var(--bg-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
  flex-shrink: 0; z-index: 1;
}
.timeline-dot-dim {
  background: var(--border-color);
  box-shadow: 0 0 0 3px rgba(42,42,42,0.5);
}
.timeline-line {
  width: 1px; flex: 1;
  background: linear-gradient(to bottom, rgba(59,130,246,0.35), transparent);
  margin-top: 5px; min-height: 32px;
}
.timeline-card { margin-bottom: 18px; }
.tc-header { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 10px; }
.tc-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.tc-cat {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-primary); margin-bottom: 4px;
}
.tc-title { font-size: 0.97rem; margin: 0 0 6px; }
.tc-date { display: flex; gap: 6px; }
.tc-desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.8; }

/* Sidebar */
.sb-card h4 {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 16px;
}
.comp-list { display: flex; flex-direction: column; gap: 12px; }
.comp-head {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 5px;
}
.comp-level { font-size: 0.66rem; color: var(--text-muted); }
.comp-bar { height: 2px; background: var(--border-color); border-radius: 2px; overflow: hidden; }
.comp-bar div {
  height: 100%;
  background: linear-gradient(to right, #1E3A8A, #3B82F6);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
}
.glance-list { display: flex; flex-direction: column; gap: 11px; }
.glance-item { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-secondary); }
.glance-icon { font-size: 0.9rem; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  .exp-layout { grid-template-columns: 1fr; }
  .exp-sidebar { order: -1; }
}
@media (max-width: 600px) {
  .timeline-item { grid-template-columns: 24px 1fr; gap: 10px; }
  .tc-header { flex-direction: column; gap: 5px; }
  .tc-icon { display: none; }
}