/* ==========================================================================
   sekcja "cta_guarantee" — domykające CTA „Wynik 80%+ albo zwrot pieniędzy”.
   Kontrakt DOM: sections/cta_guarantee.php.

   Wygląd niosą atomy z design-system.css: `.slab.slab-deep` (gradient
   `--ds-gradient-brand-deep`, biel tekstu, promień 24px, padding
   `--ds-slab-y`), `.badge`, `.btn.btn-lg.btn-solar`, `.text-heading-1`,
   `.text-body-lg`, `.lnk`. Ten plik dokłada wyłącznie układ, rytm pionowy
   i dwie rzeczy, których atomy nie znają: badge na ciemnym tle i optykę
   gwiazdki odsyłającej do przypisu.

   KONTRAST (APCA, audyt na 360 i 1280px). Gradient `brand-deep` idzie
   #0A2E9E → #0A5CF5 (60%) → #4C6BFF, więc kontrast liczy się osobno dla
   strefy, w której stoi dany element, a nie dla najciemniejszego stopu:
     - badge 13px/600 (próg 80 przy wadze 600) w strefie 0–20% gradientu:
       biel na tle badge'a (#314FAE…#315CC6) daje Lc 90,0…84,9,
     - nagłówek (26px na mobile / 31px na desktopie, próg 60): biel na
       gradiencie Lc 98,5 przy górnej krawędzi, minimum 74,9
       w najjaśniejszym narożniku,
     - lead `text-body-lg` (16/17px, próg 75) w strefie 30–70%: Lc 87,6…79,2,
     - przypis 14px `ink-muted` na `canvas-warm` (próg 85): Lc 90,6,
     - link w przypisie `primary-ink` 14px/500 (próg 85): Lc 87,1.
   Dwa ostatnie wiersze liczą się na KREMIE, nie na bieli — sekcja dostała
   tło `canvas-warm` (31.08.2026) i to ono wymusiło stopień 14px zamiast 13px
   w przypisie (rachunek przy `.ctg-note` niżej).
   Dlatego cały tekst na płycie idzie w PEŁNEJ bieli, bez `.text-muted-on-deep`:
   przygaszona biel `on-primary-mute` daje w tych samych miejscach Lc 87,4…63,8,
   czyli niedobór poza dopuszczalnym zapasem (DESIGN-SYSTEM.md → Kontrast →
   Ciemne płyty, gdzie ten sam rachunek jest już opisany). Hierarchię niesie
   rozmiar, nie wygaszenie. Obwódka badge'a (rgba(255,255,255,.22), Lc ~12
   względem tła płyty) jest chromem, nie sygnałem — czytelność badge'a niesie
   jego wypełnienie, nie ta krawędź.

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

.ctg {
  /* Ten sam ciepły krem, na którym stoi siatka kursów wyżej (tam wnosi go atom
     `.xsell`) — na życzenie (31.08.2026) obie sekcje dzielą jedno tło, więc
     między listą kursów a tym CTA nie ma szwu. Na każdej szerokości: tło
     zmieniające się na breakpoincie czyta się jak błąd, nie jak decyzja.
     Zmiana tej wartości musi wejść razem z komentarzem „TŁO” na czele
     assets/css/courses_grid.css — inaczej na styku sekcji pojawi się
     krawędź, której nikt nie zaprojektował. */
  background-color: var(--ds-color-canvas-warm);
  /* Padding poziomy zostaje na 0: płyta ma własny `margin-inline: 10px`
     z atomu `.slab` i ma być szersza niż kolumna tekstu nad nią — ten sam
     układ co ciemna płyta w course_methods. Przypis pod płytą wraca
     do `.container-ms`, żeby stał w kolumnie sąsiednich sekcji.
     Od GÓRY zero: sekcja siedzi na tym samym kremie co siatka kursów, więc
     odstęp między nimi jest jeden i niesie go `padding-bottom` przy `.cgrid`
     (assets/css/courses_grid.css). Dwa pełne paddingi sekcji dawały tu 88px
     na telefonie i 152px na desktopie — na wspólnym tle czytało się to jak
     dziura, bo nic nie rozdzielało. Od DOŁU pełny `--ds-section-y`: tam jest
     realna granica, stopka ma własny kolor (`canvas-soft`). */
  padding: 0 0 var(--ds-section-y);
}

