/* ==========================================================================
   CALLA — Pillar "Usługi": Testimonial ("Standard doceniany przez liderów
   rynku"), template-pillar-uslugi.php.
   Tło .pillar-testimonial__bg — technika 1:1 z .timeline__bg (75% szerokości,
   wycentrowane, rgba(246,244,243,0.5)) — na wyraźne życzenie Mike'a "tło jak
   w Dla kogo/wcześniejszych sekcjach, z boxami 75% ekranu".
   Układ tekstu jak .pillar-hero: lewo eyebrow+nagłówek+opis, prawo
   eyebrow (autor) + cytat — oba do góry.
   ========================================================================== */

.pillar-testimonial {
  position: relative;
  /* Większy padding-top niż standardowy --section-spacing — sekcja
     "dotykała" wideo nad nią (na życzenie Mike'a; padding, nie margines). */
  padding-top: calc(var(--section-spacing) + var(--space-8));
  padding-bottom: var(--section-spacing);
}

.pillar-testimonial__bg {
  display: block;
  position: absolute;
  left: 12.5%;
  width: 75%;
  /* Wcięte od góry o tyle, ile wynosi dodatkowy padding wyżej — inaczej
     szare tło i tak "dotykałoby" wideo, mimo że tekst ma już wystarczający
     odstęp (tło jest position:absolute względem paddingu sekcji, nie jej
     treści). */
  top: var(--space-8);
  bottom: 0;
  z-index: -1;
  background-color: rgba(246, 244, 243, 0.5);
}

@media (max-width: 1139px) {
  .pillar-testimonial__bg {
    left: auto;
    right: 0;
  }
}

.pillar-testimonial__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.pillar-testimonial__heading {
  font-family: 'Jost', var(--font-heading);
  margin-top: var(--space-3);
  max-width: 480px;
}

.pillar-testimonial__description {
  /* Plus Jakarta Sans Light 16->20px/1.8/1%, kolor pełny (nie muted) — wg
     specyfikacji z Figmy od Mike'a. --fs-lead/--lh-lead to dokładnie ta
     sama para wartości. */
  margin: var(--space-4) 0 0;
  max-width: 480px;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Karuzela opinii (CPT "opinia_klienta", assets/js/pillar-testimonial.js) —
   DZIAŁA na każdej szerokości ekranu (nie tylko mobile jak wspólny
   carousel.js), bo ma być widoczna od razu na desktopie. Auto-advance +
   kropki, translateX na torze. */
.pillar-testimonial__quote {
  overflow: hidden;
}

.pillar-testimonial__quote-track {
  display: flex;
  transition: transform 0.6s ease;
}

.pillar-testimonial__quote-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.pillar-testimonial__author {
  margin-bottom: var(--space-3);
}

.pillar-testimonial__quote-text {
  /* Plus Jakarta Sans Light 16px/1.5/1% — wg specyfikacji z Figmy od
     Mike'a ("opis opinii"). --fs-body = clamp(14,...,16), ten sam
     docelowy rozmiar desktopowy. */
  margin: 0;
  max-width: 480px;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.pillar-testimonial__quote [data-testimonial-dots] {
  display: flex;
  margin-top: var(--space-6);
}

@media (min-width: 1140px) {
  .pillar-testimonial__inner {
    grid-template-columns: minmax(0, 719fr) minmax(0, 945fr);
    align-items: start;
    column-gap: var(--space-10);
  }
}