/* Coopyleft – pagina del singolo progetto (caso studio). Le card dei progetti correlati hanno il loro CSS (card-progetto.css). */
.cl-pr{
  --cl-p-ink:#21242a; --cl-p-primary:#467ef7; --cl-p-coral:#ed7466; --cl-p-soft:#dceaff;
  --cl-vista-h:clamp(24rem,42vw,36rem);   /* altezza dei riquadri con le immagini scorrevoli */
  color:var(--cl-p-ink); width:100%;
}
.cl-pr *,.cl-pr *::before,.cl-pr *::after{box-sizing:border-box}
.cl-pr p,.cl-pr h1,.cl-pr h2,.cl-pr ul{margin:0}
.cl-pr ul{padding:0; list-style:none}
.cl-pr :focus-visible{outline:3px solid var(--cl-p-primary); outline-offset:3px}

/* ---- torna ai progetti ---- */
.cl-pr__indietro{display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; color:inherit; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
.cl-pr__indietro-tondo{display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--cl-p-coral); color:var(--cl-p-ink); transition:transform .25s ease}
.cl-pr__indietro:hover .cl-pr__indietro-tondo,.cl-pr__indietro:focus-visible .cl-pr__indietro-tondo{transform:translateX(-4px)}

.cl-pr__titolo{margin-bottom:2rem !important; font-size:clamp(2.6rem,7vw,5.6rem); font-weight:700; line-height:1; letter-spacing:-.035em; overflow-wrap:anywhere}

