/* ============================================================================
   RIPARTIAMO DALLA GRANDA — Foglio di stile
   ----------------------------------------------------------------------------
   I COLORI DELLA LISTA SONO QUI SOTTO.
   Per usare i vostri colori, cambia i valori dentro :root (sono codici HEX).
   ========================================================================== */

:root {
  /* --- Colori della lista "Ripartiamo dalla Granda" (ricavati dal logo) --- */
  --colore-primario:      #1e7ab8;   /* azzurro del contrassegno (versione con buon contrasto) */
  --colore-primario-scuro:#155e8e;   /* variante scura per hover */
  --colore-secondario:    #0e3a5c;   /* navy profondo per testi forti e footer */
  --colore-accento:       #e08a2a;   /* arancio del profilo del Monviso */

  /* --- Tricolore dell'anello del logo --- */
  --tricolore-verde:      #009d42;
  --tricolore-rosso:      #d00500;

  /* --- Colori di base (di solito non serve cambiarli) --- */
  --colore-testo:         #15222e;
  --colore-testo-tenue:   #566673;
  --colore-sfondo:        #ffffff;
  --colore-sfondo-tenue:  #f1f6fa;
  --colore-bordo:         #dbe5ec;

  /* --- Impostazioni --- */
  --raggio:               14px;
  --ombra:                0 1px 2px rgba(16,40,30,.06), 0 8px 24px rgba(16,40,30,.06);
  --max-larghezza:        1080px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------- Reset leggero --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--colore-primario); }

.container { width: 100%; max-width: var(--max-larghezza); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 760px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------- Header --------------------------- */
.site-header {
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
  position: sticky; top: 0; z-index: 10;
}
/* Barra tricolore richiamo dell'anello del contrassegno */
.site-header::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(to right,
    var(--tricolore-verde) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--tricolore-rosso) 66.66% 100%);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-logo { border-radius: 50%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1.05rem; color: var(--colore-secondario); }
.brand-sub { font-size: .78rem; color: var(--colore-testo-tenue); text-transform: uppercase; letter-spacing: .04em; }

.site-nav { display: flex; gap: 22px; }
.site-nav a {
  text-decoration: none; color: var(--colore-testo); font-weight: 500; font-size: .95rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--colore-primario); border-bottom-color: var(--colore-primario); }

/* --------------------------- Hero --------------------------- */
.hero {
  background: linear-gradient(160deg, var(--colore-primario) 0%, var(--colore-secondario) 100%);
  color: #fff;
  padding: 64px 0 72px;
}
.hero-kicker {
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85);
}
.hero-title { margin: 0 0 18px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.hero-lead { margin: 0; max-width: 680px; font-size: 1.12rem; color: rgba(255,255,255,.95); }
.hero-lead strong { color: #fff; }

/* --------------------------- Sezioni --------------------------- */
.section { padding: 56px 0; }
.section-muted { background: var(--colore-sfondo-tenue); border-top: 1px solid var(--colore-bordo); }
.section h2 { font-size: 1.6rem; margin: 0 0 8px; color: var(--colore-secondario); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}

.search input {
  width: 280px; max-width: 100%;
  padding: 11px 14px; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--colore-bordo); border-radius: 999px; background: #fff;
}
.search input:focus { outline: 2px solid var(--colore-primario); outline-offset: 1px; border-color: var(--colore-primario); }

/* --------------------------- Griglia candidati --------------------------- */
.cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.card {
  background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(16,40,30,.12); }

.card-top {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px;
  text-decoration: none; color: inherit;
}
.card-top:hover .card-nome { color: var(--colore-primario); }
.avatar {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; background: var(--colore-sfondo-tenue);
}
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1.1rem;
  background: var(--colore-primario);
}
.card-id { min-width: 0; }
.card-nome { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--colore-secondario); }
.card-ruolo { margin: 2px 0 0; font-size: .85rem; color: var(--colore-testo-tenue); }
.card-comune { margin: 2px 0 0; font-size: .85rem; color: var(--colore-testo-tenue); }
.card-comune::before { content: "📍 "; }

.card-docs { margin-top: auto; padding: 0 18px 18px; display: grid; gap: 10px; }

.doc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; text-decoration: none;
  font-weight: 600; font-size: .92rem;
  border: 1px solid var(--colore-bordo); color: var(--colore-secondario);
  background: var(--colore-sfondo-tenue);
}
.doc-link:hover { border-color: var(--colore-primario); color: var(--colore-primario); }
.doc-link .doc-ico { flex: 0 0 auto; }
.doc-link .doc-meta { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--colore-testo-tenue); }

.doc-missing {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: .9rem; color: var(--colore-testo-tenue);
  border: 1px dashed var(--colore-bordo); background: transparent;
}

.empty-state { text-align: center; color: var(--colore-testo-tenue); padding: 30px 0; }

/* Link "Vedi profilo" in fondo alla scheda */
.card-profilo {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 18px 16px; padding-top: 2px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  color: var(--colore-primario); align-self: flex-start;
}
.card-profilo span { transition: transform .15s ease; }
.card-profilo:hover span { transform: translateX(3px); }

/* --------------------------- Pagina profilo candidato --------------------------- */
.indietro {
  display: inline-block; margin-bottom: 22px;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  color: var(--colore-primario);
}
.indietro:hover { text-decoration: underline; }

.profilo-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--colore-bordo);
}
.profilo-foto {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; background: var(--colore-sfondo-tenue);
  border: 3px solid #fff; box-shadow: var(--ombra);
}
.profilo-foto-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 700; color: #fff; background: var(--colore-primario);
}
.profilo-nome { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--colore-secondario); }
.profilo-comune { margin: 6px 0 0; color: var(--colore-testo-tenue); font-size: 1rem; }
.profilo-comune::before { content: "📍 "; }

.profilo-bio { margin: 24px 0; font-size: 1.05rem; }
.profilo-bio p { margin: 0 0 12px; }

.profilo-docs-titolo {
  font-size: 1.15rem; margin: 28px 0 14px; color: var(--colore-secondario);
}
.profilo-docs { display: grid; gap: 12px; max-width: 460px; }
.profilo-docs .doc-link, .profilo-docs .doc-missing { padding: 14px 16px; font-size: 1rem; }

.profilo-nontrovato { padding: 20px 0 40px; }
.profilo-nontrovato h1 { color: var(--colore-secondario); }
.profilo-nontrovato .doc-link { display: inline-flex; }

/* --------------------------- Nota / testo --------------------------- */
.note {
  margin-top: 18px; padding: 16px 18px; border-left: 4px solid var(--colore-accento);
  background: #fff; border-radius: 0 10px 10px 0; font-size: .95rem;
}

/* --------------------------- Footer --------------------------- */
.site-footer {
  background: var(--colore-secondario); color: rgba(255,255,255,.85);
  padding: 32px 0;
}
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { margin: 0; font-weight: 700; color: #fff; }
.footer-small { margin: 2px 0 0; font-size: .85rem; }
.footer-contact a { color: #fff; }

/* --------------------------- Responsive --------------------------- */
@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .hero { padding: 48px 0 52px; }
  .section { padding: 40px 0; }
  .search input { width: 100%; }
}

/* --------------------------- Stampa --------------------------- */
@media print {
  .site-header, .site-nav, .search, .hero { box-shadow: none; }
  .card { break-inside: avoid; }
}