/* =====================================================================
   czarko.pl bez WordPressa — arkusz strony (wariant A, 30.10.2026).

   Wzór: makieta Mirka „Podglad na zywo.dc.html” (#live-9a). Makieta ma
   style w 100% inline; tu są przeniesione na klasy i tokeny. Tokeny te
   same co w Bibliotece i na konto.czarko.pl (WYTYCZNE §2), żeby trzy
   domeny wyglądały jak jedna.

   Zasady, które trzymają ten wygląd razem (WYTYCZNE):
     - ostre rogi i ZERO cieni (wyjątek: okładki 3D książek),
     - kreski 1 px: .35 na zewnątrz, .18 wewnątrz,
     - nagłówki 600 z ujemnym trackingiem, treść 400,
     - jeden wypełniony przycisk w bloku, reszta obrysowa.

   Prefiks klas `st-` (strona) — ten arkusz nie spotyka się z arkuszami
   panelu, ale sklep dostanie kiedyś ten sam layout, więc nazwy są własne.
   ===================================================================== */

/* Krój SYSTEMOWY (Mirek, mail z 08.11.2026): „jedna rodzina dla całej strony: system-ui,
   sans-serif. Nagłówki i tekst różnią się grubością” — Windows: Segoe UI, Mac: San Francisco.
   Grubości: duże nagłówki 760 (letter-spacing -.045em), tekst i menu 400, czerwone napisy nad
   nagłówkami 750, przycisk zakupu 800, logo 850. Zastępuje Schibsted Grotesk z paczki (plik
   zmienny miał tylko 400-700). Nic nie idzie do Google — krój jest w systemie Klienta. */

:root {
	--tlo:           #eceae4;   /* poza ramą */
	--karta:         #ffffff;   /* strona w ramie */
	--tlo-jasne:     #f4f2ec;   /* pas opinii */
	--tlo-guzika:    #eceae4;   /* nagłówek akordeonu */
	--tlo-guzika-h:  #e5e2d8;
	--tekst:         #111111;
	--tekst-mocny:   rgba(17, 17, 17, .76);
	--tekst-slaby:   rgba(17, 17, 17, .68);
	--tekst-cichy:   rgba(17, 17, 17, .55);
	--kreska:        rgba(17, 17, 17, .35);
	--kreska-mocna:  rgba(17, 17, 17, .5);
	--kreska-cienka: rgba(17, 17, 17, .18);
	--muska:         rgba(17, 17, 17, .05);   /* tło pod kursorem */
	--cegla:         #b8341f;
	--cegla-hover:   #962714;
	--na-cegle:      #ffffff;
	/* Sterowanie (04.11.2026, Mirek): przyciski, wybrane filtry i kafle, kropka przełącznika,
	   licznik koszyka - WYPEŁNIENIE z białym napisem. W jasnym = cegła, w ciemnym osobny odcień
	   (patrz blok ciemny). `--cegla` zostaje kolorem TEKSTU akcentu. */
	--sterowanie:       #b8341f;
	--sterowanie-hover: #962714;
	--na-sterowaniu:    #ffffff;
	--ciemne:        #0d0c0b;   /* kafel materiału */
	--ciemne-tekst:  #f0ece3;
	--ciemne-slaby:  rgba(240, 236, 227, .7);
	--ciemne-akcent: #e2726b;
	--zloto:         #e2c46a;   /* eyebrow na ciemnym kaflu */
	--font: system-ui, -apple-system, 'Segoe UI', sans-serif;

	--rama:   1220px;
	--wciecie: 28px;
}

/* Tryb ciemny: `data-motyw` na <html> ustawia skrypt w <head> PRZED
   pierwszym malowaniem; bez wyboru idziemy za systemem. Kolory z kanwy
   #20b (strona główna w wersji ciemnej).
   Czerwień (Mirek, 04.11.2026: „oczojebna” na przyciskach, aktywnym menu, przełącznikach
   i tekstowych akcentach). Jeden odcień nie spełni WYTYCZNYCH §9 (4,5:1) naraz dla białego
   napisu NA czerwieni i czerwonego tekstu NA czerni (#FF0000: 4,0 i 4,7), stąd dwa:
   wypełnienie #E8000D (biały 4,7:1; pod kursorem CIEMNIEJE do #CC000C, 5,7:1) i tekst
   #FF2A2A (5,0:1 na karcie). Wariant B z makiety drobnych funkcji, Piotr 04.11.2026. */
@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="light"]) {
		--tlo:           #0e0d0b;
		--karta:         #14120f;
		--tlo-jasne:     #1e1b18;
		--tlo-guzika:    #1e1b18;
		--tlo-guzika-h:  #26221e;
		--tekst:         #f0ece3;
		--tekst-mocny:   rgba(240, 236, 227, .8);
		--tekst-slaby:   rgba(240, 236, 227, .7);
		--tekst-cichy:   rgba(240, 236, 227, .55);
		--kreska:        rgba(240, 236, 227, .3);
		--kreska-mocna:  rgba(240, 236, 227, .5);
		--kreska-cienka: rgba(240, 236, 227, .16);
		--muska:         rgba(240, 236, 227, .06);
		--cegla:         #ff2a2a;
		--cegla-hover:   #ff6b6b;
		--na-cegle:      #ffffff;
		--sterowanie:       #e8000d;
		--sterowanie-hover: #cc000c;
		--na-sterowaniu:    #ffffff;
		--ciemne-akcent: #ff2a2a;
		--ciemne:        #070706;
		color-scheme: dark;
	}
}
:root[data-motyw="dark"] {
	--tlo:           #0e0d0b;
	--karta:         #14120f;
	--tlo-jasne:     #1e1b18;
	--tlo-guzika:    #1e1b18;
	--tlo-guzika-h:  #26221e;
	--tekst:         #f0ece3;
	--tekst-mocny:   rgba(240, 236, 227, .8);
	--tekst-slaby:   rgba(240, 236, 227, .7);
	--tekst-cichy:   rgba(240, 236, 227, .55);
	--kreska:        rgba(240, 236, 227, .3);
	--kreska-mocna:  rgba(240, 236, 227, .5);
	--kreska-cienka: rgba(240, 236, 227, .16);
	--muska:         rgba(240, 236, 227, .06);
	--cegla:         #ff2a2a;
	--cegla-hover:   #ff6b6b;
	--na-cegle:      #ffffff;
	--sterowanie:       #e8000d;
	--sterowanie-hover: #cc000c;
	--na-sterowaniu:    #ffffff;
	--ciemne-akcent: #ff2a2a;
	--ciemne:        #070706;
	color-scheme: dark;
}

/* ── Podstawa ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
	margin: 0;
	background: var(--tlo);
	color: var(--tekst);
	font: 400 17px/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 760; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--cegla); text-underline-offset: 4px; }
a:hover { color: var(--cegla-hover); }
:focus-visible { outline: 3px solid var(--cegla); outline-offset: 3px; }
[hidden] { display: none !important; }

.st-ukryte {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.st-skok {
	position: absolute; left: -9999px; z-index: 60;
}
.st-skok:focus {
	left: 16px; top: 16px;
	background: var(--sterowanie); color: var(--na-sterowaniu);
	padding: 12px 18px; text-decoration: none; font-weight: 700;
}

/* Rama: jedna kolumna z bocznymi kreskami, wszystko w jednej osi. */
.st-rama {
	max-width: var(--rama);
	margin: 0 auto;
	background: var(--karta);
	border-left: 1px solid var(--kreska);
	border-right: 1px solid var(--kreska);
	min-height: 100vh;
	position: relative;
}

/* ── Nagłówek ─────────────────────────────────────────────────────── */
.st-naglowek {
	position: sticky; top: 0; z-index: 40;
	background: var(--karta);
	border-bottom: 1px solid var(--kreska);
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; padding: 0 var(--wciecie); min-height: 72px;
	flex-wrap: wrap;
}
.st-logo {
	font: 850 19px var(--font); letter-spacing: .14em;
	color: var(--tekst); text-decoration: none; white-space: nowrap;
}
.st-logo span { color: var(--cegla); }
.st-logo:hover { color: var(--tekst); }
.st-menu { display: flex; gap: 20px; flex-wrap: wrap; }
.st-menu a {
	font: 400 14.5px var(--font); color: var(--tekst);
	text-decoration: none; text-underline-offset: 6px; white-space: nowrap;
}
.st-menu a:hover, .st-menu a:focus-visible { text-decoration: underline; }
.st-menu a[aria-current="page"] { color: var(--cegla); text-decoration: underline; }
.st-naglowek__akcje { display: flex; align-items: center; gap: 16px; }
.st-konto {
	display: flex; align-items: center; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--kreska-mocna); color: var(--tekst);
	font: 700 14px var(--font); text-decoration: none; white-space: nowrap;
}
.st-konto:hover { background: var(--muska); color: var(--tekst); }
.st-menu__konto { display: none; }
.st-menu-przycisk {
	display: none; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--kreska-mocna); background: none; color: var(--tekst);
	font: 700 14px var(--font); cursor: pointer;
}

/* Przełącznik jasny/ciemny — jeden kształt dla całego ekosystemu
   (Biblioteka, konto). Obsługę kliknięcia daje zasoby/js/motyw.js. */
