/* ============================================================
   Scala tipografica mobile — condivisa da tutte le pagine.
   Va linkata PER ULTIMA, dopo lo <style> inline e i css di pagina:
   quelle regole usano !important, e qui serve vincere per ordine.
   Sopra i 760px non c'e' nessuna regola: il desktop non e' toccato.
   ============================================================ */
@media (max-width: 760px) {

  /* corpo del testo: da 16 a 15.
     Il selettore e' ripetuto tre volte apposta: le pagine hanno regole del
     tipo `.pg-mangiare .prose { ... !important }`, piu' specifiche di un
     `.prose` semplice. A parita' di !important vince la specificita', non
     l'ordine del file: servono tre classi per stare davanti. */
  .prose.prose.prose,
  .prose.prose.prose p,
  .engine__copy.engine__copy.engine__copy,
  .ooh-section__copy.ooh-section__copy.ooh-section__copy,
  .case-meta__desc.case-meta__desc.case-meta__desc dd,
  .pillcar__card.pillcar__card.pillcar__card dd,
  .sg__tag.sg__tag.sg__tag em,
  .fbs__note.fbs__note.fbs__note {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* titoli di sezione: da 26/28 a 24 */
  .h2.h2.h2 { font-size: 24px !important; line-height: 1.08 !important; }

  /* ============================================================
     Header unica — 54px fissi su tutte le pagine.
     Prima: 57 (index/about/case base), 55 (prada), 54 (mangiare/atomic),
     53 (disney). Il selettore triplo batte i `.pg-x .nav` e i
     `.pg-x[data-snap] .nav` di pagina (a parita', vince l'ordine: questo
     file e' linkato per ultimo). Il background resta quello di pagina.
     ============================================================ */
  .nav.nav.nav { height: 54px; padding: 0 var(--gutter); }
  .nav.nav.nav.solid { padding-block: 0; }
  .nav.nav.nav .nav__brand { font-size: 15px; }
  .nav.nav.nav .nav__links { gap: 4px; font-size: 14px; }
  .nav.nav.nav .nav__links a { padding: 16px 8px; }
  .nav.nav.nav .nav__links a:last-child { padding-right: 0; }

  /* ============================================================
     Intro unificata delle pagine progetto con cover (case-intro).
     Stessa cover per tutte: 4:3, min(75vw, 50svh) — il crop di
     riferimento scelto per Mangiare vale ovunque. Il blocco titolo
     prende lo spazio che resta e la meta (filo + AGENCY/YEAR) e'
     appoggiata in fondo alla schermata, come su Mangiare.
     Le classi doppie servono a battere i blocchi `.pg-x[data-snap] ...`
     dei css di pagina.
     ============================================================ */
  body[data-snap] main > section.case-intro.case-intro {
    padding-block: 54px 0;
  }
  body[data-snap] .case-intro__cover.case-intro__cover {
    flex: 0 0 auto;
    height: min(75vw, 50svh);
    min-height: 0;
    margin: 0;
  }
  body[data-snap] .case-intro__head.case-intro__head {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 24px;
  }
  body[data-snap] .case-intro__head .case-head__brand.case-head__brand { font-size: 14px; margin-bottom: 5px; }
  body[data-snap] .case-intro__head .case-head__title.case-head__title { font-size: 33px; line-height: .98; letter-spacing: -.028em; }
  body[data-snap] .case-intro__head .case-meta.case-meta { margin-top: auto; padding-top: 13px; gap: 11px; }
  body[data-snap] .case-intro__head .case-meta.case-meta dt { font-size: 10px; }
  body[data-snap] .case-intro__head .case-meta.case-meta dd { font-size: 14px; }
  /* l'About dell'intro e' testo di servizio: piu' piccolo del corpo */
  body[data-snap] .case-intro__head .case-meta__desc.case-meta__desc.case-meta__desc dd {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* a capo solo mobile: <br class="br-m"> nei punti decisi a mano */
  br.br-m { display: inline; }
}

/* Il br mobile non esiste da desktop: nascosto sopra i 760px.
   (Unica regola desktop del file: tocca solo i <br class="br-m">
   aggiunti apposta, nessun elemento preesistente.) */
@media (min-width: 761px) {
  br.br-m { display: none; }
}