/* WBR Testimonial Moving Bar
   Defaults follow the Wisdom by Rawan "voices" strip (made for a dark
   cherry section); every value can be overridden from the Style tab. */

.wbr-tm {
  --wbr-tm-fade: 90px;
  --wbr-tm-soft-cream: #FBF4EC;
  --wbr-tm-luminous-gold: #F7E08C;
  --wbr-tm-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wbr-tm-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  overflow: hidden;
  padding-block: .5rem;
}

/* Edge fade as a mask, so it works on any background colour */
.wbr-tm--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wbr-tm-fade), #000 calc(100% - var(--wbr-tm-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--wbr-tm-fade), #000 calc(100% - var(--wbr-tm-fade)), transparent 100%);
}

/* The track is always LTR so the loop maths holds on RTL pages;
   the text inside each box keeps its own direction. */
.wbr-tm__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  direction: ltr;
  animation: wbr-tm-slide var(--wbr-tm-duration, 70s) linear infinite;
  will-change: transform;
}

.wbr-tm--dir-right .wbr-tm__track {
  animation-direction: reverse;
}

.wbr-tm--pause:hover .wbr-tm__track,
.wbr-tm--pause:focus-within .wbr-tm__track {
  animation-play-state: paused;
}

@keyframes wbr-tm-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Box. Spacing is a margin (not flex gap) so -50% is exactly one half. */
.wbr-tm .wbr-tm__card {
  flex: 0 0 340px;
  width: 340px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-right: 20px;
  padding: 1.4rem 1.5rem;
  background: rgba(251, 244, 236, .07);
  border: 1px solid rgba(247, 224, 140, .28);
  border-radius: 14px;
  color: var(--wbr-tm-soft-cream);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.wbr-tm a.wbr-tm__card:hover,
.wbr-tm a.wbr-tm__card:focus-visible {
  background: rgba(251, 244, 236, .12);
  text-decoration: none;
}

.wbr-tm a.wbr-tm__card:focus-visible {
  outline: 2px solid var(--wbr-tm-luminous-gold);
  outline-offset: -2px;
}

.wbr-tm__title {
  display: block;
  font-family: var(--wbr-tm-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wbr-tm-luminous-gold);
}

.wbr-tm__text {
  display: block;
  flex: 1;
  font-family: var(--wbr-tm-serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--wbr-tm-soft-cream);
}

.wbr-tm__text.is-arabic {
  font-style: normal;
  font-size: 1.12rem;
  line-height: 1.8;
}

.wbr-tm__subtitle {
  display: block;
  font-family: var(--wbr-tm-sans);
  font-size: .7rem;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wbr-tm-luminous-gold);
}

@media (max-width: 767px) {
  .wbr-tm .wbr-tm__card { flex-basis: 280px; width: 280px; }
}

/* Visitors who ask for less motion get a still strip they can swipe */
@media (prefers-reduced-motion: reduce) {
  .wbr-tm { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .wbr-tm__track { animation: none; }
  .wbr-tm__card[aria-hidden="true"] { display: none; }
}