/* Reset w `:where()` — zerowa specyficzność, więc atomy design systemu
   i klasy tej sekcji zawsze wygrywają. Bootstrap dokłada marginesy
   nagłówkom i akapitom, a płyta układa odstępy sama. */
.ctg :where(p, h2, h3, sup) { margin: 0; padding: 0; }

/* Nie ma tu `html { scroll-behavior: smooth }` — byłoby to powtórzenie reguły,
   którą ustawia już sam Bootstrap:
     @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth } }
   Dzięki niej CTA („Zapisuję się na kurs” → `#kursy`) dojeżdża do siatki
   kursów gładko, bez linijki JS-a i tak samo jak każda inna kotwica
   w serwisie. Odstęp od przyklejonego nagłówka daje `scroll-margin-top`
   przy `.cgrid` w assets/css/courses_grid.css.
   UWAGA przy debugowaniu tego CTA: `window.scrollTo(x, y)` i setter
   `scrollTop` też podlegają CSS-owemu `scroll-behavior`, więc przy globalnym
   `smooth` Bootstrapa „skok” z konsoli skokiem nie jest. */

/* ── ciemna płyta ─────────────────────────────────────────────────────── */
/* Zamykające CTA wolno dołożyć ~20% pionu ponad rytm płyty (DESIGN-SYSTEM.md
   → „Rytm pionowy”): 32px z `--ds-slab-y` rośnie do 38px. Poziomo 20px
   zamiast 16px z atomu — nagłówek na tym stopniu potrzebuje trochę więcej
   światła od krawędzi niż tekst listy. */
.ctg-slab { padding: 38px 20px; }

.ctg-badge-row { line-height: 0; }

/* Badge na ciemnej płycie. Design system nie ma takiego wariantu — wszystkie
   `.badge-*` są tintami pod jasne tło. Biała półprzejrzystość to chrom TEJ
   płyty, nie nowy kolor marki: ten sam zabieg co `rgba(255,255,255,…)`
   w course_weekcycle.css i course_methods.css. Litera w pełnej bieli
   (`on-primary`), bo `on-primary-mute` na tym stopniu nie dobija progu
   (DESIGN-SYSTEM.md → Kontrast → Ciemne płyty). */