.czk-motyw {
	display: flex; align-items: center; gap: 8px;
	background: none; border: none; padding: 12px 4px; min-height: 44px;
	color: var(--tekst); cursor: pointer;
}
.czk-motyw__tor {
	position: relative; width: 38px; height: 20px; flex: none;
	border: 1px solid var(--kreska-mocna); border-radius: 999px;
}
.czk-motyw__kropka {
	position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
	border-radius: 50%; background: var(--tekst);
	transition: left .15s, background .15s;
}
.czk-motyw[aria-checked="true"] .czk-motyw__kropka { left: 20px; background: var(--sterowanie); }
.czk-motyw:hover .czk-motyw__tor { border-color: var(--cegla); }

/* ── Elementy wspólne sekcji ──────────────────────────────────────── */
.st-sekcja { border-bottom: 1px solid var(--kreska); }
.st-glowka { padding: 34px var(--wciecie) 24px; }
.st-glowka--rzad {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 30px; flex-wrap: wrap;
}
.st-eyebrow {
	margin: 0 0 14px;
	font: 750 12px var(--font); letter-spacing: .26em; text-transform: uppercase;
	color: var(--cegla);
}
.st-h2 { font: 760 clamp(34px, 4.6vw, 58px)/1 var(--font); letter-spacing: -.045em; }
.st-h2--50 { font-size: clamp(32px, 4.1vw, 50px); letter-spacing: -.042em; }
.st-h2--46 { font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -.043em; }
.st-h2--42 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.045em; }
.st-akcent { color: var(--cegla); }
.st-lead {
	font: 400 17px/1.7 var(--font); color: var(--tekst-slaby);
	max-width: 44ch; text-align: justify; hyphens: auto;
}
.st-przypis { font: 400 14.5px/1.6 var(--font); color: var(--tekst-cichy); max-width: 50ch; }

/* Przyciski: główny (cegła), drugi (obrys), mniejsze warianty. */
.st-btn, .st-btn--obrys {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 60px; padding: 0 32px;
	font: 800 16.5px var(--font); text-decoration: none; cursor: pointer;
}
.st-btn { background: var(--sterowanie); color: var(--na-sterowaniu); border: 1px solid var(--sterowanie); }
.st-btn:hover { background: var(--sterowanie-hover); border-color: var(--sterowanie-hover); color: var(--na-sterowaniu); }
.st-btn:focus-visible { outline-color: var(--tekst); }
.st-btn--obrys { background: none; color: var(--tekst); border: 1px solid var(--kreska-mocna); font-weight: 700; }
.st-btn--obrys:hover { border-color: var(--tekst); background: var(--muska); color: var(--tekst); }
.st-btn--sredni { min-height: 56px; padding: 0 26px; font-size: 16px; }
.st-btn--maly { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.st-btn--lekki { font-weight: 700; font-size: 15.5px; min-height: 52px; padding: 0 22px; }
.st-przyciski { display: flex; gap: 14px; flex-wrap: wrap; }
.st-strzalka {
	font: 750 15px var(--font); color: var(--cegla); text-decoration: none;
}
.st-strzalka:hover { text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.st-hero { display: grid; grid-template-columns: 1.35fr .65fr; }
.st-hero__tekst { padding: 44px var(--wciecie) 34px; border-right: 1px solid var(--kreska); min-width: 0; }
.st-hero__eyebrow { margin-bottom: 26px; }
.st-hero__h1 {
	margin: 0 0 26px;
	font: 760 clamp(46px, 7.6vw, 96px)/.94 var(--font); letter-spacing: -.045em;
	max-width: 13ch; text-wrap: pretty;
	min-height: 2.82em;   /* trzy wiersze — hasło się zmienia, układ nie skacze */
}
.st-hero__pod {
	margin: 0 0 32px; min-height: 3.2em;
	font: 400 19px/1.6 var(--font); color: var(--tekst-mocny); max-width: 52ch;
}
.st-hero__bok { display: flex; flex-direction: column; min-width: 0; }

/* Kafel materiału — wariant A makiety „Kafel hero” (Piotr: kierunek dobry,
   30.10.2026): audio bez grafiki składa okładkę z tytułu, czasu i stałej fali. */
.st-kafel { border-bottom: 1px solid var(--kreska); }
.st-kafel__okladka {
	background: var(--ciemne); color: var(--ciemne-tekst);
	aspect-ratio: 16 / 9; max-width: 100%;
	padding: 20px 20px 16px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
	overflow: hidden;
}
.st-kafel__rodzaj {
	font: 750 10.5px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--zloto);
}
.st-kafel__tytul { font: 700 clamp(22px, 2.2vw, 28px)/1.08 var(--font); letter-spacing: -.035em; }
.st-kafel__fala { display: flex; align-items: center; gap: 3px; height: 44px; }
.st-kafel__fala span { display: block; flex: 1; max-width: 4px; background: rgba(240, 236, 227, .5); }
.st-kafel__fala span:nth-child(-n+4) { background: var(--ciemne-akcent); }
.st-kafel__stopka {
	display: flex; justify-content: space-between; align-items: baseline;
	font: 400 13px var(--font); color: var(--ciemne-slaby);
}
.st-kafel__znak { font-weight: 700; letter-spacing: .14em; color: var(--ciemne-tekst); }
.st-kafel__znak span { color: var(--ciemne-akcent); }
.st-plakietka {
	display: inline-block; padding: 3px 7px; margin-left: 8px;
	background: var(--ciemne-tekst); color: var(--ciemne);
	font: 750 10px var(--font); letter-spacing: .16em; text-transform: uppercase; vertical-align: middle;
}
.st-kafel__gra { padding: 16px 20px 18px; }
.st-kafel__gra .st-eyebrow { margin-bottom: 8px; letter-spacing: .2em; }

.st-najblizszy {
	flex: 1; padding: 22px 24px;
	display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.st-najblizszy__etykieta {
	font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-cichy);
}
.st-najblizszy__co { font: 700 21px/1.2 var(--font); letter-spacing: -.033em; }
.st-najblizszy .st-przyciski { margin-top: 14px; }

/* Odtwarzacz z Biblioteki (memoit/mediaplayer) w barwach strony. */
.mp--czarko {
	--mp-bg:        var(--karta);
	--mp-surface:   var(--tlo-jasne);
	--mp-fg:        var(--tekst);
	--mp-muted:     var(--tekst-slaby);
	--mp-accent:    var(--sterowanie);
	--mp-on-accent: var(--na-sterowaniu);
	--mp-line:      var(--kreska);
	--mp-track:     var(--kreska-cienka);
	--mp-buffer:    var(--tekst-cichy);
	--mp-font:      var(--font);
	--mp-radius:    0;
}
/* W kaflu i w bloku „Posłuchaj teraz” tytuł i czas stoją nad odtwarzaczem
   (jak w makiecie), więc jego własna główka i rama by się powtarzały. */
.st-kafel__gra .mp, .st-odtwarzacz .mp { --mp-bg: transparent; --mp-pad: 0; border: 0; }
.st-kafel__gra .mp__head, .st-odtwarzacz .mp__head { display: none; }
.st-kafel__gra .st-przypis { margin-top: 10px; }

/* ── Opinie ───────────────────────────────────────────────────────── */
.st-opinie { background: var(--tlo-jasne); }
.st-opinie .st-glowka { padding-bottom: 20px; }
.st-opinie__rzad {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
	padding: 0 var(--wciecie) 28px;
	transition: opacity .5s;
}
.st-opinie__rzad[data-znika] { opacity: 0; }
.st-opinia {
	margin: 0; background: var(--karta); border: 1px solid var(--kreska);
	padding: 24px 22px; display: flex; flex-direction: column; gap: 12px;
}
.st-opinia blockquote { margin: 0; font: 400 17px/1.55 var(--font); }
.st-opinia figcaption {
	font: 750 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy);
}
.st-opinie__nawigacja {
	display: flex; gap: 10px; align-items: center; padding: 0 var(--wciecie) 24px;
	font: 400 13px var(--font); color: var(--tekst-cichy);
}
.st-opinie__nawigacja button {
	min-height: 40px; min-width: 40px; border: 1px solid var(--kreska-mocna);
	background: var(--karta); color: var(--tekst); font: 700 14px var(--font); cursor: pointer;
}
.st-opinie__nawigacja button:hover { background: var(--muska); }

/* ── Liczby: 2–6 kafli, siatka układa się sama ───────────────────── */
.st-liczby {
	display: grid; grid-template-columns: repeat(var(--ile, 4), minmax(0, 1fr));
}
.st-liczba { padding: 26px var(--wciecie); border-right: 1px solid var(--kreska-cienka); }
.st-liczba:last-child { border-right: 0; }
.st-liczba__wartosc { font: 760 clamp(34px, 3.8vw, 46px)/1 var(--font); letter-spacing: -.045em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.st-liczba__opis { font: 400 14.5px var(--font); color: var(--tekst-slaby); }

/* ── Z czym dzisiaj przychodzisz? ─────────────────────────────────── */
.st-tematy__kafle {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--kreska);
}
.st-temat {
	text-align: left; min-height: 140px; padding: 24px 26px;
	border: 0; border-right: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska);
	background: var(--karta); color: var(--tekst); text-decoration: none; cursor: pointer;
	display: flex; flex-direction: column; gap: 10px; font-family: var(--font);
}
.st-temat:nth-child(3n) { border-right: 0; }
.st-temat:hover { background: var(--muska); color: var(--tekst); }
.st-temat:focus-visible { outline-offset: -4px; }
.st-temat__num { font: 750 12px var(--font); letter-spacing: .2em; color: var(--cegla); }
.st-temat__nazwa { font: 700 clamp(24px, 2.4vw, 30px)/1.08 var(--font); letter-spacing: -.04em; }
.st-temat__opis { font: 400 14.5px/1.5 var(--font); color: var(--tekst-slaby); }
.st-temat[aria-pressed="true"], .st-temat[aria-current="true"] { background: var(--sterowanie); color: var(--na-sterowaniu); }
.st-temat[aria-pressed="true"] .st-temat__num,
.st-temat[aria-pressed="true"] .st-temat__opis,
.st-temat[aria-current="true"] .st-temat__num,
.st-temat[aria-current="true"] .st-temat__opis { color: var(--na-sterowaniu); opacity: .85; }

