/* START: portfolio-page.css (minimal, reuse site style) */
.portfolio-page .page-wrap{
  max-width: var(--page-max, 1200px);
  margin: 0 auto;
  /* §4.2 del DESIGN-CONTRACT — respiro sotto l'header: 24px (--ds-space-6).
     ⚠️ La formula vecchia sbagliava di due cose: usava 18px invece di 24, e
     soprattutto DIMENTICAVA che la pill non parte da zero — sta a
     `--ds-header-gap` (14px) dall'alto. 66+18 = 84, ma il fondo della pill
     e' a 14+66 = 80 ⇒ restavano QUATTRO pixel, e l'intestazione sembrava
     infilata sotto la barra. Ora: 14 + 66 + 24 = 104. */
  padding: calc(var(--ds-header-gap, 14px) + var(--ds-header-h, 66px) + var(--ds-space-6))
           clamp(14px, 3vw, 28px) 48px;
}

.portfolio-head{
  display: grid;
  gap: 16px;
  align-items: end;
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 880px){
  .portfolio-head{ grid-template-columns: 1fr; }
}

.portfolio-title{
  margin: 0;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.portfolio-lead{
  margin: 6px 0 0;
  color: var(--ds-c-text-secondary);
  max-width: 70ch;
}

.portfolio-controls{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 160px;
}
@media (max-width: 520px){
  .portfolio-controls{ grid-template-columns: 1fr; }
}

.pf-field{ display:grid; gap:6px; }
.pf-label{
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ds-c-text-secondary);
}

.pf-input, .pf-select{
  height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.78);
  outline: none;
}

.pf-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.pf-card{
  grid-column: span 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 240px;
}
@media (max-width: 980px){ .pf-card{ grid-column: span 6; } }
@media (max-width: 640px){ .pf-card{ grid-column: span 12; } }

.pf-media{
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.06);
}
.pf-media img, .pf-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.pf-meta{
  padding: 12px 12px 14px;
  display: grid;
  gap: 6px;
}

