/* sections/course_content.php — zawartość kursu jako os czasu.
   Mobile-first, desktop od 1024px (breakpoint "desktop" z DESIGN-SYSTEM.md,
   ten sam co skala typografii w design-system.css).

   Tu leży tylko to, czego design system nie ma: os czasu, karty spotkań na
   natywnych <details>, karta liczb i link rozwijający program. Chrom reszty
   niosą klasy DS (.badge-*, .text-*, .hl-marker) i utilities Bootstrapa.
   Font-size nie występuje w tym pliku ani raz — rozmiary niosą klasy .text-*
   z design systemu, żeby skala była wspólna z sąsiednimi sekcjami. Kolor
   akcentu bierzemy z --subj/--subj-deep/--subj-tint, które ustawia klasa
   .subj-* na roocie sekcji. */

.cc {
  --cc-nav-h: 60px;          /* sections/header.php → .hdr-main; od 1024px 68px */
  --cc-anchor-offset: 76px;  /* offset skoku po hashu = nav + oddech */
  --cc-indent: 34px;         /* wcięcie treści działu = kropka + oddech */
  --cc-line-x: 9px;          /* lewa krawędź linii = środek kropki − 1px */
  /* Odległość środka kropki od góry bloku. Musi być równa połowie wysokości
     pierwszej linii nagłówka działu (.text-heading-3: 18px × 1.32 ≈ 24px →
     12px), żeby kropka stała dokładnie na wysokości tekstu po prawej. Ta sama
     wartość wyznacza początek i koniec linii osi. */
  --cc-dot-center: 12px;
  /* Wewnętrzny padding karty spotkania. Ta sama zmienna wyznacza wcięcie linku
     "Zobacz cały program", więc jego tekst stoi w jednej kolumnie z numerami
     spotkań — nie da się ich rozjechać przy zmianie paddingu karty. */
  --cc-card-pad: 14px;
  padding: 40px 0 48px;
}

@media (min-width: 1024px) {
  .cc {
    --cc-nav-h: 68px;
    --cc-anchor-offset: 92px;
    --cc-indent: 40px;
    --cc-line-x: 11px;
    --cc-dot-center: 13px;   /* .text-heading-3 na desktopie: 20px × 1.32 ≈ 26px */
    --cc-card-pad: var(--ds-space-5);
    padding: 64px 0 80px;
  }
}

/* ── Nagłówek sekcji + liczby ─────────────────────────────────────────────
   Na mobile cały blok nagłówka jest wyśrodkowany (jak w course_corefeatures),
   od 1024px wraca do lewej, bo stoi w siatce obok karty liczb. */
.cc-intro { text-align: center; }
.cc-eyebrow { color: var(--subj-deep); margin: 0; }
.cc-title { margin: var(--ds-space-2) 0 10px; text-wrap: balance; }
/* Lead bez własnego koloru — dziedziczy --bs-body-color (= ink-secondary),
   ten sam ton co leady sąsiednich sekcji landingu. */
.cc-lead { margin: 0 auto; max-width: 60ch; }

