/* sections/course_summary.php — karta parametrów kursu pod hero.
   Mobile (<768px): karta w jednej kolumnie (lista 6 wierszy), bezramkowa
   pigułka promocji z dużą ceną, CTA, notka pod CTA i pasek
   telefonu bez tła, tylko z obwódką (avatar + numer podkreślony pod tekstem,
   wszystko wyśrodkowane).
   Tablet/wąski desktop (768–1359px): ta sama karta w 2 kolumnach po 3 wiersze
   (1,2,3 | 4,5,6) — jedna kolumna robi się za wysoka/za rzadka na tej
   szerokości, reszta bez zmian.
   Od 1360px: karta w jednym rzędzie RÓWNYCH kolumn na ciemnej płycie (ten sam
   gradient co .slab-deep w design-system.css, nie sama klasa — .slab-deep nie
   jest ograniczona do desktopu), żółte kafle ikon, żółty tekst wartości,
   jasne rozdzielacze; ikona nad tekstem, który łamie się na dwie linie, gdy
   nie mieści się w jednej (np. dni tygodnia w "Grupy"); pigułka promocji,
   CTA i notka pod CTA znikają, pasek telefonu bez obwódki, wyśrodkowany,
   jednowierszowy, z inną (dłuższą) treścią notki.
   Breakpoint 1360px (nie sitewide 1024px z DESIGN-SYSTEM.md): to punkt, od
   którego 6 równych kolumn ma tyle miejsca, że tylko najdłuższa treść
   ("Grupy") łamie się na drugą linię — resztę mieści na jednej. Poniżej
   przeglądarka musiałaby ściskać kolumny (flex-shrink) na tyle, że więcej
   niż jedna kolumna łamałaby się wielokrotnie albo kolidowała z sąsiadem
   (sitewide 1024px dawał realne kolizje w teście). */
.cs { padding: 32px 0 32px; border-bottom: 1px solid var(--ds-color-hairline); }
@media (min-width: 1360px) { .cs { padding: 56px 0 56px; } }

.cs-title { text-align: center; }

.cs-card {
  list-style: none;
  margin: 20px 0 0;
  padding: 2px 16px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) and (max-width: 1359.98px) {
  .cs-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    row-gap: 0;
    column-gap: 8px;
  }
}
@media (min-width: 1360px) {
  .cs-card {
    flex-direction: row;
    flex-wrap: nowrap;
    /* flex-start, nie center: kolumny mają równą szerokość, ale różną
       wysokość, gdy tekst łamie się na dwie linie (np. "Grupy") — flex-start
       trzyma ikony na tej samej wysokości niezależnie od tego, czy sąsiad
       ma jedną czy dwie linijki tekstu. */
    align-items: flex-start;
    padding: 24px 20px;
    margin-top: 28px;
    /* Ten sam rodzinny gradient co .slab-deep, ale tylko dwa ciemniejsze
       stopnie (primary-deep → primary), nie trzy jak --ds-gradient-brand-deep.
       Karta jest szeroka i płaska (nie wysoka jak typowa sekcja hero), więc
       przy kącie 160deg i pełnym, jaśniejszym trzecim stopniem (#4C6BFF)
       prawa kolumna karty wypadała za jasna: żółty tekst wartości spadał
       tam do ~2,7:1 (poniżej nawet 3:1 dla dużego tekstu). Dwa stopnie
       trzymają najjaśniejszy punkt na --ds-color-primary — żółty na nim
       daje ~3,4:1, biały ~5,4:1. Nie dodajemy samej klasy .slab-deep — ta
       nie jest ograniczona do desktopu, a karta ma zostać jasna na
       mobile/tablecie. Border usunięty: hairline (jasny beż) gubi się na
       ciemnym tle. */
    background: linear-gradient(160deg, var(--ds-color-primary-deep), var(--ds-color-primary));
    color: var(--ds-color-on-primary);
    border: none;
  }
}

.cs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ds-color-hairline);
}
.cs-row:last-child { border-bottom: none; }

