/* ──────────────────────────────────────────────────────────────────────────
   sekcja "course_methods" — metody nauczania („Z nami uczysz się skutecznie,
   a nie długo”). Zależności: assets/css/design-system.css (--ds-*, .slab/
   .slab-deep, .text-*, .hl-gradient) — kontrakt DOM w sections/course_methods.php.

   TYPOGRAFIA: rozmiary niosą klasy design systemu nadane w markupie
   (.text-eyebrow, .text-heading-1, .text-heading-2, .text-body-lg,
   .text-body-sm, .text-label, .text-caption). Font-size ustawiamy tu tylko
   w trzech miejscach, gdzie projekt sekcji świadomie schodzi z siatki DS
   (nazwa metody w przełączniku, opis metody na desktopie) — każde z osobnym
   komentarzem. Reszta ma skalować się tak samo jak sąsiednie sekcje landingu.

   Białe rgba() na ciemnej płycie (tła, pierścienie inset) to chrom tej płyty,
   nie kolory marki — ten sam zabieg co w course_weekcycle.css.

   Mobile-first: baza 360px, desktop od 1024px.
   ────────────────────────────────────────────────────────────────────────── */

.cme {
  background-color: var(--ds-color-canvas);
  padding: 36px 0;
}

.cme-grid { display: grid; }

/* ── Intro ─────────────────────────────────────────────────────────────── */
/* Padding boczny 20px zamiast .container-ms: ciemna płyta ma być szersza niż
   tekst nad nią (.slab daje jej margin-inline 12px), więc intro i porównanie
   trzymają własny, większy odstęp od krawędzi ekranu. */
.cme-intro,
.cme-compare { padding-inline: var(--ds-space-5); }

.cme-title {
  margin: 0;
  color: var(--ds-color-ink);
  text-wrap: pretty;
}

.cme-lead {
  margin: 14px 0 0;
  color: var(--ds-color-ink-secondary);
  text-wrap: pretty;
}

/* ── Ciemna płyta ──────────────────────────────────────────────────────── */
/* .slab-deep wnosi gradient, biel tekstu i padding 40px 20px — tu potrzebny
   jest ciaśniejszy padding boczny, żeby przełącznik (2 × 48px + panel)
   zmieścił się na 360px. */
.cme-slab.cme-slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--ds-space-6);
  padding: 22px 18px 28px;
}

/* Ziarno na gradiencie — duże płaszczyzny pasmują się na 8-bitowych panelach.
   Statyczna nakładka, nic nie animuje. */
.cme-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Przełącznik metod ─────────────────────────────────────────────────── */
/* Bez JS przełącznik nie ma czego przełączać — pokazujemy go dopiero, gdy
   skrypt oznaczy root atrybutem data-js (patrz assets/js/course_methods.js). */
.cme-switch { display: none; }
.cme[data-js] .cme-switch {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: var(--ds-space-2);
  align-items: center;
}

/* 48×48 także na mobile: DESIGN-SYSTEM.md → „Cele dotykowe” dopuszcza 44px
   wyłącznie dla ikon w nawigacji, w treści obowiązuje minimum 48px. */
.cme-nav {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: var(--ds-color-on-primary);
  cursor: pointer;
  transition: background var(--ds-duration-base) var(--ds-ease-out-soft),
              transform var(--ds-duration-fast) var(--ds-ease-out-soft);
}
.cme-nav svg { width: 20px; height: 20px; }
.cme-nav:hover { background: rgba(255, 255, 255, .20); }
.cme-nav:active { transform: scale(var(--ds-press-scale)); }
/* Pierścień focusu z tokena (--ds-shadow-ring-focus) jest niebieski i ginie na
   granatowej płycie — na ciemnym tle focus rysujemy bielą. */
.cme-nav:focus-visible { outline: 2px solid var(--ds-color-on-primary); outline-offset: 3px; }

.cme-current {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin: 0;
  padding: 4px 10px;
  text-align: center;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
}

