/* ============================================================
   PROGETTI — la scheda della griglia sul desktop (`card-griglia.js`)

   La «21»: copertina velata del colore del cliente, il sigillo a due giri
   sulla cucitura, ore e margine, gli avvisi, il piede. Sul telefono la
   scheda e' un'altra (`card-telefono.js`, le regole in coda a
   `projects.css`), e queste regole non la toccano.
   ============================================================ */
.pj-grid.pjk-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;grid-auto-rows:auto;align-items:stretch;}

.pjk{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s;}
.pjk:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);}
.pjk:has(.pjk-link:focus-visible){box-shadow:var(--shadow-lift);outline:2px solid var(--primary);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.pjk{transition:none;}.pjk:hover{transform:none;}}

/* **Le schede della fila condividono le righe**: copertina, dati, avvisi e
   piede partono alla stessa altezza anche quando un titolo va a capo. */
@supports (grid-template-rows:subgrid){
  .pjk{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;}
}

/* ---- la copertina ---- */
/* Il titolo prende tutta la larghezza (tranne i tre puntini): il sigillo
   sta nell'angolo in basso, accanto al cliente, e solo lì si fa posto.
   Prima i 128 pixel a destra valevano per tutta la copertina, e un nome
   di due parole andava a capo. */
.pjk-cov{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:16px 46px 28px 16px;
  background:color-mix(in srgb,var(--tint,var(--primary)) 9%,var(--card));}
.pjk-more{position:absolute;top:10px;right:10px;}
.pjk-top{display:flex;align-items:center;gap:6px;}
.pjk-top .badge svg{width:11px;height:11px;}
.pjk-name{margin:0;font-size:17px;font-weight:700;letter-spacing:-.35px;line-height:1.2;text-wrap:balance;}
.pjk-link{color:inherit;}
.pjk-link:hover{color:var(--primary-dark);}
.pjk-link:focus-visible{outline:none;}
.pjk.done .pjk-name{color:var(--muted);}
.pjk-client{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px;margin-right:84px;font-size:12px;font-weight:600;
  color:color-mix(in srgb,var(--tint,var(--primary)) 50%,var(--text));}
.pjk-client .client-ava{width:16px;height:16px;}
.pjk-client span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- il sigillo sulla cucitura ---- */
.pjk-seam{position:absolute;right:14px;bottom:-54px;width:104px;height:104px;border-radius:50%;
  background:var(--card);box-shadow:var(--shadow-lift);z-index:2;}
.pjk-ring{display:block;}
.pjk-ring circle{fill:none;stroke-linecap:round;}
.pjk-rt{stroke:var(--track);}
.pjk-rw{stroke:var(--primary);}
.pjk-ro{stroke:var(--primary-mid);}
.pjk-ro.l-amber{stroke:var(--amber);}
.pjk-ro.l-red{stroke:var(--red);}
.pjk-rv,.pjk-rl{pointer-events:none;font-family:inherit;}
.pjk-rv{fill:var(--text);font-size:18px;font-weight:800;}
.pjk-rl{fill:var(--muted);font-size:9px;font-weight:700;}
.pjk-ring g[data-tip]{cursor:help;}
.pjk-ring g[data-tip]:hover circle:last-child,.pjk-ring g[data-tip]:focus circle:last-child{stroke-width:10;}
.pjk-ring g[data-tip]:focus{outline:none;}

/* ---- ore e margine ---- */
.pjk-b{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:66px;padding:12px 128px 0 16px;}
.pjk-b span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--neutral-ink);}
.pjk-b svg{width:14px;height:14px;flex-shrink:0;}
.pjk-b b{color:var(--text);font-variant-numeric:tabular-nums;}
.pjk-ore,.pjk-mg{min-width:0;white-space:nowrap;}
.pjk-ore.l-ok b{color:var(--primary-dark);}
.pjk-ore.l-amber b{color:var(--amber-dark);}
.pjk-ore.l-red b{color:var(--red-dark);}

/* ---- gli avvisi: un problema, un chip ---- */
.pjk-issues{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px;padding:12px 16px;}
.pjk-issue{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;}
.pjk-issue svg{width:12px;height:12px;}
.pjk-issue.is-red{background:var(--red-soft);color:var(--red-dark);}
.pjk-issue.is-amber{background:var(--amber-soft);color:var(--amber-dark);}

/* ---- il piede ---- */
.pjk-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;align-self:end;margin-top:auto;
  padding:11px 16px;border-top:1px solid var(--line-soft);}
.pjk-foot .l,.pjk-foot .r{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.pjk-meta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.pjk-meta svg{width:13px;height:13px;}
.pjk-meta.near{color:var(--amber-dark);font-weight:600;}
.pjk-meta.late{color:var(--red-dark);font-weight:600;}