/* CV page (cv.html). Built from Figma frame 1070:5614.
   The CV has its own type scale, all in Lexend Deca (Light 300 and SemiBold 600), set for
   print: on the A4 PDF the 20px body text comes out at about 10pt. The print rules at the end
   turn the same page into that PDF. */

.cv-page {
  --cv-text: #393534;
  --cv-meta: #a39b96;
}

/* The sheet: one white card, 1184px wide, 32 + 48 + 16 = 96px from the top like the home grid */
.cv {
  width: var(--content);
  margin: 16px auto 96px;
  padding: 80px 80px 48px;
  background: var(--c-surface);
  border-radius: 32px;
  color: var(--cv-text);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cv b, .cv h1, .cv h2, .cv h3 { font-weight: 600; margin: 0; }

/* Name and contacts: two halves */
.cv__head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.cv__who { display: flex; flex-direction: column; gap: 8px; }
.cv__name { font-size: 28px; line-height: 35px; }
.cv__role { font-size: 24px; line-height: 34px; }
.cv__contacts { display: flex; flex-direction: column; gap: 8px; }

/* Text followed by the external-link icon (LinkedIn, the university ranking) */
.cv__link { display: inline-flex; align-items: center; gap: 4px; }
.cv__link-icon { width: 32px; height: 32px; flex: none; opacity: 0.45; } /* the asset is brown; Figma shows it grey */
.cv a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cv__summary { font-size: 24px; line-height: 34px; }

/* Work experience 640px, 48px gap, the side column 336px */
.cv__body { display: grid; grid-template-columns: 640fr 336fr; gap: 48px; }
.cv__main { display: flex; flex-direction: column; gap: 28px; }
.cv__jobs { display: flex; flex-direction: column; gap: 40px; }
.cv__side { display: flex; flex-direction: column; gap: 40px; }
.cv__side > section { display: flex; flex-direction: column; gap: 24px; }
.cv__schools { display: flex; flex-direction: column; gap: 24px; }
.cv__languages { display: flex; flex-direction: column; gap: 8px; }
.cv__auth { color: var(--cv-meta); } /* work authorization, last in the side column, no heading */

.cv__h2 { font-size: 24px; line-height: 30px; }
.cv__h3 { font-size: 20px; line-height: 25px; }
.cv__item { display: flex; flex-direction: column; gap: 8px; }
.cv__meta { font-weight: 600; line-height: 25px; color: var(--cv-meta); }
.cv__list { list-style: disc; padding-left: 30px; }
.cv__list li::marker { font-size: 14px; } /* the small bullet from Figma */

.cv__download { align-self: center; margin-top: 72px; font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 24px; }

/* Below 1024px: one column. Not designed in Figma. */
@media (max-width: 1023px) {
  .cv { padding: 48px 48px 40px; }
  .cv__head, .cv__body { grid-template-columns: 1fr; }
  .cv__download { margin-top: 24px; }
}
@media (max-width: 639px) {
  .cv { padding: 32px 24px; gap: 40px; font-size: 17px; line-height: 25px; border-radius: 24px; }
  .cv__name { font-size: 26px; line-height: 32px; }
  .cv__role, .cv__summary { font-size: 20px; line-height: 28px; }
  .cv__h2 { font-size: 22px; line-height: 28px; }
  .cv__h3, .cv__meta { font-size: 17px; line-height: 23px; }
  .cv__list { padding-left: 22px; }
  .cv__link { flex-wrap: wrap; word-break: break-all; }
}

/* Print and PDF: one A4 page. The 1184px sheet is scaled to the page width (794px),
   so the 20px body text prints at about 10pt. The nav and the download button are left out. */
@page { size: A4; margin: 0; }
@media print {
  .cv-page { background: #fff; }
  .cv-page .site-header, .cv__download { display: none; }
  .cv {
    zoom: 0.6706; /* 794 / 1184 */
    width: 1184px;
    margin: 0;
    padding: 72px 80px;
    border-radius: 0;
  }
  /* The A4 page is narrower than 1024px, so undo the one-column layout */
  .cv__head { grid-template-columns: 1fr 1fr; }
  .cv__body { grid-template-columns: 640fr 336fr; }
  .cv a:hover { text-decoration: none; }
}