/* home_reviews — sections/home_reviews.php
   Dowód społeczny pod hero: nagłówek + countery + nieskończony pas opinii.
   Mobile-first, jeden breakpoint 1024px. */

.hr {
  background-color: var(--ds-color-canvas);
  padding: var(--ds-space-8) 0 var(--ds-space-6);
}

/* ── Nagłówek sekcji ─────────────────────────────────────────────────────── */
.hr-head { text-align: center; }

.hr-eyebrow {
  margin: 0;
  /* Nadtytuł niesie liczbę („ponad 3000 maturzystów"), więc idzie w kolorze
     marki, nie w atramencie — ma być pierwszą rzeczą, którą oko złapie w tej
     sekcji. Lc 90 na bieli przy progu 85 (13px w wadze 600 liczy się jak 15px). */
  color: var(--ds-color-primary-ink);
}

.hr-title { margin: 10px 0 0; }

.hr-lead {
  margin: 10px 0 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body);
  line-height: 1.55;
  color: var(--ds-color-ink-secondary);
  text-wrap: pretty;
}

/* ── Countery ────────────────────────────────────────────────────────────── */
.hr-counters {
  display: flex;
  align-items: stretch;
  margin-top: var(--ds-space-5);
  padding: 18px var(--ds-space-1);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-color-canvas-blue);
  text-align: center;
}
.hr-counters-cell {
  flex: 1;
  padding: 0 var(--ds-space-1);
}
/* Linia 1px, nigdy 1.5px — połówka piksela renderuje się nierówno na 2×/3×. */
.hr-counters-rule {
  width: 1px;
  flex: none;
  background-color: var(--ds-color-primary-line);
}
.hr-counters-num {
  display: block;
  color: var(--ds-color-primary);
}
/* Podpis w pełnym `{colors.ink}`, nie w `ink-secondary` jak reszta tekstu
   wspierającego: na tincie `canvas-blue` przy 13px ink-secondary daje Lc 89
   przy progu 90, a to jedyna liczba w tej sekcji, którą czytelnik ma
   zweryfikować („średnia ocena", „zdawalności matury"). Pełny atrament wraca
   na Lc 98 i nie trzeba tu żadnego odstępstwa. */
.hr-counters-label {
  display: block;
  margin-top: 6px;
  line-height: 1.3;
  color: var(--ds-color-ink);
}

/* ── Pas opinii (nieskończony marquee) ───────────────────────────────────
   Pełna szerokość okna, poza kontenerem — pas ma wychodzić poza kadr, bo to on
   niesie sygnał „tych opinii jest więcej, niż widać".
   Maska wygasza karty przy obu krawędziach zamiast ucinać je twardo.
   overflow-x: auto (nie hidden) — dokłada możliwość ręcznego przewinięcia
   palcem/przeciągnięciem myszką NA WIERZCHU automatycznej animacji (patrz
   .hr-track niżej i assets/js/home_reviews.js), więc kto chce przeczytać
   konkretną opinię, nie musi czekać na jej przejazd. Pasek przewijania
   zabrany świadomie — tę samą rolę niesie już widoczna zapowiedź kart przy
   obu krawędziach (ten sam wzorzec co .ht-track/.xsell__viewport). */
.hr-marquee {
  --mq-gap: var(--ds-space-3);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: var(--ds-space-5);
  padding-bottom: 6px;                    /* miejsce na cień kart, inaczej overflow go ścina */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.hr-marquee::-webkit-scrollbar { display: none; }

/* Łapka tylko tam, gdzie jest kursor — na dotyku pas przewija się natywnie.
   Ten sam wzorzec co .ht-track/.xsell__viewport (courses_slider, home_teachers). */
@media (hover: hover) {
  .hr-marquee[data-hr-js] { cursor: grab; }
  .hr-marquee[data-hr-js].is-dragging { cursor: grabbing; }
}
.hr-marquee.is-dragging { user-select: none; }

/* Animowany jest wyłącznie `transform` — jedyna własność, która nie wymusza
   ponownego układu na każdej klatce.
   Czas trwania (--mq-duration) ustawia JS z atrybutu data-speed; 82s to czas
   przejechania JEDNEJ kopii listy, więc przy zmianie liczby opinii zmienia się
   też odczuwalna prędkość — dobierz data-speed ponownie po podmianie treści.
   Świadome odstępstwo od reguły „nic nie animuje się dłużej niż 350 ms"
   (CLAUDE.md → Stabilność, pkt 2): to pętla ozdobna, nie przejście stanu. */
.hr-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap: var(--mq-gap);
  animation: hr-marquee var(--mq-duration, 82s) linear infinite reverse;
}

/* Pauza: pod kursorem (żeby dało się przeczytać kartę) i poza kadrem — bez tego
   animacja mieliłaby GPU przez całą wizytę, także gdy sekcji nie widać.
   Stan spoza kadru ustawia IntersectionObserver w home_reviews.js. */
.hr-marquee:hover .hr-track,
.hr-track[data-paused="true"] { animation-play-state: paused; }

