/* Podstrony T2/T5/T6, styl własny poza homem. Kamila Radzioch. */

/* color-tp1, 20.09.2026: platforma pozbywa sie bezu na prosbe Kamili ("poprzednia
   platforma byla biala z elementami szarosci", chce bialy/czarny/szary).
   Rozszerzone 20.09.2026 (Jakub, "robimy to wszedzie na platformie"): z
   wyliczonych szablonow na body:not(.home) - kazda strona tego motywu OPROCZ
   front-page.php, bo glowna strona platformy ma wlasny redesign zaplanowany
   osobno pozniej i nie ma jeszcze zgody na zmiane. .home to natywna klasa WP
   na froncie (is_front_page()), nie nasza. --surface-cream napedza .on-light
   (tokens.css), wiec sam token nie jest ruszany globalnie - ta regula GO
   NADPISUJE lokalnie, kazdy komponent czytajacy var(--surface-cream)/
   var(--surface-paper) poza homem dostaje nowa wartosc bez zmiany w kazdym
   miejscu z osobna. */
body:not(.home) {
  --surface-cream: var(--surface-white);
  --surface-paper: var(--surface-white); /* poprawka 20.09.2026: Jakub zglosil ze tlo sceny logowania (.logowanie-scena) dalej wygladalo jak kolor (#E7E5E2), bo to byl PELNY TLO strony, nie mala karta - Kamila chciala biala BAZA z elementami szarosci, nie odwrotnie. Szary zostaje tylko tam gdzie jest jawnie dobrany osobno (hover modulu), nie w tym tokenie */
}

/* color-tp2, 20.09.2026 (Jakub: "rozdziel to zeby platformy header i footer byl
   oddzielny"). Header/footer platformy sa juz osobnym kodem od strony glownej
   (P2/D49, 15.09.2026: jeden motyw, dwie instalacje, branch w header.php/
   footer.php + klasy .site-header--ld / .site-footer--platforma /
   .site-footer--minimalny / .site-header--minimalny) - nie duplikuje sie tu
   plikow, tylko domyka sie CSS: dropdown "Moje konto"/"Wyloguj" w H-LD dzieli
   SELEKTORY (.site-header__dropdown-link i podobne) z duzym menu strony
   glownej w base.css, ktore czyta bordo/zloto wprost z --accent/--gold, nie
   przez kontekst .on-dark. Nadpisanie tokenow lokalnie w tym scope
   przechwytuje kazde takie miejsce bez dotykania base.css (i bez ryzyka dla
   strony glownej, ktora tych klas modyfikujacych nie ma). Header/footer
   platformy siedzi juz na .on-dark (ciemne tlo), wiec zamiennik to biel, nie
   czern - czarny na niemal-czarnym byłby niewidoczny. */
.site-header--ld,
.site-header--minimalny,
.site-footer--platforma,
.site-footer--minimalny {
  --accent: var(--surface-white);
  --accent-hover: var(--text-on-dark-muted);
  --accent-deep: var(--surface-white);
  --accent-deep-hover: var(--text-on-dark-muted);
  --gold: var(--surface-white);
  --gold-hover: var(--text-on-dark-muted);
  --gold-light: var(--surface-white);
  --blush: var(--text-on-dark-muted);
}

/* color-tp6, 20.09.2026: Jakub zrzutem, hover "Wyloguj" w dropdownie bialy na
   jasnym tle dropdownu - nieczytelny. Ten sam bug co juz raz byl w historii
   tego pliku (base.css, D44: "jasny tekst na kremowym tle dropdownu"), teraz
   wywolany przeze mnie: nadpisanie --accent na biel wyzej mialo na mysli
   ciemny PASEK headera (.site-header--ld), ale .site-header__dropdown w
   srodku to osobny, JASNY popup (tlo default, nie on-dark), .site-header__
   dropdown-link:hover strong czyta ten sam --accent i wychodzi biale na
   bialym. Cofamy tokeny do ciemnych w obrebie samego dropdownu, bardziej
   zagniezdzony selektor bije szerszy powyzej. */
.site-header--ld .site-header__dropdown,
.site-header--minimalny .site-header__dropdown {
  --accent: var(--surface-dark);
  --accent-hover: var(--surface-dark-warm);
  --gold: var(--surface-dark);
  --gold-light: var(--surface-dark);
}

