/* ============================================================
   PORTFOLIO — pagina portfolio.html: hero, numeri, filtri, griglia.
   Scoped alla pagina, prefisso "pf-". Consuma solo i token/classi
   di css/cobalto.css. La card progetto (.pcard) è quella condivisa,
   definita in css/progetti-selezionati.css: qui non viene ridefinita.
   ============================================================ */

/* ============ HERO ============ */
.pf-hero{
  padding-top:var(--section-py-lg);
  padding-bottom:var(--sp-16);
}
.pf-hero h1{
  margin:var(--sp-6) 0 0;
  line-height:1.04;
  max-width:26ch;
  text-wrap:balance;
}
/* Stesso trattamento a gradiente del titolo hero della home (.hp-hero h1 .accent) */
.pf-hero h1 b{
  font-weight:500;
  background:var(--gradient-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.pf-stats{
  list-style:none;
  margin:clamp(3rem, 1rem + 7vw, 6rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-8);
}
/* Stesso trattamento a gradiente del titolo hero (.pf-hero h1 b / .hp-hero h1 .accent) */
.stat__num{
  display:block;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-h1); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:var(--gradient-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat__label{
  display:block;
  margin-top:var(--sp-4);
  font-size:var(--fs-body); line-height:1.5; color:var(--n-600); max-width:22ch;
}
@media (max-width:640px){
  .pf-stats{ grid-template-columns:1fr; gap:var(--sp-10); }
  .stat__label{ max-width:none; }
}

/* ============ FILTRI ============ */
.pf-filters{ padding-top:clamp(3.5rem, 1.5rem + 7vw, 6rem); }

.chips{
  list-style:none;
  margin:0;
  padding:var(--sp-8) 0 0;
  border-top:1px solid var(--n-200);
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
}
.chip{
  display:inline-flex; align-items:center; height:44px; padding:0 20px; flex:none;
  border:0; border-radius:var(--r-full); cursor:pointer; white-space:nowrap;
  font-family:var(--font-body); font-size:var(--fs-small); font-weight:500;
  line-height:1; letter-spacing:-.01em;
  background:var(--n-100); color:var(--n-700);
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.chip:hover{ background:var(--n-200); color:var(--n-950); }
.chip[aria-pressed="true"]{ background:var(--blu-600); color:var(--n-0); box-shadow:var(--sh-brand); }
.chip__n{ margin-left:8px; font-family:var(--font-mono); font-size:var(--fs-chip); opacity:.75; }

.results-count{
  margin:var(--sp-8) 0 0;
  font-family:var(--font-mono); font-size:var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.1em; color:var(--n-500);
}

/* ============ GRIGLIA PROGETTI ============ */
.pf-projects{ padding-bottom:var(--section-py); }

.pgrid{
  list-style:none;
  margin:var(--sp-12) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--sp-8); row-gap:var(--sp-16);
}
@media (max-width:1023px){
  .pgrid{ grid-template-columns:1fr; }
}
@media (min-width:1024px){
  .pgrid > li.is-offset{ margin-top:var(--sp-10); }
}
.pgrid > li.is-hidden{ display:none; }

@keyframes pf-rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
.just-shown{ animation:pf-rise var(--dur-base) var(--ease-out); }

.pf-empty{ padding:var(--sp-24) 0; text-align:center; }
.pf-empty__title{
  margin:0 0 var(--sp-2);
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-body); color:var(--n-900);
}
.pf-empty__sub{ margin:0; font-size:var(--fs-body); color:var(--n-500); }