/* ──────────────────────────────────────────────────────────────────────────
   sekcja "course_weekcycle" — pętla tygodnia ("Skuteczny plan nauki").
   Zależności: assets/css/design-system.css (--ds-*, .slab/.slab-deep,
   .text-*, .badge-solar, .container-ms) — patrz sections/course_weekcycle.php
   dla kontraktu DOM. Bez JS (`.cwc:not([data-js])`) sekcja pokazuje wszystkie
   etapy jedno pod drugim — to jedyny fallback, nie duplikuj go gdzie indziej.

   TYPOGRAFIA: ten plik NIE ustawia font-size. Rozmiary niosą wyłącznie klasy
   design systemu nadane w markupie (.text-heading-1 / .text-heading-2 /
   .text-body-lg / .text-eyebrow / .text-numeral-xl), więc sekcja skaluje się
   na mobile i desktopie tak samo jak sąsiednie sekcje landingu. Potrzebny inny
   rozmiar? Zmień klasę w PHP albo token w DESIGN-SYSTEM.md — nie dopisuj tu
   px-a, bo wtedy ta jedna sekcja zaczyna żyć własnym życiem.
   ────────────────────────────────────────────────────────────────────────── */

/* Płyta siedzi w .container-ms (kontener jest jej rodzicem w markupie), więc
   jej krawędzie pokrywają się z kolumną treści pozostałych sekcji landingu.
   .slab dokłada `margin-inline: 10px` bezwarunkowo — tu zerujemy, bo wcięcie
   niesie już kontener; bez tego płyta byłaby o 20px węższa od sąsiadów. */
.cwc.slab { margin-inline: 0; }

.cwc-grid { display: block; text-align: center; }

/* Jedno wyróżnienie typograficzne na nagłówek (CLAUDE.md → reguła 5). */
.cwc-accent { color: var(--ds-color-cta-solar); }

.cwc-title { margin: var(--ds-space-4) 0 var(--ds-space-2); }
.cwc-lead { margin-top: var(--ds-space-2); }

/* .text-eyebrow ustawia kolor na --ds-color-ink (ciemny, pod jasne tła) —
   na ciemnej płycie numer etapu musi wrócić do bieli. Dwie klasy w selektorze
   biją pojedyncze .text-eyebrow.
   Był tu --ds-color-on-deep-accent (żółty akcent): na starym, granatowym
   `brand-deep` dawał Lc 83 i przechodził próg dla 13px (80). Po v2.2 gradient
   wchodzi w Volt Blue i ten sam token spada do Lc 67 — niedobór 13 punktów,
   czyli poza dopuszczalnym zapasem 10 (DESIGN-SYSTEM.md → Kontrast → Kiedy
   wolno zejść poniżej progu). Żółty akcent na płycie zostaje więc dla stopni
   od 21px; tu niesie go sam Solar w kropce etapu obok.
   Biel: Lc 75 przy progu 80 — niedobór 5 punktów, w granicy odstępstwa. */
.cwc-step-no.cwc-step-no { color: var(--ds-color-on-primary); }

/* ── Etapy (tekst) ─────────────────────────────────────────────────────── */
.cwc-steps { list-style: none; margin: var(--ds-space-6) 0 0; padding: 0; }
.cwc-step { display: flex; flex-direction: column; gap: var(--ds-space-2); align-items: center; }
.cwc-step + .cwc-step { margin-top: var(--ds-space-5); }

/* Z JS widoczny jest tylko aktywny etap, ale WSZYSTKIE leżą w tej samej
   komórce grida — dzięki temu blok ma zawsze wysokość najdłuższego etapu
   i przełączanie opisów o różnej długości nie przesuwa niczego pod spodem
   (zero CLS). Świadomie zamiast `display:none` + zgadywanego `min-height`:
   min-height trzeba by ręcznie podbijać przy każdej zmianie długości copy,
   a za krótki natychmiast wraca jako skakanie layoutu.
   `visibility` (nie `opacity`) — usuwa nieaktywne etapy z drzewa dostępności,
   więc czytnik ekranu czyta tylko aktywny, zgodnie z aria-live="polite". */
.cwc[data-js] .cwc-steps { display: grid; }
.cwc[data-js] .cwc-step { grid-area: 1 / 1; visibility: hidden; }
.cwc[data-js] .cwc-step + .cwc-step { margin-top: 0; }
.cwc[data-js] .cwc-step.is-active { visibility: visible; }

/* ── Koło ──────────────────────────────────────────────────────────────── */
.cwc-ring { position: relative; width: 236px; aspect-ratio: 1; margin: var(--ds-space-6) auto 0; }
.cwc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.cwc-track { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.cwc-arc {
  fill: none;
  stroke: var(--ds-color-cta-solar);
  stroke-width: 3;
  stroke-linecap: round;
  /* stroke-dasharray NIE jest ustawiany tu w CSS — jako właściwość CSS miałby
     pierwszeństwo przed atrybutem, który JS zmienia przez setAttribute(), i na
     stałe zamroziłby łuk na wartości początkowej (dokładnie ten bug, który
     naprawiono: łuk stał w miejscu niezależnie od aktywnego etapu). Wartość
     startowa (0 = bez wypełnienia) siedzi w atrybucie w markupie (patrz
     sections/course_weekcycle.php), JS ją nadpisuje przy każdej zmianie etapu. */
  transition: stroke-dasharray var(--ds-duration-slow) var(--ds-ease-out-soft);
}

.cwc-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-1);
}