.podstrona-hero { padding-top: calc(var(--space-9) + 80px); padding-bottom: var(--space-8); }
.podstrona-hero__lead { max-width: 56ch; margin-top: var(--space-5); color: var(--text-on-dark-muted); font-size: 17px; }

.lista-galek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.lista-galek li { padding-left: var(--space-6); position: relative; font-size: 15px; }
.lista-galek li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--surface-dark); }

.moduly-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 700px) { .moduly-grid { grid-template-columns: 1fr; } }
.modul-item { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-white); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--surface-dark); }
.modul-item em { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--surface-dark); }
.modul-item span { font-size: 14px; }

.kontakt-info { display: flex; flex-direction: column; gap: var(--space-7); }
.kontakt-info__item strong { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--surface-dark); margin-bottom: var(--space-2); }
.kontakt-info__item a, .kontakt-info__item span { font-family: var(--font-display); font-size: 22px; }

.kontakt-form form { display: flex; flex-direction: column; gap: var(--space-5); }
.kontakt-form label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-light-muted); }
.kontakt-form input, .kontakt-form textarea {
  font-family: var(--font-text);
  font-size: 15px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-on-light);
  background: var(--surface-white);
  color: var(--text-on-light);
}
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: 2px solid var(--surface-dark); outline-offset: 1px; }
.kontakt-form label.checkbox { flex-direction: row; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: 0; font-size: 13px; }
.kontakt-form label.checkbox input { width: auto; }
.kontakt-form label.checkbox a { text-decoration: underline; color: var(--surface-dark); }
.form-info { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); font-size: 13px; background: var(--surface-paper); border-left: 3px solid var(--surface-dark); }
.form-info--blad { border-left-color: var(--surface-dark-warm); }
.kontakt-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tekst-prawny { max-width: 72ch; }
.tekst-prawny h2 { font-size: var(--fs-display-3); margin: var(--space-7) 0 var(--space-4); }
.tekst-prawny h3 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); }
.tekst-prawny ul, .tekst-prawny ol { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.tekst-prawny li { margin-bottom: var(--space-2); }
.moduly-lista { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6); }
.moduly-lista li { font-size: 14px; padding-left: var(--space-5); position: relative; }
.moduly-lista li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--surface-dark); }
@media (max-width: 700px) { .moduly-lista { grid-template-columns: 1fr; } }

/* --- Siatka produktów (ebooki, szkolenia online) ------------------------- */
.produkty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
@media (max-width: 900px) { .produkty-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .produkty-grid { grid-template-columns: 1fr; } }
.produkt-karta { background: var(--surface-white); border: 1px solid var(--line-on-light); display: flex; flex-direction: column; }
.produkt-karta__badge { position: relative; }
.produkt-karta__badge span { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--surface-dark); color: var(--surface-white); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; }
.produkt-karta img { aspect-ratio: 1/1; object-fit: cover; }
.produkt-karta__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.produkt-karta__kat { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.produkt-karta__title { font-family: var(--font-display); font-size: 19px; }
.produkt-karta__price { margin-top: auto; display: flex; align-items: baseline; gap: var(--space-2); }
.produkt-karta__price del { font-size: 13px; color: var(--text-on-light-muted); }
.produkt-karta__price strong { font-size: 20px; }
.produkt-karta .btn { width: 100%; margin-top: var(--space-2); }

/* --- Oferta stacjonarna, bloki szkoleń ------------------------------------ */
.szkolenie-blok { padding-block: var(--space-8); border-bottom: 1px solid var(--line-on-light); }
.szkolenie-blok:last-child { border-bottom: 0; }
.szkolenie-blok h2 { text-align: center; }
.szkolenie-blok__intro { max-width: 62ch; margin: var(--space-5) auto 0; text-align: center; color: var(--text-on-light-muted); }
.szkolenie-blok__zakres { max-width: 900px; margin: var(--space-7) auto 0; }
.szkolenie-blok__zakres h3 { text-align: center; margin-bottom: var(--space-5); }
.zakres-dwie-kolumny { columns: 2; column-gap: var(--space-8); list-style: none; padding: 0; margin: 0; }
.zakres-dwie-kolumny li { font-size: 14px; padding: 6px 0; break-inside: avoid; }
@media (max-width: 700px) { .zakres-dwie-kolumny { columns: 1; } }
.szkolenie-blok__meta { text-align: center; margin-top: var(--space-6); font-size: 13px; color: var(--text-on-light-muted); }
.szkolenie-blok__ceny { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-7); flex-wrap: wrap; }
.cena-karta { background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-6) var(--space-7); min-width: 220px; text-align: center; }
.cena-karta strong { display: block; font-family: var(--font-display); font-size: 32px; color: var(--surface-dark); }
.cena-karta span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark-muted); margin-top: var(--space-2); }
.cena-karta .btn { margin-top: var(--space-5); width: 100%; }
.cena-karta small { display: block; margin-top: var(--space-3); font-size: 11px; color: var(--text-on-dark-muted); }

