/* Coopyleft – archivio progetti (barra filtri + elenco). Le card hanno il loro CSS (card-progetto.css). */
.cl-prog{
  --cl-p-ink:#21242a; --cl-p-primary:#467ef7; --cl-p-coral:#ed7466; --cl-p-soft:#dceaff;
  position:relative; color:var(--cl-p-ink); width:100%;
}
.cl-prog *,.cl-prog *::before,.cl-prog *::after{box-sizing:border-box}
.cl-prog [hidden]{display:none !important}

/* ---- chip (le stesse del form di contatto) ---- */
.cl-prog .cl-chip{
  display:inline-flex; align-items:center; gap:.55rem; min-height:2.75rem; padding:.4rem 1.1rem;
  border:1.5px solid var(--cl-p-ink); border-radius:999px; background:#fff; color:var(--cl-p-ink);
  font:inherit; font-size:1rem; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.cl-prog .cl-chip:hover{transform:translateY(-1px)}
.cl-prog .cl-chip.is-on{background:var(--cl-p-primary); color:#fff; box-shadow:0 4px 0 var(--cl-p-ink); transform:translateY(-2px)}
.cl-prog .cl-chip i{flex:none; width:.6rem; height:.6rem; border-radius:50%; border:1.5px solid var(--cl-p-ink); background:var(--cl-p-coral)}
.cl-prog .cl-chip.is-on i{border-color:#fff}
.cl-prog [data-gruppo="servizi"] i{background:#8db6ff}
.cl-prog [data-gruppo="tecnologie"] i{background:#7d848f}
.cl-prog .cl-chip:focus-visible,.cl-prog button:focus-visible{outline:3px solid var(--cl-p-primary); outline-offset:3px}

/* ---- barra ---- */
.cl-prog__bar{
  position:relative; z-index:2; margin:0 0 1.5rem; padding:.65rem;
  background:#fff; border:1.5px solid var(--cl-p-ink); border-radius:2.2rem; box-shadow:0 10px 28px rgba(33,36,42,.12);
}
.cl-prog__barra{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem}
.cl-prog .cl-chip--filtri{min-height:3rem; padding:.4rem 1.2rem .4rem 1rem}
.cl-prog__badge{display:grid; place-items:center; min-width:1.5rem; height:1.5rem; padding:0 .35rem; border-radius:999px; background:var(--cl-p-coral); color:var(--cl-p-ink); font-size:.8rem; font-weight:800}
.cl-prog__settori{display:flex; flex:1 1 20rem; gap:.6rem; min-width:0; overflow-x:auto; padding:6px 4px 10px; margin:-6px -4px -10px; scrollbar-width:none}
.cl-prog__settori::-webkit-scrollbar{display:none}
.cl-prog__conta{margin:0 .8rem 0 auto; font-size:.95rem; font-weight:700; color:#5b616b; white-space:nowrap}

/* ---- filtri attivi (si tolgono con un tocco) ---- */
.cl-prog__attivi{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1.5rem}
.cl-prog .cl-chip--attivo{min-height:2.25rem; padding:.2rem .8rem; border-color:var(--cl-p-ink); background:var(--cl-p-soft); font-size:.9rem}
.cl-prog .cl-chip--attivo svg{flex:none}
.cl-prog__attivi .cl-prog__azzera{padding:.3rem .5rem; min-height:2.25rem; font-size:.9rem}

/* ---- pannello retraibile ---- */
.cl-prog__pannello{margin-top:.9rem; padding:1.4rem 1.1rem .5rem; border-top:1.5px dashed #c9cdd3; animation:cl-p-su .3s ease both}
.cl-prog__testa{display:none}
.cl-prog__velo{display:none}
.cl-prog__gruppi{display:flex; flex-wrap:wrap; gap:1.6rem 3rem}
.cl-prog__gruppo{flex:1 1 17rem; min-width:0}
.cl-prog__eti{margin:0 0 .75rem; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5b616b}
.cl-prog__chips{display:flex; flex-wrap:wrap; gap:.6rem}
.cl-prog__azioni{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.2rem; margin:1.4rem 0 .6rem}
.cl-prog__azzera{background:none; border:0; padding:.6rem .25rem; min-height:44px; font:inherit; font-size:1rem; font-weight:700; color:var(--cl-p-ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.cl-prog .wp-block-button{margin:0}
.cl-prog .wp-block-button button.wp-block-button__link{font-family:inherit}

/* ---- elenco ---- */
.cl-prog__griglia{margin-top:1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); gap:1.5rem; transition:opacity .25s ease}
.cl-prog__griglia.is-caricando{opacity:.35; pointer-events:none}
.cl-prog__item{min-width:0; animation:cl-p-su .5s ease both}
.cl-prog__item > .cl-card{height:100%}
@keyframes cl-p-su{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.cl-prog__skel{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); gap:1.5rem; margin-top:1.5rem}
.cl-prog__skel div{min-height:24rem; border:1.5px solid #e3e6eb; border-radius:2.5rem; background:linear-gradient(100deg,#f1f3f7 30%,#fff 50%,#f1f3f7 70%) 0 0/300% 100%; animation:cl-p-shim 1.3s linear infinite}
@keyframes cl-p-shim{to{background-position:-300% 0}}
.cl-prog__sentinella{height:2px}
.cl-prog__altri{display:flex; justify-content:center; margin-top:2.25rem}

/* ---- nessun risultato ---- */
.cl-prog__vuoto{padding:4.5rem 1.25rem; text-align:center; background:#fff; border:1.5px dashed var(--cl-p-ink); border-radius:2.5rem}
.cl-prog__vuoto h2{margin:0; font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.1; letter-spacing:-.025em; font-weight:800}
.cl-prog__vuoto p{margin:.9rem auto 1.75rem; max-width:30em; font-size:1.15rem; line-height:1.5; color:#3b414b}
.cl-prog__vuoto-az{display:inline-flex; flex-wrap:wrap; gap:.9rem; justify-content:center}

/* ---- fine elenco: scheda contatto su fondo primario ---- */
/* Griglia di sfondo: la stessa dei Servizi. Il movimento (segue il mouse da desktop, parallasse da telefono) lo da' la classe .serv-griglia
   del tema (style.css + custom.js). L'immagine e' seamless: si ripete, e la sua dimensione si regola con --cl-griglia-w. */
.cl-prog__fine.serv-griglia{--cl-griglia-w:clamp(26rem,50vw,42rem); background-image:var(--cl-griglia); background-repeat:repeat; background-size:var(--cl-griglia-w) auto}
@media (max-width:781px){.cl-prog__fine.serv-griglia{--cl-griglia-w:26rem}}
.cl-prog__fine{margin-top:3.5rem; padding:clamp(2.5rem,6vw,4.5rem) 1.75rem; text-align:center; background:var(--cl-p-primary); color:#fff; border-radius:2.5rem}
.cl-prog__fine p{margin:0}
.cl-prog__fine-t{font-size:clamp(1.9rem,4vw,3.25rem); line-height:1.08; letter-spacing:-.03em; font-weight:800}
.cl-prog__fine-s{margin:1rem auto 2.1rem !important; max-width:28em; font-size:1.25rem; line-height:1.5; font-weight:700}

/* ---- CTA a tondino con orbita ---- */
.cl-cta-orbita{display:inline-flex; align-items:center; gap:1.4rem; padding:.4rem .6rem .4rem .4rem; border-radius:999px; color:#fff; text-decoration:none}
.cl-cta-orbita__anello{position:relative; display:block; flex:none; width:5.5rem; height:5.5rem}
.cl-cta-orbita__anello::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.65)}
.cl-cta-orbita__giro{position:absolute; inset:0; display:block; animation:cl-p-orbita 6s linear infinite}
.cl-cta-orbita__giro i{position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--cl-p-soft)}
.cl-cta-orbita__tondo{position:absolute; inset:.75rem; display:grid; place-items:center; border-radius:50%; background:var(--cl-p-coral); color:var(--cl-p-ink); transition:transform .3s cubic-bezier(.65,0,.35,1), box-shadow .2s ease}
.cl-cta-orbita__testo{font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.01em; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:6px; transition:text-decoration-color .2s ease}
.cl-cta-orbita:active .cl-cta-orbita__tondo,
.cl-cta-orbita:focus-visible .cl-cta-orbita__tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
.cl-cta-orbita:active .cl-cta-orbita__giro,
.cl-cta-orbita:focus-visible .cl-cta-orbita__giro{animation-duration:2s}
.cl-cta-orbita:active .cl-cta-orbita__testo,
.cl-cta-orbita:focus-visible .cl-cta-orbita__testo{text-decoration-color:#fff}
@media (hover:hover){
  .cl-cta-orbita:hover .cl-cta-orbita__tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
  .cl-cta-orbita:hover .cl-cta-orbita__giro{animation-duration:2s}
  .cl-cta-orbita:hover .cl-cta-orbita__testo{text-decoration-color:#fff}
}
.cl-cta-orbita:focus-visible{outline:3px solid #fff; outline-offset:6px}
@keyframes cl-p-orbita{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .cl-prog__bar{z-index:auto; padding:.55rem; border-radius:1.8rem}
  .cl-prog__barra{gap:.5rem .6rem}
  .cl-prog .cl-chip--filtri{order:1}
  .cl-prog__conta{order:2; margin-left:auto}
  /* riga dei settori: a tutta larghezza, scorre di lato e si sfuma a destra per far capire che c'e' altro */
  .cl-prog__settori{order:3; flex:1 1 100%; padding-right:2.5rem; scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.75rem),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 2.75rem),transparent)}
  .cl-prog__settori .cl-chip{scroll-snap-align:start}

  /* pannello = foglio che sale dal basso */
  .cl-prog__velo{display:block; position:fixed; inset:0; z-index:1000; background:rgba(33,36,42,.45)}
  .cl-prog__pannello{
    position:fixed; left:0; right:0; bottom:0; z-index:1001; margin:0; padding:0 1.25rem;
    max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border:1.5px solid var(--cl-p-ink); border-bottom:0; border-radius:2rem 2rem 0 0;
    box-shadow:0 -12px 40px rgba(33,36,42,.28); animation:cl-p-foglio .35s cubic-bezier(.65,0,.35,1) both;
  }
  .cl-prog__testa{
    display:flex; position:sticky; top:0; z-index:1; align-items:center; justify-content:space-between;
    margin:0 -1.25rem 1rem; padding:1.35rem 1.25rem .8rem; background:#fff;
  }
  .cl-prog__testa::before{content:""; position:absolute; top:.55rem; left:50%; width:2.5rem; height:.3rem; margin-left:-1.25rem; border-radius:99px; background:#c9cdd3}
  .cl-prog__titolo{margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.02em}
  .cl-prog__x{display:grid; place-items:center; width:2.75rem; height:2.75rem; border:1.5px solid var(--cl-p-ink); border-radius:50%; background:#fff; color:var(--cl-p-ink); cursor:pointer}
  .cl-prog__gruppi{gap:1.4rem}
  .cl-prog__chips .cl-chip{min-height:3rem}
  .cl-prog__azioni{
    position:sticky; bottom:0; margin:1.2rem -1.25rem 0; padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
    background:#fff; border-top:1.5px solid #e3e6eb; justify-content:space-between; flex-wrap:nowrap;
  }
  .cl-prog__azioni .cl-prog__azzera{font-size:1rem}
  .cl-prog__azioni [data-cl-chiudi]{font-weight:800}
  body.cl-prog-lock{overflow:hidden}
}
@keyframes cl-p-foglio{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .cl-prog *{animation:none !important; transition:none !important}
}