/* ============================================================================
   subpage.css — STYLE TREŚCI SZKOLENIA (klasy renderujące pola XML)
   ----------------------------------------------------------------------------
   Ten plik definiuje WYGLĄD treści zapisanej w bazie jako XML w polach:
     • ss_cel          → klasy cs_*    (Cel szkolenia)
     • ss_harmonogram  → klasy hg_*    (Harmonogram)
     • ss_program      → klasy pr_*    (Program — listy do 3 poziomów)
     • ss_prelegenci   → klasy prel_*  (Prowadzący)
     • ss_w_cenie      → klasy wc_*    (Co zawiera cena)
   Wyróżnienia inline (wspólne): cs_mocny (pogrubienie), cs_akcent (magenta).

   ZASADA: XML w bazie niesie WYŁĄCZNIE strukturę + nazwy klas — żadnych
   stylów inline. Cały wygląd treści jest tutaj, dzięki czemu wszystkie
   szkolenia wyglądają spójnie i można je przeformatować w jednym miejscu.

   Nagłówek/stopka/menu znajdują się w osobnym pliku: chrome.css.
   Zmienne kolorów (--blue, --ink, --magenta, ...) pochodzą z styles.css.
   ============================================================================ */


/* ============================================================
   CEL SZKOLENIA — klasy do renderowania pola ss_cel
   (XML niesie tylko strukturę + class; cały wygląd tutaj)
   Tagi: <cel_szkolenia> <text> <naglowek> <lista> <punkt> <ramka>

   KONWENCJA NAZW KLAS cs_* (ustalona 2026-07-18, NAZW NIE ZMIENIAMY —
   tylko dodajemy nowe; te same klasy renderują www, podgląd CRM,
   ofertę PDF i e-mail HTML/tekst, więc nazwy są SEMANTYCZNE):
     1. przedrostek cs_ (Cel Szkolenia), separator "_",
     2. polskie słowa BEZ diakrytyków (ostrzezenie, nie ostrzeżenie),
     3. nazwa = ROLA treści, nie wygląd (medium decyduje jak to pokazać),
     4. XML/JSON niesie PEŁNĄ nazwę klasy (bez mapowań po drodze);
        ramkom szablony doklejają bazową cs_ramka (część wspólna stylu).
   SŁOWNIK: cs_wyroznienie (pogrubiony text/punkt), cs_uwaga (nagłówek
   magenta), cs_ramka_info / cs_ramka_sukces / cs_ramka_ostrzezenie /
   cs_ramka_alert (kolorowe boksy <ramka>).
   Style celu na stronie szkolenia: szkolenie.css (#celBody .cs_*).
   ============================================================ */
.cs_tekst {
  display: block;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.cs_tekst:last-child { margin-bottom: 0; }

.cs_naglowek {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 10px;
}

.cs_lista {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cs_punkt {
  display: block;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  padding-left: 26px;
  margin-bottom: 9px;
}
.cs_punkt:last-child { margin-bottom: 0; }
.cs_punkt::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--magenta);
  border-radius: 1.5px;   /* mały kwadrat — motyw marki */
}

/* opcjonalne warianty na przyszłość */
.cs_tekst.cs_wyroznienie { font-weight: 600; color: var(--ink); }

/* wyróżnienia w środku zdania (inline) — jedyne dozwolone akcenty */
.cs_mocny  { font-weight: 700; color: var(--ink); }
.cs_akcent { font-weight: 700; color: var(--magenta); }

/* ============================================================
   HARMONOGRAM SZKOLENIA — klasy do renderowania pola ss_harmonogram
   (XML niesie tylko strukturę + class; cały wygląd tutaj)
   Tagi: <harmonogram_szkolenia> <dzien> <pozycja> <godzina> <opis>
   Modyfikatory na <pozycja>: hg_przerwa (kawowa), hg_lunch (obiad)
   ============================================================ */
.hg_dzien {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 14px 0 10px;
  margin-top: 8px;
  border-bottom: 2px solid var(--blue-tint);
}
.hg_dzien:first-child { margin-top: 0; }

.hg_pozycja {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.hg_godzina {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.hg_opis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* przerwy — wyróżnione tłem i ikoną */
.hg_pozycja.hg_przerwa { background: var(--bg-soft); border-radius: 8px; padding-left: 12px; padding-right: 12px; border-bottom: none; }
.hg_pozycja.hg_przerwa .hg_opis { color: var(--muted); font-style: italic; }
.hg_pozycja.hg_lunch   .hg_opis { color: #5f6b00; font-style: normal; font-weight: 600; }

/* ============================================================
   PROGRAM SZKOLENIA — klasy do renderowania pola ss_program
   (XML niesie tylko strukturę + class; cały wygląd tutaj)
   Tagi: <program_szkolenia> <modul> <tekst> <lista> <punkt>
   Listy zagnieżdżają się do 3 poziomów — marker zmienia się automatycznie
   wg głębokości (kwadrat → myślnik → okrąg). Inline: cs_mocny / cs_akcent.
   ============================================================ */
.pr_modul {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  padding: 16px 0 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.pr_modul:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.pr_tekst {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 12px;
}

.pr_lista {
  display: block;
  margin: 8px 0;
  padding: 0 0 0 24px;
  list-style: none;
}

.pr_punkt {
  display: block;
  position: relative;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 22px;
  margin-bottom: 8px;
}
/* poziom 1 — kwadrat magenta */
.pr_punkt::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--magenta);
  border-radius: 1.5px;
}
/* poziom 2 — myślnik */
.pr_punkt .pr_punkt::before {
  content: "–";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--blue);
  font-weight: 700;
}
/* poziom 3 — pusty okrąg */
.pr_punkt .pr_punkt .pr_punkt::before {
  content: "";
  top: 0.55em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: none;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

/* ============================================================
   PRELEGENCI — klasy do renderowania pola ss_prelegenci
   Tagi: <prelegenci_szkolenia> <prelegent> <imie> <rola> <bio>
   (<bio> może zawierać akapity <tekst class="prel_akapit">)
   ============================================================ */
.prel_osoba {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.prel_osoba:last-child { border-bottom: none; }
.prel_imie {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.prel_rola {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  margin: 2px 0 8px;
}
.prel_bio { display: block; }
.prel_akapit {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.prel_akapit:last-child { margin-bottom: 0; }

/* ============================================================
   CO ZAWIERA CENA — klasy do renderowania pola ss_w_cenie
   Tagi: <w_cenie> <naglowek> <lista> <pozycja>
   Pozycje z zielonym „ptaszkiem".
   ============================================================ */
.wc_naglowek {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.wc_lista {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc_pozycja {
  display: block;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 28px;
  margin-bottom: 9px;
}
.wc_pozycja:last-child { margin-bottom: 0; }
.wc_pozycja::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.18em;
  width: 16px;
  height: 16px;
  background: var(--lime-soft);
  border-radius: 50%;
}
.wc_pozycja::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.46em;
  width: 7px;
  height: 4px;
  border-left: 2px solid #5f6b00;
  border-bottom: 2px solid #5f6b00;
  transform: rotate(-45deg);
}
.cs_lista.cs_numerowana { counter-reset: cs; }
.cs_lista.cs_numerowana .cs_punkt::before {
  content: counter(cs) ".";
  counter-increment: cs;
  background: none;
  top: 0; left: 0;
  width: auto; height: auto;
  font-weight: 700;
  color: var(--magenta);
}