/* Section: Reviews slider ("Opinie") */

.reviews { padding-block: var(--space-4xl); }
.reviews__container { display: flex; flex-direction: column; gap: var(--space-2xl); align-items: center; }

/* Head */
/* alignment (align-items + text-align) comes from the .u-align-* utility (ACF "align" field) */
.reviews__head { display: flex; flex-direction: column; gap: var(--space-l); width: 100%; }
.reviews__heading { color: var(--color-grey-900); }
.reviews__heading strong { font-weight: 500; letter-spacing: -.8px; }
.reviews__sub { max-width: 800px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }

/* Seamless CSS marquee — cards top-aligned, heights vary with text length.
   Pure CSS so it scrolls even before JS; JS only adds the hover pause. */
.reviews__viewport { width: 100%; overflow: hidden; }
.reviews__track { display: flex; width: max-content; animation: reviews-marquee 60s linear infinite; }
.reviews__track.is-paused { animation-play-state: paused; }
.reviews__group { display: flex; align-items: flex-start; }
.reviews__group .review-card { width: 300px; flex-shrink: 0; margin-right: var(--space-m); }
@keyframes reviews-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .reviews__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* Card */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  padding: var(--space-l);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}
.review-card__stars { display: flex; justify-content: center; padding-block: var(--space-2x); }
/* Review stars are dark (grey-900) here, not the accent red used in hero/footer. */
.review-card__stars .rating__star--on { color: var(--color-grey-900); }
.review-card__text {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  text-align: center;
}
.review-card__divider { height: 1px; width: 100%; background: var(--color-grey-200); }
.review-card__author {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  color: var(--color-grey-900);
  text-align: center;
}

@media (max-width: 600px) {
  .reviews__heading { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
}