.cc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-2);
  margin-top: var(--ds-space-5);
}
.cc-stat {
  background-color: var(--ds-color-canvas-warm);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-sm);
  padding: 11px 8px;
  text-align: center;
}
.cc-stat-num {
  display: block; color: var(--ds-color-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.cc-stat-label { display: block; margin-top: 2px; color: var(--ds-color-ink-muted); }

/* ── Os czasu: jedna linia na cały program ───────────────────────────────
   Linia jest jednym elementem (nie segmentem per dział), bo tylko wtedy da
   się ją narysować w dół jednym transformem, bez animowania wysokości.
   Zaczyna się w środku pierwszej kropki, a kończy w środku kropki kamienia
   milowego — dlatego wychodzi poza .cc-track o (padding .cc-finish + środek
   kropki). */
.cc-track { position: relative; margin-top: var(--ds-space-6); }
.cc-track-line {
  position: absolute; left: var(--cc-line-x); width: 2px;
  top: var(--cc-dot-center);
  bottom: calc(-1 * (var(--ds-space-4) + var(--cc-dot-center)));
  /* Kolor przedmiotu przez większość długości, wygaszenie dopiero na dojściu
     do kropki egzaminu — przy 16 działach linia jest tak długa, że gradient
     na całej wysokości robiłby z niej bladą kreskę już w połowie programu. */
  background: linear-gradient(180deg, var(--subj) 0%, var(--subj) 78%, var(--ds-color-primary-soft) 100%);
  border-radius: var(--ds-radius-full);
}
/* Długość linii idzie wprost za scrollem — assets/js/course_content.js wpisuje
   scaleY() w style elementu, dlatego NIE ma tu żadnego transition (przejście
   biłoby się z pozycją palca). Stan startowy (scaleY 0) i wejścia treści niżej
   włącza atrybut data-cc-anim, który JS ustawia tylko wtedy, gdy naprawdę
   umie je obsłużyć i gdy użytkownik nie prosi o mniej ruchu. Bez niego linia
   jest po prostu narysowana, a treść widoczna. */
[data-cc-anim] .cc-track-line { transform: scaleY(0); transform-origin: 50% 0; }

/* Wejście treści: nagłówek działu i karty spotkań wjeżdżają, gdy wchodzą
   w kadr. Kropka tylko się wygasza — przesuwanie jej odklejałoby ją od linii.
   Rytm robi sam scroll (każda karta przechodzi progr obserwatora osobno),
   więc nie mnożymy opóźnień. */
[data-cc-anim] .cc-block-dot {
  opacity: 0;
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out-soft);
}
[data-cc-anim] .cc-block-head,
[data-cc-anim] .cc-lesson {
  opacity: 0; transform: translateY(16px);
}
[data-cc-anim] .cc-block-head {
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
              transform var(--ds-duration-slow) var(--ds-ease-out-soft);
}
[data-cc-anim] .cc-lesson {
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
              transform var(--ds-duration-slow) var(--ds-ease-out-soft),
              background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}
[data-cc-anim] .cc-block.is-in > .cc-block-dot { opacity: 1; }
[data-cc-anim] .cc-block.is-in > .cc-block-head { opacity: 1; transform: none; }
[data-cc-anim] .cc-lesson.is-in { opacity: 1; transform: none; }

/* Zabezpieczenie na wypadek zmiany ustawienia systemowego po wczytaniu strony
   — JS w tym trybie w ogóle nie dokłada data-cc-anim. */
@media (prefers-reduced-motion: reduce) {
  [data-cc-anim] .cc-track-line,
  [data-cc-anim] .cc-block-dot,
  [data-cc-anim] .cc-block-head,
  [data-cc-anim] .cc-lesson { opacity: 1; transform: none; transition: none; }
}

.cc-block {
  position: relative;
  padding: 0 0 var(--ds-space-5) var(--cc-indent);
  scroll-margin-top: var(--cc-anchor-offset);
}
.cc-block-dot {
  position: absolute; left: 0; top: calc(var(--cc-dot-center) - 10px);
  width: 20px; height: 20px;
  border-radius: var(--ds-radius-full); background-color: var(--subj-tint);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--ds-color-hairline);
}
.cc-block-dot i {
  width: 8px; height: 8px; border-radius: var(--ds-radius-full);
  background-color: var(--subj);
}
.cc-block-head { display: flex; align-items: baseline; gap: var(--ds-space-2); flex-wrap: wrap; }
.cc-block-name { margin: 0; }
/* ink-muted, nie ink-faint: to pełnoprawny tekst 13px na bieli, więc musi
   trzymać kontrast 4.5:1 (ink-faint go nie trzyma). */
.cc-block-count { color: var(--ds-color-ink-muted); flex: none; }
.cc-block-desc { margin: 4px 0 var(--ds-space-3); max-width: 62ch; color: var(--ds-color-ink-muted); }
.cc-block-head + .cc-lessons { margin-top: var(--ds-space-3); }

.cc-lessons { display: flex; flex-direction: column; gap: var(--ds-space-2); }

