/* =============================================================================
   CV-BRAND.CSS — CV recruiter: fascia identitaria navy in testa, corpo a
   colonna singola.

   Due scelte che spiegano tutto il resto del file:

   1) SCHERMO = STAMPA. Il foglio a video ha le proporzioni reali di un A4
      (794px = 210mm a 96dpi) e gli stessi margini del PDF. Quello che vedi è
      la pagina che spedisci: prima lo schermo mostrava due colonne e la stampa
      ne produceva una sola, quindi il documento visto e quello inviato erano
      due cose diverse.

   2) DUE TEAL. #2dd4bf ha 1.7:1 di contrasto su bianco — su carta i filetti
      d'accento sbiadivano fino a sparire. Il teal chiaro resta per la fascia
      navy; sulle superfici chiare si usa --teal-ink (#0f766e, 5.3:1).
   ========================================================================== */
:root {
  --navy:   #0b1524;
  --navy-2: #16253c;
  --ink:    #10151f;
  --slate:  #37445a;
  --muted:  #64748b;
  --teal:     #2dd4bf;   /* solo su fondo navy */
  --teal-ink: #0f766e;   /* solo su fondo chiaro */
  --side-fg:  #e3ebf5;
  --side-mut: #9db0c8;
  --line:   #e4e9f0;
  --line-2: #f1f4f8;
  --paper:  #ffffff;
  --f-head: "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); line-height: 1.5; font-size: 14px; }

/* Il foglio: A4 in scala 1:1 a 96dpi, margini identici a quelli di @page. */
.cvb {
  width: 100%; max-width: 794px;
  margin: 22px auto 48px;
  padding: 53px 57px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ------------------------------------------------------- FASCIA IDENTITARIA */
.cvb-hero {
  position: relative; overflow: hidden;
  border-radius: 12px;
  padding: 18px 20px 16px;
  color: var(--side-fg);
  background:
    radial-gradient(130% 150% at 90% -25%, rgba(45, 212, 191, .22) 0%, transparent 55%),
    linear-gradient(158deg, var(--navy-2) 0%, var(--navy) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Filetto teal in basso: chiude la fascia e la lega all'identità del sito. */
.cvb-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), rgba(45, 212, 191, .15) 70%, transparent);
}

.cvb-hero__id { display: flex; align-items: center; gap: 18px; }

.cvb-photo {
  width: 84px; height: 84px; flex: none; border-radius: 12px; overflow: hidden;
  background: #10203a; border: 1px solid rgba(45, 212, 191, .4);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.cvb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.cvb-photo--mono { font-family: var(--f-head); font-weight: 700; font-size: 1.9rem; color: var(--teal); }

.cvb-eyebrow {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 5px;
}
.cvb-name {
  font-family: var(--f-head); font-weight: 700; font-size: 32px; line-height: 1.02;
  letter-spacing: -.9px; color: #fff; margin: 0 0 5px;
}
.cvb-headline { font-size: 13px; font-weight: 500; color: var(--side-mut); margin: 0; line-height: 1.4; }

/* Contatti in linea, URL leggibili senza dover cliccare.
   Separati dalla sola spaziatura e non da un "·" tra le voci: con un separatore
   posizionato prima di ogni voce, la prima voce di una riga andata a capo se lo
   trascina dietro e resta un puntino appeso al margine sinistro. La spaziatura
   ampia distingue le voci a qualsiasi larghezza, senza casi limite. */
.cvb-hero__contacts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px;
  margin: 15px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px; color: var(--side-fg);
}
.cvb-hero a { color: inherit; text-decoration: none; }

.cvb-hero__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 13px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cvb-metric { padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, .09); }
.cvb-metric:first-child { padding-left: 0; border-left: 0; }
.cvb-num { display: block; font-family: var(--f-head); font-weight: 700; font-size: 21px; color: var(--teal); line-height: 1.05; }
.cvb-mlbl { display: block; font-size: 10px; color: var(--side-mut); line-height: 1.3; margin-top: 2px; }

/* ---------------------------------------------------------------- SEZIONI */
.cvb-body { margin-top: 18px; }

.cvb-msec { margin-bottom: 10px; }
.cvb-msec > h2 {
  font-family: var(--f-head); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* Segmento teal sovrapposto al filetto: dà il colore senza aggiungere peso. */
.cvb-msec > h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px;
  background: var(--teal-ink); border-radius: 1px;
}

.cvb-lead { font-size: 13px; color: var(--slate); margin: 0; line-height: 1.5; }

/* Risultati principali: spunta al posto del pallino, per distinguerli dai
   compiti elencati sotto ogni ruolo. */
.cvb-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cvb-wins li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; color: var(--slate); line-height: 1.45;
}
.cvb-wins li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 9px; height: 5px; border-left: 2px solid var(--teal-ink); border-bottom: 2px solid var(--teal-ink);
  transform: rotate(-45deg);
}

