/* ============================================================================
   PAGINE DI DETTAGLIO DEI PROGETTI — progetto.css
   ----------------------------------------------------------------------------
   Foglio condiviso da tutte le pagine dentro categorie/<categoria>/<progetto>/.
   Sta nella radice del sito, non dentro una categoria, perche' lo usano anche le
   pagine dei progetti scolastici. Si carica dopo ../../../styles.css (tavolozza,
   tipografia, barra, footer) e prima dell'eventuale foglio locale.

   L'impianto e' pensato per la lettura: una colonna stretta per il testo, con
   le immagini e la scheda dei dati che escono a tutta larghezza. La sfumatura
   arancione resta un accento, non riempie la pagina.

   Indice:
     1. Accento e misure
     2. Intestazione del progetto
     3. Scheda dei dati (contesto, anno, stack...)
     4. Spazi per le immagini
     5. Corpo del testo
     6. Navigazione in fondo
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. ACCENTO E MISURE
   Accento di default: arancione chiaro sul fondo scuro, piu' spento sul
   chiaro per non perdere contrasto. Nasce come accento della vecchia
   categoria Informatica (unita ai Progetti personali nell'ottobre 2026):
   oggi lo usano tutte le pagine dei progetti personali, che non hanno un
   foglio locale. I progetti scolastici lo ridichiarano nel loro style.css.
   ---------------------------------------------------------------------------- */

[data-theme="dark"] body { --accent-text: var(--ember-100); }
[data-theme="light"] body { --accent-text: var(--ember-300); }

[data-theme="dark"] body {
  --grad-page: linear-gradient(160deg, var(--ember-100) 6%, var(--ember-200) 52%, var(--ember-300) 96%);
}
[data-theme="light"] body {
  --grad-page: linear-gradient(160deg, var(--ember-200) 6%, var(--ember-300) 52%, var(--ember-400) 96%);
}

body {
  /* Due misure: una larga per gli elementi visivi, una stretta per il testo.
     Una riga lunga tutto lo schermo sarebbe illeggibile. */
  --maxw-doc: min(var(--maxw), 74rem);
  --maxw-testo: 62ch;
}

/* Contenitore comune: tutte le fasce della pagina usano questa misura. */
.proj-head,
.proj-facts,
.proj-shots,
.proj-body,
.proj-nav {
  max-width: var(--maxw-doc);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}


/* ----------------------------------------------------------------------------
   2. INTESTAZIONE DEL PROGETTO
   ---------------------------------------------------------------------------- */

.proj-head {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* Ritorno alla categoria. La freccia arretra in hover: indica la direzione
   senza aggiungere parole. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  color: var(--text-dim);
  transition: color 0.28s var(--ease);
}

.back-link:hover { color: var(--accent-text); }

.back-arrow {
  display: inline-block;
  transition: transform 0.28s var(--ease);
}

.back-link:hover .back-arrow { transform: translateX(-4px); }

/* Etichette: contesto e tecnologie principali. */
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.proj-tags li {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.proj-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 64;
  background: var(--grad-page);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Riga di apertura: dice in una frase di cosa si tratta. Piu' grande del testo
   corrente, cosi' funziona anche letta da sola. */
.proj-lead {
  max-width: var(--maxw-testo);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: pretty;
}


/* ----------------------------------------------------------------------------
   3. SCHEDA DEI DATI
   Elenco di definizioni vero (<dl>): ogni voce e' un dato con la sua etichetta,
   non una riga di testo travestita da tabella.
   ---------------------------------------------------------------------------- */

/* Due impianti, scelti dalla larghezza (ottobre 2026). Prima c'era una
   griglia a colonne uguali con solo 1px di distacco: un valore lungo
   ("Sviluppo completo, frontend e backend") andava a capo e finiva attaccato
   alla voce accanto, uno corto ("2026") lasciava un buco enorme.

   QUI, di base (telefono, tablet, portatile piccolo): griglia vera, colonne
   della stessa misura e uno stacco reale fra l'una e l'altra. Le voci vanno
   a capo per righe intere e restano incolonnate come una tabella.

   DA 75rem IN SU (sezione Desktop): fila che segue il contenuto, vedi li'. */
.proj-facts {
  display: grid;
  /* 9.5rem: a 1024px ci stanno cinque colonne, su un telefono due. */
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2rem);
  row-gap: clamp(1rem, 2.5vw, 1.4rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proj-facts div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.proj-facts dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.proj-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text);
}


