/* 04 · Brand promises — spec §4 "04". */
@layer components {
  .promises {
    background-color: var(--ink-900);
    padding-block: var(--section-pad-tight);
  }

  /* 1240px CONTENT width, not the standard 1200px container — spec: the
     container is a touch too narrow for the two-line titles. Sized the same
     way .site-container sizes its own 1200px content (outer box = content +
     2×gutter, so the gutter doesn't eat into the stated figure) — an earlier
     version of this rule set max-width:1240px directly and THEN subtracted
     padding from it, which actually gave 1160px of content and was too
     narrow for "Thoughtfully sourced ingredients" to wrap at 2 lines. */
  .promises__row {
    max-width: calc(1240px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .promise {
    display: flex;
    align-items: flex-start; /* icon top-aligned with the text block */
    gap: 24px;
    padding-right: 16px;
    min-width: 0; /* without this, a grid item's default min-width:auto floors it at
      its content's min-content size, breaking "equal columns" once any one
      column's text needs more room than an even 1fr share (see ingredients.css,
      same bug, caught there first because it was severe enough to overflow the page) */
  }

  .promise:not(:first-child) {
    padding-left: 28px;
    border-left: 1px solid var(--gold-hairline);
  }

  .promise__icon {
    flex: none;
    color: var(--gold-400);
  }

  .promise__title {
    margin: 0;
  }

  .promise__body {
    margin: 10px 0 0;
  }

  /* Tablet: 2x2, hairlines between every cell (vertical between columns,
     horizontal between the two rows). */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .promises__row {
      grid-template-columns: repeat(2, 1fr);
      row-gap: var(--space-6);
    }

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

    .promise:nth-child(2n) {
      padding-left: 28px;
      border-left: 1px solid var(--gold-hairline);
    }

    .promise:nth-child(n + 3) {
      padding-top: var(--space-5);
      border-top: 1px solid var(--gold-hairline);
    }
  }

  /* Mobile: 1 column (icon left, text right — same internal row as desktop),
     horizontal hairlines only. */
  @media (max-width: 767.98px) {
    .promises__row {
      grid-template-columns: 1fr;
      row-gap: var(--space-5);
    }

    .promise:not(:first-child) {
      padding-left: 0;
      border-left: none;
      padding-top: var(--space-5);
      border-top: 1px solid var(--gold-hairline);
    }
  }
}