.st-sciezka { display: grid; grid-template-columns: .8fr 1.2fr; }
.st-sciezka__opis { padding: 30px var(--wciecie); border-right: 1px solid var(--kreska); min-width: 0; }
.st-sciezka__eyebrow { letter-spacing: .2em; margin-bottom: 12px; }
.st-sciezka__tytul { margin: 0 0 14px; font: 760 clamp(30px, 3.2vw, 40px)/1.05 var(--font); letter-spacing: -.045em; }
.st-sciezka__wstep { font: 400 16.5px/1.65 var(--font); color: var(--tekst-slaby); max-width: 42ch; text-align: justify; hyphens: auto; }
.st-kroki { list-style: none; margin: 0; padding: 0; min-width: 0; }
.st-kroki li { border-bottom: 1px solid var(--kreska-cienka); }
.st-kroki li:last-child { border-bottom: 0; }
.st-krok {
	display: grid; grid-template-columns: 130px minmax(0, 1fr) 152px; gap: 20px; align-items: center;
	padding: 16px var(--wciecie); color: inherit; text-decoration: none;
}
a.st-krok:hover { background: var(--muska); color: inherit; }
.st-krok__rodzaj { font: 750 11.5px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-krok__tytul { font: 700 19px/1.3 var(--font); letter-spacing: -.02em; min-width: 0; text-wrap: pretty; }
.st-krok__akcja {
	justify-self: end; display: flex; align-items: center; justify-content: center;
	width: 150px; min-height: 48px; border: 1px solid var(--kreska-mocna);
	font: 700 13.5px var(--font); letter-spacing: .02em; white-space: nowrap; color: var(--tekst);
}
.st-krok__akcja--darmowe { color: var(--cegla); border-color: var(--cegla); }
/* Krok-nagranie: odtwarzacz Biblioteki zamiast przycisku, w kolumnach tytułu i akcji. */
.st-krok__odtwarzacz { grid-column: 2 / 4; min-width: 0; }
.st-krok__odtwarzacz .mp { --mp-bg: transparent; --mp-pad: 0; border: 0; }
.st-krok__odtwarzacz .mp__head { display: none; }
.st-krok__akcja--brak { color: var(--tekst-cichy); border-style: dashed; }

/* ── Webinary ─────────────────────────────────────────────────────── */
.st-siatka3 {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
	padding: 0 var(--wciecie) 34px;
}
.st-karta {
	border: 1px solid var(--kreska); background: var(--karta);
	padding: 18px; display: flex; flex-direction: column; gap: 6px;
	color: var(--tekst); text-decoration: none;
}
a.st-karta:hover { border-color: var(--tekst); color: var(--tekst); }
.st-karta__czesci { font: 750 10px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-karta__tytul { font: 700 16px/1.2 var(--font); letter-spacing: -.025em; }
/* Bez tabular-nums: w tym kroju przecinek tabelaryczny jest szeroki („299 ,99”). */
.st-cena { font: 700 15px var(--font); color: var(--cegla); }
.st-cena s { color: var(--tekst-cichy); font-weight: 400; margin-left: 6px; }

/* ── Najbliższe wydarzenia ────────────────────────────────────────── */
.st-wydarzenia { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kreska); }
.st-wydarzenie {
	display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px 170px; align-items: stretch;
	border-bottom: 1px solid var(--kreska-cienka);
}
.st-wydarzenie:last-child { border-bottom: 0; }
.st-wydarzenie > div { padding: 22px 26px; border-right: 1px solid var(--kreska-cienka); min-width: 0; }
.st-wydarzenie__dzien { display: block; font: 760 34px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.st-wydarzenie__miesiac { display: block; margin-top: 6px; font: 750 12px var(--font); letter-spacing: .18em; color: var(--tekst-cichy); }
.st-wydarzenie__gdzie { margin: 0 0 6px; font: 750 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-wydarzenie__tytul { margin: 0 0 6px; font: 700 clamp(22px, 2.2vw, 28px)/1.12 var(--font); letter-spacing: -.039em; text-wrap: pretty; }
.st-wydarzenie__cena { margin: 0 0 4px; font: 750 17px var(--font); }
.st-wydarzenie__status { font: 400 14.5px var(--font); color: var(--tekst-slaby); }
.st-wydarzenie__status--wyprzedane { color: var(--cegla); font-weight: 700; }
/* Zapowiedź bez daty (10.11.2026): „wkrótce” w miejscu dnia — mniejsze, żeby zmieściło się w kolumnie daty. */
.st-wydarzenie--zapowiedz .st-wydarzenie__dzien { font-size: 26px; letter-spacing: -.035em; }
.st-wydarzenie__przycisk { align-self: center; justify-self: center; width: 130px; }

/* ── Dwie kolumny (Posłuchaj, Książki, Szkoła, Darmowe) ──────────── */
.st-dwie { display: grid; grid-template-columns: .9fr 1.1fr; }
.st-dwie--rowne { grid-template-columns: 1fr 1fr; }
.st-dwie--szkola { grid-template-columns: 1.15fr .85fr; }
.st-dwie--darmowe { grid-template-columns: .8fr 1.2fr; }
.st-dwie > * { min-width: 0; }
.st-dwie__lewa { padding: 34px var(--wciecie); border-right: 1px solid var(--kreska); }
.st-dwie__prawa { padding: 34px var(--wciecie); }
.st-dwie__lewa .st-h2 { margin-bottom: 18px; }
.st-dwie__lewa .st-lead { margin-bottom: 26px; }

.st-odtwarzacz {
	border: 1px solid var(--kreska); background: var(--karta); padding: 24px;
}
.st-odtwarzacz__tytul { margin: 0 0 4px; font: 700 26px/1.15 var(--font); letter-spacing: -.038em; }
.st-odtwarzacz__meta { margin: 0 0 14px; font: 400 14px var(--font); color: var(--tekst-slaby); }
.st-dwie__prawa .st-przypis { margin-top: 16px; }

/* Akordeon wariantów książek — natywne <details name>: jeden otwarty,
   działa z klawiatury i bez skryptu. */
.st-akordeon { margin: 0 0 26px; max-width: 52ch; display: flex; flex-direction: column; gap: 8px; }
.st-akordeon details { border: 1px solid var(--kreska); background: var(--karta); }
.st-akordeon summary {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	min-height: 50px; padding: 0 16px; background: var(--tlo-guzika); cursor: pointer;
	font: 700 15px var(--font); letter-spacing: -.02em; list-style: none;
}
.st-akordeon summary::-webkit-details-marker { display: none; }
.st-akordeon summary::after { content: '+'; font: 400 18px var(--font); color: var(--cegla); }
.st-akordeon details[open] summary::after { content: '−'; }
.st-akordeon summary:hover { background: var(--tlo-guzika-h); }
.st-akordeon ul { list-style: none; margin: 0; padding: 2px 16px 8px; border-top: 1px solid var(--kreska-cienka); }
.st-akordeon li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(127, 127, 127, .14); }
.st-akordeon li:last-child { border-bottom: 0; }
.st-akordeon li a { font: 400 14.5px var(--font); color: var(--tekst); text-decoration: none; }
.st-akordeon li a:hover { color: var(--cegla); text-decoration: underline; }
.st-akordeon .st-cena { color: var(--tekst); font-size: 14.5px; white-space: nowrap; }

.st-okladki { display: flex; gap: 30px; align-items: center; justify-content: center; padding: 34px 24px; }
.st-okladka3d { perspective: 900px; }
/* Jedyny dozwolony cień w systemie (WYTYCZNE §2: okładki 3D). */
.st-okladka3d__blok {
	position: relative; transform: rotateY(-14deg); transform-style: preserve-3d;
	box-shadow: 14px 18px 34px rgba(17, 17, 17, .38), 3px 5px 12px rgba(17, 17, 17, .25);
}
.st-okladka3d img { height: clamp(200px, 26vw, 400px); width: auto; display: block; border-radius: 2px 4px 4px 2px; }
.st-okladka3d__grzbiet {
	position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
	background: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(255,255,255,.18) 45%, rgba(0,0,0,.16) 100%);
	border-radius: 2px 0 0 2px;
}
.st-okladka3d__kartki {
	position: absolute; top: 1.2%; bottom: 1.2%; right: -7px; width: 7px;
	background: repeating-linear-gradient(180deg, #f5f2ea 0 2px, #dcd7cb 2px 3px);
	transform: rotateY(72deg) translateX(3px); transform-origin: left; border-radius: 0 2px 2px 0;
}

/* ── Szkoła ───────────────────────────────────────────────────────── */
.st-znacznik {
	display: inline-flex; margin: 0 0 16px; padding: 8px 14px;
	background: var(--sterowanie); color: var(--na-sterowaniu);
	font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase;
}
.st-szkola__opis { margin: 0 0 30px; font: 400 18px/1.65 var(--font); color: var(--tekst-mocny); max-width: 50ch; text-align: justify; hyphens: auto; }
.st-fakty { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.st-fakty > div { padding: 24px 26px; border-bottom: 1px solid var(--kreska-cienka); }
.st-fakty > div:nth-child(odd) { border-right: 1px solid var(--kreska-cienka); }
.st-fakty > div:nth-last-child(-n+2) { border-bottom: 0; }
.st-fakty dt { font: 400 13.5px var(--font); color: var(--tekst-slaby); }
.st-fakty dd { margin: 8px 0 0; font: 760 clamp(22px, 2.4vw, 30px)/1 var(--font); letter-spacing: -.045em; }

/* ── Trzy karty (Biznes, Jeden świat) ─────────────────────────────── */
.st-trzy {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--kreska);
}
.st-trzy > li { padding: 26px; border-right: 1px solid var(--kreska-cienka); display: flex; flex-direction: column; min-width: 0; }
.st-trzy > li:last-child { border-right: 0; }
.st-trzy--biale > li { background: var(--karta); }
.st-trzy__eyebrow { margin: 0 0 10px; font: 750 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-trzy--swiat .st-trzy__eyebrow { color: var(--cegla); }
.st-trzy h3 { margin: 0 0 10px; font: 700 26px/1.15 var(--font); letter-spacing: -.038em; }
.st-trzy h3 + p { margin: 0 0 16px; font: 400 15px/1.6 var(--font); color: var(--tekst-slaby); flex: 1; }
.st-trzy .st-btn, .st-trzy .st-btn--obrys { align-self: flex-start; min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.st-biznes__lead { font: 400 16px/1.6 var(--font); color: var(--tekst-slaby); max-width: 38ch; }

/* ── Darmowe + List ode mnie ──────────────────────────────────────── */
.st-darmowe { list-style: none; margin: 0; padding: 0; }
.st-darmowe li {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 20px var(--wciecie); border-bottom: 1px solid var(--kreska-cienka);
}
.st-darmowe__tytul { display: block; font: 700 24px/1.2 var(--font); letter-spacing: -.038em; }
.st-darmowe__meta { display: block; margin-top: 4px; font: 400 14.5px var(--font); color: var(--tekst-slaby); }
.st-darmowe .st-btn--obrys { min-height: 48px; min-width: 118px; padding: 0 20px; font-size: 15px; font-weight: 700; }
.st-list { padding: 24px var(--wciecie); }
.st-list h3 { margin: 0 0 8px; font: 700 26px/1.15 var(--font); letter-spacing: -.038em; }
.st-list > p { margin: 0 0 18px; font: 400 15.5px/1.65 var(--font); color: var(--tekst-slaby); max-width: 52ch; text-align: justify; hyphens: auto; }
.st-list label { font: 400 14px var(--font); }
.st-list__pole { display: flex; margin: 8px 0 12px; border: 1px solid var(--kreska-mocna); max-width: 560px; background: var(--karta); }
.st-list__pole input {
	flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; border: 0;
	background: var(--karta); color: var(--tekst); font: 400 17px var(--font);
}
.st-list__pole input:focus-visible { outline-offset: -3px; }
.st-list__pole button {
	min-height: 56px; padding: 0 26px; border: 0; background: var(--sterowanie); color: var(--na-sterowaniu);
	font: 700 16px var(--font); cursor: pointer;
}
.st-list__pole button:hover { background: var(--sterowanie-hover); }
.st-zgoda { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; font: 400 14.5px/1.55 var(--font); color: var(--tekst-slaby); }
.st-zgoda input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--sterowanie); }
.st-wymagane { color: var(--cegla); }

/* ── Stopka ───────────────────────────────────────────────────────── */
.st-stopka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.st-stopka > div { padding: 30px var(--wciecie); border-right: 1px solid var(--kreska-cienka); min-width: 0; }
.st-stopka > div:last-child { border-right: 0; }
.st-stopka__logo { height: 72px; width: auto; display: block; margin: 0 0 14px; }
.st-stopka__logo--jasne { display: none; }
.st-stopka__o { margin: 0 0 16px; font: 400 15px/1.65 var(--font); color: var(--tekst-slaby); max-width: 32ch; }
.st-stopka__kontakt { font: 400 15px/1.7 var(--font); }
.st-stopka__social { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font: 400 15px var(--font); }
.st-stopka__social a { text-decoration: underline; }
.st-stopka__firma { margin: 16px 0 0; font: 400 13px var(--font); color: var(--tekst-cichy); }
.st-stopka h2 { margin: 0 0 14px; font: 750 12px var(--font); letter-spacing: .18em; text-transform: uppercase; }
.st-stopka ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: 400 15px var(--font); }
.st-stopka ul a { color: var(--tekst-mocny); }
.st-stopka ul a:hover { color: var(--cegla); }

/* W ciemnym trybie logo w wersji jasnej (plik z paczki Mirka). */
:root[data-motyw="dark"] .st-stopka__logo--ciemne { display: none; }
:root[data-motyw="dark"] .st-stopka__logo--jasne { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="light"]) .st-stopka__logo--ciemne { display: none; }
	:root:not([data-motyw="light"]) .st-stopka__logo--jasne { display: block; }
}

