/* ============================================
   TRUST BADGES — Trust signals only
   Lifted from trust-reviews' top half (the trust row),
   self-contained.
   Swiss-Grid Editorial × Mediterranean warmth.
   ============================================ */

.rtbg {
  overflow: hidden;
  /* Nav clearance — the sticky top nav is 72px tall. Slightly tighter
     spacing now that the band is a quiet small-banner. */
  padding-top: calc(72px + var(--space-lg));
  /* Zero bottom padding — the trust band sits flush against whatever
     section follows so they read as a single visual unit. */
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  .rtbg {
    padding-top: calc(72px + var(--space-xl));
  }
}

/* When the hero follows immediately, drop the hero's nav-clearance
   padding-top — this band has already cleared the nav. */
.rtbg + .rh {
  padding-top: var(--space-lg);
}

@media (min-width: 1024px) {
  .rtbg + .rh {
    padding-top: var(--space-xl);
  }
}

.rtbg__inner {
  border-top: 1px solid var(--clr-border-light);
  border-bottom: 1px solid var(--clr-border-light);
  /* Compact banner strip — tight padding so the dividers sit close
     to the trust items and the section reads as a quiet horizontal
     band rather than a full content section. */
  padding: var(--space-md) 0;
}

/* ─── Trust row — mobile is a continuous auto-scroll marquee.
   Items + a duplicated set scroll left in a seamless loop so the
   band reads as a quiet ambient element rather than a scroller
   that needs interaction. Pauses on hover/focus and disables under
   prefers-reduced-motion. Tablet+ reverts to the centered wrap. ─── */
.rtbg__row {
  display: flex;
  overflow: hidden;
}

.rtbg__track {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  width: max-content;
  /* Translate by 50% — the second half (clones) lands exactly where
     the first half started, producing a seamless loop. */
  animation: rtbg-marquee 30s linear infinite;
}

.rtbg__row:hover .rtbg__track,
.rtbg__row:focus-within .rtbg__track {
  animation-play-state: paused;
}

.rtbg__clones {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  /* Match the gap before the clones so spacing stays even */
  margin-left: var(--space-xl);
}

@keyframes rtbg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rtbg__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Tablet+: disable marquee, hide clones, restore wrap layout. */
@media (min-width: 768px) {
  .rtbg__row {
    overflow: visible;
  }

  .rtbg__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-xl) var(--space-3xl);
  }

  .rtbg__clones {
    display: none;
  }

  .rtbg__item {
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 1;
  }
}

/* Reduced motion: disable the marquee entirely; user can still see
   the original (non-cloned) set of items, no auto-scroll. */
@media (prefers-reduced-motion: reduce) {
  .rtbg__track {
    animation: none;
  }
  .rtbg__clones {
    display: none;
  }
}

.rtbg__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* Lighter olive — design guide §4 "mid olive secondary accent" —
     so the band reads as quiet supporting content, not headline. */
  color: var(--clr-brand-alt);
  margin-top: 1px;
}

.rtbg__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.rtbg__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.rtbg__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rtbg__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-brand-alt);
  line-height: 1.35;
}

.rtbg__subtitle {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* ─── Dark variant ───────────────────────────────────────── */
.rtbg.bg-accent-dark .rtbg__inner {
  border-color: rgba(253, 252, 250, 0.15);
}

.rtbg.bg-accent-dark .rtbg__title {
  color: var(--clr-text-inverse);
}

.rtbg.bg-accent-dark .rtbg__subtitle {
  color: var(--clr-text-inverse);
  opacity: 0.7;
}

.rtbg.bg-accent-dark .rtbg__icon {
  color: var(--clr-brand-accent);
}