/* ==========================================================================
   IL TEMPO DELLE FRITTELLE — stili della pagina.

   Questo file è di questo progetto e basta: lo carica solo frittelle.html.
   Se cambi qualcosa qui NON cambia sugli altri lavori, e viceversa: ogni
   progetto avrà il suo lavoriN.css.

   Quello che NON sta qui perché è di tutto il sito: colori, font, sistema
   di titoli, bottoni, header e footer stanno in assets/site.css.
   ========================================================================== */

/* IL TITOLO DEL PROGETTO — stessa scala display del resto del sito:
   Clash Display maiuscolo. Il testo lo scrive lavori1.js. */
#p-title{font-family:"Clash Display","Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(2.35rem,5vw,3.6rem);line-height:1;
  letter-spacing:-.012em;text-transform:uppercase;color:var(--cream)}
@media (max-width:699px){
  #p-title{font-size:clamp(1.72rem,7.4vw,2.3rem)}
}

/* LA TESTATA — su questo progetto è centrata: briciole, occhiello, titolo,
   descrizione e tag tutti in mezzo. */
.p-head{text-align:center}
.p-head .crumbs,
.p-head .p-tags{justify-content:center}
.p-head .lede{margin-left:auto;margin-right:auto}
.p-head #p-title{max-width:16ch;margin-left:auto;margin-right:auto}

/* I TAG — etichette, non filtri: niente hover, non si cliccano. */
.p-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.6vw,32px);list-style:none}
.p-tags li{padding:11px 22px;border:1px solid var(--line-soft);border-radius:999px;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);white-space:nowrap}
@media (max-width:699px){
  .p-tags{gap:8px}
  .p-tags li{padding:9px 16px;font-size:.6rem;letter-spacing:.12em}
}

/* IL VIDEO */
.p-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;
  margin-top:34px;border:1px solid var(--line-soft)}
.p-video video{width:100%;height:100%;object-fit:cover;display:block}

/* LA STRISCIA DEI DATI — sotto il video: filetto sottile, etichetta piccola in
   Montserrat, valore grosso in Clash. */
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3.4vw,54px);margin-top:clamp(34px,4vw,52px)}
.p-meta > div{border-top:1px solid var(--line-soft);padding-top:15px}
.p-meta dt{font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:12px}
.p-meta dd{font-family:"Clash Display","Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.05rem,2vw,1.7rem);line-height:1.04;
  letter-spacing:-.015em;text-transform:uppercase;color:var(--cream)}
@media (max-width:699px){
  .p-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
}

/* I TRE BOX — cliente, obiettivo, cosa abbiamo fatto. */
.p-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;margin-top:34px}
@media (max-width:699px){.p-facts{grid-template-columns:1fr}}
.p-fact{background:var(--ink);padding:clamp(20px,2.6vw,28px)}
.p-fact h4{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.p-fact p{font-size:.92rem;color:var(--muted)}

/* IL RACCONTO IN TRE TEMPI — sotto i box: niente riquadro, solo un filetto,
   il titolo grosso in Clash e il testo sotto. */
.p-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.6vw,58px);margin-top:clamp(40px,5vw,62px)}
.p-steps > div{border-top:1px solid var(--line-soft);padding-top:18px}
.p-steps h3{font-family:"Clash Display","Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.15rem,2.1vw,1.75rem);line-height:1.04;
  letter-spacing:-.015em;text-transform:uppercase;color:var(--cream);margin-bottom:16px}
.p-steps p{font-size:.92rem;line-height:1.62;color:var(--muted);max-width:42ch}
@media (max-width:820px){
  .p-steps{grid-template-columns:1fr;gap:30px}
  .p-steps p{max-width:none}
}

/* LA GALLERIA — foto orizzontali, com'è il girato: 3840x2160. */
.p-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px);margin-top:34px}
@media (max-width:900px){.p-gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.p-gal{grid-template-columns:1fr}}
.p-gal figure{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line-soft)}
.p-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ez)}
.p-gal figure:hover img{transform:scale(1.06)}
.p-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(8,7,5,.9),transparent);font-size:.75rem;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ez)}
.p-gal figure:hover figcaption{opacity:1;transform:none}

/* IN FONDO — torna all'elenco e chiamata all'azione. */
.p-nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line-soft)}

/* LA RAMPA DEI PULSANTI D'AZIONE — `--grad-cta`, la stessa di .hcta in home
   e delle fasce .cta-band in videomaking e fotografia. Non è un gradient
   nuovo: è quello che il sito usa già per i pulsanti importanti.
   Il --grad pieno che arriva di serie passa per l'arancio e finisce su un
   magenta acceso: su un pulsante di questa misura urla troppo. */
.p-nav .btn.solid{background:var(--grad-cta);background-origin:border-box}
.p-nav .btn.ghost::after{background:var(--grad-cta)}