/* =====================================================================
   EXPERIENCE  -  the timeline. One .job per role (see js/render/experience.js).
   ===================================================================== */

.job{min-width:0;display:grid;grid-template-columns:170px 1fr;gap:8px 24px}
.job time{font:14px/1.8 var(--mono);color:var(--dim)}
.job h3{margin:0;font:500 22px/1.4 var(--sans);color:var(--strong);overflow-wrap:anywhere}
.job .role{font:14px var(--mono);color:var(--amber);margin:2px 0 8px;overflow-wrap:anywhere}

/* timeline rail + dot */
#experience .job{position:relative;margin-left:8px;padding:22px 0 22px 36px;border-left:2px solid var(--line)}
#experience .job::before{content:"";position:absolute;left:-7px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--blue)}

/* blocks inside a role: what I did / what I learned */
.jblk{margin-top:16px}
.jlab{font:12px var(--mono);color:var(--dim);margin:0 0 8px}
.jlist{list-style:none;margin:0;padding:0}
.jlist li{position:relative;padding-left:22px;margin:0 0 7px;max-width:68ch;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.jlist li::before{content:"\203A";position:absolute;left:3px;top:0;font:700 16px/1.6 var(--mono);color:var(--blue)}
.jblk.learned .jlist li::before{color:var(--amber)}

/* older roles: only the title shows; the details open on hover / tap
   (behavior: js/features/experience-reveal.js, timings: js/config.js) */
#experience .job.old{padding-block:16px}
#experience .job.old h3{font-size:18px}
#experience .job.old .jblk{margin-top:12px}
#experience .job.old .jlist li{font-size:15px;margin-bottom:5px}
#experience .job.old .jlist li::before{font-size:15px}
.jbtn{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.jbtn:hover{color:var(--blue)}
.jplus{position:relative;flex:none;width:14px;height:14px;color:var(--dim);transition:transform .3s var(--ease),color .3s var(--ease)}
.jplus::before,.jplus::after{content:"";position:absolute;left:50%;top:50%;border-radius:1px;background:currentColor}
.jplus::before{width:12px;height:2px;margin:-1px 0 0 -6px}
.jplus::after{width:2px;height:12px;margin:-6px 0 0 -1px}
#experience .job.old:hover .jplus{color:var(--blue)}
#experience .job.old.is-open .jplus{transform:rotate(45deg);color:var(--amber)}
#experience .job.old::before{transition:background-color .25s var(--ease)}
#experience .job.old:hover::before,#experience .job.old.is-open::before{background:var(--blue)}
/* the sliding panel: animates its height from 0 to its content */
.jbody{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .35s var(--ease),opacity .25s ease,visibility 0s linear .35s}
.jbody-in{min-height:0;overflow:hidden}
#experience .job.old.is-open .jbody{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}

@media (max-width:820px){
  .job{grid-template-columns:minmax(0,1fr)}
  #experience .job{padding-left:22px}
}

@media (prefers-reduced-motion:reduce){
  .jplus,#experience .job.old::before,.jbody{transition:none}
}