/* ==========================================================================
   Reference — nekonečný marquee slider „Co říkají naši partneři"
   ========================================================================== */

.testimonials { padding: 100px 0; overflow: hidden; background: var(--surface-alt); }

.marquee { margin-top: 56px; }
.marquee__viewport { overflow: hidden; }
.marquee__track { display: flex; gap: 48px; width: max-content; }

.marquee__controls { display: none; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 720px) {
  .marquee__controls { display: flex; }

  /* Mobile: hand the track over to native horizontal scroll-snap so every
     card always lands dead-centre instead of being half cut off. */
  .marquee__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
  }
  .marquee__viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  /* Side padding gives the first and last card room to centre. The value
     mirrors the card width (min(440px, 80vw)) so the centre always lines up. */
  .marquee__track {
    transform: none !important;       /* drop the desktop marquee transform */
    padding-inline: max((100vw - 440px) / 2, 10vw);
  }
  .tcard { scroll-snap-align: center; }

  /* The duplicated set only exists for the infinite desktop marquee. */
  .tcard[aria-hidden="true"] { display: none; }
}

/* Karta reference */
.tcard {
  flex: 0 0 440px;
  max-width: 80vw;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.tcard__mark { width: 36px; height: 36px; flex: none; color: var(--red); }
.tcard blockquote { margin: 0; font-style: italic; font-size: 16px; line-height: 26px; color: var(--text-soft); }
.tcard__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--heading-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
[data-theme="dark"] .tcard__avatar { color: var(--dark-1a); }
.tcard__name { display: flex; flex-direction: column; }
.tcard__name strong { font-size: 16px; font-weight: 700; color: var(--heading); }
.tcard__name span { font-size: 14px; color: var(--text-mute); }

@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; }
}