.cvb-core { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; }
.cvb-area-name { display: block; font-weight: 600; font-size: 12px; color: var(--ink); }
.cvb-area-tech { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* -------------------------------------------------------------- VOCI (CV) */
.cvb-entry { margin-bottom: 10px; }
.cvb-entry:last-child { margin-bottom: 0; }
.cvb-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cvb-entry h3 { font-family: var(--f-head); font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.25; }
.cvb-entry ul { margin: 5px 0 0; padding-left: 16px; }
.cvb-entry li { font-size: 12px; color: var(--slate); margin-bottom: 1px; line-height: 1.4; }
.cvb-entry li::marker { color: var(--teal-ink); }
.cvb-entry p { font-size: 12px; color: var(--slate); margin: 0 0 4px; }

/* Qualificati con .cvb-entry: sono paragrafi dentro una voce, quindi senza
   questa specificità in più li vincerebbe la regola generica .cvb-entry p. */
.cvb-entry .cvb-dates,
.cvb-dates { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cvb-entry .cvb-dates--block { display: block; white-space: normal; margin: 1px 0 0; }
.cvb-entry .cvb-org,
.cvb-org { font-size: 12px; font-weight: 600; color: var(--teal-ink); margin: 1px 0 5px; }
.cvb-entry--tight { margin-bottom: 9px; }

/* Timeline: binario verticale con nodo per voce. Rende la progressione di
   carriera leggibile prima ancora di leggere le date. */
.cvb-msec--timeline .cvb-entry { position: relative; padding-left: 19px; }
.cvb-msec--timeline .cvb-entry::before {
  content: ""; position: absolute; left: 0; top: 4px; z-index: 1;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--teal-ink);
}
.cvb-msec--timeline .cvb-entry::after {
  content: ""; position: absolute; left: 5px; top: 15px; bottom: -13px; width: 1px;
  background: var(--line);
}
.cvb-msec--timeline .cvb-entry:last-child::after { display: none; }

.cvb-tech { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted) !important; }
.cvb-tech a { color: var(--teal-ink); font-weight: 600; text-decoration: none; }

.cvb-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 28px; }

.cvb-langs { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--slate); }
.cvb-langs li { margin-bottom: 4px; }
.cvb-langs strong { color: var(--ink); font-weight: 600; }

/* Tre colonne: le certificazioni sono righe brevi, e a due colonne occupavano
   da sole la coda di una terza pagina. */
.cvb-certs { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 20px; }
.cvb-certs li {
  font-size: 11.5px; color: var(--muted); margin-bottom: 4px; line-height: 1.4;
  break-inside: avoid; padding-left: 11px; position: relative;
}
.cvb-certs li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--teal-ink);
}
.cvb-certs strong { color: var(--ink); font-weight: 600; }

.cvb-privacy {
  font-size: 9.5px; color: var(--muted); font-style: italic;
  margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--line-2);
}

/* --------------------------------------------------------------- SCHERMI STRETTI
   Sotto la larghezza di un A4 il foglio smette di essere una pagina e diventa
   un documento che scorre: margini ridotti, griglie a colonna singola. */
@media (max-width: 840px) {
  .cvb { margin: 12px auto 32px; padding: 26px 22px; }
  .cvb-hero { padding: 18px 16px 16px; }
  .cvb-hero__id { gap: 14px; }
  .cvb-photo { width: 68px; height: 68px; }
  .cvb-name { font-size: 26px; }
  .cvb-hero__metrics { grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .cvb-metric { padding: 0 10px; }
  .cvb-metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cvb-core, .cvb-split { grid-template-columns: 1fr; }
  .cvb-certs { columns: 1; }
}
@media (max-width: 460px) {
  .cvb-hero__id { flex-direction: column; align-items: flex-start; }
  .cvb-name { font-size: 23px; letter-spacing: -.5px; }
}

/* ------------------------------------------------------------- STAMPA / PDF
   Stesso impianto dello schermo: cambiano solo i margini (che diventano di
   PAGINA, così valgono anche su pagina 2 e 3) e le regole di interruzione. */
@media print {
  @page { margin: 14mm 15mm; }
  html, body { background: #fff; }
  body { font-size: 10.2pt; color: var(--ink); }
  .no-print { display: none !important; }

  .cvb {
    max-width: 100%; margin: 0; padding: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cvb-hero { border-radius: 8px; }

  /* Evita la rottura dei singoli blocchi, mai delle sezioni intere: una
     sezione più alta della pagina con "avoid" verrebbe troncata. */
  .cvb-hero, .cvb-entry, .cvb-metric, .cvb-area { page-break-inside: avoid; break-inside: avoid; }
  .cvb-entry h3, .cvb-msec > h2 { page-break-after: avoid; break-after: avoid; }
  .cvb-certs li, .cvb-langs li, .cvb-wins li { page-break-inside: avoid; break-inside: avoid; }

  /* Il binario della timeline non deve proseguire oltre l'ultima voce di
     pagina: in stampa lo accorciamo all'altezza del blocco. */
  .cvb-msec--timeline .cvb-entry::after { bottom: -9px; }
}