/* ============================================================
   experience.css — Experience / CV section
   Hybrid layout:
   - CSS grid for outer structure (PhD can span cols 1–2)
   - flex sub-columns for entries (independent heights, no gaps)
   ============================================================ */

/* ── Track colors ──────────────────────────────────────────── */
/* Education:  #4a6fa5  (blue)   */
/* Research:   #c0392b  (red)    */
/* Industry:   #b07d2a  (amber)  */
/* Teaching:   #7b5ea7  (purple) */


/* ── Outer grid ──────────────────────────────────────────────
   Row 1 : three column headers
   Row 2 : PhD wrapper (span 2) + ROS Workshop (col 3)
   Row 3 : three independent sub-columns (align-self: start)  */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.5rem;
  row-gap: 0;
  align-items: start;
}

/* PhD spans the first two columns */
.cv-phd-wrapper {
  grid-column: span 2;
}

/* Sub-columns fill their grid cell independently */
.cv-subcol {
  display: flex;
  flex-direction: column;
  align-self: start;
}

/* Teaching subcol starts at row 2 (same row as PhD) and stretches into row 3 */
.cv-subcol--teaching {
  grid-column: 3;
  grid-row: 2 / 4;
}


/* ── Column headers ──────────────────────────────────────── */
.cv-col-header {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid;
}

.cv-col-header--edu      { color: #4a6fa5; border-color: #4a6fa5; }
.cv-col-header--research { color: #c0392b; border-color: #c0392b; }
.cv-col-header--teaching { color: #7b5ea7; border-color: #7b5ea7; }


/* ── PhD wrapper ─────────────────────────────────────────── */
.cv-phd-wrapper {
  padding: 0 0 1.2rem 2rem;
  position: relative;
}

.cv-phd-wrapper::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(74, 111, 165, 0.35);
}

.cv-phd-wrapper::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--paper);
  box-shadow: 0 0 0 2px #4a6fa5;
  z-index: 2;
}


/* ── PhD card ─────────────────────────────────────────────── */
.cv-phd-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  position: relative;
  overflow: hidden;
}

.cv-phd-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #4a6fa5 50%, #c0392b 50%);
}

.cv-phd-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(74, 111, 165, 0.04) 0%,
    rgba(192,  57,  43, 0.04) 100%);
  pointer-events: none;
}

.cv-phd-logos {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.cv-phd-badge-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.cv-phd-orgs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.cv-phd-org-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.cv-phd-org-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Regular entries ─────────────────────────────────────── */
.cv-entry {
  position: relative;
  padding: 0 0 1.2rem 2rem;
}

.cv-entry:last-child { padding-bottom: 0; }

.cv-entry::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0; bottom: 0;
  width: 2px;
  z-index: 0;
}

.cv-entry.edu::before      { background: rgba( 74, 111, 165, 0.35); }
.cv-entry.research::before { background: rgba(192,  57,  43, 0.25); }
.cv-entry.industry::before { background: rgba(176, 125,  42, 0.25); }
.cv-entry.teaching::before { background: rgba(123,  94, 167, 0.25); }

.cv-dot {
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  z-index: 2;
}

.cv-entry.edu         .cv-dot { background: #4a6fa5; box-shadow: 0 0 0 1.5px #4a6fa5; }
.cv-entry.edu.ongoing .cv-dot { background: var(--paper); box-shadow: 0 0 0 2px #4a6fa5; }
.cv-entry.research    .cv-dot { background: #c0392b; box-shadow: 0 0 0 1.5px #c0392b; }
.cv-entry.industry    .cv-dot { background: #b07d2a; box-shadow: 0 0 0 1.5px #b07d2a; }
.cv-entry.teaching    .cv-dot { background: #7b5ea7; box-shadow: 0 0 0 1.5px #7b5ea7; }


/* ── Card body ───────────────────────────────────────────── */
.cv-body {
  background: var(--card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
}

.cv-entry.edu      .cv-body { border-left-color: #4a6fa5; }
.cv-entry.research .cv-body { border-left-color: #c0392b; }
.cv-entry.industry .cv-body { border-left-color: #b07d2a; }
.cv-entry.teaching .cv-body { border-left-color: #7b5ea7; }


/* ── Card header ─────────────────────────────────────────── */
.cv-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.cv-logo {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: white;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cv-logo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--border), var(--card));
}

.cv-card-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}


/* ── Typography ──────────────────────────────────────────── */
.cv-year {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.cv-role {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.cv-subrole {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.1rem;
  line-height: 1.3;
}

.cv-org {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.cv-note {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.5;
}

.cv-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.1em 0.45em;
  margin-bottom: 0.25rem;
}

.cv-entry.edu      .cv-badge { color: #4a6fa5; background: rgba( 74, 111, 165, 0.1); }
.cv-entry.research .cv-badge { color: #c0392b; background: rgba(192,  57,  43, 0.1); }
.cv-entry.industry .cv-badge { color: #b07d2a; background: rgba(176, 125,  42, 0.1); }
.cv-entry.teaching .cv-badge { color: #7b5ea7; background: rgba(123,  94, 167, 0.1); }

.cv-badge.edu      { color: #4a6fa5; background: rgba( 74, 111, 165, 0.1); }
.cv-badge.research { color: #c0392b; background: rgba(192,  57,  43, 0.1); }

.cv-grade, .cv-advisors {
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: 0.4rem;
}

.cv-grade    { margin-top: 0.3rem; }
.cv-advisors { margin-top: 0.4rem; }

/* Utility */
.cv-spacer  { visibility: hidden; }
.cv-gap     { height: 2.4rem; }


/* ── Mobile ──────────────────────────────────────────────────
   Flatten to a single column. Order puts PhD right after the
   Education header, sub-columns follow their track header.   */
@media (max-width: 700px) {
  .cv-grid {
    display: flex;
    flex-direction: column;
  }

  /* Education */
  .cv-col-header--edu  { order: 1; }
  .cv-phd-wrapper      { order: 2; }
  .cv-subcol--edu      { order: 3; }

  /* Research & Industry */
  .cv-col-header--research { order: 11; margin-top: 2rem; }
  .cv-subcol--research     { order: 12; }

  /* Teaching & Outreach */
  .cv-col-header--teaching { order: 21; margin-top: 2rem; }
  .cv-subcol--teaching     { order: 22; }
}


/* ════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   Elements start hidden. IntersectionObserver adds
   .is-visible when they enter the viewport.
   ════════════════════════════════════════════════════════════ */

/* Column headers — slide in from left */
.cv-col-header {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cv-col-header.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* PhD wrapper — fades up */
.cv-phd-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cv-phd-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Regular entries — fade up with subtle scale */
.cv-entry {
  opacity: 0;
  transform: translateY(16px) scale(0.995);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.cv-entry.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Dot pops in after card lands */
.cv-entry.is-visible .cv-dot {
  animation: cv-dotPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes cv-dotPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Vertical bar draws down from top */
.cv-entry.is-visible::before {
  animation: cv-barDraw 0.5s ease 0.1s both;
}
@keyframes cv-barDraw {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}

/* Card lifts on hover once visible */
.cv-entry.is-visible .cv-body {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cv-entry.is-visible .cv-body:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  border-color: #b8b0a5;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cv-col-header,
  .cv-phd-wrapper,
  .cv-entry {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cv-entry.is-visible .cv-dot,
  .cv-entry.is-visible::before {
    animation: none !important;
  }
}