/* .cs-divider to osobne elementy w DOM (patrz course_summary.php), nie
   border na .cs-row — przy zmiennej długości treści (np. "Grupy" vs
   "Płatność") border przypięty do krawędzi wiersza wypada w innym miejscu
   względem ikony w każdej kolumnie, więc linie nie są symetryczne. Jako
   samodzielny element w tym samym flex/grid rzędzie dzieli te same, równe
   odstępy (gap / justify-content) co reszta kolumn. Domyślnie schowany —
   mobile i tablet mają własne hairline'e na .cs-row (border-bottom/
   border-right niżej), pokazywany tylko w jednorzędowym układzie od 1360px. */
.cs-divider { display: none; }

@media (min-width: 768px) and (max-width: 1359.98px) {
  .cs-row { padding: 15px 16px; }
  /* Dividery są w DOM między wierszami (schowane, display:none), więc
     realne wiersze siedzą na nieparzystych pozycjach (1,3,5,7,9,11) —
     stąd nth-child(-n+5)/nth-child(5), nie (-n+3)/(3). */
  .cs-row:nth-child(5) { border-bottom: none; }
  .cs-row:nth-child(-n+5) { border-right: 1px solid var(--ds-color-hairline); }
}

@media (min-width: 1360px) {
  .cs-row {
    /* flex:1 1 0 — wszystkie kolumny dostają równy udział szerokości
       (patrz brief: "każdy z featurów niech ma tą samą szerokość"),
       niezależnie od długości własnej treści. align-items:stretch (nie
       center, dziedziczone z bazowej reguły .cs-row) rozciąga .cs-text na
       całą szerokość kolumny, żeby tekst miał o co się łamać na dwie linie
       zamiast obcinać się elipsą. */
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 10px 12px;
    gap: 6px;
    border-bottom: none;
  }
  .cs-divider {
    display: block;
    width: 1px;
    align-self: stretch;
    flex: none;
    /* Jasny rozdzielacz na ciemnej płycie — hairline (beż) z reszty karty
       byłby na niej niewidoczny. */
    background-color: var(--ds-color-on-primary-mute);
    opacity: 0.35;
  }
}

.cs-tile { width: 44px; height: 44px; }
.cs-tile > svg { width: 22px; height: 22px; }
@media (min-width: 1360px) {
  /* .cs-row jest teraz align-items:stretch (patrz wyżej) — bez tego kafel
     o stałej szerokości przykleiłby się do lewej krawędzi kolumny zamiast
     zostać wyśrodkowany nad tekstem. */
  .cs-tile { width: 32px; height: 32px; align-self: center; }
  .cs-tile > svg { width: 16px; height: 16px; }
}

/* Paleta dekoracyjna 1:1 z course_corefeatures.css (.ccf-ic--*) — te same
   tokeny tint/ink, żeby kolory kafelków były spójne między sekcjami. */
.cs-ic--blue   { background-color: var(--ds-color-primary-tint);    color: var(--ds-color-primary-ink); }
.cs-ic--green  { background-color: var(--ds-color-success-tint);    color: var(--ds-color-success-ink); }
.cs-ic--amber  { background-color: var(--ds-color-cta-solar-tint);  color: var(--ds-color-cta-solar-ink); }
.cs-ic--purple { background-color: var(--ds-subj-chemia-tint);      color: var(--ds-subj-chemia-deep); }
.cs-ic--pink   { background-color: var(--ds-subj-angielski-tint);   color: var(--ds-subj-angielski-deep); }
.cs-ic--cyan   { background-color: var(--ds-subj-informatyka-tint); color: var(--ds-subj-informatyka-deep); }

/* Na ciemnej płycie (od 1360px) paleta dekoracyjna ustępuje jednemu,
   spójnemu żółtemu kaflowi — reguła "tekst na żółtym zawsze ciemny" z
   DESIGN-SYSTEM.md dotyczy też ikon: biała ikonka na solarowym żółtym miała
   kontrast ~1,6:1 (potrzeba min. 3:1 dla grafiki) i była słabo czytelna —
   przetestowane i cofnięte na życzenie Tomka. Kolor glifu to
   --ds-color-cta-solar-ink — ten sam ciemny odcień, którym system już
   paruje tekst z tym żółtym wszędzie indziej (.badge-solar, .btn-solar). */
