/* ════════════════════════════════════════════════
   EXPERIENCE & TIMELINE
   ════════════════════════════════════════════════ */

.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent2), transparent);
}

.timeline-item { position: relative; margin-bottom: 2.5rem; }
.timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
  position: absolute; left: -2.85rem; top: 1.5rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg2);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
  transition: box-shadow 0.3s;
}
.timeline-item:hover .timeline-marker { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18); }

.timeline-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: border-color var(--transition), transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.timeline-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  opacity: 0; transition: opacity 0.3s;
}
.timeline-item:hover .timeline-card {
  border-color: rgba(var(--accent-rgb), .22);
  transform: translateX(4px); box-shadow: 0 12px 36px var(--shadow);
}
.timeline-item:hover .timeline-card::before { opacity: 1; }

.timeline-header {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1.25rem;
}
.exp-role { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; margin-bottom: .2rem; }
.exp-company { color: var(--accent); font-size: .9rem; font-weight: 500; }
.exp-location { color: var(--muted); font-size: .8rem; margin-top: .15rem; }

.exp-period {
  font-size: .76rem; color: var(--muted); text-align: right;
  white-space: nowrap; background: var(--bg3); padding: .4rem .9rem;
  border-radius: 100px; border: 1px solid var(--border); height: fit-content;
}

.exp-tasks { display: flex; flex-direction: column; gap: .6rem; }
.exp-tasks li {
  position: relative; padding-left: 1.4rem; font-size: .88rem; color: var(--muted); line-height: 1.65;
}
.exp-tasks li::before {
  content: '→'; color: var(--accent); position: absolute; left: 0; top: 0.15em;
}
.exp-tasks strong { color: var(--text); font-weight: 500; }

/* ════════════════════════
   EDUCATION
   ════════════════════════ */
.education-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.edu-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
  position: relative; overflow: hidden; text-align: center;
  transition: border-color var(--transition), transform 0.3s, box-shadow 0.3s;
}
.edu-card:hover {
  border-color: rgba(var(--accent-rgb), .3);
  transform: translateY(-6px); box-shadow: 0 24px 50px var(--shadow);
}
.edu-rank {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: var(--font-head); font-size: .75rem; font-weight: 800; padding: .25rem .7rem; border-radius: 100px;
}
.edu-rank--1st { background: rgba(var(--accent-rgb), .15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3); }
.edu-rank--2nd { background: rgba(var(--accent2-rgb), .12); color: var(--accent2); border: 1px solid rgba(var(--accent2-rgb), .25); }

.edu-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .18);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin: 0 auto 1.5rem;
}
.edu-degree { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; margin-bottom: .3rem; }
.edu-field  { color: var(--accent); font-weight: 500; font-size: .95rem; margin-bottom: .4rem; }
.edu-institution { color: var(--muted); font-size: .85rem; margin-bottom: 1.25rem; }

.edu-details {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.edu-year { font-size: .78rem; color: var(--muted); background: var(--bg3); padding: .3rem .8rem; border-radius: 100px; border: 1px solid var(--border); }
.edu-gpa  { font-size: .82rem; color: var(--muted); display: flex; align-items: center; }
.edu-gpa strong { color: var(--accent); margin: 0 .2rem; }

/* ════════════════════════
   CERTIFICATIONS
   ════════════════════════ */
.certs-track-wrap { overflow: hidden; }
.certs-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.cert-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 2rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color var(--transition), transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.cert-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.cert-card:hover {
  border-color: rgba(var(--accent-rgb), .28); transform: translateY(-5px); box-shadow: 0 18px 40px var(--shadow);
}
.cert-badge { font-size: 2rem; }
.cert-title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; line-height: 1.3; flex: 1; }
.cert-issuer { font-size: .8rem; color: var(--accent); font-weight: 500; }
.cert-year {
  display: inline-block; font-size: .72rem; color: var(--muted); background: var(--bg3);
  padding: .2rem .65rem; border-radius: 100px; border: 1px solid var(--border); width: fit-content;
}