/*
 * Trust strip ("+20 Years / Licensed & Insured / Insurance Claim
 * Specialist") -- plain 3-column row on desktop (unchanged from the
 * original Elementor icon-box trio it replaces). Below 768px it's a
 * continuous ticker (six badges, CSS @keyframes marquee, never stops on
 * its own) instead of either the three stacking vertically or a step-
 * and-pause carousel -- a passive ticker isn't the same interaction as
 * content-slider's explicit, user-driven navigation, so it doesn't reuse
 * that contract here; the marquee keyframes are defined below, mobile-
 * only.
 */
.jr-trust-strip {
  position: relative;
  width: 100%;
}

.jr-trust-strip__track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jr-trust-strip__item {
  display: block;
  flex: 1 1 0;
  min-width: 0;
}

.jr-trust-strip__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-block-end: 0.5rem;
  color: #fff;
}

/* !important on margin: Kadence's .single-content h1-h6 (class+tag,
   specificity 0,1,1) beats this single-class selector and was injecting
   its own 1.5em/0.5em heading margin, silently pushing the title off
   center against its icon in the mobile row layout below. */
.jr-trust-strip__title {
  margin: 0 0 0.35rem !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* This band sits on a solid red gradient background (#D81526 to #8F0914).
   .hhds-title-highlight's brand-red text is unreadable against it -- keep
   these titles white like the rest of this component instead. */
.jr-trust-strip__title .hhds-title-highlight {
  color: inherit;
}

.jr-trust-strip__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* Three extra badges exist only for the mobile rotation (icon + title,
   no description) -- desktop keeps just the original three in their
   static row, so these stay out of layout there entirely. Same for the
   whole second (aria-hidden) copy of the list that only exists to make
   the mobile marquee loop seamless -- desktop has no marquee, so it
   never needs a duplicate copy in the first place. */
.jr-trust-strip__item--mobile-only,
.jr-trust-strip__item--duplicate {
  display: none;
}

@media (max-width: 767px) {
  /* Continuous ticker, not a step-and-pause carousel -- a real CSS
     @keyframes loop on transform, not content-slider's scroll-snap (that
     component is built for explicit user-driven navigation with pauses
     between steps; a ticker that never stops is a different interaction
     entirely, so it doesn't reuse content-slider's contract on mobile).
     The PHP output renders the six items twice in a row; animating from
     translateX(0) to translateX(-50%) moves exactly one full set's width,
     so the loop point lands on an identical copy -- no visible seam or
     reset jump. overflow:hidden (not overflow-x:auto) since there's
     nothing left for the browser's own scroll to do here. */
  .jr-trust-strip__track {
    flex-wrap: nowrap;
    gap: 2.5rem;
    width: max-content;
    overflow: visible;
    animation: jr-trust-marquee 16s linear infinite;
  }

  .jr-trust-strip {
    overflow: hidden;
  }

  /* Pause is the WCAG 2.2.2 requirement for auto-moving content -- :active
     covers a touch-and-hold, :hover covers a mouse/trackpad reader. */
  .jr-trust-strip:hover .jr-trust-strip__track,
  .jr-trust-strip:active .jr-trust-strip__track {
    animation-play-state: paused;
  }

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

  /* Icon beside the title, one horizontal row, instead of icon-above-
     title stacked (that's the desktop shape -- fine when there's a full
     column of width to work with, but taller than this band needs to be
     for a ticker line). Same icon, same title text, just laid out
     sideways so the slide is as short as possible. */
  .jr-trust-strip__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
  }

  /* All six show on mobile -- the three extra badges included -- plus
     the duplicate copy, needed only here for the marquee loop. */
  .jr-trust-strip__item--mobile-only,
  .jr-trust-strip__item--duplicate {
    display: flex;
  }

  .jr-trust-strip__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    flex-shrink: 0;
  }

  .jr-trust-strip__title {
    margin: 0 !important;
    font-size: 0.95rem;
    /* Guarantees one line -- the longest titles ("+20 Years Of
       Experience", "Insurance Claim Specialist") measurably wrapped to
       two lines at narrow widths (confirmed at 320px) when this was
       only centered text with no explicit nowrap, doubling the band's
       height for just those two slides. max-width + ellipsis is a
       backstop in case a future title is ever long enough to still not
       fit next to the icon even at this size -- truncating beats
       silently wrapping back to two lines. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15rem;
  }

  /* Description drops out for every item on mobile (not just the three
     that never had one) -- icon + title only keeps each slide short
     enough that six of them rotating through still reads as a thin
     band, not a wall of paragraph text repeated six times. */
  .jr-trust-strip__text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-trust-strip__track {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .jr-trust-strip__track {
    animation: none;
  }
}