/**
 * Trust bar SDC — structural CSS only (thin strip spacing, max-width
 * container, flex row). The pasted html_text markup's INDIVIDUAL items
 * (rating block, divider, text, divider, text, divider, logo strip) carry
 * their own visual styling via inline styles, but unlike feature-grid/
 * pricing-cards (which paste one pre-gridded wrapper div), trust-bar pastes
 * 7 flat SIBLING elements with no flex wrapper of their own — in
 * html/Home.html the flex row (`display:flex; align-items:center;
 * justify-content:space-between; gap:24px`) is on the *outer* `.wrap` div
 * itself, which is exactly what `.mk3-tb__inner` stands in for here. Without
 * this, the 7 items default to stacked block boxes instead of one row — a
 * real bug caught by comparing the live site to the source screenshot.
 *
 * The light-gray strip background itself (html/Home.html: <div
 * style="background:#F4F4F6; border-bottom:1px solid #ECECEF;">) sits on the
 * wrapper *outside* the pasted content, so it's hardcoded here rather than
 * sourced from field_background_color — this section always uses this exact
 * color and keeps default dark text (unlike hero/testimonials/
 * announcement-strip, which are always dark-background/white-text).
 */
.mk3-sdc--trust-bar {
  background: #F4F4F6;
  border-bottom: 1px solid #ECECEF;
}

.mk3-sdc--trust-bar .mk3-tb__inner {
  max-width: 80rem; /* 1280px, matches .mk3-header__wrap / .mk3-footer__top */
  margin: 0 auto;
  padding: 1.375rem 3rem; /* ~22px, matches html/Home.html + Free Audit.html */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* `justify-content:space-between` above is correct for Home's flat-sibling
 * shape (7 real children to distribute) but degenerates to flush-left for
 * Free Audit/Checkout's single-nested-child shape (one wrapper div holding
 * all 4 items) — with only one flex child, "space-between" has nothing to
 * put space between, so the whole group just sits at the start instead of
 * centered like the source. Re-centers it specifically for that shape only,
 * leaving Home's multi-child layout untouched. */
.mk3-sdc--trust-bar .mk3-tb__inner:has(> div[style*="display:flex"]:only-child) {
  justify-content: center;
}

@media (max-width: 768px) {
  .mk3-sdc--trust-bar .mk3-tb__inner {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 10px;
  }

  /* html/Free Audit.html's version of this component pastes ONE nested
   * flex wrapper div (icon/label pairs) instead of Home's flat siblings —
   * that inner inline `display:flex` row has no wrap of its own, so its 4
   * items overflow/misalign at mobile widths. Force-wrap it here since an
   * inline style can't carry its own media query. */
  .mk3-sdc--trust-bar .mk3-tb__inner > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 20px !important;
    text-align: center;
  }
}