/* Nazwa metody w stopniu .text-title (15px), ale w kroju display i z własnym
   trackingiem — .text-label gubi się jako element wiodący pigułki, a pełny
   .text-heading-3 rozpycha ją na 360px przy „Spaced Repetition”. */
.cme-current-name {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-primary);
}
/* Panel metody jest ciemny, ale nie jest .slab-deep, więc nie łapie go
   globalna reguła „mały tekst na ciemnym zostaje biały" z design systemu —
   powtarzamy ją tu lokalnie (13px w przygaszonej bieli nie dobija progu). */
.cme-current-count { margin-top: 1px; color: var(--ds-color-on-primary); }

/* Zmiana metody: krótkie wejście etykiety (transform + opacity). */
.cme-current.is-changing .cme-current-name,
.cme-current.is-changing .cme-current-count {
  animation: cme-fade 260ms var(--ds-ease-out-soft) both;
}

/* ── Panele metod ──────────────────────────────────────────────────────── */
/* Bez JS: metody jedna pod drugą, każda z własną etykietą. */
.cme-panel + .cme-panel { margin-top: var(--ds-space-8); }
.cme-panel-label {
  margin: 0 0 var(--ds-space-3);
  color: var(--ds-color-on-primary);
}

/* Z JS: wszystkie panele leżą w tej samej komórce grida, więc płyta ma zawsze
   wysokość najdłuższej metody i przełączanie nie przesuwa niczego pod spodem
   (zero CLS) — nawet gdy opisy będą różnej długości po podmianie copy.
   Świadomie zamiast atrybutu `hidden` z referencji: display:none wyjmuje panel
   z grida i wysokość płyty znów zaczyna skakać.
   `visibility` (nie `opacity`) usuwa nieaktywne panele z drzewa dostępności,
   więc czytnik czyta tylko aktywną metodę, zgodnie z aria-live w przełączniku.
   Ten sam wzorzec co .cwc-step w course_weekcycle.css. */
.cme[data-js] .cme-panels { display: grid; }
.cme[data-js] .cme-panel { grid-area: 1 / 1; visibility: hidden; }
.cme[data-js] .cme-panel + .cme-panel { margin-top: 0; }
.cme[data-js] .cme-panel-label { display: none; }
.cme[data-js] .cme-panel.is-active {
  visibility: visible;
  animation: cme-fade 320ms var(--ds-ease-out-soft) both;
}
/* Dekoracyjne pętle w niewidocznych panelach nadal tykałyby i zjadały klatki
   na słabszym telefonie — pauzujemy je razem z panelem. */
.cme[data-js] .cme-panel:not(.is-active) * { animation-play-state: paused; }

/* ── Wizualizacje (stała wysokość dla każdej metody) ───────────────────── */
.cme-viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 132px;
  margin-top: var(--ds-space-5);
  padding: 18px;
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.cme-viz-recall { gap: var(--ds-space-3); }

.cme-bar {
  display: block;
  height: 9px;
  border-radius: var(--ds-radius-full);
  background: rgba(255, 255, 255, .22);
}
/* Długości pasków to rysunek, nie dane — dlatego siedzą w CSS, nie w markupie. */
.cme-bar:nth-of-type(1) { width: 76%; }
.cme-bar:nth-of-type(2) { width: 54%; }

.cme-recall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.cme-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  height: 30px;
  border-radius: var(--ds-radius-full);
  /* Tekst na żółtym zawsze ciemny (CLAUDE.md reguła 3), ale ta para ma sufit
     Lc 75 i przy 13px go nie dobija — pigułka bierze jaśniejszy żółty
     z ciemniejszym tekstem (Lc 82) i obwódkę w pełnym solarze, żeby na
     ciemnej płycie nadal czytała się jako żółty akcent. */
  background: var(--ds-color-cta-solar-tint);
  color: var(--ds-color-cta-solar-ink);
  box-shadow: inset 0 0 0 1.5px var(--ds-color-cta-solar);
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 13px;
}
.cme-chip-front,
.cme-chip-back { position: absolute; }
.cme-chip-front { animation: cme-front 4.2s var(--ds-ease-out-soft) infinite; }
.cme-chip-back  { animation: cme-back  4.2s var(--ds-ease-out-soft) infinite; }