/* ── Węższe ekrany ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	/* Od 09.11.2026 w menu jest „Aplikacja” — przy 20 px odstępu nagłówek łamał się na dwa wiersze
	   już przy 1024 px (do 900 px menu jest jeszcze w jednym rzędzie, niżej przycisk „Menu”). */
	.st-menu { gap: 14px; }
	.st-wydarzenie { grid-template-columns: 130px minmax(0, 1fr) 170px; }
	.st-wydarzenie__przycisk { grid-column: 2 / 4; justify-self: start; margin: 0 26px 22px; }
	.st-wydarzenie > div:nth-child(3) { border-right: 0; }
}

/* Przycisk „Menu” od 1000 px w dół (do 09.11.2026: od 900 px). Z dziewięcioma pozycjami menu
   nagłówek między 901 a ~1000 px nie mieścił się w jednym wierszu. */
@media (max-width: 1000px) {
	.st-menu-przycisk { display: inline-flex; align-items: center; }
	.st-naglowek[data-js] .st-menu { display: none; order: 3; width: 100%; padding: 6px 0 16px; flex-direction: column; gap: 14px; }
	.st-naglowek[data-js][data-otwarte] .st-menu { display: flex; }
	.st-naglowek:not([data-js]) .st-menu { order: 3; width: 100%; padding-bottom: 12px; }
}

@media (max-width: 900px) {
	:root { --wciecie: 18px; }
	.st-hero, .st-sciezka, .st-dwie, .st-dwie--rowne, .st-dwie--szkola, .st-dwie--darmowe { grid-template-columns: minmax(0, 1fr); }
	.st-hero__tekst, .st-sciezka__opis, .st-dwie__lewa { border-right: 0; border-bottom: 1px solid var(--kreska); }
	.st-hero__h1 { min-height: 0; }
	.st-opinie__rzad { grid-template-columns: minmax(0, 1fr); }
	.st-tematy__kafle, .st-siatka3, .st-trzy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-temat:nth-child(3n) { border-right: 1px solid var(--kreska); }
	.st-temat:nth-child(2n) { border-right: 0; }
	.st-trzy > li { border-right: 0; border-bottom: 1px solid var(--kreska-cienka); }
	.st-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-liczba:nth-child(2n) { border-right: 0; }
	.st-liczba { border-bottom: 1px solid var(--kreska-cienka); }
	.st-stopka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-stopka > div { border-bottom: 1px solid var(--kreska-cienka); }
	.st-stopka > div:first-child { grid-column: 1 / -1; border-right: 0; }
}

