/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 12pt;
  line-height: 1.6;
  color: #1c1c1e;
  background: #fff;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.8rem 3rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

p { margin-bottom: 0.3rem; }

/* ── Header (photo + info side by side) ── */
.cv-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 0.2rem;
}

.cv-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
  display: block;
}

/* Pandoc wraps the photo in a <p> — neutralise it */
.cv-photo p { margin: 0; line-height: 0; }

/* Pandoc turns the inner div into a <section> — treat it the same */
.cv-header-info,
section.cv-header-info {
  flex: 1;
  min-width: 0; /* fixes flex overflow / email wrapping */
}

.cv-header-info h1 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.cv-header-info p {
  font-size: 11pt;
  line-height: 1.55;
  margin-bottom: 0.1rem;
}

/* Undo the Skills block-label rule for the contact info */
.cv-header-info p > strong,
section.cv-header-info p > strong {
  display: inline;
  margin: 0;
}

/* ── Section headings (About, Experience…) ── */
h2 {
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #999;
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #e5e5e5;
}

/* ── Job / entry headings ── */
h3 {
  font-size: 12pt;
  font-weight: 600;
  margin-top: 1.4rem;
  margin-bottom: 0;
  line-height: 1.2;
}

/* Date / location line right after h3 */
h3 + p {
  font-size: 10.5pt;
  color: #777;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1.1rem;
  line-height: 1.3;
}

/* Remove bold from date text — Pandoc wraps it in <strong> */
h3 + p strong { font-weight: 400; }

/* Body paragraph after the date line */
h3 + p + p { margin-bottom: 0.4rem; }

/* ── Horizontal rules between job entries ── */
hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 1.1rem 0 0;
}

/* ── Lists ── */
ul {
  padding-left: 1.25em;
  margin-top: 0.35rem;
  margin-bottom: 0.2rem;
}

li { margin-bottom: 0.2rem; }

/* ── Table (languages) ── */
table {
  border-collapse: collapse;
  margin-top: 0.2rem;
  font-size: 10pt;
}

td, th {
  padding: 0.15rem 2rem 0.15rem 0;
  vertical-align: top;
}

/* ── Skills category labels ── */
p > strong:first-child {
  display: block;
  margin-top: 0.7rem;
  margin-bottom: 0.1rem;
}

/* ── Equipment grid (tachymeters) ── */
.equipment-grid {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.8rem;
  margin-bottom: 0.2rem;
}

.equipment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.equipment-item img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 6px;
}

.equipment-item span {
  font-size: 9pt;
  color: #555;
  text-align: center;
}

/* ── Portfolio grid ── */
/* Pandoc wraps all <img> tags in a single <p>, so the grid goes on <p> */
.portfolio-grid {
  margin-top: 0.8rem;
}

.portfolio-grid p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0;
}

.portfolio-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

/* ── Print ── */
@media print {
  body {
    padding: 0;
    max-width: none;
    font-size: 11pt;
  }

  @page {
    size: A4;
    margin: 14mm 16mm 14mm 16mm;
  }

  h2 { color: #aaa; page-break-after: avoid; }
  h3 { page-break-after: avoid; }

  .cv-photo img { width: 105px; height: 105px; }

  a { text-decoration: none; }
}