/* course_last60mins_views — sections/course_last60mins_views.php
   Doklejony u góry .m-sticky (course_stickybar.css) jako jego pierwsze
   dziecko — bez własnego position/animacji, dziedziczy oba po rodzicu.
   Hairline oddziela go od reszty paska cenowego poniżej — i tylko tam ma
   sens, więc na /zapisz-sie, gdzie ten sam element stoi w .zf-sticky nad
   samym CTA, jest zdejmowany razem z górnym paddingiem tekstu
   (assets/css/zapis_form.css → ".zf-sticky .clv"). */

.clv {
  border-bottom: 1px solid var(--ds-color-hairline);
  /* Poniżej 360px (iPhone SE 1. gen.) najdłuższy komunikat nie zmieści się już
     w żadnym rozsądnym stopniu — wtedy przycięcie jest mniejszym złem niż
     poziomy scroll całej strony wywołany przez treść w position: fixed. */
  overflow: hidden;
}

/* Mniejszy stopień niż reszta paska, pełny kontrast: część komunikatów
   rotatora mieści się w JEDNEJ linii na 360px, część (dłuższe, np. o
   ebooku) łamie się na dwie — stąd brak white-space: nowrap. .csb-rot
   (course_stickybar.css) rezerwuje wysokość na NAJWYŻSZY komunikat naraz
   (wszystkie nakładają się w tej samej komórce grida), więc mimo złamania
   pasek i tak nie zmienia wysokości przy rotacji — tylko raz, przy
   pierwszym renderze, na wysokość najdłuższego wariantu. UWAGA: 12px łamie
   regułę 10 z CLAUDE.md („poniżej 13px nie ma w treści nic") — świadome,
   wąskie odstępstwo, opłacone kolorem: --ds-color-ink daje tu Lc 104 przy
   90 wymaganych dla 13px, czyli 14 punktów zapasu ponad próg. */
.clv-text {
  /* Tylko górny/dolny margin na 0 — .container-ms (design-system.css) daje
     margin-inline: auto, który centruje ten <p> w .clv od 1024px, gdzie
     max-width kontenera (1320px) jest węższy niż viewport. Zerowanie całego
     margin: 0 nadpisywało też margin-inline, przez co element trzymał się
     lewej krawędzi na szerokich desktopach (np. 1920px). */
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--ds-space-1);
  padding-bottom: var(--ds-space-1);
  /* Rynna 8px zamiast 16px z .container-ms — tekst jest wyśrodkowany w pasku
     pełnej szerokości, więc rynna nie wyrównuje tu niczego do treści obok;
     jest tylko marginesem bezpieczeństwa przed krawędzią ekranu. */
  padding-inline: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-color-ink);
  text-align: center;
}

/* Liczba osób: tylko waga, bez .hl-underline — bez koloru i bez większego
   rozmiaru, świadomie subtelniejsza niż etykieta rabatu/cena/CTA w tej
   samej sekcji. */
.clv-count {
  font-weight: 600;
}

/* Od 1024px jest już miejsce na systemowe 13px i pełną rynnę. */
@media (min-width: 1024px) {
  .clv-text {
    padding-inline: var(--ds-space-5);
    font-size: var(--ds-text-caption);
  }
}

/* Od 1280px pasek znika w całości — to samo zdanie wchodzi wtedy w główny
   wiersz paska cenowego (.csb-proof w course_stickybar.css), a dwa razy nad
   sobą byłoby błędem. Próg jest 1280, nie 1024, bo dopiero tam wiersz mieści
   zdanie bez ściskania cen (patrz komentarz przy .csb-proof). Efekt uboczny
   jest pożądany: sticky bar schodzi wtedy z dwóch poziomów do jednego. */
@media (min-width: 1280px) {
  .clv { display: none; }
}