/* Track ma DWIE kopie listy, a keyframe przesuwa dokładnie o jedną. Korekta
   o pół odstępu jest konieczna: -50% liczy się z szerokości zawierającej
   dodatkowy gap wstawiony między kopiami, więc bez niej pętla skacze o ten gap. */
@keyframes hr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--mq-gap) / 2)); }
}

/* ── Karta opinii ────────────────────────────────────────────────────────── */
.hr-card {
  /* Stała szerokość, nie procent: karty jadą w nieskończonym pasie, więc nie
     mają kontenera, względem którego mogłyby się rozliczyć. 266px to trzy
     linijki cytatu przy 14px i ~40px zapowiedzi następnej karty na 360px. */
  width: 266px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px;
  text-align: left;
}
.hr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}
/* Pasek pięciu gwiazdek jako jedno powtarzane tło zamiast pięciu elementów
   w DOM — przy kilkunastu kartach w pasie to różnica ~80 węzłów.
   Hex w data-URI jest nieunikniony (url() nie czyta custom properties);
   kolor = `{colors.cta-solar}` #FFC42E, przy zmianie tokenu podmień też tu. */
.hr-stars {
  display: block;
  flex: none;
  width: 90px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath fill='%23FFC42E' d='M8 1.2l2 4.1 4.5.65-3.25 3.17.77 4.48L8 11.5l-4.02 2.1.77-4.48L1.5 5.95 6 5.3z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 18px 16px;
}

.hr-quote {
  margin: 0;
  line-height: 1.55;
  color: var(--ds-color-ink);
}

.hr-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;                       /* stopka zawsze przy dolnej krawędzi, mimo różnej długości cytatów */
  padding-top: 2px;
}
/* Inicjał zamiast zdjęcia — awatarów z Google nie wolno hostować u siebie,
   a szare kółko-placeholder czytałoby się jak brak danych.
   Sam glif nie jest treścią (nazwisko stoi obok), więc 14px w kółku 32px
   nie łamie reguły „poniżej 13px nie ma w treści nic". */
.hr-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-primary-tint);
  color: var(--ds-color-primary-ink);
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semi);
  font-size: var(--ds-text-body-sm);
}
.hr-person { display: block; }
.hr-name {
  display: block;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body-sm);
  font-weight: var(--ds-weight-semi);
  line-height: 1.3;
  color: var(--ds-color-ink);
}
/* Przedmiot to metadana, ale nadal treść — dlatego `ink-muted`, nigdy
   `ink-faint` (CLAUDE.md, reguła 13). */
.hr-meta {
  display: block;
  color: var(--ds-color-ink-muted);
}

/* ── Tablet (768–1023px) ─────────────────────────────────────────────────
   Układ zostaje kolumnowy (dwie kolumny wchodzą dopiero z płytą hero na
   1024px), ale blok wstępu przestaje się rozjeżdżać na całą szerokość okna:
   bez tego lead ma tu ponad 110 znaków w linii. */
@media (min-width: 768px) {
  .hr-intro { max-width: 620px; margin-inline: auto; }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hr { padding: var(--ds-space-12) 0 var(--ds-space-8); }

  /* Nagłówek i countery obok siebie — na szerokim kadrze kolumna zostawiała
     pod leadem pas pustki, a countery odrywały się od zdania, które popierają. */
  .hr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-12);
    text-align: left;
    /* Rynna szersza niż systemowe 20px z .container-ms: wyrównuje początek
       tekstu do wewnętrznej krawędzi płyty hero (padding 48px w tym samym
       kontenerze 1320px), więc obie sekcje mają wspólną lewą oś. */
    padding-inline: var(--ds-space-12);
  }
  /* margin-inline wraca do 0 — w rzędzie flex `auto` z progu 768px rozpychałoby
     kolumny i zjadało `space-between`. */
  .hr-intro { max-width: 560px; margin-inline: 0; }

  .hr-counters {
    flex: none;
    margin-top: 0;
    padding: 22px 10px;
    border-radius: var(--ds-radius-xxl);
  }
  .hr-counters-cell { padding: 0 var(--ds-space-6); }
  .hr-counters-label { margin-top: var(--ds-space-2); line-height: 1.35; }

  .hr-marquee { --mq-gap: var(--ds-space-4); margin-top: var(--ds-space-8); padding-bottom: 10px; }

  .hr-card { width: 316px; gap: var(--ds-space-3); padding: var(--ds-space-5); }
  .hr-quote { line-height: 1.6; }
  .hr-avatar { width: 38px; height: 38px; font-size: var(--ds-text-body); }
}

/* Bez animacji pas zostaje zwykłym, przewijanym palcem/myszką paskiem kart —
   treść zostaje dostępna, tylko przestaje jechać sama. `.hr-marquee` ma już
   overflow-x: auto bazowo (patrz wyżej), więc tu wystarczy zdjąć animację. */
@media (prefers-reduced-motion: reduce) {
  .hr-track { animation: none; }
}