/* ========== CV PAGE (cv.html) ==========
   Built on the project pages (case.css): the same header, hero, labels and contact. The jobs sit on one
   thin line; as the page scrolls, light runs down it (the site's 'light flowing along a thin line', like
   the scroll cue) and each job's point lights up when the light reaches it (cv.js sets --reach and
   .is-lit). Below: education, skills, tools, the certificate and the prizes, one row each. */

/* Hero: the name smaller than a project's title (three words), the summary under the role */
.case-hero--cv { min-height: 0; padding-top: calc(var(--header-h) + 120px); padding-bottom: 0; }
.case-hero--cv .case-facts { margin-bottom: 0; }
.case-facts a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.case-facts a:hover, .case-facts a:focus-visible { background-size: 100% 1px; }
.case-title--cv { font-size: clamp(52px, 10vw, 150px); }
.cv-summary { max-width: 58ch; margin-top: 28px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-mid); }

/* ---- The line of jobs ---- */
.cv-timeline {
  --rail: 5px;                 /* where the line runs, from the list's left edge */
  --dot: 0.75em;               /* the point's centre, from a job's top (the date line) */
  position: relative;
  padding-left: 44px;
}
.cv-jobs { list-style: none; }
.cv-timeline::before,          /* the line itself */
.cv-timeline__light {          /* the light that runs down it */
  content: '';
  position: absolute;
  left: var(--rail);
  top: var(--dot);
  width: 1px;
}
.cv-timeline::before { bottom: 0; background: linear-gradient(to bottom, var(--line) 85%, transparent); }
.cv-timeline__light {
  height: var(--reach, 0px);
  max-height: calc(100% - var(--dot));
  background: linear-gradient(to bottom, rgb(var(--glow-lavender) / 0.15), rgb(var(--glow-lavender) / 0.85) 92%, #fff);
  box-shadow: 0 0 8px rgb(var(--glow-lavender) / 0.45);
}
.cv-timeline__light::after {   /* the bright head at the front of the light */
  content: '';
  position: absolute;
  left: -1px;
  bottom: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgb(var(--glow-lavender) / 0.95), 0 0 12px 4px rgb(var(--glow-violet) / 0.55);
  opacity: min(1, calc(var(--reach-px, 0) * 0.05));
}

.cv-job { position: relative; }
.cv-job + .cv-job { margin-top: 72px; }
.cv-job::before {              /* the job's point on the line */
  content: '';
  position: absolute;
  left: calc(var(--rail) - 44px - 4px);
  top: calc(var(--dot) - 4.5px);
  width: 9px;
  height: 9px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.cv-job.is-lit::before {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 6px 1px rgb(var(--glow-lavender) / 0.95), 0 0 16px 5px rgb(var(--glow-lavender) / 0.4);
}
.cv-job__when { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
.case-body .cv-job__role { margin-top: 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: normal; text-transform: none; color: var(--text); }
.cv-job__at { display: block; margin-top: 4px; font-size: 0.72em; font-weight: 400; color: var(--text-mid); }
.cv-job .case-list { margin-top: 20px; }
.cv-job .case-list li { font-size: 17px; }

/* ---- Education, skills, tools, the certificate, prizes: one row each ---- */
.cv-rows { margin-top: 0; }
.cv-row { padding: 40px 0; border-top: 1px solid var(--line); }
.cv-row:last-child { border-bottom: 1px solid var(--line); }
.cv-row > .case-label { position: static; }
.cv-entry + .cv-entry { margin-top: 28px; }
.cv-entry__when { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); }
.cv-entry__what { margin-top: 6px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.cv-entry__where { margin-top: 4px; font-size: 15px; color: var(--text-mid); }

@media (max-width: 1023px) {
  .cv-row > .case-label { margin-bottom: 18px; }
}
@media (max-width: 767px) {
  .case-hero--cv { padding-top: calc(var(--header-h) + 72px); }
  .cv-timeline { padding-left: 30px; }
  .cv-job::before { left: calc(var(--rail) - 30px - 4px); }
  .cv-job + .cv-job { margin-top: 56px; }
  .cv-job .case-list li { font-size: 16px; }
  .cv-row { padding: 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-job::before { transition: none; }
}