/* ── Spotkanie: natywne <details> ─────────────────────────────────────────── */
.cc-lesson {
  background-color: var(--ds-color-surface);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.cc-lesson[open] { background-color: var(--ds-color-canvas-warm); }

.cc-lesson-trig {
  display: flex; align-items: flex-start; gap: var(--ds-space-3);
  padding: var(--cc-card-pad); min-height: 56px;
  cursor: pointer; list-style: none;
}
.cc-lesson-trig::-webkit-details-marker { display: none; }
.cc-lesson-trig::marker { content: ""; }
/* Bootstrap nie stylizuje focusu na <summary>, a design system nie ma jeszcze
   globalnego pierścienia — jeden lokalny, zgodny z tokenem primary. */
.cc-lesson-trig:focus-visible {
  outline: 2px solid var(--ds-color-primary); outline-offset: -4px;
  border-radius: var(--ds-radius-md);
}

.cc-lesson-nr {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background-color: var(--subj-tint); color: var(--subj-deep);
  font-variant-numeric: tabular-nums lining-nums;
  /* `place-items: center` centruje sam kafelek w gridzie, ale nie tekst
     wewnątrz niego — dla dwucyfrowego "01" nie było różnicy (jedna linia,
     naturalnie wyśrodkowana), ale "nr" bywa teraz też stringiem ("VOD 1"),
     który na 30/40px szerokości łamie się na dwie linijki ("VOD" / "1") i bez
     tego stały się względem siebie do lewej, zamiast jedna pod drugą. */
  text-align: center;
}
.cc-lesson-txt { flex: 1; min-width: 0; }
.cc-lesson-title {
  display: block; color: var(--ds-color-ink);
  transition: color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.cc-lesson[open] .cc-lesson-title { color: var(--subj-deep); }
.cc-lesson-meta { display: block; margin-top: 3px; color: var(--ds-color-ink-muted); }

/* Badge'e w wierszu spotkania tylko na desktopie — na telefonie ta sama
   informacja jest dopisana do tekstu pod tytułem (.cc-lesson-meta-live). */
.cc-lesson-tag { display: none; }

/* „Na żywo”: kolory z .badge-success, a przed tekstem pulsująca kropka w żywym
   --ds-color-success. Ten sam zabieg co .badge-live w DS, tylko w zieleni —
   żywy kolor jest wypełnieniem, nie literą (CLAUDE.md, reguła 12).
   Keyframes ds-pulse i wyciszenie przy prefers-reduced-motion pochodzą
   z design-system.css. */
.cc-tag-live::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--ds-color-success);
  margin-right: 6px;
  animation: ds-pulse 1.8s infinite;
}

/* „Nagranie po lekcji”: glif w kolorze tekstu badge'a (primary-ink). */
.cc-tag-rec { gap: 5px; }
.cc-tag-ic { flex: none; }

.cc-chev {
  flex: none; color: var(--ds-color-primary); margin-top: 4px;
  transition: transform var(--ds-duration-base) var(--ds-ease-out-soft);
}
.cc-lesson[open] > .cc-lesson-trig .cc-chev { transform: rotate(180deg); }

/* Panel: <details> i tak nie renderuje treści, gdy jest zamknięty, więc
   wysokości nie animujemy (to i tak byłby jank na słabszym telefonie) —
   otwarcie dostaje krótkie wejście na opacity/transform. */
.cc-lesson-panel {
  padding: 0 14px 14px 56px;
  animation: cc-panel-in var(--ds-duration-base) var(--ds-ease-out-soft);
}
@keyframes cc-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-lesson-panel { animation: none; }
}

.cc-lesson-label { color: var(--ds-color-ink-muted); margin: 0 0 10px; }

.cc-topics { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.cc-topics li { display: flex; align-items: flex-start; gap: 9px; }
.cc-topics svg { flex: none; margin-top: 5px; color: var(--subj-deep); }
.cc-topics span { color: var(--ds-color-ink-secondary); }

/* ── "Rozwiń cały program" ────────────────────────────────────────────────
   Link tekstowy, nie przycisk: pełnej szerokości nachodziłby na linię osi
   po lewej. Szerokość dopasowana do treści, wcięcie takie samo jak treść
   działu, więc linia osi przechodzi obok, nie pod nim. Zwijanie działów
   i sam link istnieją tylko przy działającym JS — bez JS widać cały program
   i nie ma martwego przycisku. */
.cc-more { display: none; }
[data-cc-js] .cc-more {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  width: fit-content; min-height: 48px;
  /* Wcięcie = wcięcie treści działu + padding karty, czyli tekst linku stoi
     w tej samej kolumnie co numery spotkań. Ujemny margines podciąga link
     bliżej ostatniej karty (dolny padding bloku daje 20/32px oddechu). */
  margin: calc(-1 * var(--ds-space-2)) 0 0;
  padding: 12px 0 12px calc(var(--cc-indent) + var(--cc-card-pad));
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--ds-color-primary-ink);
  transition: color var(--ds-duration-base) var(--ds-ease-out-soft);
}
[data-cc-js] .cc-more:hover { color: var(--ds-color-primary-hover); }
[data-cc-js] .cc-more:focus-visible {
  outline: 2px solid var(--ds-color-primary); outline-offset: 2px;
  border-radius: var(--ds-radius-xs);
}
[data-cc-js] .cc-block.is-folded { display: none; }
[data-cc-js].is-expanded .cc-block.is-folded { display: block; }
[data-cc-js].is-expanded .cc-more { display: none; }
/* Chevron jest tu elementem inline w tekście linku (patrz markup sekcji),
   więc pozycjonuje go vertical-align, nie flex. */
.cc-more .cc-chev { margin: 0 0 0 6px; color: currentColor; vertical-align: -0.22em; }

