/* sections/course_whatyoulearn.php — „Czego się nauczysz?".
   Tło ciepłe (canvas-warm), pełnej szerokości ekranu, bez slaba: sekcja jest
   celowo najbardziej tekstowa na landingu — zero kart, zero cieni, zero ikon
   tematycznych — pozycje rozdzielają włosowe linie 1px, a jedyną grafiką jest
   ptaszek przy pozycji. .cwl sama jest sekcją bez ograniczenia szerokości
   (żaden przodek w kurs/kurs.php nie ma max-width), więc tło rozciąga się do
   krawędzi bez dodatkowego markupu — patrz ten sam wzorzec w course_comparsion.css.
   Chrom (typografia .text-*, marker nagłówka .hl-marker, kontener
   .container-ms) pochodzi z design-system.css — tu tylko tło, rytm sekcji,
   siatka, linie i reveal.

   Stopnie pisma biorą się z klas .text-* w markupie (--ds-text-*), więc
   sekcja skaluje się razem z systemem i nie ma tu ani jednego twardego px
   font-size'a. */
.cwl {
  background-color: var(--ds-color-canvas-warm);
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--ds-color-hairline);
}
@media (min-width: 1024px) { .cwl { padding: 56px 0 64px; } }

/* ── Nagłówek i lead ──────────────────────────────────────────────────────
   Lead centruje się jako blok przez margin-inline:auto — samo text-align
   nie wystarcza przy max-width węższym niż kontener. */
.cwl-title { margin: 0; text-align: center; text-wrap: balance; }
.cwl-lead {
  margin: 10px auto 0;
  max-width: 42ch;
  color: var(--ds-color-ink);
  text-align: center;
  text-wrap: pretty;
}
@media (min-width: 1024px) { .cwl-lead { margin-top: 14px; max-width: 62ch; } }

/* Statystyka w leadzie: pismo display w 600 i cyfry tabelaryczne — ta sama
   waga co nagłówki (CLAUDE.md → waga 600 to sufit), wyróżnia krój i rytm
   cyfr, nie stopień pisma. */
.cwl-stat {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semi);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ds-color-ink);
}

/* ── Lista pozycji ────────────────────────────────────────────────────────
   Mobile: jedna kolumna, pozycje rozdzielone linią górną (pierwsza bez).
   Grid zamiast zwykłej listy, żeby ten sam markup przełączył się na
   desktopie w siatkę bez żadnej zmiany w PHP. */
.cwl-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.cwl-item {
  display: flex;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--ds-color-hairline);
}
.cwl-item:first-child { border-top: 0; }

/* Ptaszek: dosunięty w optyczną oś pierwszej linii tytułu (17px / 1.35),
   nie do jej górnej krawędzi. Zielony success — sygnalizuje "opanowane/
   zaliczone", nie kolor marki ani kolor przedmiotu (CLAUDE.md → reguła 4).
   Wolno użyć żywego --ds-color-success wprost, bo to ikona (SVG path), nie
   literowy glif — reguła 12 zastrzega wariant -ink tylko dla tekstu. */
.cwl-check {
  flex: none;
  width: 13px; height: 13px;
  margin-top: 5px;
  color: var(--ds-color-success);
}

.cwl-item-title { margin: 0; color: var(--ds-color-ink); text-wrap: balance; }
.cwl-item-text { margin: 3px 0 0; color: var(--ds-color-ink); text-wrap: pretty; }

/* ── Desktop: siatka 3 kolumn ─────────────────────────────────────────────
   Przy sześciu pozycjach daje 3 × 2. Linie pionowe między kolumnami
   (border-left, wyzerowany w pierwszej kolumnie) plus pozioma nad drugim
   rzędem — kratka bez wystających końcówek, wciąż jeden blok tekstu.
   Skrajne kolumny nie mają paddingu bocznego, żeby treść trzymała krawędź
   kontenera tak samo jak nagłówek i lead. */
@media (min-width: 1024px) {
  .cwl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--ds-space-10); }
  .cwl-item {
    padding: 22px 30px;
    border-top: 0;
    border-left: 1px solid var(--ds-color-hairline);
  }
  .cwl-item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .cwl-item:nth-child(3n) { padding-right: 0; }
  .cwl-item:nth-child(n+4) { border-top: 1px solid var(--ds-color-hairline); }

  .cwl-check { width: 15px; height: 15px; margin-top: 6px; }
  .cwl-item-text { margin-top: 6px; }
}

/* ── Reveal na wejściu w kadr ─────────────────────────────────────────────
   Klasę .cwl-reveal dopina JS (assets/js/course_whatyoulearn.js) — bez JS,
   bez IntersectionObserver albo przy prefers-reduced-motion sekcja jest po
   prostu widoczna, więc nie ma tu drugiego media query na ruch (globalny
   siedzi w design-system.css). Animujemy wyłącznie opacity i transform. */
.cwl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
              transform var(--ds-duration-slow) var(--ds-ease-out-soft);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.cwl-reveal.is-in { opacity: 1; transform: none; }