/* ============================================================
   PAGINA PROGETTO — estende style.css, non lo duplica.

   Regola guida: la pagina resta scura come tutto il sito. I colori
   del cliente non fanno da fondo: compaiono solo dove SONO il
   contenuto (la fascia palette, le immagini). Così i quattro case
   study restano riconoscibili come pagine Gattanera e non come
   quattro siti diversi.

   Il ritmo verticale che nel vecchio design veniva dall'alternanza
   di fondi colorati qui nasce da tre cose sole:
     · fasce immagine che sfondano il gutter
     · un unico blocco --panel (la sequenza dell'approccio)
     · il salto di scala tipografica (176px contro 13px)
   ============================================================ */

:root{
  /* misurata da JS al load: serve alla barra di progetto per
     incollarsi esattamente sotto la nav, che è sticky a sua volta */
  --nav-h:73px;
}

/* Il contrasto è una regola di sistema e sta in style.css: qui non
   si sovrascrivono colori di testo. L'unica cosa che resta è il punto
   medio tra i tag, che prima era del colore dei filetti e spariva. */
.proj-tags .sep{color:var(--fg);}

/* ------------------------------------------------------------
   BARRA DI PROGETTO
   La riga del vecchio design (← portfolio · nome · visita il sito),
   riscritta in .label. Si incolla sotto la nav e porta sul bordo
   basso il filetto acid che misura la lettura.
   ------------------------------------------------------------ */