.ctg-badge {
  background-color: rgba(255, 255, 255, .16);
  color: var(--ds-color-on-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.ctg-title {
  margin-top: var(--ds-space-4);
  /* O jeden stopień skali wyżej niż `.text-heading-1` z markupu (23 → 26px,
     `display-1`) — na życzenie (31.08.2026), żeby obietnica gwarancji
     wygrywała kadr telefonu. Stopień JEST w skali, nie jest dorobioną liczbą
     (CLAUDE.md, reguła 9). Świadoma konsekwencja: na telefonie ten H2 jest
     o 3px większy od H1 podstrony (23px, nagłówek siatki kursów) — blok
     domykający czyta się wtedy jak drugie hero, nie jak podsekcja. Na
     desktopie stopień wraca do `h1` (patrz media query na końcu pliku), bo
     `display-1` daje tam 38px przy 31px H1 i odwrócenie hierarchii byłoby
     już nie „mocnym akcentem”, tylko pomyłką. */
  font-size: var(--ds-text-display-1);
  text-wrap: balance;
}

/* Gwiazdka przypisu. `<sup>` Bootstrapa jest o połowę mniejsze i przesunięte
   o 0.5em — na stopniu H1 w piśmie displayowym wygląda jak drugi znak
   interpunkcyjny. 0.6em to nadal element BEZ SŁÓW (odsyłacz), więc podłoga
   13px z reguły 10 go nie dotyczy — tak samo jak inicjałów w awatarach. */
.ctg-title-star {
  font-size: 0.6em;
  top: -0.55em;
  margin-left: 0.05em;
}

.ctg-lead {
  margin-top: var(--ds-space-3);
  /* 52ch jak w bloku „Zacznij bez ryzyka” z design-system-preview.html —
     dłuższy wiersz na ciemnym tle męczy szybciej niż na jasnym. */
  max-width: 52ch;
  text-wrap: pretty;
}

/* Szerokość naturalna, nie pasek na całą płytę — na życzenie (31.08.2026).
   Przycisk na 100% szerokości czyta się jak stopka formularza; przy szerokości
   etykiety zostaje przyciskiem i lepiej wskazuje, że to jedna, konkretna akcja.
   Wysokość (52px z `btn-lg`), promień, cień i stany w całości z atomu
   `.btn.btn-lg.btn-solar`; `inline-flex`, bo atom centruje etykietę flexem. */
.ctg-cta {
  display: inline-flex;
  width: auto;
  margin-top: var(--ds-space-6);
}

/* ── przypis prawny ───────────────────────────────────────────────────── */
/* Poza płytą, na jasnym tle sekcji — uzasadnienie w nagłówku
   sections/cta_guarantee.php (odstępstwo 1). `ink-muted`, nie `ink-faint`:
   to treść, nie chrom (CLAUDE.md, reguła 13). */
/* 14px (`body-sm`), nie 13px (`caption`) — wymusiło to przeniesienie sekcji
   na krem, nie kwestia gustu. Na bieli para „13px + `primary-ink`” w linku
   przypisu dawała Lc 90,0 przy progu 90 dla 13px, czyli dokładnie na styk;
   na kremie ten sam link ma Lc 87,1, więc przy 13px byłby 2,9 punktu pod
   progiem. Reguła 11 nie dopuszcza odstępstwa w przypisie prawnym, a próg dla
   14px to 85 — link ma tam 87,1, a tekst przypisu (`ink-muted`) 90,6. Stopień
   wyżej zamiast słabszego progu; przy okazji tekst prawny jest czytelniejszy,
   co jest zgodne z „Czytelność jest przed elegancją”. */
.ctg-note {
  margin-top: var(--ds-space-5);
  font-size: var(--ds-text-body-sm);
  line-height: 1.5;
  color: var(--ds-color-ink-muted);
  text-wrap: pretty;
}

/* Link w przypisie zostaje na stopniu przypisu — `.lnk` nie ustawia
   font-size, więc dziedziczy 13px z akapitu. `white-space: nowrap` tylko
   na strzałce, żeby nie została sama w nowym wierszu. */
.ctg-note-link { white-space: nowrap; }

/* ── desktop ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Płyta wchodzi dokładnie w tę samą kolumnę, w której stoi siatka kursów
     wyżej. To ten sam rachunek, jaki robi `.container-ms`: szerokość okna
     przycięta do 1320px, minus jego padding boczny (2 × --ds-space-5).
     `min()`, nie samo 1320px — bez tego przy oknie węższym niż 1320px
     max-width nie wiąże, `margin-inline: auto` daje zero i płyta idzie
     od krawędzi do krawędzi, o 20px szerzej niż siatka nad nią. */
  .ctg-slab {
    max-width: calc(min(1320px, 100%) - 2 * var(--ds-space-5));
    margin-inline: auto;
    /* Tu również ~20% ponad rytm płyty (56px → 64px). */
    padding: 64px var(--ds-space-10);
    text-align: center;
  }

  .ctg-lead { margin-inline: auto; }

  /* Nagłówek wraca na stopień `h1` — uzasadnienie przy `.ctg-title` wyżej. */
  .ctg-title { font-size: var(--ds-text-h1); }

  .ctg-cta { margin-top: var(--ds-space-8); }

  .ctg-note { text-align: center; }
}