/* ============================================================================
   CURRICULUM — layout da referencia 03.
   Tres niveis: pagina (4 cargos detalhados) · popup (tudo) · PDF (1 pagina).
   ========================================================================= */

.cv-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16);
  overflow: hidden;
}
.cv-hero__title { font-size: var(--fs-h1); }
.cv-hero__title span { color: var(--purple-bright); }
.cv-hero__text {
  margin-top: var(--space-6);
  max-width: 54ch;
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}
.cv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.cv-hero__scene { position: relative; align-self: stretch; min-height: 260px; display: grid; }
.cv-hero__quote {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  transform: rotate(-4deg);
}
.cv-hero__quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--space-6);
  transform: rotate(4deg);
}
/* Referencia 03: a ilustracao nao e um card — ela se dissolve no fundo pela
   esquerda e por baixo, e a citacao manuscrita fica POR CIMA dela. */
.cv-hero__media {
  grid-area: 1 / 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 25%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 25%);
  mask-composite: intersect;
}
.cv-hero__media .media-slot { height: 100%; aspect-ratio: auto; min-height: 340px; border-radius: 0; }
.cv-hero__media .media-slot__hint { display: none; }
.cv-hero__quote { grid-area: 1 / 1; align-self: start; z-index: 1; margin-top: var(--space-6); text-shadow: 0 2px 12px rgba(5, 9, 17, 0.8); }

/* =============================== KPI ================================== */
/* Reusa .kpi de home.css, mas com 5 colunas. */
.kpi--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ============================== CORPO ================================= */

.cv-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--section-y);
}

.cv-aside { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.cv-aside .media-slot { --slot-ratio: 9 / 20; }
.cv-aside .media-slot__hint { display: none; }
.cv-aside__script {
  margin-top: var(--space-6);
  font-size: 1.5rem;
  text-align: center;
}

.cv-col { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
/* Titulo de secao em coluna: tamanho de H3 (referencia 03). Com o H2 de
   48px, "Professional Experience" e "Tools & Technologies" quebravam em
   duas linhas e a linha roxa ia parar solta na direita. */
.cv-col .section-title { font-size: var(--fs-h3); }
.cv-col .section-head { margin-bottom: var(--space-6); }

/* --------------------------------------------------------- timeline
   Uma linha vertical com um ponto por cargo. O ponto e o ancoramento
   visual; o card ao lado e o conteudo. */

.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--purple), var(--border));
}

.job { position: relative; }
.job + .job { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.job::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: 0.35rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(139, 77, 255, 0.6);
}
.job + .job::before { top: calc(var(--space-8) + 0.35rem); }

.job__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.job__period {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--purple-bright);
}
.job__title { font-size: var(--fs-h4); margin-top: var(--space-1); }
.job__company { color: var(--text-secondary); font-size: var(--fs-caption); }
.job__meta { text-align: right; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.job__duration {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(139, 77, 255, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(139, 77, 255, 0.1);
  color: var(--purple-soft);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.job__location { font-size: var(--fs-micro); color: var(--text-muted); }

.job__bullets { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.job__bullets li { display: flex; gap: var(--space-3); font-size: var(--fs-caption); color: var(--text-secondary); }
.job__bullets li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--purple);
}

/* Provas: cada linha de experiencia linka para o projeto que a comprova.
   "A resume is a series of assertions: the portfolio is the proof." */
.job__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.job__proof-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-elevated);
  color: var(--purple-soft);
  font-size: var(--fs-micro);
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.proof-link:hover { border-color: var(--purple); color: var(--purple-bright); }

/* ------------------------------------------------------------ educacao */
.edu-list { display: flex; flex-direction: column; }
.edu-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.edu-row:last-child { border-bottom: 0; }
.edu-row__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid rgba(139, 77, 255, 0.3);
  border-radius: var(--radius-btn);
  color: var(--purple-bright);
}
.edu-row__course { font-weight: 600; }
.edu-row__inst { font-size: var(--fs-caption); color: var(--text-secondary); }
.edu-row__note { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 0.15rem; }
.edu-row__year {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ----------------------------------------------------------- skill grid */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.skill-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  transition: border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.skill-tile:hover { border-color: var(--purple); transform: translateY(-2px); }
.skill-tile .icon { color: var(--purple-bright); }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  font-size: var(--fs-micro);
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tool-tile__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
}