@media (max-width: 600px) {
	.st-naglowek { gap: 8px; }
	.st-logo { margin-right: auto; }
	.st-naglowek__akcje { gap: 8px; order: 2; }
	.st-menu-przycisk { order: 2; }
	.st-naglowek[data-js] .st-konto { display: none; }
	.st-naglowek[data-js] .st-menu__konto { display: block; font-weight: 700; }
	.st-lead, .st-szkola__opis, .st-sciezka__wstep, .st-list > p { text-align: left; }
	.st-tematy__kafle, .st-siatka3, .st-trzy, .st-fakty { grid-template-columns: minmax(0, 1fr); }
	.st-temat { min-height: 0; border-right: 0 !important; }
	.st-fakty > div { border-right: 0 !important; border-bottom: 1px solid var(--kreska-cienka) !important; }
	.st-krok { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.st-krok__akcja { justify-self: start; }
	.st-krok__odtwarzacz { grid-column: auto; }
	.st-wydarzenie { grid-template-columns: minmax(0, 1fr); }
	.st-wydarzenie > div { border-right: 0; padding-bottom: 8px; }
	.st-wydarzenie__przycisk { grid-column: auto; margin: 4px 26px 22px; }
	.st-darmowe li { flex-direction: column; align-items: flex-start; }
	.st-stopka { grid-template-columns: minmax(0, 1fr); }
	.st-btn, .st-btn--obrys { padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.st-opinie__rzad, .czk-motyw__kropka { transition: none; }
}

/* ── Blog (makieta #24a i #art, 30.10.2026) ──────────────────────── */
.st-tematy-bloga { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--wciecie) 28px; }
.st-tematy-bloga a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--kreska-mocna); color: var(--tekst); text-decoration: none; font: 400 14px var(--font);
}
.st-tematy-bloga a:hover { background: var(--muska); color: var(--tekst); }
.st-tematy-bloga a[aria-current="true"] { background: var(--sterowanie); border-color: var(--sterowanie); color: var(--na-sterowaniu); }
.st-lista-wpisow { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kreska); }
.st-lista-wpisow li { padding: 22px var(--wciecie); border-bottom: 1px solid var(--kreska-cienka); }
.st-lista-wpisow__meta { font: 750 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-cichy); margin-bottom: 6px; }
.st-lista-wpisow h3 { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--font); letter-spacing: -.03em; margin-bottom: 6px; }
.st-lista-wpisow h3 a { color: var(--tekst); text-decoration: none; }
.st-lista-wpisow h3 a:hover { color: var(--cegla); text-decoration: underline; }
.st-lista-wpisow__zajawka { font: 400 15.5px/1.6 var(--font); color: var(--tekst-slaby); max-width: 75ch; }
.st-strony { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px var(--wciecie); }

.st-wpis { max-width: 760px; margin: 0 auto; padding: 34px var(--wciecie) 40px; }
.st-okruchy { font: 400 14px var(--font); color: var(--tekst-cichy); margin-bottom: 8px; }
.st-okruchy a { color: inherit; }
.st-wpis__meta { margin-bottom: 16px; font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cegla); }
.st-wpis__tytul { margin-bottom: 22px; font: 760 clamp(32px, 4vw, 46px)/1.08 var(--font); letter-spacing: -.045em; text-wrap: pretty; }
.st-wpis__okladka { display: block; width: 100%; height: auto; margin: 0 0 24px; }
.st-wpis__lead { margin-bottom: 28px; font: 400 19px/1.6 var(--font); color: var(--tekst-slaby); }
.st-wpis__tresc { font: 400 17px/1.75 var(--font); hyphens: auto; }
.st-wpis__tresc p { margin: 0 0 18px; text-align: justify; }
.st-wpis__tresc h2 { margin: 34px 0 14px; font: 700 26px/1.2 var(--font); letter-spacing: -.03em; }
.st-wpis__tresc h3 { margin: 26px 0 10px; font: 700 20px/1.3 var(--font); }
.st-wpis__tresc blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cegla); font-size: 19px; }
.st-wpis__tresc img { display: block; max-width: 100%; height: auto; margin: 22px 0; }
.st-wpis__podpis { margin-top: 18px; font: 400 15px/1.7 var(--font); color: var(--tekst-cichy); }
.st-wpis__cta { margin-bottom: 14px; font: 700 20px var(--font); letter-spacing: -.02em; }
.st-wpis__nastepne { list-style: none; margin: 0; padding: 0; font: 400 15px/2 var(--font); }
.st-wpis__dalej { border-top: 1px solid var(--kreska); }
@media (max-width: 600px) { .st-wpis__tresc p { text-align: left; } }
/* Tytuł wpisu: w bazie zwykła pisownia (do <title> i wyszukiwarek), na stronie
   wersaliki jak w makiecie (Piotr 30.10.2026: „Wersaliki CSS-em”). */
.st-lista-wpisow h3, .st-wpis__tytul, .st-wpis__nastepny { text-transform: uppercase; }

/* ── Strona redakcyjna: regulamin, polityka, kontakt (makieta #23c) ── */
.st-strona { max-width: 760px; margin: 0 auto; padding: 34px var(--wciecie) 48px; }
.st-strona__tytul { margin-bottom: 18px; font: 760 clamp(32px, 4vw, 46px)/1.08 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.st-strona__lead { margin-bottom: 26px; font: 400 19px/1.6 var(--font); color: var(--tekst-slaby); }
.st-strona__spis { margin: 0 0 30px; padding: 16px 20px; border: 1px solid var(--kreska); font: 400 15px/1.7 var(--font); }
.st-strona__spis p { margin: 0 0 6px; font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-strona__spis ol { margin: 0; padding-left: 1.2em; }
.st-strona__spis a { color: var(--tekst); }
.st-strona__tresc { font: 400 16.5px/1.7 var(--font); }
.st-strona__tresc p, .st-strona__tresc ul, .st-strona__tresc ol, .st-strona__tresc dl { margin: 0 0 16px; }
.st-strona__tresc ul, .st-strona__tresc ol { padding-left: 1.4em; }
.st-strona__tresc li { margin-bottom: 6px; }
.st-strona__tresc h2 { margin: 34px 0 12px; font: 700 24px/1.25 var(--font); letter-spacing: -.025em; scroll-margin-top: 90px; }
.st-strona__tresc h3 { margin: 24px 0 10px; font: 700 19px/1.3 var(--font); }
.st-strona__tresc h4 { margin: 20px 0 8px; font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-strona__tresc blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cegla); font-size: 19px; }
.st-strona__tresc a { color: var(--tekst); }
.st-strona__zmiana { margin-top: 30px; font: 400 14px var(--font); color: var(--tekst-cichy); }

/* Brakujący materiał (Piotr 30.10.2026: „wstaw placeholdery”). Widoczny z daleka,
   żeby nikt nie wziął go za gotową treść; przed publikacją: grep st-brak. */
.st-brak {
	margin: 0 0 16px; padding: 14px 16px;
	border: 1.5px dashed var(--cegla); background: transparent;
	font: 400 14.5px/1.5 var(--font); color: var(--tekst-slaby);
}
.st-brak::before {
	content: 'Do uzupełnienia · '; font-weight: 750; letter-spacing: .06em;
	text-transform: uppercase; font-size: 11.5px; color: var(--cegla);
}

/* ── O mnie (makieta #14a) ── */
.st-omnie__gora { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 1px solid var(--kreska); }
.st-omnie__gora > * { min-width: 0; }
.st-omnie__wstep { padding: 40px var(--wciecie) 36px; }
.st-omnie__wstep p { max-width: 62ch; margin: 0 0 14px; font: 400 17px/1.7 var(--font); color: var(--tekst-slaby); }
.st-omnie__portret { margin: 0; border-left: 1px solid var(--kreska); }
.st-omnie__portret img { display: block; width: 100%; height: 100%; max-height: 640px; object-fit: cover; object-position: 60% 30%; }
.st-omnie__liczby { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-bottom: 1px solid var(--kreska); }
.st-omnie__liczby > div { padding: 26px var(--wciecie); border-right: 1px solid var(--kreska-cienka); min-width: 0; }
.st-omnie__liczby > div:last-child { border-right: 0; }
.st-omnie__liczby dt { font: 760 clamp(34px, 3.6vw, 46px)/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.st-omnie__liczby dd { margin: 6px 0 0; font: 400 14.5px/1.4 var(--font); color: var(--tekst-slaby); }
.st-omnie .st-strona__tresc ol { list-style: none; padding: 0; border-top: 1px solid var(--kreska-cienka); }
.st-omnie .st-strona__tresc ol li { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-omnie .st-strona__tresc ol li strong { color: var(--cegla); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
	.st-omnie__gora { grid-template-columns: 1fr; }
	.st-omnie__portret { border-left: 0; border-top: 1px solid var(--kreska); }
	.st-omnie__portret img { max-height: 420px; }
	.st-omnie__liczby { grid-template-columns: 1fr 1fr; }
	.st-omnie__liczby > div:nth-child(2) { border-right: 0; }
	.st-omnie__liczby > div:nth-child(-n+2) { border-bottom: 1px solid var(--kreska-cienka); }
}
@media (max-width: 600px) { .st-omnie .st-strona__tresc ol li { grid-template-columns: 1fr; gap: 2px; } }

/* ── Kontakt ── */
.st-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0 0 26px; border: 1px solid var(--kreska); }
.st-kontakt > div { padding: 18px 20px; border-right: 1px solid var(--kreska-cienka); min-width: 0; }
.st-kontakt > div:last-child { border-right: 0; }
.st-kontakt dt { font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-cichy); margin-bottom: 6px; }
.st-kontakt dd { margin: 0; font: 400 18px/1.4 var(--font); overflow-wrap: anywhere; }
.st-kontakt dd a { color: var(--tekst); }

/* ── Podstrony z makiety (8b, 30.10.2026) ────────────────────────────
   Szkoła, Biznes, Superwizja, Master Class, ABC, Warsztaty, Sesje, Książki,
   Medytacje, Webinary, Darmowe, Aplikacja, Koszty dostawy. Jeden układ:
   nagłówek z faktami (.st-pod), potem pasy sekcji (.st-podsekcja) pocięte
   śródtytułami h2 treści strony. Treść pisze redakcja w panelu — dlatego
   wygląd idzie po ZWYKŁYCH znacznikach (ul, ol, dl, blockquote, aside),
   a nie po klasach, których edytor i tak by nie zostawił. */
.st-akcent--wersaliki { text-transform: uppercase; }

.st-pod { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 1px solid var(--kreska); }
.st-pod--sam { grid-template-columns: minmax(0, 1fr); }
.st-pod > * { min-width: 0; }
.st-pod__wstep { padding: 34px var(--wciecie) 36px; }
.st-pod__tytul { margin-bottom: 22px; text-wrap: balance; }
.st-pod__lead { max-width: 62ch; margin: 0 0 14px; font: 400 17px/1.7 var(--font); color: var(--tekst-slaby); }
.st-pod__przyciski { margin-top: 22px; }
.st-pod__sklepy { margin-top: 14px; }
.st-pod__bok { border-left: 1px solid var(--kreska); display: flex; flex-direction: column; }
.st-pod__obraz { margin: 0; flex: 1; min-height: 280px; }
.st-pod__obraz img { display: block; width: 100%; height: 100%; max-height: 560px; object-fit: cover; }
/* Całe zdjęcie (okładki na przezroczystym tle, 08.11.2026): bez przycinania, na jasnym polu. */
.st-pod__obraz--calosc { display: grid; place-items: center; padding: 28px; background: var(--tlo-jasne); }
.st-pod__obraz--calosc img { width: auto; max-width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.st-pod__obraz + .st-pod__fakty { border-top: 1px solid var(--kreska); }
.st-pod__fakty dd a { color: inherit; }

.st-podsekcja { padding: 34px var(--wciecie) 36px; border-bottom: 1px solid var(--kreska); scroll-margin-top: 80px; }
.st-podsekcja--wstep { padding-top: 26px; padding-bottom: 26px; }
.st-podsekcja > .st-eyebrow { margin-bottom: 10px; }
.st-podsekcja__tytul { margin: 0 0 18px; font: 760 clamp(26px, 3vw, 38px)/1.08 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.st-podsekcja__tresc { max-width: 860px; font: 400 16.5px/1.7 var(--font); }
.st-podsekcja__tresc--szeroka { max-width: none; }
.st-podsekcja__tresc > * + * { margin-top: 16px; }
.st-podsekcja__tresc > p, .st-podsekcja__tresc > ul:not([class]), .st-podsekcja__tresc > ol:not([class]) { max-width: 68ch; }
.st-podsekcja__tresc p, .st-podsekcja__tresc ul, .st-podsekcja__tresc ol, .st-podsekcja__tresc dl { margin-bottom: 0; }
.st-podsekcja__tresc a:not([class]) { color: var(--tekst); }
.st-podsekcja__tresc a:not([class]):hover { color: var(--cegla); }

/* Listy: wiersze z kreską; długa lista (7+) w dwóch kolumnach. */
.st-podsekcja__tresc > ul:not([class]) { list-style: none; padding: 0; border-top: 1px solid var(--kreska-cienka); }
.st-podsekcja__tresc > ul:not([class]) > li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--kreska-cienka); position: relative; }
.st-podsekcja__tresc > ul:not([class]) > li::before { content: "-"; position: absolute; left: 4px; color: var(--cegla); font-weight: 700; }
.st-podsekcja__tresc > ul:not([class]):has(> li:nth-child(7)) { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

/* Numerowane: program, kroki rekrutacji, przebieg pracy — 01, 02… w cegle. */
.st-podsekcja__tresc > ol:not([class]) { list-style: none; padding: 0; counter-reset: krok; border-top: 1px solid var(--kreska-cienka); max-width: 860px; }
.st-podsekcja__tresc > ol:not([class]) > li { counter-increment: krok; position: relative; padding: 14px 0 14px 3.4em; border-bottom: 1px solid var(--kreska-cienka); }
.st-podsekcja__tresc > ol:not([class]) > li::before { content: counter(krok, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 700 20px/1.3 var(--font); color: var(--cegla); font-variant-numeric: tabular-nums; }
.st-podsekcja__tresc > ol:not([class]) > li > strong:first-child { display: block; font-weight: 700; }

/* Fakty w sekcji (rozliczenie, dzień, pytania): etykieta | wartość. */
.st-podsekcja__tresc > dl:not([class]) { display: grid; grid-template-columns: minmax(10em, max-content) minmax(0, 1fr); border-top: 1px solid var(--kreska-cienka); max-width: 860px; }
.st-podsekcja__tresc > dl:not([class]) > dt, .st-podsekcja__tresc > dl:not([class]) > dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-podsekcja__tresc > dl:not([class]) > dt { padding-right: 24px; font-weight: 700; }
.st-podsekcja__tresc > dl:not([class]) > dd { color: var(--tekst-slaby); }

.st-podsekcja__tresc blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--cegla); font: 400 clamp(19px, 2vw, 24px)/1.45 var(--font); letter-spacing: -.02em; max-width: 52ch; }
.st-podsekcja__tresc blockquote p + p { margin-top: 8px; font: 400 14.5px var(--font); color: var(--tekst-cichy); letter-spacing: 0; }
.st-podsekcja__tresc aside { padding: 18px 20px; background: var(--tlo-jasne); border-left: 3px solid var(--cegla); max-width: 68ch; }

/* Karty — dwa i więcej h3 w sekcji (tryb A/B, role, przypadki, „Jedno konto”). */
.st-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--kreska); }
.st-karty__karta { padding: 22px 24px; border-right: 1px solid var(--kreska-cienka); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.st-karty__karta:last-child { border-right: 0; }
.st-karty__karta h4 { margin: 0; font: 750 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--cegla); }
.st-karty__karta h3 { margin: 0; font: 700 22px/1.2 var(--font); letter-spacing: -.03em; }
.st-karty__karta p { margin: 0; color: var(--tekst-slaby); font-size: 15.5px; }
.st-karty__karta p strong { color: var(--tekst); }

