/* sections/course_forwho.php — „Dla kogo jest ten kurs?".
   Tło białe (.m-sec), bez slaba — sekcja stoi między kolorowymi płytami
   sąsiadów i ma być najjaśniejszym, najspokojniejszym miejscem na landingu.
   Chrom (typografia .text-*, marker listy .list-check, badge .subj-badge,
   przycisk .btn-solar) pochodzi z design-system.css — tu tylko rytm sekcji,
   siatka i reveal. */
.cfw { padding: 32px 0 40px; }
@media (min-width: 1024px) { .cfw { padding: 56px 0 64px; } }

/* ── Nagłówek ─────────────────────────────────────────────────────────────
   Wyśrodkowany na wszystkich szerokościach — .cfw-lead centruje się jako
   blok przez margin-inline:auto (samo text-align nie wystarcza, bo ma
   max-width węższy niż kontener). */
.cfw-head { text-align: center; }

/* Pigułka przedmiotu: kolory z .subj-badge, typografia z .text-eyebrow —
   lokalnie tylko kształt, odstępy i kropka (Bootstrap .badge daje radius 12px
   i padding w em, oba za małe na pigułkę). */
.cfw-badge {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--ds-radius-full);
  padding: 6px 12px 6px 11px;
}
.cfw-badge .subj-dot { width: 6px; height: 6px; flex: none; }

.cfw-title { margin: 12px 0 0; text-wrap: balance; }
.cfw-lead { margin: 10px auto 0; max-width: 38ch; color: var(--ds-color-ink-secondary); }
@media (min-width: 1024px) { .cfw-lead { max-width: 62ch; } }

/* ── Lista profili ────────────────────────────────────────────────────────
   Grid zamiast flexa z .list-check: 1 kolumna → 2 (768px) → 4 (1024px, dwa
   rzędy po cztery). Marker rysuje ::before z .list-check, dosunięty o 1px,
   żeby kółko 22px stanęło w optycznej osi pierwszej linii tytułu (17/1.4). */
.cfw-list {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.cfw-list > li::before { margin-top: 1px; }
.cfw-item { min-width: 0; }
.cfw-item-title { margin: 0 0 3px; color: var(--ds-color-ink); }
.cfw-item-text { margin: 0; color: var(--ds-color-ink-secondary); }

@media (min-width: 768px) {
  .cfw-list { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 22px; margin-top: 28px; }
}
@media (min-width: 1024px) {
  .cfw-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px; row-gap: 30px;
    margin-top: 36px;
  }
  /* W kolumnie ~290px tytuł łamie się na 3 linijki — trochę ciaśniej
     interlinią, żeby czytał się jako jeden blok, nie jako trzy zdania. */
  .cfw-item-title { line-height: 1.3; }
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cfw-cta {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@media (min-width: 1024px) { .cfw-cta { margin-top: 40px; } }

.cfw-cta-btn { width: 100%; text-align: center; }
@media (min-width: 480px) { .cfw-cta-btn { width: auto; min-width: 260px; } }

.cfw-cta-note { margin: 0; max-width: 40ch; text-align: center; color: var(--ds-color-ink-muted); }

/* ── Reveal na wejściu w kadr ─────────────────────────────────────────────
   Klasę .cfw-reveal dopina JS (assets/js/course_forwho.js) — bez JS treść jest
   po prostu widoczna. Animujemy wyłącznie opacity i transform, czasy i krzywa
   z tokenów DS; stagger przez --i (cyklicznie 0–5, patrz JS). */
.cfw-reveal {
  opacity: 0;
  transform: translateY(16px);
  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);
}
.cfw-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cfw-reveal { opacity: 1; transform: none; transition: none; }
}