.proj-bar{
  position:sticky;
  top:var(--nav-h);
  z-index:45;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:14px var(--gutter);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.proj-back{
  display:inline-flex; align-items:center; gap:9px;
  transition:color .25s var(--ease);
}
.proj-back:hover{color:var(--acid);}
.proj-back svg{width:14px; height:14px;}
.proj-bar-title{justify-self:center; color:var(--fg);}
/* terza cella della barra quando il progetto non ha un sito da visitare:
   tiene la griglia in equilibrio e il titolo davvero al centro */
.proj-bar-meta{justify-self:end;}
.proj-bar-cta{
  justify-self:end;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px;
  padding:7px 15px;
  font-family:'ClashDisplay-Regular', sans-serif;
  font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.proj-bar-cta:hover{background:var(--acid); border-color:var(--acid); color:#0b0b0a;}
/* il filetto sta SOPRA il bordo, non al posto suo: scorrendo si
   riempie la stessa riga che già separa la barra dalla pagina */
.proj-progress{
  position:absolute; left:0; bottom:-1px; height:1px;
  width:100%; transform:scaleX(0); transform-origin:left;
  background:var(--acid);
}
@media (max-width:760px){
  .proj-bar{grid-template-columns:auto 1fr;}
  .proj-bar-title{display:none;}
}

/* ------------------------------------------------------------
   HERO — stessa grammatica della home: il nome sale da un taglio
   netto e arriva quasi a toccare i due gutter. Il mockup del
   laptop non sta qui dentro: diventa la fascia subito sotto.
   ------------------------------------------------------------ */
.proj-hero{padding:clamp(48px,9vh,96px) var(--gutter) clamp(30px,5vh,50px);}
.proj-tags{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-bottom:clamp(28px,5vh,54px);
}
.proj-tags .sep{color:var(--line);}
.proj-title{
  display:flex; flex-direction:column;
  /* Stessa difesa dell'hero della home, ma con la larghezza al comando:
     è il termine in calc() che decide, e il clamp fa solo da tetto. Così
     il nome arriva a toccare i due gutter come "Gattanera" in home.
     --ratio è la larghezza del nome in em (Clash Semibold, -0.03em) e
     cambia da progetto a progetto: si imposta nell'HTML. */
  font-size:min(
    clamp(56px,18vw,300px),
    calc((100vw - 2 * var(--gutter)) / var(--ratio,5))
  );
  line-height:0.87;
}
.proj-title .t{
  display:block;
  font-family:'ClashDisplay-Semibold', sans-serif;
  font-weight:600;
  font-size:inherit; line-height:inherit;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.proj-hero-foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:24px;
  margin-top:clamp(34px,6vh,64px);
}
.proj-sub{
  max-width:440px;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.45;
}
.proj-hero-cta{
  justify-self:end;
  display:inline-flex; align-items:center; gap:10px;
  font-family:'ClashDisplay-Semibold', sans-serif;
  font-size:clamp(18px,1.9vw,26px);
  border-bottom:1.5px solid var(--fg);
  padding-bottom:4px;
  white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.proj-hero-cta:hover{color:var(--acid); border-color:var(--acid);}
@media (max-width:760px){
  .proj-hero-foot{grid-template-columns:1fr; gap:26px;}
  .proj-hero-cta{justify-self:start;}
}

/* ------------------------------------------------------------
   FASCIA IMMAGINE — sfonda il gutter da bordo a bordo e si scopre
   dal basso, con lo stesso gesto delle anteprime in home.
   ------------------------------------------------------------ */
.proj-band{
  height:clamp(300px,72vh,760px);
  overflow:hidden;
}
.proj-band img{
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:inset(100% 0 0 0);
  transform:scale(1.08);
  transition:clip-path 1.1s var(--ease-soft), transform 1.4s var(--ease-soft);
}
.proj-band.is-in img{clip-path:inset(0 0 0 0); transform:scale(1);}
html:not(.js) .proj-band img{clip-path:none; transform:none;}

/* Variante per le schermate che vanno viste intere. Con l'altezza fissa
   la fascia ritagliava DUE volte: una nel file, e una a schermo, perché
   il rapporto della finestra cambia con quello del monitor e object-fit
   mangia la differenza. Qui comanda l'immagine: nessun ritaglio, a
   nessuna risoluzione. */
.proj-band--fit{height:auto;}
.proj-band--fit img{height:auto;}
.proj-band-cap{
  padding:14px var(--gutter) 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}

/* ------------------------------------------------------------
   SCHEDA — le quattro voci del vecchio design, tra due filetti,
   con lo stesso passo delle righe progetto in home.
   ------------------------------------------------------------ */
.proj-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin:clamp(70px,11vh,130px) var(--gutter) 0;
  padding:34px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.proj-meta dt{margin-bottom:12px;}
.proj-meta dd{
  font-family:'ClashDisplay-Medium', sans-serif;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.3;
}
@media (max-width:760px){
  .proj-meta{grid-template-columns:1fr 1fr; gap:26px 20px;}
}

/* ------------------------------------------------------------
   BLOCCO DI TESTO — titolo display a sinistra, colonna di lettura
   a destra. È la griglia di .about-foot, ribaltata: qui i due
   pesi convivono sulla stessa fascia invece di impilarsi.
   ------------------------------------------------------------ */
/* L'etichetta occupa una riga sua: così la colonna di lettura parte
   dalla cima del TITOLO e non da quella dell'etichetta. Con il vecchio
   contenitore unico il testo a destra galleggiava una trentina di
   pixel più in alto del display, e le due colonne non si agganciavano. */
.proj-block{
  display:grid;
  grid-template-columns:1fr minmax(0,40%);
  grid-template-rows:auto auto;
  align-items:start;
  gap:0 40px;
}
.proj-block-tag{
  grid-column:1; grid-row:1;
  margin-bottom:clamp(18px,3vh,30px);
}
.proj-block .proj-h2{grid-column:1; grid-row:2;}
.proj-block .proj-body{grid-column:2; grid-row:2;}
.proj-h2{
  font-family:'ClashDisplay-Semibold', sans-serif;
  font-weight:600;
  font-size:clamp(40px,7.4vw,150px);
  line-height:0.87;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  display:flex; flex-direction:column;   /* non far collassare i margini delle maschere */
}
.proj-body{display:flex; flex-direction:column; gap:1.1em;}
.proj-body p{
  font-family:'ClashDisplay-Medium', sans-serif;
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.55;
  color:var(--fg);
}
/* il paragrafo che segue scende di voce con il peso, non col grigio */
.proj-body p + p{font-family:'ClashDisplay-Regular', sans-serif;}
@media (max-width:900px){
  .proj-block{grid-template-columns:1fr;}
  .proj-block-tag, .proj-block .proj-h2, .proj-block .proj-body{
    grid-column:1; grid-row:auto;
  }
  .proj-block .proj-body{margin-top:30px;}
}

/* ------------------------------------------------------------
   APPROCCIO — nel vecchio design lo stesso contenuto era spezzato
   in due trattamenti (01 in una sezione, 02-03-04 in tre card).
   Qui torna una sequenza sola, in grammatica .about-list: un unico
   gesto di lettura dall'inizio alla fine.
   ------------------------------------------------------------ */
/* Niente margine in cima: la sezione precedente ha già il suo padding
   inferiore, e i due sommati aprivano 270px di vuoto. Vale per tutti i
   blocchi che seguono una .section — lo stacco lo dà chi viene prima. */
.proj-steps-wrap{
  background:var(--panel);
  padding:clamp(70px,11vh,130px) var(--gutter);
}
.proj-steps{list-style:none; margin-top:clamp(40px,6vh,70px);}
/* stesso aggancio del .proj-block: il numero sta in una riga sua,
   il testo parte dalla cima del nome */
.proj-steps li{
  display:grid;
  grid-template-columns:1fr minmax(0,40%);
  grid-template-rows:auto auto;
  align-items:start;
  gap:0 40px;
  padding:clamp(30px,4.5vh,48px) 0;
  border-top:1px solid var(--line);
}
.proj-steps li:last-child{border-bottom:1px solid var(--line);}
.proj-step-num{grid-column:1; grid-row:1; display:block; margin-bottom:14px;}
.proj-step-name{grid-column:1; grid-row:2;}
.proj-step-text{grid-column:2; grid-row:2;}
.proj-step-name{
  font-family:'ClashDisplay-Semibold', sans-serif;
  font-weight:600;
  font-size:clamp(28px,4.2vw,76px);
  line-height:0.95;
  letter-spacing:-0.03em;
  text-transform:uppercase;
}
.proj-step-text{
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.65;
  color:var(--fg);
}
@media (max-width:900px){
  .proj-steps li{grid-template-columns:1fr;}
  .proj-step-num, .proj-step-name, .proj-step-text{grid-column:1; grid-row:auto;}
  .proj-step-text{margin-top:18px;}
}

/* ------------------------------------------------------------
   PALETTE — l'unico momento a colore pieno di tutta la pagina, ed
   è per questo che funziona. Nessun acid qui dentro: due segnali
   forti sulla stessa fascia si annullerebbero.
   Al passaggio del mouse la colonna si prende spazio dalle altre.
   ------------------------------------------------------------ */
.proj-palette{
  display:flex;
  height:clamp(260px,52vh,520px);
}
.proj-swatch{
  flex:1;
  position:relative;
  background:var(--c);
  color:var(--ink);
  display:flex; align-items:flex-end;
  padding:22px;
  transition:flex-grow .7s var(--ease-soft);
  /* Il nero del cliente (#010202) è più scuro del fondo del sito: senza
     questo filetto la quarta colonna non si legge come colonna, sembra
     un buco. Sugli altri tre è impercettibile. */
  box-shadow:inset 0 0 0 1px rgba(244,242,236,0.11);
}
.proj-palette:hover .proj-swatch{flex-grow:0.86;}
.proj-palette .proj-swatch:hover{flex-grow:1.7;}
.proj-swatch .label{color:currentColor;}
@media (max-width:760px){
  .proj-palette{flex-wrap:wrap; height:auto;}
  .proj-swatch{flex:1 1 50%; height:150px;}
}

/* ------------------------------------------------------------
   GALLERIA — contatto fotografico, due righe che sono anche le due
   varianti cromatiche della campagna. Rapporto 5/7: le locandine
   non perdono la line-up, i post quadrati cedono solo i margini.
   ------------------------------------------------------------ */
.proj-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:clamp(40px,6vh,70px);
}
.proj-shot{
  aspect-ratio:5/7;
  overflow:hidden;
  background:var(--panel);
}
.proj-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:inset(100% 0 0 0);
  transform:translateY(24px) scale(1.06);
  transition:clip-path .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay:var(--d,0ms);
}
.proj-shot.is-in img{clip-path:inset(0 0 0 0); transform:none;}
html:not(.js) .proj-shot img{clip-path:none; transform:none;}
@media (max-width:760px){
  .proj-gallery{grid-template-columns:1fr 1fr; gap:8px;}
}

/* ------------------------------------------------------------
   SCHERMATE — catture di pagina intera, non post quadrati. Qui
   NON si ritaglia: un sito lo si giudica dal layout, e un crop a
   rapporto fisso taglierebbe proprio quello. Quindi altezza libera,
   allineate in cima, e ognuna si scopre dal basso come le fasce.
   ------------------------------------------------------------ */
/* Le tre catture hanno altezze molto diverse — la pagina programma è
   il triplo delle altre — e affiancate a altezza libera sfilacciavano
   la griglia. Ognuna sta in una finestra dello stesso formato che
   mostra la testa della pagina; al passaggio del mouse l'immagine
   scorre fino in fondo. Così si vede tutto il layout senza tagliarlo
   e senza che una colonna detti l'altezza a tutta la sezione. */
.proj-screens{
  /* l'altezza della finestra sta qui perché serve due volte: alla
     finestra e al calcolo di quanto deve scorrere l'immagine */
  --win:clamp(320px,34vw,520px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(40px,6vh,70px);
}
.proj-screen-window{
  display:block;
  height:var(--win);
  overflow:hidden;
  background:var(--panel);
}
/* Larghezza piena e altezza libera: così non si ritaglia MAI di lato.
   Con object-fit:cover la schermata più bassa delle tre perdeva un pezzo
   di navigazione sul bordo sinistro. */
.proj-screen-window img{
  width:100%; height:auto; display:block;
  clip-path:inset(100% 0 0 0);
  /* durata del RITORNO: uscendo col mouse l'immagine risale svelta,
     altrimenti la colonna resta incollata in fondo e sembra bloccata */
  transition:clip-path .9s var(--ease-soft), transform .5s var(--ease);
  transition-delay:var(--d,0ms), 0ms;
}
.proj-screen.is-in .proj-screen-window img{clip-path:inset(0 0 0 0);}
/* -100% è l'altezza dell'immagine, qualunque sia: la corsa si calcola
   da sola per ogni schermata. min() protegge dal caso di un'immagine
   più bassa della finestra, che altrimenti scivolerebbe in giù. */
.proj-screen:hover .proj-screen-window img{
  transform:translateY(min(0px, calc(-100% + var(--win))));
  /* 2.2s invece di 3.2: parte subito, così il gesto risponde al mouse,
     ma resta abbastanza lenta da poter leggere mentre scorre. La curva
     è quasi lineare di proposito — un ease marcato accelera in mezzo,
     ed è lì che il testo diventa illeggibile. */
  transition:clip-path .9s var(--ease-soft), transform 2.2s cubic-bezier(.22,.61,.3,1);
  transition-delay:0ms;
}
@media (prefers-reduced-motion: reduce){
  /* la regola globale azzera le durate: senza questo lo scorrimento
     diventerebbe un salto secco in fondo alla pagina, che è peggio
     dell'animazione. Meglio non muoversi affatto. */
  .proj-screen:hover .proj-screen-window img{transform:none;}
}
html:not(.js) .proj-screen-window img{clip-path:none;}
.proj-screen figcaption{padding-top:14px;}
/* l'affordance non è ovvia: una riga lo dice, senza spiegazioni */
.proj-screens-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap;
}
@media (max-width:760px){
  .proj-screens{grid-template-columns:1fr; gap:34px;}
}
@media (hover:none){
  /* senza mouse lo scorrimento non parte: meglio non prometterlo */
  .proj-screens-hint{display:none;}
}

/* ------------------------------------------------------------
   CTA AL SITO — grammatica del footer della home: display a
   sinistra, pastiglia acid a destra sulla stessa linea di base.
   ------------------------------------------------------------ */
.proj-live{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:40px;
  padding:clamp(60px,9vh,110px) var(--gutter) clamp(90px,15vh,180px);
}
.proj-live-cta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--acid); color:#0b0b0a;
  border-radius:999px;
  padding:18px 30px;
  font-family:'ClashDisplay-Semibold', sans-serif;
  font-size:clamp(14px,1.2vw,17px);
  white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.proj-live-cta:hover{transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(212,255,92,.5);}
@media (max-width:760px){
  .proj-live{grid-template-columns:1fr; gap:32px;}
}

/* ------------------------------------------------------------
   PROSSIMO PROGETTO — non c'era nel vecchio design: la pagina
   finiva in un vicolo cieco. È una riga .work-item riusata tale
   quale, così il giro tra i case study si chiude.
   ------------------------------------------------------------ */
.proj-next{
  padding:0 var(--gutter) clamp(20px,4vh,40px);
}
/* La fascia palette non ha padding sotto: quando "prossimo progetto" la
   segue di filo, lo stacco se lo deve dare da sé. Dove invece viene dopo
   una sezione (Limonium) il padding di quella basta già. */
.proj-palette + .proj-next{padding-top:clamp(70px,11vh,130px);}
.proj-next .label{display:block; margin-bottom:18px;}
.proj-next .work-item{border-bottom:1px solid var(--line);}