/**
 * Stili per il Paragraph "ingredienti"
 *
 * Includere questo file nel tuo tema Drupal tramite
 * IL_TUO_TEMA.libraries.yml  oppure incollarlo nel foglio
 * di stile principale del tema.
 *
 * Struttura HTML generata dal template:
 *
 *   <div class="paragraph paragraph--type--ingredienti ingrediente-row">
 *     <span class="ingrediente-qty">  1        </span>
 *     <span class="ingrediente-unit"> spicchio  </span>
 *     <span class="ingrediente-name"> aglio     </span>
 *   </div>
 */

/* ------------------------------------------------------------------ */
/* Riga ingrediente — contenitore orizzontale                          */
/* ------------------------------------------------------------------ */

.ingrediente-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;       /* allinea i testi alla linea base     */
  gap: 0.35em;                 /* spazio tra i 3 token                */
  padding: 0.25em 0;
  border-bottom: 1px solid #ececec;
  line-height: 1.5;
}

.ingrediente-row:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Quantità                                                            */
/* ------------------------------------------------------------------ */

.ingrediente-qty {
  flex: 0 0 auto;              /* non si allunga, non si restringe    */
  min-width: 2em;              /* allinea colonna numerica            */
  text-align: right;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}

/* Azzera margini/padding dei field wrapper Drupal dentro qty */
.ingrediente-qty .field {
  display: inline;
}

/* ------------------------------------------------------------------ */
/* Unità di misura                                                     */
/* ------------------------------------------------------------------ */

.ingrediente-unit {
  flex: 0 0 auto;
  min-width: 5em;              /* colonna fissa per le unità          */
  font-style: italic;
  color: #555;
  white-space: nowrap;
}

/* Il taxonomy term viene renderizzato come link da Drupal —
   rimuoviamo la sottolineatura se non è desiderata              */
.ingrediente-unit a {
  color: inherit;
  text-decoration: none;
}

.ingrediente-unit .field {
  display: inline;
}

/* ------------------------------------------------------------------ */
/* Nome ingrediente                                                    */
/* ------------------------------------------------------------------ */

.ingrediente-name {
  flex: 1 1 auto;              /* occupa lo spazio rimanente          */
  color: #1a1a1a;
}

.ingrediente-name .field {
  display: inline;
}

/* ------------------------------------------------------------------ */
/* Quando qty e/o unita sono vuoti (ingrediente senza quantità)       */
/* ------------------------------------------------------------------ */

.ingrediente-row:not(:has(.ingrediente-qty)) .ingrediente-name,
.ingrediente-row:not(:has(.ingrediente-unit)) .ingrediente-name {
  margin-left: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive: sotto 480 px si impila verticalmente se serve          */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .ingrediente-row {
    flex-wrap: wrap;
    gap: 0.2em 0.4em;
  }

  .ingrediente-qty,
  .ingrediente-unit {
    min-width: unset;
  }
}