.st-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-width: none !important; }
.st-galeria figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tlo-jasne); }
.st-galeria img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Formularz zapytania (POST /zapytanie). */
.st-zapytanie { display: grid; gap: 8px; max-width: 640px; }
.st-zapytanie label:not(.st-zgoda) { margin-top: 8px; font: 400 14px var(--font); }
.st-zapytanie input[type="email"], .st-zapytanie select, .st-zapytanie textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--kreska-mocna); border-radius: 0;
	background: var(--karta); color: var(--tekst); font: 400 16px/1.5 var(--font);
}
.st-zapytanie textarea { resize: vertical; min-height: 130px; }
.st-zapytanie .st-zgoda { margin-top: 12px; }
.st-zapytanie .st-przyciski { margin-top: 10px; }
.st-zapytanie button { border-radius: 0; }
.st-komunikat { padding: 14px 16px; border: 1px solid var(--tekst); font: 400 15.5px/1.5 var(--font); max-width: 640px; }
.st-komunikat--blad { border-color: var(--cegla); color: var(--cegla); }

/* Warsztaty: filtry (linki z parametrem) i pusty stan. */
.st-filtry { display: grid; gap: 12px; padding: 22px var(--wciecie); border-bottom: 1px solid var(--kreska-cienka); }
.st-filtry__grupa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-filtry__nazwa { min-width: 6.5em; font: 750 12px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-filtry__licznik { margin: 4px 0 0; font: 400 14.5px var(--font); color: var(--tekst-slaby); }
.st-chip {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--kreska-mocna); color: var(--tekst); text-decoration: none; font: 400 14px var(--font);
	font-variant-numeric: tabular-nums;
}
.st-chip:hover { background: var(--muska); color: var(--tekst); }
.st-chip[aria-current="true"] { background: var(--sterowanie); border-color: var(--sterowanie); color: var(--na-sterowaniu); }
.st-pusto { padding: 28px var(--wciecie); }
.st-pusto p { margin: 0 0 6px; max-width: 60ch; color: var(--tekst-slaby); }
.st-pusto strong { color: var(--tekst); }

/* Sesje: wolne godziny z kalendarza. */
.st-sloty { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kreska-cienka); }
.st-sloty li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-sloty__dzien { min-width: 14em; font-weight: 700; }
.st-sloty__godziny { display: flex; flex-wrap: wrap; gap: 8px; }

