/* ============================================================
   Il blog: elenco e articolo.
   Fondo chiaro e testo lungo: qui conta la leggibilita', non
   l'effetto. Riga sotto i 70 caratteri, interlinea generosa.
   ============================================================ */

/* ---- elenco ---- */
.bl{max-width:1040px;margin:0 auto;padding:56px 26px 30px}
.bl-testa{margin-bottom:38px;max-width:60ch}
.bl-testa h1{font-size:clamp(32px,5vw,46px);margin-bottom:10px}
.bl-testa p{color:var(--muted);font-size:17px}
.bl-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:18px}
.bl-c{
  display:flex;flex-direction:column;gap:9px;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.bl-c:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 12px 30px rgba(44,44,52,.07)}
.bl-cat,.art-cat{
  align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--brand-deep);background:var(--brand-soft);
  padding:4px 11px;border-radius:999px;
}
.bl-c h2{font-size:19.5px;line-height:1.28}
.bl-c p{color:var(--muted);font-size:14.5px;line-height:1.55;flex:1}
.bl-meta,.art-meta{font-size:12.5px;color:var(--muted)}

/* ---- articolo ---- */
.art{max-width:68ch;margin:0 auto;padding:44px 26px 70px}
.art-su{margin-bottom:24px}
.art-su a{font-size:13.5px;color:var(--muted);text-decoration:none}
.art-su a:hover{color:var(--brand-deep)}
.art h1{font-size:clamp(29px,4.6vw,43px);margin:14px 0 14px}
.art-dek{font-size:18.5px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.art-meta{padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:34px}

.art-corpo{font-size:17.5px;line-height:1.72}
.art-corpo p{margin-bottom:19px}
.art-corpo h2{font-size:25px;margin:40px 0 14px}
.art-corpo h3{font-size:19.5px;margin:30px 0 10px}
.art-corpo ul{margin:0 0 20px 4px;padding:0;list-style:none}
.art-corpo li{position:relative;padding-left:26px;margin-bottom:10px}
.art-corpo li::before{content:'';position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.art-corpo blockquote{
  margin:26px 0;padding:18px 24px;background:var(--brand-soft);
  border-left:3px solid var(--brand);border-radius:0 12px 12px 0;
}
.art-corpo blockquote p{margin:0;font-size:17px}
.art-corpo strong{font-weight:600;color:var(--ink)}
.art-corpo a{color:var(--brand-deep)}

/* ---- il richiamo in fondo ----
   Un articolo che finisce e basta non porta da nessuna parte: qui
   la persona ha appena letto del suo CV, ed e' il momento giusto
   per proporle di provarlo. Una sola cosa, non tre. */
.art-fine{
  margin-top:52px;padding:32px 30px;border-radius:20px;
  background:var(--brand-soft);border:1px solid rgba(148,99,245,.22);
}
.art-fine h2{font-size:22px;margin-bottom:8px}
.art-fine p{color:var(--muted);font-size:15.5px;margin-bottom:20px;max-width:52ch}
.art-btn{
  display:inline-block;background:var(--brand);color:#fff;font-weight:600;
  font-size:15px;text-decoration:none;padding:13px 26px;border-radius:12px;
  transition:background .16s;
}
.art-btn:hover{background:var(--brand-deep);color:#fff}

@media(max-width:600px){
  .bl,.art{padding-left:20px;padding-right:20px}
  .art-corpo{font-size:16.5px}
  .art-fine{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){.bl-c,.art-btn{transition:none}}

/* ---- la copertina ----
   Rapporto 1200x630: e' quello che usano LinkedIn e WhatsApp per
   l'anteprima, quindi una sola immagine serve a due cose. */
.art-cop{margin:0 0 34px;border-radius:18px;overflow:hidden;background:var(--brand-soft)}
.art-cop img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}

.bl-foto{display:block;margin:-26px -24px 4px;border-radius:18px 18px 0 0;overflow:hidden;background:var(--brand-soft)}
.bl-foto img{display:block;width:100%;height:auto;aspect-ratio:600/315;object-fit:cover}

/* ---- da leggere dopo ----
   Due articoli, non sei: una scelta fra due si fa, fra sei si scorre
   e si chiude la pagina. */
.art-altri{margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.art-altri h2{font-size:15px;font-family:var(--body);font-weight:600;color:var(--muted);margin-bottom:14px}
.art-altri a{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 18px;margin-bottom:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:13px;text-decoration:none;color:inherit;
  transition:border-color .16s;
}
.art-altri a:hover{border-color:var(--brand)}
.art-altri span{font-weight:600;font-size:15.5px;line-height:1.35}
.art-altri em{font-style:normal;font-size:11.5px;color:var(--brand-deep);background:var(--brand-soft);padding:3px 10px;border-radius:999px;white-space:nowrap}