/* ============================================================
   PROGETTI SELEZIONATI — Homepage, sezione dopo "Come lavoriamo".
   Scoped alla home, prefisso "hp-projects". Consuma solo i token/
   classi di css/cobalto.css (niente colori/font hardcoded qui).
   Le uniche due variabili nuove (dimensioni non ancora nella scala
   tipografica del design system) sono dichiarate qui sotto.
   ============================================================ */
:root{
  --fs-card-title: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); /* 28 → 44px, titolo card progetto */
  --fs-chip: 0.6875rem;                                       /* 11px fisso, chip/badge */
}

.hp-projects{ padding:var(--section-py) 0; background:var(--n-0); }

.hp-projects__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--sp-16);
}
.hp-projects__title{ margin:var(--sp-5) 0 0; line-height:1.05; max-width:20ch; }

.hp-projects__link{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-body);
  color:var(--blu-600); text-decoration:none; white-space:nowrap; flex:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--dur-base) var(--ease-out);
}
.hp-projects__link:hover{ background-size:100% 1px; }
.hp-projects__link i{ font-style:normal; transition:transform var(--dur-base) var(--ease-out); }
.hp-projects__link:hover i{ transform:translateX(4px); }

.hp-projects__mobile-link{
  display:none; width:100%; align-items:center; justify-content:center; gap:var(--sp-2);
  height:var(--sp-12); margin-top:var(--sp-16); border-radius:var(--r-md);
  background:var(--blu-600); color:var(--n-0); text-decoration:none;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-body);
  box-shadow:var(--sh-brand);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.hp-projects__mobile-link:hover{ background:var(--blu-700); }
.hp-projects__mobile-link i{ font-style:normal; }

@media (max-width:767px){
  .hp-projects__link{ display:none; }
  .hp-projects__mobile-link{ display:inline-flex; }
}

/* ---------- Griglia ---------- */
.hp-projects__grid{
  list-style:none; margin: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){
  .hp-projects__grid{ grid-template-columns:1fr; row-gap:var(--sp-16); }
}
@media (min-width:1024px){
  .hp-projects__grid > li:nth-child(even){ margin-top:var(--sp-10); }
}

/* ---------- Card ---------- */
.pcard{ position:relative; }

.pcard__media{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;
  background:var(--n-100);
}
.pcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-base) var(--ease-out);
}
.pcard__media::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,15,43,.28) 0%, rgba(7,15,43,0) 42%);
  opacity:1;
}
.pcard__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--blu-950); opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.pcard:hover .pcard__media img,
.pcard:focus-within .pcard__media img{ transform:scale(1.04); }
.pcard:hover .pcard__veil,
.pcard:focus-within .pcard__veil{ opacity:.16; }

.pcard__badge{
  position:absolute; top:var(--sp-5); left:var(--sp-5); z-index:2;
  background:var(--azz-300); color:var(--blu-950);
  font-family:var(--font-mono); font-size:var(--fs-chip); font-weight:500; line-height:1.3;
  text-transform:uppercase; letter-spacing:.1em;
  padding:6px 10px; border-radius:var(--r-sm);
}

.pcard h3{
  display:flex; align-items:baseline; gap:var(--sp-3);
  margin:var(--sp-6) 0 var(--sp-5);
  font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-.03em;
}
.pcard h3 a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px; background-position:0 calc(100% - 2px); background-repeat:no-repeat;
  transition:background-size var(--dur-base) var(--ease-out);
}
.pcard h3 a::after{ content:""; position:absolute; inset:0; }
.pcard:hover h3 a,
.pcard:focus-within h3 a{ background-size:100% 1px; }

.pcard__arrow{
  flex:none; font-style:normal; color:var(--blu-600);
  opacity:0; transform:translate(-6px, 4px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pcard:hover .pcard__arrow,
.pcard:focus-within .pcard__arrow{ opacity:1; transform:none; }
@media (max-width:1023px){
  .pcard__arrow{ opacity:1; transform:none; }
}

.pcard__tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.pcard__tags li{
  border:1px solid var(--n-200); border-radius:var(--r-sm); padding:5px 10px;
  font-family:var(--font-mono); font-size:var(--fs-chip); line-height:1.3;
  text-transform:uppercase; letter-spacing:.08em; color:var(--n-600); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .pcard__arrow{ opacity:1!important; transform:none!important; }
}

/* Card non cliccabile (progetto non ancora online): niente link,
   niente hover che finga interattività. */
.pcard--soon{ cursor:default; }
.pcard--soon:hover .pcard__media img,
.pcard--soon:focus-within .pcard__media img{ transform:none; }
.pcard--soon:hover .pcard__veil,
.pcard--soon:focus-within .pcard__veil{ opacity:0; }
.pcard__name-soon{ color:var(--n-500); }
.pcard__soon-tag{
  flex:none;
  font-family:var(--font-mono); font-size:var(--fs-chip); font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--n-500);
}