/* --- Formularz newsletter (warsztaty) -------------------------------------- */
.newsletter-box { max-width: 480px; margin: var(--space-8) auto 0; background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-7); }
.newsletter-box form { display: flex; flex-direction: column; gap: var(--space-4); }
.newsletter-box label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.newsletter-box input {
  font-family: var(--font-text); font-size: 14px; padding: var(--space-3) var(--space-4);
  background: var(--surface-white); border: 1px solid var(--line-on-dark); color: var(--text-on-light);
}

/* --- Platforma, typ ukladu "kurs" (P3 sesja 1, single-sfwd-courses.php) ----
   Sekcje H-LD/breadcrumb/hero+postep/telegram/akordeon zyja we WSPOLNYM
   .container (decyzja globalna #6), markup wlasny bo natywny infobar LD nie
   ma dwukolumnowego ukladu z makiety (patrz komentarz w learndash.css).
   KOREKTA 18.09.2026 (Jakub, po zrzucie z zywego stagingu): telegram MIAL
   na 390 isc PO akordeonie wg makiety 01-lista-mobile.png, ale w realnym
   uzyciu wyladowal na samym dole strony, daleko od CTA "Zobacz zawartosc".
   Jakub chce go zawsze zaraz po hero, ta sama kolejnosc co desktop -
   zdjete rozbicie na breakpoint, order zostaje staly. */
.kurs-flow { display: flex; flex-direction: column; }
.kurs-flow > .kurs-intro { order: 1; }
.kurs-flow > .kurs-telegram { order: 2; }
.kurs-flow > .kurs-akordeon { order: 3; }

/* KOREKTA 16.09.2026: sam wzorzec "+80px bez powodu" zlapany i naprawiony na
   .moje-szkolenia-hero (patrz komentarz nizej w tym pliku), tu ten sam bug,
   naprawiony tym samym ruchem zeby nie zostawiac rozjazdu miedzy dwiema
   stronami tego samego typu ukladu "podstrona z hero". */
.kurs-intro { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.kurs-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-6); color: var(--text-on-light-muted); }
.kurs-breadcrumb a { color: var(--surface-dark); }
.kurs-breadcrumb a:hover { text-decoration: underline; }
.kurs-breadcrumb span[aria-hidden] { opacity: .5; }
.kurs-breadcrumb span:last-child { color: var(--text-on-light-muted); }

.kurs-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.kurs-hero__tekst { flex: 1 1 420px; }
/* Bez tej regoly h1 dziedziczy --fs-display-1 (72-118px, hero home) z base.css,
   bo .hero-tekstowy h1 (base.css, ~linia 1338) to INNY komponent (podstrona
   marketingowa /kursy/, karty ofertowe), nie ten platformowy. Przelew 95px na
   390 wykryty dowod.py 16.09.2026, H1 "Szkolenie Instruktorskie" wychodzil
   poza .container jednym slowem obcietym z widoku. Ten sam token
   --fs-h1-podstrona, bo to ten sam koncept "H1 podstrony", inny fizyczny plik. */