/* ---- scheda di sinossi ---- */
.cl-pr__sinossi{padding:clamp(1.5rem,4vw,3.25rem); background:var(--cl-p-soft); border-radius:2.5rem}
.cl-pr__lead{max-width:34em; font-size:clamp(1.4rem,2.6vw,2.4rem); font-weight:500; line-height:1.25; letter-spacing:-.015em}
.cl-pr__cliente{margin-top:1.25rem !important; font-size:1rem}
.cl-pr__meta{display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.5rem 2.5rem; margin-top:2rem}
.cl-pr__gruppo{min-width:0}
.cl-pr__eti{margin-bottom:.6rem !important; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#3b414b}
.cl-pr__tags{display:flex; flex-wrap:wrap; gap:.4rem}
.cl-pr__tag{padding:.28rem .75rem; border:1.5px solid var(--cl-p-ink); border-radius:999px; background:rgba(255,255,255,.55); font-size:.7rem; font-weight:700; letter-spacing:.02em; line-height:1.2; text-transform:uppercase}
.cl-pr__tag--settore{border-color:var(--cl-p-coral)}
.cl-pr__tag--servizio{border-color:#8db6ff}
.cl-pr__tag--tecnologia{border-color:#7d848f}
.cl-pr__sito{margin-left:auto}
.cl-pr .wp-block-buttons,.cl-pr .wp-block-button{margin:0}

/* ---- riquadri con immagine scorrevole ---- */
.cl-pr__hero{margin-top:clamp(2rem,4vw,3rem); --cl-vista-h:clamp(24rem,50vw,38rem)}
.cl-pr__vista{position:relative; height:var(--cl-vista-h); overflow:hidden; background:#fff; border:1.5px solid #c9cdd3; border-radius:2rem; isolation:isolate}
.cl-pr__vista--mobile{border-radius:2.2rem}
.cl-pr__scroll{height:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#c9cdd3 transparent; -webkit-overflow-scrolling:touch}
.cl-pr__scroll:focus-visible{outline:3px solid var(--cl-p-primary); outline-offset:-3px; border-radius:inherit}
.cl-pr__img{display:block; width:100%; height:auto; max-width:none}

/* suggerimento "Scorri": compare dopo qualche secondo senza interazione */
.cl-pr__hint{position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; padding:2.5rem 1rem 1.1rem; pointer-events:none; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; background:linear-gradient(to top,rgba(33,36,42,.28),transparent)}
.cl-pr__vista.is-hint .cl-pr__hint{opacity:1; transform:none}
.cl-pr__hint-pill{display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1.05rem .55rem .85rem; border-radius:999px; background:var(--cl-p-ink); color:#fff; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 6px 18px rgba(33,36,42,.3)}
.cl-pr__hint-pill svg{animation:cl-pr-rimbalzo 1.2s ease-in-out infinite}
@keyframes cl-pr-rimbalzo{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---- blocchi: introduzione e funzionalita' ---- */
.cl-pr__blocco{margin-top:clamp(3.5rem,8vw,7rem)}
.cl-pr__testa{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:1.25rem clamp(1.5rem,5vw,4rem); align-items:start; margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.cl-pr__nome{display:flex; flex-direction:column; gap:.4rem}
.cl-pr__num{font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:400; line-height:1; letter-spacing:-.01em; color:var(--cl-p-primary); font-variant-numeric:tabular-nums}
.cl-pr__h2{font-size:clamp(1.35rem,2.1vw,1.8rem); font-weight:600; line-height:1.2; letter-spacing:-.01em}
.cl-pr__h2--grande{font-size:clamp(2rem,4vw,3.25rem); font-weight:700; letter-spacing:-.03em; margin-bottom:clamp(1.5rem,3vw,2.5rem) !important}
.cl-pr__testo{font-size:1.05rem; line-height:1.65; color:#3b414b}

.cl-pr__coppia{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.15fr); gap:1.5rem}
.cl-pr__coppia--solo-desktop{grid-template-columns:minmax(0,1fr)}
.cl-pr__coppia--solo-mobile{grid-template-columns:minmax(0,22rem)}

/* ---- progetti correlati ---- */
.cl-pr__correlati{margin-top:clamp(4rem,9vw,8rem)}
.cl-pr__griglia{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr)); gap:1.5rem}
.cl-pr__item{min-width:0}
.cl-pr__item > .cl-card{height:100%}

/* ---- chiusura con la griglia di sfondo ---- */
/* 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-pr__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-pr__fine.serv-griglia{--cl-griglia-w:26rem}}
.cl-pr__fine{margin-top:clamp(3.5rem,8vw,6rem); padding:clamp(2.75rem,7vw,5.5rem) 1.75rem; text-align:center; background-color:var(--cl-p-primary); color:#fff; border-radius:2.5rem}
.cl-pr__fine-t{font-size:clamp(1.9rem,4vw,3.25rem); font-weight:800; line-height:1.08; letter-spacing:-.03em}
.cl-pr__fine-s{margin:1rem auto 2.1rem !important; max-width:28em; font-size:1.25rem; font-weight:700; line-height:1.5}

/* CTA a tondino con orbita (stessa dell'archivio) */
.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-pr-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-pr .cl-cta-orbita:focus-visible{outline:3px solid #fff; outline-offset:6px}
@keyframes cl-pr-orbita{to{transform:rotate(360deg)}}

/* ---- comparsa allo scroll (solo se il JS e' attivo) ---- */
.cl-pr.is-js .cl-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.cl-pr.is-js .cl-reveal.is-in{opacity:1; transform:none}

/* ---- tablet e telefono ---- */
@media (max-width:860px){
  .cl-pr__testa{grid-template-columns:minmax(0,1fr)}
  .cl-pr__nome{flex-direction:row; align-items:baseline; gap:.9rem}
}
@media (max-width:700px){
  .cl-pr{--cl-vista-h:30rem}
  .cl-pr__hero{--cl-vista-h:22rem}
  /* mobile sopra, desktop sotto: ognuno con la sua altezza */
  .cl-pr__coppia{grid-template-columns:minmax(0,1fr)}
  .cl-pr__coppia > .cl-pr__vista--mobile{width:min(100%,19rem); margin-inline:auto}
  .cl-pr__coppia > .cl-pr__vista--desktop{--cl-vista-h:20rem}
  .cl-pr__sito{margin-left:0; width:100%}
  .cl-pr__sinossi{border-radius:2rem}

  /* correlati: carosello orizzontale, come le card in home */
  .cl-pr__griglia{display:flex; gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
    width:100vw; max-width:100vw; margin:-1rem calc(50% - 50vw) -1.5rem; padding:1rem 1.25rem 2.5rem; scroll-padding-inline:1.25rem}
  .cl-pr__griglia::-webkit-scrollbar{display:none}
  .cl-pr__item{flex:0 0 84%; scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .cl-pr *{animation:none !important}
  .cl-pr.is-js .cl-reveal{opacity:1; transform:none; transition:none}
}

/* intro: il titolo diventa un maiuscoletto, come le etichette Settore / Servizi / Tecnologie */
.cl-pr__h2.cl-pr__eti--sez{margin:0 !important; font-size:.85rem; font-weight:800; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:#2f5fd0}

/* intro: la domanda di ricerca è il punto di partenza visivo della pagina */
.cl-pr__testo.cl-pr__domanda{font-size:clamp(1.7rem,3.2vw,2.8rem); font-weight:800; line-height:1.12; letter-spacing:0; color:#21242a}

/* intro: maiuscoletto sopra, domanda sotto (le funzionalità restano su due colonne) */
.cl-pr__testa:has(.cl-pr__eti--sez){grid-template-columns:minmax(0,1fr); gap:1rem}
.cl-pr__testa:has(.cl-pr__eti--sez) .cl-pr__domanda{max-width:24em}

/* riquadro in alto: categorie in 3/4 (una per colonna), bottone in 1/4 in basso a destra */
.cl-pr__meta{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:1.5rem clamp(1.5rem,4vw,3rem); align-items:end}
.cl-pr__gruppi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem clamp(1rem,2.5vw,2rem); align-items:start; min-width:0}
.cl-pr__tag{overflow-wrap:anywhere}
.cl-pr__sito{margin-left:0; justify-self:end; align-self:end}

@media (max-width:860px){
  .cl-pr__meta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .cl-pr__gruppi{grid-template-columns:minmax(0,1fr)}
  .cl-pr__sito{justify-self:stretch}
}

/* collaborazione: in alto nella colonna destra, il bottone resta in basso */
.cl-pr__meta{grid-template-rows:auto 1fr}
.cl-pr__gruppi{grid-column:1; grid-row:1 / span 2; align-self:start}
.cl-pr__anni{grid-column:2; grid-row:1; align-self:start; justify-self:end; text-align:right}
.cl-pr__anni .cl-pr__eti{margin-bottom:.4rem !important}
.cl-pr__anni-v{margin:0 !important; font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:800; line-height:1.1; letter-spacing:0; color:#21242a}
.cl-pr__sito{grid-column:2; grid-row:2; justify-self:end; align-self:end}

@media (max-width:860px){
  .cl-pr__meta{grid-template-rows:none}
  .cl-pr__gruppi,.cl-pr__anni,.cl-pr__sito{grid-column:auto; grid-row:auto}
  .cl-pr__anni{justify-self:start; text-align:left}
}
@media (max-width:700px){
  .cl-pr__sito{justify-self:stretch}
}