.cme-check {
  width: 20px;
  height: 20px;
  color: var(--ds-color-on-primary);
  animation: cme-back 4.2s var(--ds-ease-out-soft) infinite;
}

.cme-timeline { position: relative; height: 40px; }
.cme-timeline-line {
  position: absolute;
  left: 0; right: 0; top: 19px;
  height: 2px;
  background: rgba(255, 255, 255, .28);
}
.cme-dot {
  position: absolute;
  top: 13px;
  width: 14px; height: 14px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-on-primary);
  animation: cme-dot 4.4s var(--ds-ease-out-soft) infinite;
}
.cme-dot-solar {
  top: 12px;
  width: 16px; height: 16px;
  background: var(--ds-color-cta-solar);
}
/* .cme-timeline-line jest pierwszym <span> w .cme-timeline, dlatego kropki
   liczą się od nth-of-type(2). Pozycje = rysunek osi czasu, stąd w CSS. */
.cme-dot:nth-of-type(2) { left: 0; }
.cme-dot:nth-of-type(3) { left: 22%; animation-delay: .35s; }
.cme-dot:nth-of-type(4) { left: 52%; animation-delay: .70s; }
.cme-dot:nth-of-type(5) { right: 0;  animation-delay: 1.05s; }

.cme-blocks { display: flex; gap: 5px; height: 34px; }
.cme-blocks span {
  flex: 1;
  border-radius: 7px;
  background: rgba(255, 255, 255, .55);
  animation: cme-block 4.8s var(--ds-ease-out-soft) infinite;
}
.cme-blocks span:nth-child(odd) { background: var(--ds-color-cta-solar); }
.cme-blocks span:nth-child(2) { animation-delay: .3s; }
.cme-blocks span:nth-child(3) { animation-delay: .6s; }
.cme-blocks span:nth-child(4) { animation-delay: .9s; }
.cme-blocks span:nth-child(5) { animation-delay: 1.2s; }
.cme-blocks span:nth-child(6) { animation-delay: 1.5s; }

.cme-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-color-on-primary-mute);
}

/* ── Tekst metody — zawsze POD wizualizacją (mobile i desktop) ─────────── */
.cme-copy { margin-top: 22px; }
.cme-method-title { margin: 0 0 10px; color: var(--ds-color-on-primary); }
.cme-method-text { margin: 0; text-wrap: pretty; }

/* ── Porównanie skuteczności ───────────────────────────────────────────── */
.cme-compare { margin-top: 26px; }
.cme-compare-title { margin: 0; color: var(--ds-color-ink); }

.cme-compare-rows {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  margin-top: 14px;
}

.cme-compare-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ds-color-ink-muted);
}
.cme-compare-label-strong {
  font-weight: 600;
  color: var(--ds-color-primary-ink);
}

.cme-track {
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-canvas-soft);
}
.cme-track-strong { background: var(--ds-color-primary-tint); }

.cme-fill {
  display: block;
  height: 100%;
  border-radius: var(--ds-radius-full);
}
/* Poglądowe proporcje, nie dane — dopóki nie ma źródła, żadna liczba nie idzie
   do markupu (CLAUDE.md → „Uwaga prawna”). */
.cme-fill-weak {
  width: 32%;
  background: var(--ds-color-ink-faint);
}
/* Pasek „nasze metody” wjeżdża raz przy wczytaniu. Animujemy transform, nie
   width (CLAUDE.md → „Stabilność i wydajność”, pkt 2): pasek ma pełną szerokość
   i jest wysunięty w lewo poza .cme-track (overflow: hidden), więc jego prawa
   krawędź wędruje od ~6% do 100% bez deformacji zaokrągleń. */
