/* ===========================================================================
   Pagina WORKSHOP — due colonne: le locandine da un lato, i testi dall'altro.
   Il body ha `is-workshop`; le classi sono prefissate `wk-` per non incrociare site.css.
   A differenza di gallery e portfolio questa pagina SCORRE (niente `position: fixed`,
   niente `overflow: hidden` sul body): è il presupposto di `position: sticky`, che è
   l'unico meccanismo di questa pagina — vedi WORKSHOP.md.
   =========================================================================== */

body.is-workshop { background: #E8E8E8; }

.wk {
  --wk-bg: #E8E8E8;
  --wk-ink: #111;
  --wk-body: #333;
  --wk-rule: #c9c9c9;
  /* Corsia sinistra: il monogramma è fisso in basso a sinistra e la pagina gli scorre sotto,
     quindi il rientro serve a TUTTA l'altezza, non solo in fondo. --mono-lane è la stessa
     formula usata dalla sezione "genres" in home (dichiarata su :root in site.css). */
  --wk-lane: max(clamp(1.6rem, 5vw, 5rem), var(--mono-lane));
  --wk-pad-r: clamp(1.6rem, 5vw, 5rem);
  /* Le due colonne, dichiarate UNA volta: le usano sia la testata sia ogni sezione, e devono
     restare incolonnate. La colonna del testo è la più larga — è quella che si legge; la
     locandina è quadrata o verticale e più spazio non le serve. */
  --wk-cols: minmax(0, 0.85fr) minmax(0, 1fr);
  --wk-gap: clamp(2rem, 5vw, 5rem);

  /* ALLINEAMENTO OTTICO — la regola che tiene insieme le due colonne: la locandina e il testo
     accanto partono alla stessa altezza, e non è il BOX a doversi allineare ma il GLIFO.
     I valori (`--trim-*`) sono metriche del carattere e stanno in site.css, dove li legge
     anche about.css: la spiegazione e la formula sono là. */

  background: var(--wk-bg); color: var(--wk-ink);
  min-height: 100vh;
  padding: clamp(3.5rem, 12vh, 9rem) var(--wk-pad-r) clamp(3rem, 10vh, 7rem) var(--wk-lane);
}

/* ---- Testata: solo il titolo della pagina ---------------------------------------------
   L'introduzione NON è qui (sta nella colonna dei testi, a filo della prima locandina — vedi
   `.wk-intro` più sotto e il commento nel template): ci torna solo quando non c'è nessuna
   edizione, cioè quando non esiste una locandina a cui allinearsi.
   La griglia resta quella della pagina anche con una cella sola, così un titolo lungo va a
   capo nella larghezza della colonna delle locandine invece che a tutta pagina. */
.wk-head {
  display: grid;
  grid-template-columns: var(--wk-cols);
  gap: var(--wk-gap);
  align-items: start;
  margin-bottom: clamp(3rem, 12vh, 8rem);
}
.wk-head > .wk-title { margin-top: calc(-1 * var(--trim-title)); }
.wk-title {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--wk-ink);
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4.2rem);
}
/* L'introduzione. Sta nella colonna dei testi, prima riga: la sua prima riga di testo
   comincia al bordo superiore della locandina, come l'occhiello di ogni altra edizione (di
   qui il trim ottico, che qui è quello della prosa — vedi `--trim-*` in site.css). */
.wk-intro {
  grid-column: 2;
  min-width: 0; max-width: 62ch;
  margin-top: calc(-1 * var(--trim-prose));
  font-size: clamp(0.95rem, 1.15vw, 1.12rem); line-height: 1.62; color: var(--wk-body);
}
.wk-intro p { margin: 0; }
.wk-intro p + p { margin-top: 0.85em; }
/* Senza edizioni l'introduzione torna nella testata, dove la colonna 2 è vuota: là il
   posizionamento esplicito non serve, ma nemmeno disturba. */

/* ---- Un'edizione: locandina a sinistra, testo a destra ---------------------------------
   Nella PRIMA la colonna destra ha due righe (introduzione, poi il testo dell'edizione) e la
   locandina le copre entrambe: `grid-row: 1 / -1`. Nelle altre la riga è una sola e la stessa
   regola non cambia nulla. È così che l'introduzione può stare a filo della locandina —
   allinearsi a un'immagine che sta in un'altra riga di griglia non è possibile, ed è per
   questo che l'introduzione vive dentro la prima sezione invece che nella testata. */
.wk-entry {
  display: grid;
  grid-template-columns: var(--wk-cols);
  /* Le righe si DICHIARANO, anche quando è una sola: `grid-row: 1 / -1` sulla locandina conta
     le linee della griglia ESPLICITA, e senza questa riga non spanerebbe niente. */
  grid-template-rows: auto;
  column-gap: var(--wk-gap);
  /* Lo stacco fra introduzione e testo dell'edizione: è la riga della griglia, non un margine
     su uno dei due — così esiste solo quando esistono entrambe. */
  row-gap: clamp(2rem, 6vh, 3.5rem);
  /* NIENTE `align-items: start`: la cella della locandina deve stirarsi all'altezza della
     riga, altrimenti `sticky` non ha spazio in cui restare ferma. */
  padding-bottom: clamp(3.5rem, 14vh, 10rem);
}
/* La sezione che ospita l'introduzione: due righe nella colonna destra (introduzione, poi il
   testo dell'edizione), che la locandina copre entrambe. */