/* ----------------------------------------------------------------------------
   4. IMMAGINI
   Due collocazioni diverse, stesso riquadro:

     .proj-shots  galleria in cima alla pagina, subito sotto la scheda dei dati.
                  Serve a far vedere il progetto prima di leggerne una riga.

     .sez-shot    singola immagine agganciata a una sezione del testo. Da 68rem
                  in su esce a destra e il testo le scorre accanto, cosi' lo
                  screenshot sta di fianco al paragrafo che lo descrive.

   Il riquadro .shot vuoto tiene lo spazio con una proporzione 16/10. Quando
   dentro ci va uno screenshot di telefono — verticale, quindi con proporzioni
   ben diverse — si aggiunge .shot--auto, che toglie la proporzione fissa e
   lascia decidere l'altezza all'immagine: niente ritagli, niente deformazioni.

   Per riempire un riquadro vuoto:
     <div class="shot shot--auto"><img src="nome.jpg" alt="..."></div>
   ---------------------------------------------------------------------------- */

.proj-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  justify-items: center;   /* screenshot verticale centrato nella sua colonna */
  justify-content: center; /* e le colonne centrate nella pagina              */
  align-items: start;      /* immagini di altezza diversa partono dall'alto   */
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Un telefono largo quanto la colonna non si guarda: si tiene stretto. */
.proj-shots figure {
  width: 100%;
  max-width: 19.5rem;
}

.shot {
  aspect-ratio: 16 / 10;   /* solo per i riquadri ancora vuoti */
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Screenshot vero: l'altezza la detta l'immagine, non il contenitore. Vale per
   qualunque proporzione — telefono in verticale o finestra in orizzontale.

   Il padding non e' decorativo. --radius-card vale 26-36px, tanto per un
   riquadro largo ma tantissimo per uno screenshot largo 256-336px: senza
   cornice l'angolo tondo taglia lo screenshot in diagonale proprio dove l'app
   ha gia' i suoi angoli tondi, e il risultato sembra un errore di rendering.
   Con la cornice lo screenshot sta staccato dagli angoli e si legge come uno
   schermo dentro una scocca.

   Il raggio interno e' quello esterno meno la cornice: cosi' le due curve sono
   concentriche invece di litigare. */
.shot--auto {
  --cornice: 0.5rem;      /* spessore della scocca; il fondo e' quello di .shot */
  aspect-ratio: auto;
  padding: var(--cornice);
}

.shot--auto img {
  height: auto;
  border-radius: calc(var(--radius-card) - var(--cornice));
}

/* Galleria di screenshot ORIZZONTALI (una finestra di browser, non un telefono).
   Il tetto di 21rem delle figure nasce per gli screenshot verticali: applicato a
   una finestra 16/9 la riduce a una striscia in cui non si legge niente. Qui le
   figure si prendono tutta la colonna del documento e restano incolonnate.

   Doppia classe non per capriccio ma per specificita': la regola che affianca
   le figure sta in fondo al foglio, dentro la media query dei 56rem, e con una
   sola classe vincerebbe lei per ordine di apparizione. */
.proj-shots.proj-shots--larghe { grid-template-columns: 1fr; }
.proj-shots.proj-shots--larghe figure { max-width: 100%; }


/* Riquadro che invece di un'immagine contiene una pagina viva (un <iframe>).
   Serve quando la cosa da mostrare si tocca: il confronto fra spazi vettoriali
   di rag-vs-graphrag si gira col mouse, e una figura ferma non lo racconta.

   L'altezza non puo' venire dal contenuto, perche' dentro l'iframe c'e' un
   documento suo che non spinge in fuori: si dichiara qui, alta abbastanza da
   vedere le due nuvole, con un tetto in rem perche' su uno schermo molto alto
   non diventi una colonna infinita. Il fondo e' lo stesso di .shot: mentre la
   pagina interna carica, il riquadro non lampeggia di bianco. */
.shot--vivo {
  aspect-ratio: auto;
  height: clamp(26rem, 68vh, 44rem);
  padding: var(--cornice, 0.5rem);
}

.shot--vivo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--radius-card) - 0.5rem);
  background: var(--surface-2);
}