.kurs-hero__tekst h1 { font-size: var(--fs-h1-podstrona); line-height: .96; }
.kurs-hero__lead { margin-top: var(--space-4); color: var(--text-on-light-muted); font-size: 16px; }
.kurs-hero__karta {
  background: var(--surface-cream);
  border: 1px solid var(--line-on-light);
  box-shadow: var(--shadow-karta);
  flex: 0 1 380px;
  padding: var(--space-6) var(--space-7);
}
.kurs-hero__karta-etykieta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-on-light-muted); margin-bottom: var(--space-3); }
.kurs-hero__procent { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(38px, 4vw, 56px); color: var(--surface-dark); line-height: 1; }
.kurs-hero__pasek { margin-top: var(--space-4); height: 6px; background: var(--line-on-light-strong); overflow: hidden; }
.kurs-hero__pasek-wypelnienie { height: 6px; background: var(--surface-dark); }
.kurs-hero__kroki { display: block; margin-top: var(--space-3); font-size: 13px; color: var(--text-on-light); }
.kurs-hero__ostatnia { display: block; margin-top: var(--space-2); font-size: 12px; color: var(--text-on-light-muted); }
@media (max-width: 768px) {
  /* KOREKTA 18.09.2026 (Jakub, zywy zrzut): .kurs-hero ma "gap: var(--space-8)"
     (96-152px) mysleny jako POZIOMY odstep miedzy tekstem a karta na desktopie
     (flex-direction: row). Po przejsciu na column ten sam gap dziala PIONOWO
     miedzy przyciskiem "Zobacz zawartosc" a karta Postep kursu - ogromna,
     niezamierzona przerwa. Wlasny, mniejszy odstep tylko dla stackowanego
     ukladu mobile, oryginalny --space-8 zostaje nietkniety na desktopie. */
  .kurs-hero { flex-direction: column; gap: var(--space-5); }
  /* DRUGA (wieksza) przyczyna tej samej luki, zmierzona Playwrightem 18.09.2026:
     .kurs-hero__tekst ma "flex: 1 1 420px" - flex-basis 420px pomyslany jako
     SZEROKOSC kolumny tekstu na desktopie (flex-direction: row). Po przejsciu
     na column flex-basis dziala na osi GLOWNEJ, ktora teraz jest PIONOWA, wiec
     ten sam "420px" zamienia sie w wymuszona WYSOKOSC bloku tekstu. Realna
     tresc (H1+lead+przycisk) ma ~170px, wiec ~250px zostawalo puste w srodku
     .kurs-hero__tekst, PRZED karta postepu (nie za nia - stad wrazenie zbyt
     duzego odstepu mimo poprawionego gap wyzej). Zmierzone: getBoundingClientRect
     .kurs-hero__tekst height=420 mimo ze CTA konczy sie 170px nizej niz top. */
  .kurs-hero__tekst { flex-basis: auto; }
  .kurs-hero__karta { flex-basis: auto; width: 100%; }
}

/* Jakub 17.09.2026: pasek Telegramu uzywal .on-wine (bordo, tokens.css) - platforma ma byc tylko czarno-biala, przykrywamy samo tlo, .on-wine i tak juz dawal biale --btn-solid-bg/bialy tekst wiec przycisk i tresc zostaja bez zmian. */
.kurs-telegram.on-wine { background: var(--surface-dark); }
.kurs-telegram.on-wine .eyebrow { color: var(--surface-white); }
.kurs-telegram { padding-block: var(--space-6); }
.kurs-telegram__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.kurs-telegram__tekst p { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 20px; }
.kurs-telegram__cta { flex: none; }
@media (max-width: 768px) {
  .kurs-telegram__inner { flex-direction: column; align-items: stretch; text-align: left; }
  .kurs-telegram__cta { width: 100%; }
}

/* KOREKTA 16.09.2026: padding-top mial juz override, padding-bottom nie -
   dziedziczyl domyslne section{padding-block:var(--space-section)} (96-152px,
   skala marketingowa), stad ogromna pusta przestrzen po ostatnim wierszu
   akordeonu przed stopka. Zlapane przez Jakuba na zywo. */
.kurs-akordeon { padding-top: var(--space-7); padding-bottom: var(--space-8); }

/* --- Platforma, typ ukladu "lista-kursow" (P3 sesja 3, template-moje-szkolenia.php) --
   H1+lead prosty, bez karty postepu (to nie strona jednego kursu, page-briefs/
   moje-szkolenia.md S2). Grid kart .karta-kurs-moje: jezyk wizualny wiki/komponenty/
   karta-kurs-flagowy.md (karta ciemna na jasnej sekcji) ale kompaktowa, pasek postepu
   zamiast ceny/CTA-kup (brak wlasnej makiety Karola dla tej strony, decyzje.md P3.1).
   Karta uzywa klasy .on-dark wprost (nie hardkoduje tlo/kolor jak karta-kurs-flagowy,
   ktora ma wyjatek udokumentowany we wlasnym pliku dla gradientu) - .btn--solid w
   srodku dostaje wtedy poprawny zloty kontekst automatycznie (budowa-strony.md
   decyzja globalna #2, "obejmuje KAZDY element poza sekcjami"). */