.pf-title{
  margin: 0;
  font-size: .98rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pf-line{
  font-size: .86rem;
  color: var(--ds-c-text-secondary);
}

.pf-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-tag{
  font-size: .72rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
}

.pf-empty{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  color: var(--ds-c-text-secondary);
}

.pf-d-kicker { margin: 12px 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; font-size: 12px; }
.pf-d-subhead { margin: 6px 0 10px; opacity: .85; }
.pf-d-facts{
  margin: 12px 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 10px 24px;
}
.pf-d-fact{
  display: grid;
  gap: 2px;
}

.pf-d-fact dt{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .65;
}

.pf-d-fact dd{
  margin: 0;
  font-size: 14px;
}
.pf-d-facts{
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.pf-d-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  margin-top:32px;
}

.pf-d-gallery img,
.pf-d-gallery video{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  max-height:520px;
  object-fit:contain;
}

@media (max-width: 900px){
  .pf-d-gallery{
    grid-template-columns:1fr;
  }
}

/* --- Gallery: frame uniforme senza crop (NO cover) --- */
.pf-d-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* frame a altezza controllata */
.pf-d-gallery .pf-d-media{
  height: clamp(220px, 38vw, 420px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* media dentro il frame: NON taglia, NON stira */
.pf-d-gallery .pf-d-media img,
.pf-d-gallery .pf-d-media video{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* click-to-view (solo immagini) */
.pf-d-gallery .pf-media-open{
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

/* lightbox */
.pf-lightbox{
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
}

.pf-lightbox img{
  max-width: min(1100px, 92vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.pf-media-viewer{
  padding: 8px;
}
.pf-media-viewer img{
  width: 100%;
  height: min(70vh, 720px);
  object-fit: contain; /* <-- niente crop */
  display: block;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}


/* END: portfolio-page.css (minimal, reuse site style) */
/* ══════════════════════════════════════════════════════════════════════════
   PAGINA PROGETTI IN SCURO — 11/09/2026

   ⛔ David, h07:21: «la pagina dei progetti e' illeggibile in dark mode».
   Misurato sulla pagina viva, non dedotto dal codice:
     .pf-card   fondo rgba(255,255,255,.75)  testo rgb(232,230,224)  →  1,25
     .pf-title / .pf-tag   idem                                     →  1,25
     .portfolio-lead / .pf-label   rgba(0,0,0,.65) su #0C0C0C       →  1,07
   Cioe' schede BIANCHE con sopra il testo CHIARO del tema scuro, e sotto le
   etichette nere su nero. Non «poco leggibile»: illeggibile, 1,07 e' il nulla.

   🔑 LA CAUSA PRIMA, e vale per tutto il sito:
   questo foglio chiedeva quattro volte `var(--ds-c-text-muted, rgba(0,0,0,.65))`.
   ⚠️ `--ds-c-text-muted` NON E' DICHIARATA DA NESSUNA PARTE — cercata in tutti
   gli `assets/css/`: 5 usi, 0 dichiarazioni. Quindi ogni volta vinceva il
   RIPIEGO, che e' nero fisso e non sa niente del tema. Una variabile che vive
   solo dentro il proprio fallback non e' una variabile: e' un colore scritto a
   mano con la cerimonia di un token, e cambia solo dove nessuno guarda.
   ⇒ Qui sopra sono diventate `--ds-c-text-secondary`, che esiste davvero e ha
   un valore per ciascun tema. (L'altro uso rimasto e' in `megamenu.css`:
   stesso difetto, segnalato nel report — non lo tocco a fiera aperta.)

   Restano i LETTERALI chiari, che nessun token puo' correggere da solo: si
   ridichiarano qui, e solo qui.
   ══════════════════════════════════════════════════════════════════════════ */

body.ds-dark .pf-input,
body.ds-dark .pf-select{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: var(--ds-c-text);
}
body.ds-dark .pf-input::placeholder{ color: var(--ds-c-text-tertiary); opacity: 1; }

body.ds-dark .pf-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}
body.ds-dark .pf-media{ background: rgba(255,255,255,.06); }
body.ds-dark .pf-tag{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: var(--ds-c-text-secondary);
}
body.ds-dark .pf-empty{ border-color: rgba(255,255,255,.20); }
body.ds-dark .pf-d-facts{ border-top-color: rgba(255,255,255,.10); }
body.ds-dark .pf-d-gallery .pf-d-media,
body.ds-dark .pf-media-viewer img{ background: rgba(255,255,255,.05); }

/* ═══ 12/09/2026 — I PUNTI FORTI DEL DOSSIER ════════════════════════════════
   ⛔ `main.js` li emette come `<span class="pf-d-chip">` dentro `.pf-d-chips`
   dal giorno in cui il dossier e' nato, ma quelle due classi **non erano in
   nessun foglio di stile**: tutte le altre `.pf-d-*` c'erano, queste no.
   Risultato in pagina: quattro frasi incollate una all'altra, senza nemmeno
   uno spazio — «…per chroma keyFocheggi rapidi…».
   Non si vedeva nell'elenco dei progetti: bisognava aprire una scheda.
   🔑 Una classe emessa dal JS e mai definita nel CSS non da' errore da nessuna
   parte: il difetto vive tutto e solo negli occhi di chi legge. */
.pf-d-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}
.pf-d-chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-border, rgba(255,255,255,.14));
  background: var(--ds-c-surface-2, rgba(255,255,255,.04));
  color: var(--ds-c-text-secondary);
  font: 500 13px/1.25 "Oswald", system-ui, sans-serif;
  letter-spacing: .02em;
}
/* il pallino del marchio al posto del trattino: sono punti forti, non un elenco */
.pf-d-chip::before{
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ds-c-accent, #F4B532);
  flex: 0 0 auto;
}


/* ═══ 13/09/2026 — LA SCHEDA DEL SINGOLO PROGETTO ════════════════════
   ⛔ Sei classi che `main.js` emette da sempre non erano definite in NESSUN
   foglio: `.pf-d-page`, `.pf-d-page-title`, `.pf-d-page-sub`, `.pf-d-headline`,
   `.pf-d-lead`, `.pf-d-story`. La pagina del progetto girava coi default del
   browser — nessun ingombro massimo, nessuna gerarchia, interlinea di sistema.
   Trovate confrontando **tutte** le classi emesse contro tutte le definite:
   cercarne una alla volta non le avrebbe mai fatte saltare fuori tutte.
   🔑 Stessa lezione dei chip di ieri: una classe emessa e mai definita non
   da' errore da nessuna parte — il difetto vive solo negli occhi di chi legge. */

.pf-d-page{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 72px;
}
.pf-d-page-title{
  margin: 0 0 6px;
  font: 600 clamp(28px, 4.2vw, 44px)/1.12 "Oswald", system-ui, sans-serif;
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--ds-c-text-primary);
}
/* luogo · anno: è un'etichetta, non un sottotitolo — sta sottovoce */
.pf-d-page-sub{
  margin: 0 0 26px;
  font: 400 14px/1.4 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-c-text-secondary);
}
.pf-d-headline{
  margin: 10px 0 4px;
  font: 600 clamp(21px, 2.6vw, 28px)/1.2 "Oswald", system-ui, sans-serif;
  text-wrap: balance;
  color: var(--ds-c-text-primary);
}
.pf-d-story{
  /* prosa, non interfaccia: ~68 battute per riga è dove l'occhio ritrova da
     solo l'inizio della riga dopo, senza rileggere quella appena finita */
  max-width: 62ch;
  margin-top: 22px;
}
.pf-d-story p{
  margin: 0 0 14px;
  font: 400 16px/1.62 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ds-c-text-secondary);
}
.pf-d-lead{
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--ds-c-text-primary) !important;
}

/* il titolo di sezione — il pezzo che David ha chiesto oggi.
   ⚠️ Non è un chip e non è un titolo di pagina: è un segnale di paragrafo.
   Il filetto a sinistra lo distingue dal corpo senza aggiungere un altro
   riquadro alla pagina («occhio a non saturare la schermata», David 12/09). */
.pf-d-sec-title{
  margin: 26px 0 8px;
  padding-left: 11px;
  border-left: 2px solid var(--ds-c-accent, #F4B532);
  font: 600 13px/1.3 "Oswald", system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ds-c-text-primary);
}
.pf-d-sec-title:first-child{ margin-top: 0; }