@media (min-width: 1360px) {
  .cs-ic--blue, .cs-ic--green, .cs-ic--amber,
  .cs-ic--purple, .cs-ic--pink, .cs-ic--cyan {
    background-color: var(--ds-color-cta-solar);
    color: var(--ds-color-cta-solar-ink);
  }
}

.cs-text { flex: 1; min-width: 0; display: block; }
/* Kolor tu, nie przez .text-muted Bootstrapa: ten atom nadpisuje !important,
   więc nie dałoby się go potem zmienić na biały w ciemnej płycie od 1360px
   (patrz niżej). */
.cs-label { display: block; color: var(--ds-color-ink-muted); }
.cs-value { display: block; margin-top: 1px; }

/* Plakietki wiersza "Grupy" — jeden dzień tygodnia jedna plakietka (beż
   canvas-soft, tylko tekst, bez ikony, pełne zaokrąglenie), żeby dni czytały
   się jako osobne etykiety, nie jako jeden skrócony ciąg obok liczby/ceny w
   sąsiednich wierszach. Na ciemnej płycie od 1360px (patrz .cs-card niżej)
   beż zamienia się na półprzezroczystą biel — pełny canvas-soft zlewałby się
   z resztą jasnych elementów karty i gubił kontekst „to plakietka na
   ciemnym tle". */
.cs-badge-group { display: flex; flex-wrap: wrap; gap: 3px; }
.cs-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-canvas-soft);
  color: var(--ds-color-ink-secondary);
  font-size: 12px;
  font-weight: var(--ds-weight-semi);
  line-height: 1.2;
}

@media (min-width: 1360px) {
  .cs-text { flex: none; width: 100%; text-align: center; }
}

/* Kolumny mają teraz równą, węższą szerokość (patrz .cs-row flex:1 1 0
   wyżej) — treść, która się nie mieści w jednej linii (np. dni tygodnia
   w "Grupy"), łamie się na dwie linie zamiast obcinać się elipsą. */
@media (min-width: 1360px) {
  .cs-label, .cs-value { white-space: normal; word-break: break-word; }
  /* .cs-label ma klasę Bootstrapa .text-muted (ink-muted, ciemny szary) w
     markupie — na ciemnej płycie trzeba ją nadpisać. Pełny biały, nie
     --ds-color-on-primary-mute ("muted on deep" z design-system.css): ten
     token jest za jasny na najjaśniejszym punkcie gradientu karty (patrz
     .cs-card wyżej) i spada poniżej 4,5:1. Hierarchia etykieta/wartość
     zostaje przez rozmiar i wagę czcionki, nie przez wygaszony kolor. */
  .cs-label { color: var(--ds-color-on-primary); }
  /* Stopień wyżej niż .text-title — większy niż etykieta, żeby
     hierarchia label/value została czytelna mimo tego samego (białego)
     koloru obu. Kolor kafli ikon zostaje żółty jako jedyny akcent. */
  .cs-value { font-size: 17px; font-weight: 600; color: var(--ds-color-on-primary); }
  /* Plakietka na ciemnej płycie: beż canvas-soft zamienia się na
     półprzezroczystą biel, żeby zostać widoczną plakietką na tle gradientu,
     nie jasną plamą, która się z nim zlewa. */
  .cs-badge { background-color: rgba(255, 255, 255, 0.16); color: var(--ds-color-on-primary); font-size: var(--ds-text-label); }
  /* .cs-text wyśrodkowuje się na tej szerokości (patrz reguła wyżej) — grupa
     plakietek dziedziczy display:flex, więc text-align:center nie zadziała
     na jej dzieciach; trzeba centrować przez justify-content. */
  .cs-badge-group { justify-content: center; }
}

/* Pigułka promocji — ten sam komplet danych co course_stickybar.php
   (etykieta rabatu, "?" z popoverem, cena przekreślona/promocyjna). Bez
   własnego tła/ramki — sama duża cena niesie wystarczający kontrast, a pusta
   płyta pod płytą CTA rozbijałaby rytm sekcji. */
.cs-promo {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 1360px) { .cs-promo { display: none; } }

