/* ==========================================================================
   sekcja "courses_grid" — pełna oferta kursów w siatce.
   Kontrakt DOM: sections/courses_grid.php.

   Ten plik jest WYŁĄCZNIE nakładką układu. Karta (`.xsell-card` i wszystko
   pod nią), resety marginesów Bootstrapa, nagłówek sekcji, tło, rytm pionowy
   i mechanizm koloru przedmiotu przychodzą z assets/css/courses_slider.css —
   sekcja renderuje się w roocie `.xsell` właśnie po to, żeby karta była
   dosłownie tą samą kartą co w cross-sellingu, a nie jej kopią, która się
   z czasem rozjedzie (CLAUDE.md → „Klasy CSS”: żadnej drugiej definicji tego
   samego komponentu). Oba pliki muszą być wpięte razem, w tej kolejności.

   Zadaniem `.cgrid` jest zamienić poziomy tor karuzeli na siatkę:
   1 kolumna na telefonie → 2 od 768px → 3 od 1024px. Nic tu nie zmienia
   wyglądu samej karty poza zdjęciem sztywnej szerokości, którą narzucał tor.

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

/* TŁO: nie ma tu deklaracji `background-color` i to jest decyzja. Sekcja bierze
   ciepły krem `canvas-warm` z atomu `.xsell` (courses_slider.css) i ma go
   dzielić z zamykającą sekcją gwarancji (assets/css/cta_guarantee.css) —
   na życzenie (31.08.2026) obie stoją na TYM SAMYM beżu, więc od nagłówka do
   stopki idzie jedno ciepłe pole, bez szwu między listą kursów a CTA. Jeśli
   któraś z nich ma kiedyś odjechać na biel, zmiana wchodzi w OBA pliki naraz,
   inaczej na styku pojawi się krawędź, której nikt nie zaprojektował.
   Karta (`--ds-color-surface`, biel) odkleja się od kremu sama — dlatego ta
   para kolorów jest tu lepsza niż biel na bieli. */

/* ODSTĘP DO SEKCJI CTA. Domyślnie zbierał się z dwóch pełnych paddingów
   sekcji — 48px z dołu `.xsell` + 40px z góry `.ctg` = 88px na telefonie
   i 80 + 72 = 152px na desktopie. Przy dwóch sekcjach na RÓŻNYCH tłach taki
   odstęp ma sens, bo rozdziela dwa bloki; przy jednym wspólnym kremie (patrz
   komentarz „TŁO” wyżej) nic nie rozdziela i czyta się jak dziura w stronie.
   Dlatego cały odstęp niesie teraz jedna wartość, tutaj, a `.ctg` ma
   `padding-top: 0` (assets/css/cta_guarantee.css) — jedno miejsce do zmiany
   zamiast dwóch, które trzeba dodawać w głowie.
   Reguła nie potrzebuje media query dla 768px: `.cgrid` i `.xsell` mają tę
   samą specyficzność, a ten plik ładuje się później, więc bije też
   `padding` z tabletowego media query w courses_slider.css. */
.cgrid { padding-bottom: var(--ds-space-8); }

/* Nadtytuł, tytuł i podtytuł wyśrodkowane na KAŻDEJ szerokości (na życzenie,
   31.08.2026). Karuzela na stronie głównej trzyma nagłówek do lewej aż do
   1024px i tak zostaje — dlatego reguła jest scope'owana do `.cgrid`, a nie
   dopisana do `.xsell__head` w courses_slider.css. Od 1024px wyśrodkowanie
   niesie już tamten plik; tu chodzi o zejście z tym niżej, na telefon. */
.cgrid .xsell__head { text-align: center; }

/* Kotwica `#kursy` jest celem CTA z sekcji cta_guarantee (i każdego linku
   „do listy kursów”). Nagłówek serwisu jest przyklejony (`position: sticky`
   w header.css) i przy przewijaniu W GÓRĘ zawsze się pokazuje, więc bez tego
   odstępu zasłaniałby nadtytuł sekcji. 96px = wysokość paska nawigacji
   z zapasem na jego cień; wartość jest poza skalą odstępów, bo odpowiada
   wysokości innego komponentu, nie rytmowi tej sekcji. */
.cgrid { scroll-margin-top: 96px; }

/* Odstęp nagłówek → siatka niesie tu siatka, nie lead: w karuzeli robił to
   `margin-bottom` leada (poniżej 1024px) albo `.xsell__viewport-wrap`
   (od 1024px), więc bez wyzerowania leada oba dodawałyby się do siebie.
   Efekt ubocznie pożądany: brak podtytułu (`lead => null`) nie zjada
   odstępu przed kartami. */
.cgrid .xsell__lead { margin-bottom: 0; }

.cgrid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-4);
  /* Ta sama wartość, jaką w karuzeli dawał `margin-bottom` leada — rytm
     nagłówek → treść zostaje wspólny dla obu sekcji. */
  margin-top: var(--ds-space-5);
}

/* Karta w siatce wypełnia kolumnę. W karuzeli szerokość narzucał tor
   (`.xsell__track > *`: `flex: 0 0 var(--xs-card-w)`), tutaj żadna z tych
   reguł nie działa — deklaracja jest tu jako jawna dokumentacja różnicy,
   nie jako obejście. Wysokości równa sam grid (domyślne `stretch`),
   a stopki kart trzyma w jednej linii `margin-top: auto` z `.xsell-card__foot`. */
.cgrid .xsell-card { width: auto; }

/* ── tablet ──────────────────────────────────────────────────────────────
   Dwie kolumny: przy jednej karta rozciągałaby się na ~700px i kadr 16:9
   zjadałby pół ekranu, przy trzech tytuł łamie się na cztery wiersze. */
@media (min-width: 768px) {
  .cgrid__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── desktop ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Na desktopie o krok więcej — te same 8px różnicy, jakie system trzyma
     między rytmem mobilnym i desktopowym. */
  .cgrid { padding-bottom: var(--ds-space-10); }

  .cgrid__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-5);
    /* Ten sam odstęp, jaki karuzela bierze z `.xsell__viewport-wrap`. */
    margin-top: var(--ds-space-8);
  }

  /* Przypis pod siatką idzie w tę samą wyśrodkowaną kolumnę co nagłówek
     (`.xsell__head` w courses_slider.css) — reguła jest tam pod
     `.xsell__note`, powtarzamy tylko odstęp od siatki. */
  .cgrid .xsell__note { margin-top: var(--ds-space-5); }
}