/* ==========================================================================
   SECTIONS.CSS — stili specifici di ogni sezione
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 8rem) var(--section-y); }
.hero-inner { display: grid; gap: var(--space-12); align-items: center; }
.hero-inner > * { min-width: 0; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.15fr 1fr; } }

.hero-prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.hero-prompt .user { color: var(--accent); }
.hero-name { font-size: var(--fs-hero); letter-spacing: -0.035em; font-weight: 700; margin-bottom: var(--space-3); }
.hero-role {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  color: var(--accent);
  margin-bottom: var(--space-6);
  min-height: 1.6em;
}
.hero-role .caret {
  display: inline-block;
  width: 0.6ch;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: currentColor;
  animation: blink 1.1s steps(1) infinite;
}
.hero-tagline { font-size: var(--fs-lg); color: var(--text-muted); max-width: 560px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-meta svg { width: 14px; height: 14px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.hero-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  margin-bottom: var(--space-4);
}

/* ---------- Chi sono ---------- */
.about-grid { display: grid; gap: var(--space-8); }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-16); } }
.about-text p { font-size: var(--fs-lg); color: var(--text-muted); }
.about-text p:first-child { color: var(--text); }
.stats { display: grid; gap: var(--space-3); }
.stat { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.stat-value { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--accent); line-height: 1; min-width: 4ch; }
.stat-label { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Esperienza: stile "git log" ---------- */
.gitlog { position: relative; display: grid; gap: var(--space-6); }
.gitlog::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--border) 60%);
}
.commit { position: relative; padding-left: var(--space-8); }
.commit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
}
.commit:first-child::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.commit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.commit-hash { color: var(--syn-value); }
.commit-ref {
  padding: 0.05rem 0.5rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.commit-role { font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.commit-company { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.commit-desc { color: var(--text-muted); }
.commit-list { margin-bottom: var(--space-4); display: grid; gap: var(--space-2); }
.commit-list li { position: relative; padding-left: var(--space-6); }
.commit-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--success);
  font-weight: 700;
}

/* ---------- Stack / competenze ---------- */
.skills-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.skills-group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.skills-group-title::before { content: "$ ls "; color: var(--accent); }
.lang-list { display: grid; gap: var(--space-3); }
.lang-item { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-sm); }
.lang-level { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Progetti ---------- */
.projects-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 400px) { .projects-grid { grid-template-columns: 1fr; } }
.project { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform var(--transition), border-color var(--transition); }
.project:hover { transform: translateY(-3px); border-color: var(--accent); }
.project-img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.project-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.project-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); }
.project-top > svg { width: 28px; height: 28px; }
.project-title { font-family: var(--font-mono); font-size: var(--fs-base); }
.project-desc { color: var(--text-muted); margin: 0; flex: 1; font-size: var(--fs-sm); }

/* ---------- Formazione ---------- */
.edu-grid { display: grid; gap: var(--space-8); }
@media (min-width: 860px) { .edu-grid { grid-template-columns: 1fr 1fr; } }
.edu-col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.edu-list { display: grid; gap: var(--space-3); }
.edu-title { font-size: var(--fs-base); }
.edu-meta { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--fs-xs); margin: var(--space-2) 0 0; }

/* ---------- Contatti ---------- */
.contact-intro, .contact-cmd { max-width: 720px; }
.contact-intro { font-size: var(--fs-lg); color: var(--text-muted); }
.contact-cmd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1.1rem);
}
.contact-cmd .sign { color: var(--accent); }
.contact-cmd a { color: var(--text); word-break: break-all; }
.contact-cmd .copy { margin-left: auto; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Stampa: il sito diventa un CV pulito ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .hero-cta, .contact-actions, .hero-visual, .skip-link, .palette, .toast, .contact-cmd .copy { display: none !important; }
  .section { padding-block: 1.25rem; border: 0; }
  .card, .window { box-shadow: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Il suggerimento da tastiera non serve su touch */
@media (hover: none) { .kbd-hint { display: none !important; } }

/* ---------- Hero: foto + prompt ---------- */
.hero-id { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.hero-id .hero-prompt { margin: 0; }
.hero-photo { width: 88px; height: 88px; margin: 0; box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Esperienza: aziende con più ruoli ---------- */
.commit-company-name { font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.commit-company-name a { color: var(--text); }
.commit-company-name a:hover { color: var(--accent); }
.roles { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.roles.is-multi .role { position: relative; padding-left: var(--space-6); }
.roles.is-multi .role::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.roles.is-multi .role:first-child::before { background: var(--accent); }
.roles.is-multi .role:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.2rem;
  bottom: calc(-1 * var(--space-4));
  width: 2px;
  background: var(--border);
}
.role-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-2); }
.role-title { font-size: var(--fs-base); }
.role-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.role .commit-desc { margin-bottom: var(--space-2); }
.role .commit-list { margin-bottom: 0; }

/* Esperienze precedenti in formato compatto */
.earlier { margin-top: var(--space-12); }
.earlier-title { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-4); }
.earlier-title::before { content: "// "; color: var(--accent); }
.earlier-list { display: grid; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.earlier-item { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-6); font-size: var(--fs-sm); }
.earlier-item + .earlier-item { border-top: 1px solid var(--border); }
.earlier-item p { margin: var(--space-1) 0 0; color: var(--text-muted); }
.earlier-item a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.earlier-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); padding-top: 2px; }
.muted { color: var(--text-muted); }
@media (max-width: 640px) { .earlier-item { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4); } }

/* ---------- Progetti: stato e link ---------- */
.project-status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.project-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.project-link { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; }
.project-link svg { width: 13px; height: 13px; }

/* ---------- Formazione ---------- */
.edu-grid.is-single { grid-template-columns: 1fr; max-width: 760px; }
.edu-note { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-2) 0 0; font-style: italic; }

/* Timeline più compatta su telefono */
@media (max-width: 560px) {
  .commit { padding-left: 1.5rem; }
  .commit .card { padding: var(--space-4); }
  .roles.is-multi .role { padding-left: var(--space-4); }
  .roles.is-multi .role::before { left: 0; }
  .roles.is-multi .role:not(:last-child)::after { left: 3px; }
}