/* KOREKTA 16.09.2026: Jakub na zywo "zmniejszyc naglowek, zmniejszyc odstepy".
   H1 dziedziczyl --fs-display-1 (72-118px, hero home/marketingowy) zamiast
   --fs-h1-podstrona (32-48px) - ten sam bug juz raz zlapany i naprawiony dzis
   na .kurs-hero__tekst h1 (patrz komentarz przy tamtej regule), tu nikt go
   jeszcze nie zauwazyl bo strona nie miala wlasnej makiety do porownania.
   Padding-top mial dodatkowe "+80px" bez udokumentowanego powodu (ten sam
   wzorzec jest tez w .kurs-intro, nietkniety w tej poprawce, poza zakresem
   dzisiejszego zadania) - usuniete, sekcja to dashboard utylitarny, nie hero
   marketingowy, nie potrzebuje tyle powietrza. Padding-bottom i lead
   margin-top rowniez sciesnione o jeden stopien skali. */
.moje-szkolenia-hero { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.moje-szkolenia-hero h1 { font-size: var(--fs-h1-podstrona); }
.moje-szkolenia-hero__lead { margin-top: var(--space-3); max-width: 56ch; color: var(--text-on-light-muted); font-size: 16px; }

/* Sekcja z gridem kart dziedziczylaby domyslne section{padding-block:
   var(--space-section)} (96-152px, skala marketingowa) - w sumie z
   .moje-szkolenia-hero padding-bottom dawalo ~163px pustej przestrzeni nad
   pierwsza karta (widoczne na zywo, zmierzone 16.09.2026). Wzorzec
   .kurs-akordeon (ten sam plik, wyzej) uzywa --space-7 do tego samego celu. */
.moje-szkolenia-sekcja { padding-top: var(--space-7); padding-bottom: var(--space-8); }

/* auto-fit zamiast modyfikatora policzonego w PHP: przy 1 kursie jedyna karta
   rozciaga sie na cala szerokosc (,,karta szeroka" z page-briefu), przy 2 kursach
   oba tracki >=420px mieszcza sie obok siebie. Kontener ma max 2 kursy dzis
   (sitemap.md), auto-fit zostaje poprawne tez gdyby doszedl trzeci.
   Media query pod 768px WYMAGANA mimo auto-fit: minmax(420px, 1fr) ma twardy
   floor 420px per tor, a kontener na 390 to 351px (90%) - grid wymuszalby
   420px i realnie obcinal karte o ~70px (zlapane pomiarem scrollWidth karty
   420 vs container 351, dom.py/Playwright, mierzone na zywo, nie "wyglada ok"). */
.moje-szkolenia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-6); }
@media (max-width: 768px) {
  .moje-szkolenia-grid { grid-template-columns: 1fr; }
}