/* ---------------------------------------------------------- idiomas */
.lang-row {
  display: grid;
  grid-template-columns: 7rem 7rem 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
}
.lang-row + .lang-row { margin-top: var(--space-3); }
.lang-row__level { color: var(--text-secondary); font-size: var(--fs-micro); }
.lang-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-elevated);
  overflow: hidden;
}
.lang-bar span {
  display: block;
  height: 100%;
  background: var(--gradient-purple);
}

/* 6 interesses numa linha so (referencia 03). auto-fit dava 5 + 1 orfao. */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}
.interest-grid .skill-tile { padding-inline: 2px; font-size: 0.6875rem; }

/* ============================== MODAL =================================
   O "Full CV": tudo, filtrado pelo perfil. A pagina resume, o popup
   aprofunda — divulgacao progressiva, o mesmo padrao do resto do site. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 5, 10, 0.78);
  backdrop-filter: blur(6px);
}
.modal__panel {
  width: min(920px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
}
.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.modal__title { font-size: var(--fs-h3); }
.modal__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.modal__close {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.modal__close:hover { border-color: var(--purple); color: var(--purple-bright); }
.modal__body { padding: var(--space-8) var(--space-6); }
.modal__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* Vinculo do cargo — o que transforma datas sobrepostas em prova de que ele
   tocava a propria empresa enquanto trabalhava fixo. */
.employment-type {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.employment-type[data-type="co-founder"] { border-color: var(--purple); color: var(--purple-soft); }
.employment-type[data-type="outsourcing"],
.employment-type[data-type="freelance"] { border-color: var(--border-strong); }

/* ============================= IMPRESSAO ==============================
   Cai para uma pagina em papel: nav, decoracao e coluna de ilustracao saem.
   A regra do Game Design Skills e 1 pagina, e o navegador respeita isso. */

@media print {
  .nav, .footer, .cv-hero__scene, .cv-aside, .cv-hero__actions,
  .modal, .skip-link, .cv-print-hide { display: none !important; }

  :root {
    --bg: #fff; --bg-secondary: #fff; --surface: #fff; --surface-elevated: #fff;
    --text: #111; --text-secondary: #333; --text-muted: #555;
    --border: #ccc; --purple: #5b21b6; --purple-bright: #5b21b6; --purple-soft: #5b21b6;
    --section-y: 0.5rem;
  }
  body::before { display: none; }
  body { font-size: 9.5pt; }
  .cv-body { grid-template-columns: 1.3fr 1fr; gap: 1rem; padding-block: 0; }
  .cv-hero { padding-block: 0 0.5rem; grid-template-columns: minmax(0, 1fr); }
  .cv-hero__title { font-size: 20pt; }
  .cv-hero__text { font-size: 9pt; margin-top: 0.35rem; }
  .kpi { border: 0; }
  .kpi__item { padding: 0.25rem; border: 0; }
  .job + .job { margin-top: 0.6rem; padding-top: 0.6rem; }
  .timeline::before, .job::before { display: none; }
  .timeline { padding-left: 0; }
  a[href]::after { content: ""; }
  @page { margin: 12mm; size: A4; }
}

/* ============================ RESPONSIVO ============================== */

@media (max-width: 1180px) {
  .cv-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cv-aside { display: none; }
}

@media (max-width: 960px) {
  .kpi--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi--five .kpi__item:nth-child(4) { border-left: 0; }
  .kpi--five .kpi__item:nth-child(n + 4) { border-top: 1px solid var(--border); }
}

@media (max-width: 860px) {
  .cv-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-12); }
  .cv-body { grid-template-columns: minmax(0, 1fr); }
  .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kpi--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi--five .kpi__item { border-left: 0; }
  .kpi--five .kpi__item:nth-child(even) { border-left: 1px solid var(--border); }
  .kpi--five .kpi__item:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .kpi--five .kpi__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Nome e nivel na mesma linha, barra embaixo na largura inteira. Antes a
     barra caia numa coluna de 50px e deixava de comparar alguma coisa. */
  .lang-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .lang-bar { grid-column: 1 / -1; }
  .job__meta { text-align: left; align-items: flex-start; }
}

/* Em uma coluna a citacao ocupa a largura inteira, e qualquer rotacao a tira
   da borda. A inclinacao fica so onde ela tem coluna propria. */
@media (max-width: 1180px) {
  .cv-hero__quote,
  .cv-hero__quote cite { transform: none; padding-inline: 0; }
}