.cme-fill-strong {
  width: 100%;
  background: var(--ds-color-primary);
  animation: cme-fill 1.6s var(--ds-ease-out-soft) both;
}

.cme-source { margin: var(--ds-space-3) 0 0; color: var(--ds-color-ink-muted); }

/* ── Desktop ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .cme { padding: 72px 0; }

  /* Ta sama szerokość i te same marginesy boczne co .container-ms (1320px
     + padding 20px od 1024px), żeby sekcja stała w jednej linii z sąsiadami
     na landingu. Kolumnę tekstu zwęża .cme-copy, nie kontener. */
  .cme-grid {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--ds-space-5);
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-areas:
      "intro   slab"
      "compare slab";
    align-content: start;
    column-gap: 56px;
  }

  .cme-intro { grid-area: intro; padding-inline: 0; }
  .cme-slab.cme-slab { grid-area: slab; margin: 0; padding: 34px 36px 40px; }
  .cme-compare {
    grid-area: compare;
    align-self: start;
    margin-top: 36px;
    padding: 28px 0 0;
    border-top: 1px solid var(--ds-color-hairline);
  }

  .cme-title { margin-top: 10px; }
  .cme-lead { margin-top: 18px; }

  .cme[data-js] .cme-switch {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 14px;
    max-width: 520px;
    margin-inline: auto;
  }
  .cme-nav { border-radius: var(--ds-radius-md); }
  .cme-nav svg { width: 22px; height: 22px; }
  .cme-current { min-height: 52px; }
  /* Krok desktopowy dla stopnia pośredniego z komentarza wyżej. */
  .cme-current-name { font-size: 16px; }
  .cme-current-count { margin-top: 2px; }

  .cme-viz { height: 168px; margin-top: 28px; padding: var(--ds-space-6); }
  .cme-viz-recall { gap: 14px; }
  .cme-bar { height: 10px; }
  .cme-recall { gap: var(--ds-space-3); margin-top: 4px; }
  .cme-chip { min-width: 108px; height: 34px; font-size: 14px; }
  .cme-check { width: 22px; height: 22px; }

  .cme-timeline { height: 44px; }
  .cme-timeline-line { top: 21px; }
  .cme-dot { top: 14px; width: 16px; height: 16px; }
  .cme-dot-solar { top: 13px; width: 18px; height: 18px; }
  .cme-blocks { gap: 6px; height: 40px; }
  .cme-blocks span { border-radius: 8px; }
  .cme-scale { margin-top: 10px; }

  .cme-copy { margin-top: 26px; max-width: 620px; }
  /* .text-body-sm zostaje 14px na desktopie; opis metody na dużej płycie
     potrzebuje kroku wyżej, ale nie całego leadu (.text-body-lg, 17px). */
  .cme-method-text { font-size: 15.5px; line-height: 1.6; }

  .cme-compare-rows { gap: 14px; }
  .cme-compare-label { margin-bottom: 6px; }
  .cme-track { height: 12px; }
  .cme-source { margin-top: 14px; }
}

/* ── Keyframes (tylko transform/opacity) ───────────────────────────────── */
@keyframes cme-fade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cme-front { 0%, 44% { opacity: 1; } 52%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cme-back  { 0%, 44% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cme-dot   { 0%, 100% { transform: scale(1); opacity: .45; } 18% { transform: scale(1.7); opacity: 1; } }
@keyframes cme-block { 0%, 100% { opacity: .35; } 22% { opacity: 1; } }
@keyframes cme-fill  { from { transform: translateX(-94%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .cme *,
  .cme *::before,
  .cme *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Bez animacji panel nie dostaje `both`, więc trzeba mu jawnie oddać
     widoczność ustawianą przez klatki cme-fade. */
  .cme[data-js] .cme-panel.is-active { visibility: visible; opacity: 1; }
}