.karta-kurs-moje { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7); }
.karta-kurs-moje__status { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.karta-kurs-moje__status--ukonczony { color: var(--surface-dark); }
.karta-kurs-moje__status--w-trakcie { color: var(--text-on-light-muted); }
.karta-kurs-moje__title { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.karta-kurs-moje__pasek { height: 6px; background: var(--line-on-dark-strong); overflow: hidden; }
.karta-kurs-moje__pasek-wypelnienie { height: 6px; background: var(--surface-dark); }
.karta-kurs-moje__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.karta-kurs-moje__kroki { font-size: 13px; color: var(--text-on-dark-muted); }
.karta-kurs-moje__procent { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--surface-dark); }
.karta-kurs-moje__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.karta-kurs-moje__cert { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
.karta-kurs-moje__cert:hover { color: var(--text-on-dark); }

.moje-szkolenia-empty { max-width: 480px; margin: 0 auto; text-align: center; }
.moje-szkolenia-empty p { margin: 0 0 var(--space-5); color: var(--text-on-light-muted); font-size: 16px; }

/* --- Platforma, typ ukladu "logowanie" (copy-0hg.3, korekta 16.09.2026,
   decyzje.md P4.10) --
   Pierwsza wersja tej sesji miala dwie karty obok siebie wg moje_konto.pdf
   (logowanie + "nowe konto"). Jakub przy odbiorze: karta "nowe konto" to
   bledna interpretacja, platforma nie ma zadnej formy samodzielnej
   rejestracji (konta wylacznie z zakupu Woo, P4.6) - skasowana calkowicie,
   PHP/DOM nie tylko CSS. Header minimalny na tym ekranie POTWIERDZONY jako
   celowy (pelny H-LD dopiero po zalogowaniu), nie ruszany.
   /logowanie/ wraca do JEDNEJ karty wysrodkowanej (.logowanie-scena__unica).
   Szerokosc 480px: moje_konto.pdf nie pokazywal tego ukladu osobno (tylko
   dwie karty razem), wiec dobrana wg precedensu W TYM SAMYM MOTYWIE -
   .newsletter-box i .moje-szkolenia-empty (nizej w tym pliku) uzywaja tej
   samej wartosci dla samodzielnego, wysrodkowanego bloku tresci, zamiast
   zgadywac z powietrza. Stan reset-hasla (.logowanie-scena__solo, 560px,
   pod tym blokiem) NIETKNIETY, poza zakresem tej poprawki.
   Kolory karty logowania zostaja z pierwszej wersji (zmierzone pikselowo z
   kanonu 1440 renderu moje_konto.pdf): tlo sceny --surface-paper, karta
   --surface-cream, przycisk --accent-deep (NIE domyslny --btn-solid-bg
   kontekstu on-light, bylby prawie czarny).
   Korekta 17.09.2026 (P4.12, zywa z Jakubem): page-hero ("01 -- Moje konto"
   + H1 "Wroc do swojej przestrzeni rozwoju.") skasowany calkowicie z DOM
   (byl w template-logowanie.php, blok .logowanie-hero) - Jakub chciat
   scene (portret+karta) wyzej i wysrodkowana, hero zajmowal gorna czesc
   ekranu bez tego. H1 strony przeniesiony na naglowek karty (patrz
   .logowanie-split .karta-logowania h1 nizej), regula "jeden H1 na jedynej
   indeksowalnej stronie" (sitemap.md) zostaje spelniona, zmienia sie tylko
   gdzie ten H1 fizycznie siedzi. Reguly .logowanie-hero* USUNIETE jako
   martwy kod (selektor bez odpowiednika w PHP). */
.logowanie-scena {
  background: var(--surface-paper);
  display: flex;
  align-items: center;
  min-height: calc(100vh - 149px); /* wysokosc headera minimalnego na /logowanie/, base.css .site-header */
  padding-block: var(--space-8);
}
.logowanie-scena > .container { width: 100%; }
.logowanie-scena__solo,
.logowanie-scena__unica { max-width: 560px; margin-inline: auto; }
.logowanie-scena__unica { max-width: 480px; }
@media (max-width: 1024px) {
  .logowanie-scena { min-height: calc(100vh - 90px); } /* header minimalny mobile, monogram bez wordmarku */
}
@media (max-width: 767px) {
  .logowanie-scena { padding-block: var(--space-7); }
}

/* Wariant z portretem, korekta 16.09.2026 (decyzje.md P4.11): karta wraca
   1fr obok zdjecia zamiast samodzielnego 480px, siatka .split wspolna z
   reszta motywu (base.css). Pod 900px .split sam sklada sie do jednej
   kolumny - zdjecie jawnie ukryte, zeby mobile zostalo dokladnie takie jak
   przed ta poprawka (brak wlasnej makiety na ten uklad na telefonie). */
.logowanie-scena__unica--split { max-width: 1040px; }
.logowanie-split { align-items: stretch; }
.logowanie-split__foto { min-height: 100%; }
.logowanie-split__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .logowanie-split__foto { display: none; }
}

.karta-logowania { padding: var(--space-7); box-shadow: var(--shadow-karta); background: var(--surface-cream); }
@media (max-width: 480px) {
  .karta-logowania { padding: var(--space-6) var(--space-5); }
}

.karta-logowania .eyebrow { margin-bottom: var(--space-4); }
/* Scoped do stanu logowania (split), nie do reset-hasla: reset-hasla ma
   wlasny <h1> bezposrednio, bez tej redukcji rozmiaru (P4.12, 17.09.2026,
   patrz komentarz nad .logowanie-scena wyzej - hero skasowany, H1
   przeniesiony na te karte, wiec potrzebuje wizualnie mniejszego rozmiaru
   niz domyslny H1 strony, tak jak mial jako H2 przed ta zmiana). */
.logowanie-split .karta-logowania h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-3); line-height: var(--lh-display); margin: 0 0 var(--space-5); }
.karta-logowania__lead { margin: 0 0 var(--space-6); color: var(--text-on-light-muted); font-size: 15px; }
.karta-logowania__info { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); font-size: 13px; background: var(--surface-paper); border-left: 3px solid var(--surface-dark); }
.karta-logowania__info--blad { border-left-color: var(--surface-dark-warm); }
.karta-logowania__powrot { display: inline-block; margin-top: var(--space-5); font-size: 13px; color: var(--surface-dark); text-decoration: underline; text-underline-offset: 3px; }