/* Warianty .badge-* są myślane jako eyebrow (uppercase, tracking) — dobry na
   krótkie słowo, nie na całe zdanie promocji. Ta sama korekta co
   .csb-discount-label w course_stickybar.css. Kropka „na żywo" z .badge-live
   wyłączona — tu rolę sygnału pełni ikona ognia w treści etykiety. */
.cs-promo-badge {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.cs-promo-badge.badge-live::before { content: none; }

.cs-promo-price { display: flex; align-items: center; gap: 8px; }

/* Ikonka info — kółeczko z hairline'a pod glifem, żeby "?" czytał się jako
   osobny, klikalny element przy cenie, nie jako literka wolno stojąca w
   tekście (na życzenie — poprzednia wersja była bez tła/obrysu, jak .csb-info
   w course_stickybar.css). */
.cs-promo-info {
  flex: none;
  width: 15px;
  height: 15px;
  padding: 6px;
  margin: -6px -2px -6px -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--ds-color-hairline);
  border-radius: 50%;
  color: var(--ds-color-ink-muted);
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.cs-promo-info:hover { color: var(--ds-color-ink-muted); }
.cs-promo-info:focus-visible { color: var(--ds-color-ink-muted); box-shadow: var(--ds-shadow-ring-focus); outline: none; }

.cs-promo-old {
  font-family: var(--ds-font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--ds-color-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.cs-promo-new {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.01em;
  /* --ds-color-success-ink (#085E41) dawał Lc ~87 na białym — na tym
     stopniu/wadze (27px/600, próg z DESIGN-SYSTEM.md to Lc 60) wychodzi
     na oko za ciemno, bliżej czerni niż zieleni. Lżejszy, wciąż w rodzinie
     "ink" (żywy --ds-color-success zostaje wyłącznie do wypełnień —
     CLAUDE.md reguła 12): Lc ~74, czytelnie jaśniejszy. */
  color: #0C8058;
  font-variant-numeric: tabular-nums lining-nums;
}
.cs-promo-new small {
  font-family: var(--ds-font-body);
  font-weight: 400;
  font-size: 14px;
  color: inherit;
  margin-left: 2px;
}

/* Treść popovera ikonki info — te same klasy/wygląd co .csb-pop-* w
   course_stickybar.css (patrz komentarz w parametrach course_summary.php:
   duplikacja do zwinięcia, gdy dojdzie wspólna klasa Promo). Rozmiar/szerokość
   popovera (--bs-popover-*) ustawia course_stickybar.css, współdzielone przez
   obie sekcje na tej samej stronie. */
.cs-promo-pop-primary { margin: 0; color: var(--ds-color-ink-secondary); }
.cs-promo-popover-countdown {
  font-weight: 600;
  color: var(--ds-color-success-ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.cs-promo-pop-lowest { margin: 0; color: var(--ds-color-ink-muted); }

.cs-cta { margin-top: 10px; }
@media (min-width: 1360px) { .cs-cta { display: none; } }

/* Notka pod CTA — ten sam wygląd co .cfw-cta-note w course_forwho.css
   (text-caption, ink-muted, wyśrodkowana, capowana szerokość). */
.cs-proof { margin: 10px auto 0; max-width: 40ch; text-align: center; color: var(--ds-color-ink-muted); }
@media (min-width: 1360px) { .cs-proof { display: none; } }

/* Pasek telefonu — chrom (avatar, wskaźnik dostępności, numer podkreślony)
   to teraz wspólny atom .callbox w design-system.css (współdzielony z
   home_faq.php). Tu zostają wyłącznie odstępy specyficzne dla tej karty i
   zwinięcie do zwartego rzędu bez obwódki od 1360px, gdzie CTA/proof/promo
   już nie są widoczne (przejmuje je sticky bar) — stąd selektor scope'owany
   pod `.cs`, żeby to nadpisanie nie wyciekło do innych wywołań atomu. */
.cs .callbox { margin-top: 14px; margin-bottom: 6px; }

@media (min-width: 1360px) {
  .cs .callbox {
    margin-top: 32px;
    margin-bottom: 0;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
  }
  .cs .callbox-avatar { width: 28px; height: 28px; }
  .cs .callbox-text { flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
  .cs .callbox-note--mobile { display: none; }
  .cs .callbox-note--desktop { display: inline; }
}