/* ==========================================================================
   03 trust bar / logo strip  (Elementor id 077f7cb)

   Measured band heights: desktop 138px, tablet 192px, mobile 111px.
   Those decompose as 20px top pad + 27px heading line + logo track + 20px pad,
   so the track is pinned to 71 / 125 / 44px and the logos are contained inside
   it. The motion is Swiper autoplay (400ms step every 2000ms), initialised in
   src/js/main.js. Nothing here animates the track.
   ========================================================================== */

.s-trustbar {
  background-color: var(--c-offwhite);
}

.s-trustbar .trustbar__inner {
  padding-block: 20px;
}

/* ------------------------------------------------------------------ heading */

.s-trustbar .trustbar__title {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: var(--c-grey-ba);
  text-align: center;
}

/* ------------------------------------------------------------------ carousel */

.s-trustbar .trustbar__swiper {
  width: 100%;
  height: 71px;
  overflow: hidden;
}

/* Swiper writes the transform on .swiper-wrapper itself; it only needs to be a
   row so the fixed-height slides line up. */
.s-trustbar .swiper-wrapper {
  align-items: center;
  box-sizing: content-box;
}

.s-trustbar .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 71px;
  text-align: center;
}

/* Transparent-background webp lockups, rendered greyscale on the target and
   returning to full colour on hover. width/height stay auto so the intrinsic
   250x125 is never stretched past its natural size on wide slides. */
.s-trustbar .trustbar__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease);
}

.s-trustbar .trustbar__swiper:hover .trustbar__logo,
.s-trustbar .trustbar__logo:hover {
  filter: grayscale(0);
}

/* ------------------------------------------------------------------ tablet */

@media (min-width: 768px) and (max-width: 1024px) {
  .s-trustbar .trustbar__swiper,
  .s-trustbar .swiper-slide {
    height: 125px;
  }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 767px) {
  .s-trustbar .trustbar__swiper,
  .s-trustbar .swiper-slide {
    height: 44px;
  }
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  .s-trustbar .trustbar__logo {
    transition: none;
  }
}