.formularz-logowania { display: flex; flex-direction: column; gap: var(--space-5); }
.formularz-logowania label {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-on-light);
}
.formularz-logowania input[type="email"],
.formularz-logowania input[type="text"],
.formularz-logowania input[type="password"] {
  font-family: var(--font-text);
  font-size: 15px;
  height: var(--control-h-desktop);
  padding-inline: var(--space-4);
  border: 1px solid var(--line-on-light);
  background: var(--surface-white);
  color: var(--text-on-light);
  width: 100%;
  box-sizing: border-box;
}
.formularz-logowania input:focus { outline: 2px solid var(--surface-dark); outline-offset: 1px; }
@media (max-width: 767px) {
  .formularz-logowania input { height: var(--control-h-mobile); }
}

.formularz-logowania__rzad { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.formularz-logowania .checkbox { flex-direction: row; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--text-on-light); }
.formularz-logowania .checkbox input { width: auto; }
.formularz-logowania__powrot-haslo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--surface-dark); white-space: nowrap; }
.formularz-logowania__powrot-haslo:hover { text-decoration: underline; text-underline-offset: 3px; }
.formularz-logowania__powrot-haslo:focus-visible { outline: 2px solid var(--surface-dark); outline-offset: 2px; }

.formularz-logowania__haslo-pole { position: relative; display: flex; }
.formularz-logowania__haslo-pole input { padding-right: 72px; }
.formularz-logowania__toggle-haslo {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--surface-dark); font-size: 12px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  padding: var(--space-2) var(--space-3);
}
.formularz-logowania__toggle-haslo:focus-visible { outline: 2px solid var(--surface-dark); outline-offset: 2px; }

/* Przycisk, nadpisanie lokalne wobec domyslnego --btn-solid-bg kontekstu,
   wartosc zmierzona pikselowo z kadru (patrz komentarz na gorze bloku).
   .btn/.btn--solid (base.css) daje reszte za darmo: wysokosc, padding,
   strzalka ::after, transitions, stany hover/active/focus-visible/disabled. */
.karta-logowania .btn--solid { background: var(--surface-dark-warm); color: var(--text-on-dark); border-color: var(--surface-dark-warm); }
.karta-logowania .btn--solid:hover { background: var(--surface-dark-warm); border-color: var(--surface-dark-warm); }
.karta-logowania .btn--solid:focus-visible { outline-color: var(--surface-dark-warm); }
@media (max-width: 767px) {
  .karta-logowania .btn--solid { width: 100%; }
}

/* --- Header/stopka platformy, wariant minimalny (logowanie/reset-hasla) --- */
.site-header--minimalny .site-header__inner { justify-content: flex-start; }
.site-footer__top--minimalny { grid-template-columns: 1.4fr repeat(2, 1fr); }
@media (max-width: 767px) { .site-footer__top--minimalny { grid-template-columns: 1fr; } }

/* --- Platforma, typ ukladu "strona-tekstowa" (P3 sesja B5b, template-pomoc.php) --
   Reuzywa .tekst-prawny (regulamin/polityka) dla H2/paragrafy, sekcja hero
   wlasna bo istniejacy .podstrona-hero__lead hardkoduje kolor on-dark. */
.pomoc-hero__lead { margin-top: var(--space-4); max-width: 56ch; color: var(--text-on-light-muted); font-size: 16px; }