/* ============================================================
   MALSCH ITALIA — pagina «Chi siamo / la nostra ricetta»
   Nessun componente nuovo se ne esiste già uno: gli ingredienti
   riusano .pillar, i testi lunghi restano dentro --measure (720px)
   perché la regola su `p` di main.css li limita già da sola.
   Qui c'è solo ciò che la pagina aggiunge davvero: lo scarto sotto
   l'header fisso, la foto di apertura e la lista numerata dei passaggi.
   ============================================================ */

/* Apertura: il primo capoverso fa da occhiello, come .intro negli archivi */
.ricetta__intro > p:first-child {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
  line-height: 1.5;
}
.ricetta__intro > p { margin-bottom: var(--space-3); }
.ricetta__intro em { font-style: italic; }

/* Foto di apertura: a tutta larghezza del contenitore, didascalia sotto */
.ricetta__foto {
  margin: var(--section-gap) 0 0;
}
.ricetta__foto img { width: 100%; }
/* didascalia in tono minore, NON in maiuscoletto: è una frase, non
   un'etichetta, e .label a tutte maiuscole a quella lunghezza si legge male */
.ricetta__didascalia {
  display: block;
  margin-top: var(--space-1);
  max-width: var(--measure);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

/* I quattro ingredienti sono blocchi di testo, non card: senza righe né
   riquadri l'unica cosa che li separa è lo spazio, e 24px non bastano. */
#ingredienti .grid { row-gap: var(--space-6); }

/* Il processo: <ol> semantico, numerazione scritta a mano come nei pilastri
   (il marcatore di lista di default non si può allineare alla griglia). */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: var(--space-6);
}
.step__n {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-brand-dark);
  margin-bottom: var(--space-2);
}
.step h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}
.step p {
  color: var(--color-text-soft);
  margin: 0;
}

/* Sotto i 700px la griglia è già a una colonna: serve solo tenere
   i blocchi staccati fra loro senza fare comparire righe o box. */
@media (max-width: 699px) {
  .ricetta__foto { margin-top: var(--space-8); }
}