/* Książki: grupy wydań z ceną i „Kup”. */
.st-oferty + .st-oferty { margin-top: 28px; }
.st-oferty__tytul { margin: 0; font: 700 22px/1.2 var(--font); letter-spacing: -.03em; }
.st-oferty__podtytul { margin: 4px 0 10px; font: 750 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-oferty ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kreska); }
.st-oferta { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-oferta__nazwa { font: 700 17px/1.3 var(--font); color: var(--tekst); text-decoration: none; }
.st-oferta__nazwa:hover { color: var(--cegla); text-decoration: underline; }
.st-oferta__opis { margin: 4px 0 0; font: 400 14.5px/1.55 var(--font); color: var(--tekst-slaby); max-width: 70ch; }
.st-oferta__meta { margin: 4px 0 0; font: 750 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-oferta .st-cena, .st-katalog .st-cena { font-size: 18px; white-space: nowrap; }

/* Medytacje i darmowe: lista nagrań, darmowe z odtwarzaczem. */
.st-nagrania { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kreska); }
.st-nagranie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-nagranie__tytul { font: 700 18px/1.3 var(--font); letter-spacing: -.02em; }
.st-nagranie__opis { grid-column: 1; font: 400 14.5px/1.55 var(--font); color: var(--tekst-slaby); max-width: 70ch; }
.st-nagranie__meta { grid-column: 2; grid-row: 1; font: 400 14px var(--font); color: var(--tekst-cichy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-nagranie__odtwarzacz { grid-column: 1 / -1; margin-top: 8px; }
.st-nagranie__odtwarzacz .mp__head { display: none; }   /* tytuł i czas stoją już w wierszu */
.st-nagrania--duze .st-nagranie__tytul { font-size: 22px; }
.st-dostep { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding: 16px 18px; background: var(--tlo-jasne); }
.st-dostep p { flex: 1 1 32ch; margin: 0; font-size: 15px; color: var(--tekst-slaby); }
.st-dostep p strong { color: var(--tekst); }

/* Webinary i pakiety aplikacji: katalog kart. */
.st-katalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
/* Prawdziwe ekrany aplikacji (/aplikacja, makieta #ekrany-18a): komplet z Google Play - cztery
   zrzuty w rzędzie (makieta miała sześć, stąd węższe kolumny zamiast całej szerokości), zrzut
   w cienkiej ramce, podpis pod spodem. Zrzuty są ciemne w obu motywach strony. */
.st-ekrany { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 920px; }
.st-ekran { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.st-ekran img { display: block; width: 100%; height: auto; border: 1px solid var(--kreska); background: var(--ciemne); }
.st-ekran figcaption { font: 400 13px/1.5 var(--font); color: var(--tekst-cichy); }
@media (max-width: 600px) { .st-ekrany { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.st-katalog__poz { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--kreska); background: var(--karta); min-width: 0; }
.st-katalog__poz--wkrotce { border-style: dashed; }
.st-katalog__poz .st-karta__czesci { margin: 0; }
.st-katalog__tytul { margin: 0; font: 700 20px/1.2 var(--font); letter-spacing: -.03em; }
.st-katalog__tytul a { color: var(--tekst); text-decoration: none; }
.st-katalog__tytul a:hover { color: var(--cegla); text-decoration: underline; }
.st-katalog__opis { margin: 0; flex: 1; font: 400 14.5px/1.6 var(--font); color: var(--tekst-slaby); }
.st-katalog__stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.st-cena--brak { color: var(--tekst-cichy); font-weight: 400; }

/* Koszty dostawy: tabela z kasy. */
.st-tabela { overflow-x: auto; }
.st-tabela table { width: 100%; max-width: 860px; border-collapse: collapse; font: 400 15.5px/1.5 var(--font); }
.st-tabela th, .st-tabela td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kreska-cienka); }
.st-tabela thead th { font: 750 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-cichy); border-bottom-color: var(--kreska); }
.st-tabela tbody th { font-weight: 700; }
.st-tabela span { display: block; font-size: 13.5px; color: var(--tekst-cichy); font-weight: 400; }
.st-tabela__kwota { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
	.st-pod { grid-template-columns: minmax(0, 1fr); }
	.st-pod__bok { border-left: 0; border-top: 1px solid var(--kreska); }
	.st-pod__obraz img { max-height: 420px; }
	.st-karty__karta { border-right: 0; border-bottom: 1px solid var(--kreska-cienka); }
	.st-karty__karta:last-child { border-bottom: 0; }
	.st-podsekcja__tresc > ul:not([class]):has(> li:nth-child(7)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.st-podsekcja__tresc > dl:not([class]) { grid-template-columns: minmax(0, 1fr); }
	.st-podsekcja__tresc > dl:not([class]) > dt { padding-bottom: 0; border-bottom: 0; }
	.st-oferta { grid-template-columns: minmax(0, 1fr) auto; }
	.st-oferta > div { grid-column: 1 / -1; }
	.st-nagranie { grid-template-columns: minmax(0, 1fr); }
	.st-nagranie__meta { grid-column: 1; grid-row: auto; white-space: normal; }
	.st-sloty__dzien { min-width: 0; }
}

/* Wyjście z konta we wspólnym nagłówku (31.10.2026) — dotąd było tylko w pasku sklepu. */
.st-wyloguj { margin: 0; }
.st-wyloguj__przycisk {
	min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
	font: 400 14px var(--font); color: var(--tekst-slaby); text-decoration: underline; text-underline-offset: 3px;
}
.st-wyloguj__przycisk:hover { color: var(--tekst); }
/* Koszyk w nagłówku: lekki link z licznikiem, nie druga ramka obok „Moje konto” —
   inaczej przy zalogowanym Kliencie z koszykiem nagłówek łamał się na dwa wiersze. */
.st-koszyk {
	display: flex; align-items: center; gap: 6px; min-height: 44px;
	font: 700 14px var(--font); color: var(--tekst); text-decoration: none; white-space: nowrap;
}
.st-koszyk span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--sterowanie); color: var(--na-sterowaniu); font-size: 12px; }
.st-koszyk:hover { color: var(--cegla); }
.st-naglowek__akcje { gap: 12px; }
/* Między menu rozwiniętym a zwiniętym „Wyloguj” nie mieści się w jednym wierszu —
   wtedy wyjście jest na stronie „Moje konto” (przycisk przy tytule). */
@media (max-width: 1180px) { .st-wyloguj { display: none; } }

/* ── Udostępnij (04.11.2026) ──────────────────────────────────────────
   Zwykłe odnośniki, bez wtyczek serwisów. „Kopiuj link” i „Udostępnij…” odkrywa strona.js. */
.st-udostepnij { margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska); display: grid; gap: 12px; }
.st-udostepnij__rzad { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-udostepnij__rzad .st-btn--obrys { min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; }
.st-udostepnij__tel { border-style: dashed; }
.st-udostepnij__stan { font: 400 13.5px var(--font); color: var(--tekst-cichy); min-height: 1em; }
.st-udostepnij__stan:empty { display: none; }

/* ── Komentarze (04.11.2026, makieta „Drobne funkcje” v2) ─────────────
   Dwa widoki w jednej sekcji: lista komentarzy głównych i wnętrze wątku
   (odpowiedzi w JEDNEJ kolumnie, bez wcięć — jak w NewPipe). */
.st-kom { max-width: 760px; margin: 0 auto; padding: 34px var(--wciecie) 48px; }
.st-kom__widok { display: grid; gap: 0; }
.st-kom__tytul { font: 760 clamp(26px, 3vw, 34px)/1.15 var(--font); letter-spacing: -.045em; margin-bottom: 8px; }
.st-kom__tytul span { color: var(--tekst-cichy); font-weight: 400; }
.st-kom__pusto { padding: 14px 0 6px; color: var(--tekst-slaby); }
.st-kom__lista { list-style: none; margin: 8px 0 0; padding: 0; }
.st-kom__wpis { padding: 18px 0; border-top: 1px solid var(--kreska-cienka); display: grid; gap: 6px; }
.st-kom__wpis:target { background: var(--muska); }
.st-kom__kto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 15px var(--font); }
.st-kom__kiedy { font: 400 13.5px var(--font); color: var(--tekst-cichy); }
.st-kom__zespol {
	font: 750 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase;
	background: var(--sterowanie); color: var(--na-sterowaniu); padding: 2px 7px;
}
.st-kom__tresc { font: 400 16px/1.7 var(--font); overflow-wrap: anywhere; }
.st-kom__stopka { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 2px; }
.st-kom__link { font: 700 14px var(--font); color: var(--tekst); text-decoration: underline; text-underline-offset: 4px; }
.st-kom__link:hover { color: var(--cegla); }
.st-kom__watek-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--kreska-mocna); font: 700 14px var(--font); color: var(--cegla); text-decoration: none; }
.st-kom__watek-link:hover { border-color: var(--sterowanie); color: var(--cegla); }
.st-kom__znak { font: 750 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-kom__pasek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--kreska); font: 400 14px var(--font); color: var(--tekst-cichy); }
.st-kom__korzen { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--kreska); background: var(--tlo-jasne); display: grid; gap: 6px; }

.st-kom-forma { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--kreska); display: grid; gap: 14px; max-width: 640px; position: relative; }
.st-kom-forma__tytul { font: 700 21px/1.2 var(--font); letter-spacing: -.02em; }
.st-kom-forma__dwa { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.st-kom-forma__pole { display: grid; gap: 6px; align-content: start; min-width: 0; }
.st-kom-forma__pole label { font: 400 14px var(--font); }
.st-kom-forma input[type="text"], .st-kom-forma input[type="email"], .st-kom-forma textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--kreska-mocna); border-radius: 0;
	background: var(--karta); color: var(--tekst); font: 400 16px/1.5 var(--font);
}
.st-kom-forma textarea { min-height: 120px; resize: vertical; }
.st-kom-forma input:focus, .st-kom-forma textarea:focus { outline: 2px solid var(--sterowanie); outline-offset: 0; }
.st-kom-forma [aria-invalid="true"] { border-color: var(--cegla); }
.st-kom-forma__pomoc { font: 400 13px/1.5 var(--font); color: var(--tekst-cichy); }
.st-kom-forma__blad { font: 400 13.5px/1.5 var(--font); color: var(--cegla); }
.st-kom-forma__jako { color: var(--tekst-slaby); }
.st-kom-forma__do { display: flex; align-items: center; gap: 10px; font: 400 14.5px var(--font); color: var(--tekst-slaby); }
.st-kom-forma__do strong { color: var(--tekst); }
.st-kom-forma__do a { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--kreska); color: var(--tekst); text-decoration: none; }
.st-kom-forma .st-zgoda { font-size: 14px; }
.st-kom-forma .st-przyciski { margin: 0; }