/* ── Kamień milowy: koniec osi czasu ────────────────────────────────────── */
.cc-finish { position: relative; padding: var(--ds-space-4) 0 var(--ds-space-2) var(--cc-indent); }
/* Koniec osi: żeton z pucharem. Większy niż kropki działów (28/32px zamiast
   20/24px), bo puchar w 20px zlewa się w plamę — to ostatni punkt osi i ma
   czytać się jako meta, nie jako kolejny przystanek. */
.cc-finish-dot {
  position: absolute; left: 0;
  top: calc(var(--ds-space-4) + var(--cc-dot-center) - 14px);
  width: 28px; height: 28px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-cta-solar); color: var(--ds-color-on-cta-solar);
  display: grid; place-items: center; box-shadow: var(--ds-shadow-cta-solar);
}
.cc-finish-ic { flex: none; }
.cc-finish-title { margin: 0; }
/* Bez max-width: ten dopisek ma dochodzić do prawej krawędzi kontenera,
   jak reszta treści osi. */
.cc-finish-text { margin: 2px 0 0; color: var(--ds-color-ink-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP ≥1024px — nagłówek w dwóch kolumnach, os czasu na pełną szerokość
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Nagłówek: obietnica po lewej, karta liczb po prawej */
  .cc-head { display: grid; grid-template-columns: 1fr 340px; gap: var(--ds-space-12); align-items: start; }
  .cc-intro { text-align: left; }
  .cc-title { margin: 10px 0 14px; max-width: 24ch; }
  .cc-lead { margin: 0; }

  .cc-stats {
    grid-template-columns: 1fr; gap: 0; margin-top: 0;
    background-color: var(--ds-color-canvas-warm);
    border: 1px solid var(--ds-color-hairline);
    border-radius: var(--ds-radius-lg);
    padding: 22px 24px;
  }
  .cc-stat {
    background: none; border: 0; border-radius: 0; padding: 14px 0; text-align: left;
    display: flex; flex-direction: row-reverse; align-items: baseline;
    justify-content: space-between; gap: var(--ds-space-3);
  }
  .cc-stat + .cc-stat { border-top: 1px solid var(--ds-color-hairline); }
  .cc-stat-label { margin-top: 0; color: var(--ds-color-ink-secondary); }

  .cc-body { margin-top: 44px; }
  .cc-track { margin-top: 0; }

  /* Os czasu — większe kropki, więcej powietrza */
  .cc-block { padding: 0 0 var(--ds-space-8) var(--cc-indent); }
  .cc-block-dot {
    width: 24px; height: 24px;
    top: calc(var(--cc-dot-center) - 12px);
  }
  .cc-block-dot i { width: 9px; height: 9px; }
  .cc-block-desc { margin: 6px 0 var(--ds-space-4); }
  .cc-block-head + .cc-lessons { margin-top: var(--ds-space-4); }
  .cc-lessons { gap: 10px; }

  /* Spotkanie: pełny wiersz — numer, tytuł, dwa badge'e, chevron. */
  .cc-lesson { border-radius: var(--ds-radius-lg); }
  .cc-lesson-trig {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto;
    gap: var(--ds-space-3); align-items: center;
    padding: var(--ds-space-4) var(--cc-card-pad); min-height: 64px;
  }
  .cc-lesson-nr { width: 40px; height: 40px; border-radius: var(--ds-radius-sm); }
  .cc-lesson-meta-live { display: none; }
  .cc-lesson-tag { display: inline-flex; align-items: center; white-space: nowrap; }
  .cc-chev { margin-top: 0; margin-left: var(--ds-space-2); }

  /* Zagadnienia w dwóch kolumnach — przy 5 pozycjach to dwie kolumny zamiast
     długiej szpilki. */
  .cc-lesson-panel { padding: 2px var(--ds-space-5) var(--ds-space-5) 76px; }
  .cc-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px var(--ds-space-8); }

  .cc-finish {
    padding: var(--ds-space-5) 0 0 var(--cc-indent);
  }
  .cc-finish-dot {
    width: 32px; height: 32px;
    top: calc(var(--ds-space-5) + var(--cc-dot-center) - 16px);
  }
  .cc-finish-ic { width: 20px; height: 20px; }
}

/* Koniec linii osi zależy od górnego paddingu kamienia milowego, więc oba
   miejsca trzymają tę samą wartość: mobile --ds-space-4, desktop --ds-space-5. */
@media (min-width: 1024px) {
  .cc-track-line { bottom: calc(-1 * (var(--ds-space-5) + var(--cc-dot-center))); }
}