/* Didascalia sotto al riquadro, facoltativa. */
.shot-cap {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-mute);
}

/* Link dentro la didascalia ("Aprilo a tutto schermo", "Apri il PDF"). La base
   azzera colore e sottolineatura di ogni <a>, e in mezzo a una riga di testo
   un link cosi' non si distingue dal resto: qui torna riconoscibile. Conta
   soprattutto dove il riquadro e' un <iframe>: se il browser non lo disegna
   (un PDF su telefono), questo link e' l'unica strada verso il contenuto.
   Vale anche per i link dentro i paragrafi del corpo (la pagina Chi sono
   rimanda da li' alle pagine di Prenotazioni APRA e del RAG). */
.shot-cap a,
.proj-body p a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Immagine dentro una sezione del corpo. Su schermo stretto sta nel flusso,
   centrata, in fondo alla sezione. */
.sez-shot {
  width: 100%;
  max-width: 19rem;
  margin: 1.75rem auto 0;
}

/* Variante per screenshot orizzontali (una finestra, non un telefono).
   Mandarli a destra in float li ridurrebbe a una striscia illeggibile: restano
   nel flusso e prendono tutta la colonna di lettura, allineati al testo.

   Si usa su una sezione SENZA .con-figura, mettendo la figura in fondo alla
   sezione: cosi' non la tocca nessuna delle regole di float qui sotto. */
.sez-shot--larga {
  max-width: var(--maxw-testo);
  margin-inline: 0;
}

/* Nell'HTML la figura sta subito dopo il titolo, perche' e' li' che serve
   quando esce a destra (vedi piu' sotto, da 68rem in su). Finche' la sezione e'
   una colonna sola, pero', un'immagine infilata tra il titolo e il primo
   paragrafo spezza la lettura: la si manda in fondo con order. */
@media (max-width: 67.999rem) {
  .proj-body section.con-figura {
    display: flex;
    flex-direction: column;
  }

  .proj-body section.con-figura .sez-shot {
    order: 1;
    align-self: center;
  }
}


/* ----------------------------------------------------------------------------
   5. CORPO DEL TESTO
   ---------------------------------------------------------------------------- */

.proj-body {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Le sezioni non sono divise da righe o trattini: a separarle bastano lo spazio
   bianco e il numero che ognuna porta davanti al titolo. Il contatore e' del
   CSS, quindi aggiungere o spostare una sezione non obbliga a rinumerare a mano
   l'HTML. */
.proj-body { counter-reset: sezione; }

.proj-body section {
  position: relative;
  counter-increment: sezione;
}

.proj-body section + section { margin-top: clamp(2.75rem, 6vw, 4.25rem); }

.proj-body h2 {
  max-width: var(--maxw-testo);
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 28;
  color: var(--text);
}

/* Indice della sezione: due cifre monospaziate nel colore d'accento. Su schermo
   stretto sta sopra al titolo, su schermo largo esce nel margine sinistro e il
   titolo resta allineato al testo. */
.proj-body h2::before {
  content: counter(sezione, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-variation-settings: normal;
  color: var(--accent-text);
}

.proj-body p {
  max-width: var(--maxw-testo);
  color: var(--text-dim);
  text-wrap: pretty;
}

.proj-body p + p { margin-top: 0.9rem; }

/* Frammenti di codice e valori letterali dentro al testo: leggermente rientrati
   sul fondo, senza diventare un blocco a se'. */
.proj-body code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--text);
}

/* Sottotitolo dentro una sezione. Serve quando una sezione racconta due cose
   che non meritano una sezione numerata a testa (la prima pagina a usarlo e'
   rag-vs-graphrag, dove la descrizione contiene anche il racconto di come le
   due pipeline sono finite nella stessa web app). Non e' numerato: i numeri
   restano agli <h2>, altrimenti l'indice a margine perde senso. */
.proj-body h3 {
  max-width: var(--maxw-testo);
  margin: 1.9rem 0 0.6rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}


