/**
 * CV page (page-carmen-rusu.php).
 *
 * Loaded only on that template, so everything is scoped under .cv and nothing
 * here can reach the rest of the site. Colours and type come from the tokens
 * declared on :root in codely.css.
 */

.cv {
  max-width: var(--cs-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--cs-shell) clamp(72px, 9vw, 130px);
  color: #3D4560;
  font-size: 16px;
  line-height: 1.7;
}

/* --- Masthead ------------------------------------------------------------ */

.cv__head {
  display: grid;
  gap: 20px;
  padding-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid #E6E9F2;
}
.cv__head .cs-eyebrow { display: block; }

.cv__name {
  margin: 0;
  font-family: var(--cs-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--cs-ink);
}

.cv__role {
  margin: 0;
  font-family: var(--cs-mono);
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--cs-blue);
}

.cv__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv__contact li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #E6E9F2;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 1.2;
  color: #4A5270;
}
.cv__contact a {
  color: var(--cs-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 99, 246, 0.35);
}
.cv__contact a:hover { color: var(--cs-blue); border-bottom-color: var(--cs-blue); }
.cv__contact svg { flex: none; width: 15px; height: 15px; color: var(--cs-blue); }

/* --- Controls: variant switch + PDF --------------------------------------- */

.cv__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.cv-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid #E6E9F2;
  border-radius: 999px;
  background: #F4F6FB;
}
.cv-switch__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: #5A6280;
  font-family: var(--cs-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: background .25s, color .25s, box-shadow .25s;
}
.cv-switch__btn:hover { color: var(--cs-ink); }
.cv-switch__btn[aria-pressed="true"] {
  background: var(--cs-ink);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(11, 18, 48, 0.18);
}
.cv-switch__btn:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 2px; }

.cv__pdf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cs-lime);
  color: var(--cs-ink);
  font-family: var(--cs-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.cv__pdf:hover {
  color: var(--cs-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(23, 38, 94, 0.16);
}
.cv__pdf svg { width: 15px; height: 15px; flex: none; }

/* --- Body grid ------------------------------------------------------------ */

.cv__body {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  margin-top: clamp(36px, 4.5vw, 64px);
  align-items: start;
}

.cv-section + .cv-section { margin-top: clamp(32px, 3.5vw, 52px); }
.cv-section__title {
  margin: 0 0 18px;
  font-family: var(--cs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cs-blue);
}
.cv-section__title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 10px;
  background: var(--cs-lime);
}

.cv-summary { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.75; }

/* --- Experience ----------------------------------------------------------- */

.cv-job { position: relative; padding-left: 26px; }
.cv-job + .cv-job { margin-top: 30px; }
.cv-job::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 4px;
  width: 1px;
  background: #E6E9F2;
}
.cv-job::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cs-blue);
}
.cv-job__title {
  margin: 0;
  font-family: var(--cs-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}
.cv-job__meta {
  margin: 5px 0 12px;
  font-family: var(--cs-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #7A82A0;
}
.cv-job__meta a { color: #7A82A0; text-decoration: underline; text-underline-offset: 2px; }
.cv-job__meta a:hover { color: var(--cs-blue); }

.cv-job ul { margin: 0; padding: 0; list-style: none; }
.cv-job li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.65;
}
.cv-job li + li { margin-top: 8px; }
.cv-job li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--cs-blue);
}

/* --- Aside: skills, education, languages ---------------------------------- */

.cv-skill + .cv-skill { margin-top: 16px; }
.cv-skill__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-ink);
}
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tags span {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #DEE3F0;
  background: #FFFFFF;
  font-size: 12.5px;
  line-height: 1.3;
  color: #4A5270;
}

.cv-edu + .cv-edu { margin-top: 18px; }
.cv-edu__degree {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cs-ink);
}
.cv-edu__where { display: block; font-size: 14px; line-height: 1.5; }
.cv-edu__when {
  display: block;
  margin-top: 3px;
  font-family: var(--cs-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #7A82A0;
}

.cv-lang { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.cv-lang + .cv-lang { margin-top: 8px; }
.cv-lang span:first-child { color: var(--cs-ink); }
.cv-lang span:last-child { font-family: var(--cs-mono); font-size: 12px; color: #7A82A0; }

/* --- Variant visibility ---------------------------------------------------
   Both variants ship in the markup so the page still works without JS and so
   search engines see everything. The inactive one is removed from the layout
   and from the accessibility tree. */

.cv[data-variant="webdev"] [data-cv-variant="shopify"],
.cv[data-variant="shopify"] [data-cv-variant="webdev"] { display: none; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .cv__body { grid-template-columns: 1fr; }
  .cv__aside { padding-top: 8px; border-top: 1px solid #E6E9F2; }
}

@media (max-width: 560px) {
  .cv__tools { gap: 10px; }
  .cv-switch { width: 100%; }
  .cv-switch__btn { flex: 1; padding: 10px 12px; }
  .cv__pdf { width: 100%; justify-content: center; }
}

/* --- Print ----------------------------------------------------------------
   The screen version is the shareable one, but recruiters do print pages.
   Drop the site chrome and the controls, and keep only the active variant. */

@media print {
  .cs-header, .cs-mobile, .cs-cta, .cs-footer, .cs-loader,
  .cv__tools, .cv__head .cs-eyebrow { display: none !important; }
  .cv { padding: 0; font-size: 11pt; }
  .cv__body { grid-template-columns: 1.7fr 1fr; gap: 28px; margin-top: 22px; }
  .cv-job, .cv-edu, .cv-section { break-inside: avoid; }
  .cv__contact li, .cv-tags span { border-color: #CCCCCC; }
}