/* Trust explainer view only. */

@layer components {

  .trust-table {
    display: grid;
    gap: var(--sp-2);
    max-inline-size: var(--measure);
  }

  .trust-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
    background: var(--bh-surface-1);
  }

  /* Below 640px of available width the badge drops to its own line rather than
     squeezing the text. Container query, not viewport: the component responds to
     the space it was given. Spanish labels run 15-30% longer than English. */
  @container (max-width: 640px) {
    .trust-row {
      grid-template-columns: auto 1fr;
    }
    .trust-row .bh-badge {
      grid-column: 2;
    }
  }

  .trust-row__ring {
    --bh-ring-size: 40px;
    --bh-ring-w: 4px;
  }

  .trust-row__name {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0;
  }

  .trust-row__desc {
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
  }
}