/* ══ Edytor treści: kolory, link-przycisk, wstawki (08.11.2026) ══════════════════════════
   Klasy, które daje edytor w panelu (panel-edytor.js) i przepuszcza OpisHtml (Wstawki::KOLORY,
   KLASY_LINKU, KLASY_AKAPITU). Gotowy HTML wstawek składa Czarko\Services\Wstawki::renderuj(). */
.st-czerwony { color: var(--cegla); }
.st-szary { color: var(--tekst-cichy); }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) .czk-lead { font-size: 1.15em; line-height: 1.6; color: var(--tekst-mocny); }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) .czk-podpis { margin-top: -6px; font-size: 14.5px; color: var(--tekst-cichy); }
/* Link jako przycisk w treści: treść barwi każdy `a` na kolor tekstu — przycisk ma zostać przyciskiem. */
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) a.st-btn,
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) a.st-btn:hover { color: var(--na-sterowaniu); text-decoration: none; }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) a.st-btn--obrys { color: var(--tekst); text-decoration: none; }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) a.st-strzalka { font-weight: 750; color: var(--cegla); text-decoration: none; }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) a.st-strzalka:hover { text-decoration: underline; text-underline-offset: 4px; }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) p > a.st-btn:only-child,
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc) p > a.st-btn--obrys:only-child { margin-top: 4px; }

/* Odtwarzacz wstawiony w treść */
.st-wstawka-odtwarzacz { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--kreska); background: var(--karta); max-width: 760px; }
.st-wstawka-odtwarzacz__tytul { margin: 0 0 12px; font: 700 19px/1.3 var(--font); letter-spacing: -.02em; }

/* Siatka filmów YouTube — miniatura z naszego serwera, odtwarzacz dopiero po kliknięciu */
/* Specyficzność jak `.st-strona__tresc ul` (marginesy i wcięcie list w treści). */
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc, body) ul.st-filmy { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 26px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
:is(.st-strona__tresc, .st-podsekcja__tresc, .st-wpis__tresc, body) .st-filmy__film { margin: 0; padding: 0; min-width: 0; }
.st-filmy__film::before { content: none !important; }
.st-film, .st-film__ramka { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ciemne); overflow: hidden; }
.st-film img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.st-film:hover img, .st-film:focus-visible img { opacity: .82; }
.st-film__graj { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: var(--sterowanie); }
.st-film__graj::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--na-sterowaniu); }
.st-film:hover .st-film__graj { background: var(--sterowanie-hover); }
.st-film__ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-film__tytul { margin: 10px 0 2px !important; font: 700 16.5px/1.35 var(--font); letter-spacing: -.01em; }
.st-film__zrodlo { margin: 0 !important; font: 750 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy); }

/* Karta linku (np. podcast na Spotify) — w barwach strony, jasny i ciemny motyw */
.st-karta-linku { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 26px; align-items: center; margin: 24px 0; padding: 22px; border: 1px solid var(--kreska); background: var(--tlo-jasne); max-width: 860px; }
.st-karta-linku--bez-obrazu { grid-template-columns: minmax(0, 1fr); }
.st-karta-linku__obraz { display: block; width: 168px; height: 168px; object-fit: cover; }
.st-karta-linku__tresc > * { margin: 0; }
.st-karta-linku__tresc .st-eyebrow { margin-bottom: 8px; }
.st-karta-linku__tytul { font: 760 clamp(22px, 2.6vw, 30px)/1.1 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.st-karta-linku__opis { margin-top: 10px !important; font: 400 16px/1.6 var(--font); color: var(--tekst-slaby); max-width: 60ch; }
.st-karta-linku__akcja { margin-top: 18px !important; }
@media (max-width: 600px) {
	.st-karta-linku { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
	.st-karta-linku__obraz { width: 120px; height: 120px; }
}

/* ══ Blog — układ z projektu Mirka (czarko-blog-projekt.zip, 08.11.2026) ══════════════════
   Tekst główny z okładką + dwa obok (wyróżnienia z panelu), archiwum z tematami i wyszukiwarką.
   Barwy z tokenów strony — projekt był tylko jasny. */
.st-blog { padding: 44px var(--wciecie); border-bottom: 1px solid var(--kreska); }
.st-blog > .st-eyebrow { margin-bottom: 10px; }
.st-blog__wstep { padding-bottom: 30px; }
.st-blog__h1 { margin: 0; font: 760 clamp(52px, 7vw, 96px)/1 var(--font); letter-spacing: -.045em; }
.st-blog__lead { max-width: 60ch; margin: 14px 0 0; font: 400 17px/1.6 var(--font); color: var(--tekst-slaby); }
.st-blog__h2 { margin: 0; font: 760 clamp(32px, 4vw, 54px)/1.06 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.st-blog__h2 a { color: inherit; text-decoration: none; }
.st-blog__h2 a:hover { color: var(--cegla); }
.st-blog__glowny { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border: 1px solid var(--kreska); background: var(--tlo-jasne); }
.st-blog__glowny--bez-okladki { grid-template-columns: minmax(0, 1fr); }
.st-blog__okladka { display: block; width: 100%; height: 100%; min-height: 280px; max-height: 520px; object-fit: cover; }
.st-blog__glowny-tekst { align-self: center; padding: clamp(22px, 4vw, 44px); }
.st-blog__glowny-tekst .st-eyebrow { margin-bottom: 12px; }
.st-blog__zajawka { margin: 14px 0 18px; font: 400 16.5px/1.6 var(--font); color: var(--tekst-slaby); }
.st-blog__czytaj { font-weight: 750; }
.st-blog__obok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.st-blog__kafel { display: block; padding: 16px 20px; border: 1px solid var(--kreska); color: var(--tekst); text-decoration: none; }
.st-blog__kafel:hover { border-color: var(--tekst); background: var(--muska); }
.st-blog__kafel strong { display: block; margin-top: 4px; font: 700 19px/1.3 var(--font); letter-spacing: -.02em; }
.st-blog__meta { display: block; margin: 0; font: 750 12px/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-blog__sterowanie { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin: 22px 0 18px; }
.st-blog__tematy { min-width: 0; }
.st-blog__filtry { display: flex; flex-wrap: wrap; gap: 7px; }
.st-blog__filtry a, .st-blog__wiecej summary {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
	border: 1px solid var(--kreska-mocna); color: var(--tekst); text-decoration: none; font: 400 14.5px var(--font); cursor: pointer;
}
.st-blog__filtry a:hover, .st-blog__wiecej summary:hover { background: var(--muska); }
.st-blog__filtry a[aria-current="true"] { background: var(--sterowanie); border-color: var(--sterowanie); color: var(--na-sterowaniu); }
.st-blog__wiecej { margin-top: 8px; }
.st-blog__wiecej summary { list-style: none; }
.st-blog__wiecej summary::-webkit-details-marker { display: none; }
.st-blog__wiecej summary::after { content: '+'; margin-left: 8px; color: var(--cegla); }
.st-blog__wiecej[open] summary::after { content: '−'; }
.st-blog__wiecej[open] .st-blog__filtry { margin-top: 8px; }
.st-blog__szukaj label { display: block; margin-bottom: 6px; font: 750 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-cichy); }
.st-blog__szukaj-pole { display: flex; }
.st-blog__szukaj input { width: min(100%, 260px); min-height: 44px; padding: 0 12px; border: 1px solid var(--kreska-mocna); border-right: 0; border-radius: 0; background: var(--karta); color: var(--tekst); font: 400 16px var(--font); }
.st-blog__szukaj button { min-height: 44px; padding: 0 16px; border: 1px solid var(--sterowanie); background: var(--sterowanie); color: var(--na-sterowaniu); font: 800 14.5px var(--font); cursor: pointer; }
.st-blog__szukaj button:hover { background: var(--sterowanie-hover); }
.st-blog__licznik { margin: 0 0 10px; font: 400 14.5px var(--font); color: var(--tekst-cichy); }
.st-blog__licznik a { color: var(--tekst); }
.st-blog__lista { border-top: 1px solid var(--kreska); }
.st-blog__wpis { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--kreska-cienka); }
.st-blog__wpis .st-blog__meta { padding-top: 4px; }
.st-blog__wpis h3 { margin: 0; font: 700 clamp(19px, 1.9vw, 23px)/1.25 var(--font); letter-spacing: -.02em; }
.st-blog__wpis h3 a { color: var(--tekst); text-decoration: none; }
.st-blog__wpis h3 a:hover { color: var(--cegla); text-decoration: underline; text-underline-offset: 4px; }
.st-blog__wpis p:not(.st-blog__meta) { margin: 6px 0 0; font: 400 15.5px/1.6 var(--font); color: var(--tekst-slaby); max-width: 75ch; }
.st-blog__strony { margin-top: 22px; }
.st-blog--list { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 40px; align-items: center; background: var(--tlo-jasne); }
.st-blog__list-tekst .st-eyebrow { margin-bottom: 8px; }
.st-blog__list-tekst p:last-child { margin: 8px 0 0; color: var(--tekst-slaby); }
@media (max-width: 760px) {
	.st-blog { padding-block: 32px; }
	.st-blog__glowny, .st-blog__wpis, .st-blog--list { grid-template-columns: minmax(0, 1fr); }
	.st-blog__okladka { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
	.st-blog__wpis { gap: 4px; }
	.st-blog__obok { gap: 8px; }
	.st-blog__kafel { padding: 12px 14px; }
}
.st-blog__strony { padding-inline: 0; }