/* استایل ساختاری تایم‌لاین تجربه کاری - رنگ‌ها و فونت از طریق متغیرهای CSS اینلاین تزریق می‌شوند */

.extl-scope{
  --extl-ink-950: var(--extl-c-ink-950, #0a1220);
  --extl-ink-900: var(--extl-c-ink-900, #101b2e);
  --extl-slate-600: var(--extl-c-slate-600, #5b6a82);
  --extl-slate-400: var(--extl-c-slate-400, #93a1b8);
  --extl-paper: var(--extl-c-paper, #f5f7fb);
  --extl-white: var(--extl-c-white, #ffffff);
  --extl-line: var(--extl-c-line, #e3e8f2);
  --extl-azure-500: var(--extl-c-azure-500, #2f6fed);
  --extl-azure-400: var(--extl-c-azure-400, #6d97f5);
  --extl-emerald-500: var(--extl-c-emerald-500, #149a6e);
  --extl-emerald-400: var(--extl-c-emerald-400, #2ec48e);
  --extl-shadow-soft: 0 20px 50px -26px rgba(10,18,32,0.22);
  --extl-shadow-hover: 0 30px 60px -22px rgba(10,18,32,0.26);

  font-family: var(--extl-font-family, inherit);
  direction: rtl;
}

.extl-mono{ font-family:'JetBrains Mono', monospace; }

.extl-section{
  position:relative;
  padding: 48px 20px 48px;
  overflow:hidden;
  background:
    radial-gradient(900px 460px at 90% -6%, rgba(47,111,237,0.08), transparent 60%),
    radial-gradient(800px 420px at 4% 6%, rgba(20,154,110,0.09), transparent 58%),
    var(--extl-paper);
}

.extl-wrap{ max-width: 980px; margin:0 auto; position:relative; }

/* ---------- Header ---------- */
.extl-head{ text-align:center; max-width: 680px; margin: 0 auto 32px; }

.extl-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding: 7px 16px 7px 10px;
  border-radius:999px; background: var(--extl-white); border:1px solid var(--extl-line);
  font-size:13px; font-weight:600; color: var(--extl-slate-600);
  box-shadow: var(--extl-shadow-soft);
}
.extl-eyebrow .extl-dot{
  width:8px; height:8px; border-radius:50%; background: var(--extl-emerald-500);
  box-shadow: 0 0 0 4px rgba(20,154,110,0.15);
}

.extl-head h2{
  margin-top:8px; font-size: clamp(24px, 4vw, 38px); font-weight:800;
  color: var(--extl-ink-950); line-height:1.4;
}
.extl-head h2 .extl-hl{
  background: linear-gradient(90deg, var(--extl-emerald-500), var(--extl-azure-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.extl-head p{ margin-top:8px; color: var(--extl-slate-600); font-size:15px; line-height:1.7; }

/* ---------- Timeline scaffold ---------- */
.extl-timeline{ position:relative; padding-top: 6px; }

.extl-timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background: var(--extl-line); transform: translateX(-50%); border-radius:2px;
}
.extl-progress{
  content:''; position:absolute; left:50%; top:0; width:3px; height:0%;
  background: linear-gradient(180deg, var(--extl-emerald-400), var(--extl-azure-500));
  transform: translateX(-50%); border-radius:2px;
  box-shadow: 0 0 16px rgba(47,111,237,0.45);
  transition: height .1s linear;
}

.extl-item{
  position:relative;
  width: calc(50% - 42px);
  margin-bottom: 24px;
  opacity:0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.extl-item.extl-in-view{ opacity:1; transform: translateY(0); }

.extl-item:nth-child(odd){ margin-left:auto; }
.extl-item:nth-child(even){ margin-right:auto; }

.extl-item-dot{
  position:absolute; top:24px; width:16px; height:16px; border-radius:50%;
  background: var(--extl-white); border:3px solid var(--extl-azure-400); z-index:2;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.extl-item:nth-child(odd) .extl-item-dot{ left:-42px; transform: translateX(-50%); }
.extl-item:nth-child(even) .extl-item-dot{ right:-42px; transform: translateX(50%); }

.extl-item.extl-current .extl-item-dot{
  border-color: var(--extl-emerald-500);
  box-shadow: 0 0 0 5px rgba(20,154,110,0.16);
  animation: extlPulseDot 2.2s ease-in-out infinite;
}
@keyframes extlPulseDot{
  0%,100%{ box-shadow: 0 0 0 5px rgba(20,154,110,0.16); }
  50%{ box-shadow: 0 0 0 9px rgba(20,154,110,0.06); }
}

/* ---------- Card ---------- */
.extl-card{
  background: var(--extl-white); border:1px solid var(--extl-line); border-radius:20px;
  padding: 18px 18px 16px; box-shadow: var(--extl-shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.extl-card:hover{ transform: translateY(-4px); box-shadow: var(--extl-shadow-hover); border-color: rgba(47,111,237,0.3); }

.extl-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }

.extl-monogram{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
}

.extl-role{ font-size:17px; font-weight:800; color: var(--extl-ink-950); margin-bottom:3px; }
.extl-company{ font-size:13.5px; font-weight:700; color: var(--extl-azure-500); }

.extl-date{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:600;
  color: var(--extl-slate-400); background: var(--extl-paper); border:1px solid var(--extl-line);
  padding: 5px 10px; border-radius:8px; white-space:nowrap; flex-shrink:0;
}
.extl-now-badge{
  display:inline-flex; align-items:center; gap:5px;
  color: var(--extl-emerald-500); font-weight:700;
}
.extl-now-badge .extl-pip{
  width:6px; height:6px; border-radius:50%; background: var(--extl-emerald-500);
  animation: extlBlinkPip 1.6s ease-in-out infinite;
}
@keyframes extlBlinkPip{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.extl-desc{ font-size:14px; color: var(--extl-slate-600); line-height:1.85; margin-bottom:12px; }

.extl-stat-row{ display:flex; flex-wrap:wrap; gap:10px; }
.extl-stat-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background: var(--extl-paper); border:1px solid var(--extl-line);
  border-radius:12px; padding: 6px 10px; min-width:80px;
}
.extl-stat-chip .extl-num{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:16px;
  color: var(--extl-ink-950);
}
.extl-stat-chip .extl-lab{ font-size:11px; color: var(--extl-slate-400); font-weight:600; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .extl-timeline::before, .extl-progress{ left:auto; right:16px; transform:none; }
  .extl-item{ width:100%; margin:0 0 20px !important; padding-right:36px; }
  .extl-item .extl-item-dot{ left:auto !important; right:8px !important; transform:none !important; }
  .extl-head{ margin-bottom: 24px; }
  .extl-section{ padding: 32px 16px 32px; }
  .extl-top{ flex-wrap:wrap; }
}
@media (max-width:480px){
  .extl-card{ padding: 14px 14px; }
  .extl-stat-chip{ min-width: 70px; }
}
@media (prefers-reduced-motion: reduce){
  .extl-item, .extl-card, .extl-item-dot{ transition:none !important; animation:none !important; }
  .extl-item{ opacity:1 !important; transform:none !important; }
}