.wk-entry--intro { grid-template-rows: auto auto; }
.wk-entry:last-child { padding-bottom: 0; }

.wk-media { grid-column: 1; grid-row: 1 / -1; min-width: 0; }
.wk-figure {
  position: sticky;
  /* Distanza dal bordo alto quando la locandina si aggancia. */
  top: clamp(2rem, 9vh, 6rem);
  margin: 0;
}
.wk-figure img {
  display: block;
  /* Dimensione naturale, limitata da ENTRAMBI i lati: la locandina non si ritaglia mai
     (è un'immagine con del testo dentro) e non supera mai l'altezza del viewport, che con
     un formato verticale succederebbe appena la colonna si allarga. */
  width: auto; height: auto;
  max-width: 100%; max-height: 74vh;
  background: #dcdcdc;
  /* Svelata dal basso, come le immagini della home. */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.wk-entry.img-in .wk-figure img { clip-path: inset(0 0 0 0); }

/* ---- La colonna del testo -------------------------------------------------------------- */
.wk-text { grid-column: 2; min-width: 0; max-width: 62ch; }

/* La prima riga del testo comincia alla stessa altezza del bordo superiore della locandina:
   stesso trim ottico della testata (vedi `--trim-*` in site.css). Due valori perché il trim
   dipende dall'interlinea, e il primo elemento può essere l'occhiello o — in un'edizione
   senza occhiello — il titolo. */
.wk-text > :first-child { margin-top: calc(-1 * var(--trim-caps)); }
.wk-text > .wk-name:first-child { margin-top: calc(-1 * var(--trim-name)); }

.wk-kicker {
  margin: 0 0 clamp(0.6rem, 1.6vh, 1rem);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a6a6a;
}
.wk-name {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  color: var(--wk-ink);
}
.wk-lead {
  margin: clamp(1rem, 2.6vh, 1.8rem) 0 0;
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.24rem); line-height: 1.5; color: #262626;
}

.wk-block { margin-top: clamp(1.8rem, 5vh, 3rem); }
.wk-h {
  margin: 0 0 clamp(0.5rem, 1.4vh, 0.9rem);
  /* Filetto sopra il titoletto: separa i blocchi senza aggiungere un elemento al markup.
     È l'unica linea della pagina, ed è quello che regge il ritmo di una colonna lunga. */
  padding-top: clamp(0.8rem, 2vh, 1.2rem);
  border-top: 1px solid var(--wk-rule);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  color: var(--wk-ink);
}
.wk-p {
  margin: 0;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem); line-height: 1.62; color: var(--wk-body);
}
.wk-p + .wk-p { margin-top: 0.85em; }
.wk-p a {
  color: var(--wk-ink);
  border-bottom: 1px solid var(--wk-rule);
  transition: border-color 260ms ease;
}
.wk-p a:hover, .wk-p a:focus-visible { border-bottom-color: currentColor; }
.wk-p strong { font-weight: 700; color: var(--wk-ink); }

.wk-empty { margin: 0; color: #6a6a6a; font-size: 0.95rem; }

/* ---- Entrata: stessi movimenti del resto del sito (le classi le mette js/workshop.js) --- */
.wk-text > *,
.wk-entry > .wk-intro {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.wk-entry.in .wk-text > *,
.wk-entry.in > .wk-intro { opacity: 1; transform: none; }
/* Testata: entra da sola al caricamento (js/workshop.js la accende subito). */
.wk-head > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wk-head > * + * { transition-delay: 120ms; }
.wk-head.in > * { opacity: 1; transform: none; }

/* ---- Mobile: una colonna, la locandina sopra il proprio testo -------------------------- */
@media (max-width: 760px) {
  .wk {
    /* La corsia del monogramma NON si toglie qui, anche se una colonna sola invoglia a
       recuperare quei 35px: il monogramma è fisso in basso a sinistra e la pagina gli scorre
       sotto, quindi un'immagine a tutta larghezza gli passerebbe dietro — e un testo pure,
       diventando illeggibile sotto il `difference`. È la stessa scelta della home, dove il
       ritratto e il paragrafo della bio partono a destra del monogramma.
       In fondo alla pagina si lascia la sua banda intera. */
    padding-bottom: calc(var(--mono-band) + clamp(0.6rem, 2vh, 1.6rem));
  }
  .wk-head, .wk-entry {
    display: flex; flex-direction: column; align-items: stretch;
    gap: clamp(1.4rem, 4vw, 2rem);
  }
  /* Incolonnati, titolo e introduzione tornano a leggersi come un blocco solo: lo stacco
     largo della testata serve su desktop, dove separa due colonne affiancate, e qui
     lascerebbe il titolo per aria. Stesso passo del gap fra gli elementi. */
  .wk-head { margin-bottom: clamp(1.4rem, 4vw, 2rem); }
  /* Incolonnati, l'ordine di lettura è titolo → introduzione → locandina → testo: qui
     l'introduzione non ha nessuna locandina a cui allinearsi, e sopra la foto è dov'era
     prima che la griglia la spostasse. `order` può farlo perché è FRATELLO di `.wk-text`,
     non un suo figlio (vedi il template). */
  .wk-intro { order: -1; }
  /* Ferma: su uno schermo alto quanto una colonna di testo, una locandina appiccicata in
     cima si mangia metà della lettura. */
  .wk-figure { position: static; }
  .wk-figure img { max-height: 60vh; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-figure img, .wk-text > *, .wk-head > * { transition: none; }
}