.cwc-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--ds-radius-full);
  /* Dwie warstwy, nie jeden kolor: szkło (12% biel) na wierzchu + kryjące
     tło pod nim. Węzeł stoi dokładnie na torze/łuku (oba w tym samym SVG za
     nim) — bez kryjącej warstwy żółty łuk postępu prześwitywał przez 12%
     biel i był widoczny bezpośrednio pod kropką, zamiast być w całości
     zakryty przez nią. */
  background:
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)),
    var(--ds-color-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  color: var(--ds-color-on-primary);
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-duration-base) var(--ds-ease-out-soft),
              box-shadow var(--ds-duration-base) var(--ds-ease-out-soft),
              scale var(--ds-duration-base) var(--ds-ease-out-soft);
}
/* Cel dotykowy 48px bez powiększania kółka (40px + inset -4px na każdą stronę). */
.cwc-node::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.cwc-node:hover {
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)),
    var(--ds-color-primary);
}
.cwc-node:focus-visible { outline: 2px solid var(--ds-color-on-primary); outline-offset: 3px; }
.cwc-node.is-active {
  background: var(--ds-color-cta-solar);
  color: var(--ds-color-on-cta-solar);
  box-shadow: var(--ds-shadow-cta-solar), inset 0 0 0 1px rgba(255, 255, 255, .5);
  scale: 1.14;
}

/* Pozycje węzłów na okręgu (co 360°/N, start u góry) — geometria SVG, nie
   tokeny designu. Dopisz kolejne nth-of-type, jeśli liczba etapów kiedyś
   przestanie być równa 6. */
.cwc-node:nth-of-type(1) { --x: 50%;    --y: 7%; }
.cwc-node:nth-of-type(2) { --x: 87.25%; --y: 28.5%; }
.cwc-node:nth-of-type(3) { --x: 87.25%; --y: 71.5%; }
.cwc-node:nth-of-type(4) { --x: 50%;    --y: 93%; }
.cwc-node:nth-of-type(5) { --x: 12.75%; --y: 71.5%; }
.cwc-node:nth-of-type(6) { --x: 12.75%; --y: 28.5%; }

/* ── Desktop: tekst po lewej (nagłówek/lead nad, opis etapu pod), koło
   po prawej ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Szerokość płyty wyznacza .container-ms z markupu — tu zostaje tylko więcej
     powietrza w pionie. Lewe wcięcie treści podniesione z bazowych 16px
     .slab-deep (design-system.css) — na tak szerokiej płycie (do 1320px)
     tekst siedział zbyt blisko krawędzi; prawa strona zostaje bez zmian,
     bo tam już jest naturalny odstęp od koła (column-gap + jego szerokość). */
  .cwc.slab-deep { padding-block: var(--ds-space-16); padding-left: var(--ds-space-12); }

  .cwc-grid {
    display: grid;
    /* Ring column ma sztywne minimum: samo koło to 380px, przy czystym
       1.7fr/1fr poniżej ~1360px kolumna zjechałaby pod tę wartość. */
    grid-template-columns: minmax(0, 1.7fr) minmax(400px, 1fr);
    grid-template-areas:
      "intro ring"
      "steps ring";
    column-gap: var(--ds-space-16);
    row-gap: var(--ds-space-10);
    text-align: left;
  }
  .cwc-intro { grid-area: intro; }
  .cwc-steps { grid-area: steps; }
  .cwc-ring {
    grid-area: ring;
    justify-self: center;
    align-self: center;
    width: 380px;
    margin: 0;
  }

  .cwc-title { margin: var(--ds-space-5) 0 var(--ds-space-3); }
  .cwc-step { align-items: flex-start; text-align: left; }
  /* Odstęp intro↔etapy niesie row-gap grida — bez dodatkowego marginesu,
     który by się z nim sumował. */
  .cwc[data-js] .cwc-steps { margin-top: 0; }
}

/* ── Od 1360px: dwie równe połowy, koło dokładnie na środku prawej ───────
   Kolumny 1fr/1fr przy column-gap: 0 dają drugiej kolumnie dokładnie prawą
   połowę kontenera, więc `justify-self: center` stawia koło w jej środku.
   Oddech między kolumnami robi padding tekstu, nie gap — gap przesuwałby
   środek prawej kolumny w prawo o połowę swojej szerokości (to był powód,
   dla którego koło siedziało zbyt blisko krawędzi). */
@media (min-width: 1360px) {
  .cwc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }
  .cwc-intro,
  .cwc-steps { padding-right: var(--ds-space-12); }
}

@media (prefers-reduced-motion: reduce) {
  .cwc-arc,
  .cwc-node { transition: none; }
}