/* ========== CAREER PAGE ========== */
.career-hero {
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; background:#000;
}
.career-hero::before {
  content:""; position:absolute; inset:0;
  background:url('/img/CareerParis.jpg') center/cover no-repeat; filter:brightness(.7);
}
.career-hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.175), rgba(0,0,0,.275));
}
.career-hero-inner { position:relative; z-index:1; max-width:1000px; padding:0 clamp(20px, 5vw, 24px); }
.career-hero-inner h1 {
  font-size:clamp(2.8rem,5.5vw,4.2rem); font-weight:800;
  letter-spacing:-.02em; margin:0 0 clamp(1.6rem,2.6vw,2.6rem); line-height:1.1;
}
.career-hero-inner p {
  font-size:clamp(1.05rem,1rem + .55vw,1.55rem);
  opacity:.9; margin:0; line-height:1.6;
}

.career-timeline { margin:clamp(80px, 10vh, 120px) auto clamp(100px, 12vh, 140px); padding:0 clamp(20px, 5vw, 24px); }
.timeline-title {
  font-size:clamp(2.1rem,3.2vw,2.8rem); font-weight:700;
  margin:48px 0 72px; text-align:center; letter-spacing:-0.02em; line-height:1.2;
}
.timeline-roller { display:inline-block; height:1.2em; overflow:hidden; vertical-align:bottom }
.roller-inner { display:flex; flex-direction:column; will-change:transform }

/* Timeline */
.timeline {
  --line:#e0e0e0; --head-gap:56px; --node:#fff; --thick:1px;
  position:relative; display:flex; flex-direction:column;
  gap:184px; padding-top:var(--head-gap);
}
.timeline::before {
  content:""; position:absolute; left:50%; top:var(--head-gap); bottom:0;
  width:1px; background:var(--line); transform:translateX(-50%);
}
.timeline .row { display:grid; grid-template-columns:1fr 90px 1fr; align-items:center }
.timeline .cell { position:relative; min-height:64px }
.timeline .cell.content h3 {
  font-size:clamp(1.2rem,1rem + .7vw,1.6rem);
  font-weight:700; margin:0 0 .5rem; letter-spacing:-0.01em; line-height:1.2;
}
.timeline .cell.content .meta {
  color:var(--muted-enhanced); font-size:clamp(1.05rem,.9rem + .4vw,1.25rem); margin-top:.1rem; font-weight:500;
}
.timeline .row.left  .cell.content { text-align:right; padding-right:1ch }
.timeline .row.right .cell.content { padding-left:1ch }

/* Nodes */
.timeline .cell.tick { position:relative; min-height:32px }
.timeline .cell.tick::before {
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:12px; border-radius:50%;
  background:var(--node); border:2px solid var(--line);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(255,255,255,.75);
  transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth);
}
.timeline .cell.tick::after {
  content:""; position:absolute; top:50%; height:var(--thick);
  background:var(--line); transform:translateY(-50%);
}
.timeline .row.left  .cell.tick::after { left:0; width:45px }
.timeline .row.right .cell.tick::after { left:50%; width:45px }


/* --- Timeline details (always visible) --- */
.timeline .cell.content {}
.timeline .cell.content .head {
  all: unset; display:block;
}
.timeline .cell.content .detail {
  margin-top:.5rem;
}
.timeline .cell.content .intro {
  color:var(--muted-enhanced); line-height:1.6; margin: .4rem 0 .8rem;
  font-size:clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
}

/* Timeline badges */
.timeline .cell.badge {
  display:flex;
  align-items:center;
  padding:12px 0;
}
.timeline .row.left  .cell.badge { justify-content:flex-start; }
.timeline .row.right .cell.badge { justify-content:flex-end; }
.timeline .timeline-badge { display:block; transition: transform 0.3s var(--transition-smooth); }
.timeline .timeline-badge:hover { transform: translateY(-2px); }
.timeline .timeline-badge img {
  width: clamp(110px, 16vw, 180px);
  height: auto;
  border-radius: var(--radius-enhanced);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s var(--transition-smooth), transform 0.3s var(--transition-smooth);
}
.timeline .timeline-badge:hover img {
  box-shadow: var(--shadow-hover-soft);
}

/* Mobile optimization */
@media (max-width: 768px){
  .career-hero-inner{ padding:0 32px; }
  .career-hero-inner h1{ font-size:clamp(2.2rem,8vw,2.8rem); margin:0 0 1.2rem; }
  .career-hero-inner p{ font-size:clamp(1rem,4.5vw,1.2rem); }
  
  .career-timeline{ margin:60px auto 80px; }
  .timeline-title{ font-size:clamp(1.75rem,7vw,2.2rem); margin:32px 0 48px; }
  
  /* Simplified mobile timeline */
  .timeline{
    gap:56px; padding-top:0; display:block;
  }
  .timeline::before{ display:none; }
  
  .timeline .row{
    display:flex; flex-direction:column; gap:16px;
    padding:clamp(20px, 5vw, 28px);
    background:rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-radius:var(--radius-enhanced);
    margin-bottom:24px;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:var(--shadow-soft);
    transition:box-shadow .3s var(--transition-smooth), transform .3s var(--transition-smooth);
  }
  
  .timeline .row:hover{
    box-shadow:var(--shadow-hover-soft);
    transform:translateY(-2px);
  }
  
  /* Hide grid artifacts */
  .timeline .cell.tick{ display:none; }
  
  /* Show badges above content - force left alignment */
  .timeline .cell.badge{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    padding:0 !important;
    order:-1;
    margin-bottom:16px;
    width:100%;
  }
  .timeline .row.left .cell.badge,
  .timeline .row.right .cell.badge{
    justify-content:flex-start !important;
  }
  .timeline .timeline-badge{
    display:block;
    margin:0;
      text-align:left;
  }
  .timeline .timeline-badge img{
    width:clamp(120px, 30vw, 180px);
    height:auto;
    border-radius:var(--radius-enhanced);
    box-shadow:var(--shadow-soft);
    display:block;
    margin:0;
    transition: box-shadow 0.3s var(--transition-smooth);
  }
  
  /* Content styling */
  .timeline .cell.content{
    text-align:left !important; padding:0 !important; min-height:auto;
  }
  
  .timeline .cell.content h3{
    font-size:clamp(1.25rem,5vw,1.5rem); margin:0 0 .5rem;
    color:var(--ink); letter-spacing:-0.01em; line-height:1.2;
  }
  
  .timeline .cell.content .meta{
    font-size:clamp(0.9rem,4vw,1rem); color:var(--muted-enhanced); margin:.2rem 0 .8rem;
    font-weight:500;
  }
  
  .timeline .cell.content .intro{
    font-size:clamp(0.95rem,4vw,1.05rem); line-height:1.6;
    color:var(--ink-soft-enhanced); margin:.4rem 0 0;
  }
  
  .timeline .cell.content .detail{
    margin-top:.8rem; font-size:clamp(0.9rem,3.8vw,1rem);
  }
}

@media (max-width: 480px){
  .career-hero-inner{ padding:0 20px; }
  
  .timeline .row{ 
    padding:clamp(18px, 4vw, 22px); 
    margin-bottom:20px;
    border-radius:var(--radius-enhanced);
  }
  .timeline .timeline-badge img{ width:clamp(100px, 32vw, 140px); border-radius:12px; }
  .timeline .cell.content h3{ font-size:1.15rem; letter-spacing:-0.01em; }
  .timeline .cell.content .meta{ font-size:0.85rem; }
  .timeline .cell.content .intro{ font-size:0.9rem; line-height:1.6; }
}