/* Elenchi puntati: il punto e' un trattino arancione, non un pallino di
   sistema. Allineato al testo con un rientro esplicito. */
.proj-list {
  max-width: var(--maxw-testo);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.proj-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-dim);
}

.proj-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.85rem;
  height: 1px;
  background: var(--ember-300);
}

.proj-list strong {
  font-weight: 600;
  color: var(--text);
}

/* Tabella tecnica: stessa logica dell'elenco di definizioni, ma per righe
   ripetute (componente / tecnologia). */
.proj-table {
  width: 100%;
  max-width: var(--maxw-testo);
  margin-top: 1.25rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.proj-table th,
.proj-table td {
  padding: 0.65rem 0.9rem 0.65rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.proj-table th {
  width: 40%;
  font-weight: 500;
  color: var(--text);
}

.proj-table td { color: var(--text-dim); }


/* ----------------------------------------------------------------------------
   6. NAVIGAZIONE IN FONDO
   Un solo passo indietro, alla categoria: da qui non si va piu' in profondita'.
   ---------------------------------------------------------------------------- */

.proj-nav {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.proj-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--text-dim);
  transition: color 0.28s var(--ease);
}

.proj-nav a:hover { color: var(--accent-text); }


/* ----------------------------------------------------------------------------
   7. SCHERMI LARGHI
   ---------------------------------------------------------------------------- */

@media (min-width: 56rem) {
  /* Due o tre immagini affiancate, a seconda di quante ne ha la pagina:
     bastano a mostrare l'app senza trasformarla in una galleria. */
  /* Tetto a 19.5rem e non 21: la fascia e' larga circa 65rem, e tre colonne
     da 21 piu' gli stacchi (67rem) mandavano a capo la terza schermata di
     telefono (Health Tracker). Con 19.5 ne stanno tre affiancate. */
  .proj-shots { grid-template-columns: repeat(auto-fit, minmax(15rem, 19.5rem)); }
}

@media (min-width: 68rem) {
  /* Il numero di sezione esce nel margine: la colonna di lettura resta pulita e
     l'indice si scorre con l'occhio senza entrare nel testo. */
  .proj-body section { padding-left: 4.75rem; }

  .proj-body h2::before {
    position: absolute;
    top: 0.5rem;
    left: 0;
    margin-bottom: 0;
  }

  /* Sezione con immagine a fianco.

     La larghezza e' fissata a 58rem apposta: tolti i 4.75rem del numero e i
     19rem che si prende l'immagine (16 di figura + 3 di stacco), al testo
     restano circa 34rem, cioe' i 62ch di riga leggibile usati ovunque. Cosi'
     l'immagine si appoggia al bordo destro del testo invece di galleggiare
     lontana dall'altra parte della pagina.

     Il float e' voluto: il testo gli scorre accanto e, quando la sezione e'
     piu' lunga dell'immagine, riprende la larghezza piena sotto di essa. */
  .proj-body section.con-figura { max-width: 58rem; }

  .proj-body section.con-figura .sez-shot {
    float: right;
    width: 16rem;
    max-width: none;
    margin: 0.35rem 0 1.5rem 3rem;
  }

  /* Contiene il float, altrimenti l'immagine sborda nella sezione successiva. */
  .proj-body section.con-figura::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* Da 75rem le cinque voci stanno su una riga sola: qui la griglia lascerebbe
   colonne uguali, larghe per "2026" quanto per "Flutter · ASP.NET Core ·
   PostgreSQL · Docker". Diventa una fila che segue il contenuto: ogni voce e'
   larga quanto il suo testo fino a un tetto (oltre va a capo), e
   space-between divide lo spazio avanzato in parti uguali FRA le voci, cosi'
   la distanza fra la fine di una e l'inizio della successiva e' la stessa in
   tutta la riga e in tutte le pagine. Sotto i 75rem la quinta voce di
   IronLog, Prenotazioni APRA e RosaLog scenderebbe da sola nella riga sotto:
   li' resta la griglia. */
@media (min-width: 75rem) {
  .proj-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 2.5rem;
  }

  .proj-facts div {
    flex: 0 1 auto;
    max-width: 13.5rem;
  }
}