/* ==========================================================================
   TRUST BAR — a slim proof strip, usually under the hero
   ==========================================================================
   Article `band trust-bar`, one text element: <p>label</p><ul><li>…</li></ul>.
   Items are separated by small diamonds in the text colour.
   Colours: --trust-bg (default --accent; a gradient is fine) and --trust-fg
   (default --text-on-dark; a light accent sets it to --heading).
   ========================================================================== */
.trust-bar {
  /* !important: beats the band/bg-* vertical rhythm, which this strip must not take */
  padding-block: clamp(18px, 2vw, 32px) !important;
  background: var(--trust-bg, var(--accent));
  color: var(--trust-fg, var(--text-on-dark));

  .rte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px clamp(24px, 3.4vw, 54px);
  }
  p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    font-weight: 700;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(20px, 2.6vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 500;
  }
  li {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    margin: 0;
  }
  li + li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: currentColor;
    transform: rotate(45deg);
  }
}

@media (max-width: 600px) {
  .trust-bar ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  /* In the 2-col grid, keep a diamond only between the columns — before the
     right-hand item of each row (2 and 4), not at the start of the 2nd row (3). */
  .trust-bar li + li::before { content: none; }
  .trust-bar li:nth-child(2)::before,
  .trust-bar li:nth-child(4)::before { content: ""; }
}