/* 06 · Ingredients — spec §4 "06". */
@layer components {
  .ingredients {
    background-color: var(--sand-100);
    padding-block: var(--section-pad);
  }

  .ingredients__head {
    margin-bottom: 32px; /* spec: below the title (the mockup's 20px is too tight) */
  }

  .ingredients__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .ingredient {
    display: flex;
    align-items: center; /* "each item is a row, vertically centred" */
    gap: 20px;
    padding-inline: 20px;
    min-width: 0; /* a grid item's default min-width:auto floors it at its content's
      min-content size — at 1024px "Dark chocolate" 's content needed more than
      an even 1fr share, so the columns went uneven and the row overflowed the
      page instead of staying "equal columns" and just wrapping text more. */
  }

  .ingredient:first-child {
    padding-left: 0;
  }

  .ingredient:last-child {
    padding-right: 0;
  }

  .ingredient:not(:first-child) {
    border-left: 1px solid var(--sand-300);
  }

  .ingredient__image {
    flex: none;
    width: 120px;
    height: 80px;
    object-fit: contain;
    object-position: left center;
  }

  .ingredient__name {
    margin: 0;
  }

  /* Spec: Lato 14px/1.4, --text-on-light-body, max-width 160px — doesn't
     match any shared type role exactly (closest, .type-small, is 1.45 line
     height and the muted colour, not body), so this composes the same
     existing tokens directly rather than force-fitting the wrong one. */
  .ingredient__description {
    margin: 8px 0 0;
    max-width: 160px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--text-on-light-body);
  }

  /* Tablet + mobile: 2x2 grid with a full hairline grid between cells (no
     divider instruction is given at these tiers, so this mirrors Brand
     Promises' own tablet treatment — the other "4 equal items, hairline
     dividers" section — for visual consistency across the site). */
  @media (max-width: 1023.98px) {
    .ingredients__row {
      grid-template-columns: repeat(2, 1fr);
      row-gap: var(--space-6);
    }

    .ingredient:not(:first-child) {
      border-left: none;
      padding-left: 20px;
    }

    .ingredient:nth-child(2n) {
      border-left: 1px solid var(--sand-300);
      padding-left: 20px;
    }

    .ingredient:nth-child(n + 3) {
      border-top: 1px solid var(--sand-300);
      padding-top: var(--space-5);
    }
  }

  /* Mobile only: image above centred text, instead of image-left/text-right. */
  @media (max-width: 767.98px) {
    .ingredient {
      flex-direction: column;
      text-align: center;
    }

    .ingredient__image {
      object-position: center; /* was left-aligned for the row layout; centre it now the item is a column */
    }

    .ingredient__description {
      max-width: none;
    }
  }
}