/* Layout-only styles for the PanAI website UI kit. All colour, type and radius values come from the design-system tokens. */

/* ============================================================
   TŁO STRONY — jeden gradient na całą witrynę, nieruchomy przy
   przewijaniu.

   Realizacja przez `position:fixed` na pseudoelemencie, a nie przez
   `background-attachment:fixed` — ten drugi jest ignorowany albo
   szarpie na iOS/Safari. Pseudoelement stoi w warstwie -1, więc cała
   treść rysuje się nad nim bez dodatkowych z-indexów.

   Wariant „Świt": chłód po lewej u góry (akwamaryna) schodzi w ciepło
   po prawej u dołu (bursztyn). Jedyne tło w palecie wnoszące ciepłą
   barwę — ociepla stronę, nie rezygnując z błękitu marki.

   Kolory wyłącznie z tokenów v2r2 i tylko z najjaśniejszego końca
   palety, żeby tekst zachował kontrast AA na każdej wysokości strony.
   Najciemniejszy punkt to --amber-100 w prawym dolnym rogu; --text-muted
   wypada na nim 5,7:1, przy progu AA 4,5:1.
   ============================================================ */
body{background:transparent}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(100% 80% at 0% 0%, var(--aqua-100) 0%, transparent 55%),
    radial-gradient(95% 75% at 100% 100%, var(--amber-100) 0%, transparent 58%),
    linear-gradient(165deg, var(--white) 0%, var(--warm-white) 55%, var(--amber-100) 100%);
}

.w-shell{min-height:100%}
.w-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-margin-lg)}
/* Lekko przezroczysty, żeby gradient tła przechodził pod paskiem
   zamiast urywać się twardą białą krawędzią */
.w-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);border-bottom:1px solid var(--border-subtle);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px)}
/* Pasek marki — jeden zatwierdzony gradient zamiast sześciokolorowej tęczy */
.w-nav::before{content:"";display:block;height:4px;background:var(--gradient-brand)}
.w-nav__in{display:flex;align-items:center;gap:var(--space-8);height:76px}
.w-nav__links{display:flex;gap:var(--space-6);margin-left:auto;align-items:center}
.w-nav__link{font:var(--type-ui);color:var(--text-body);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0}
.w-nav__link:hover{color:var(--blue-700)}
.w-nav__link--on{color:var(--text-strong);border-bottom-color:var(--action-primary)}

/* ============================================================
   POWIERZCHNIE SEKCJI

   Sekcje są przezroczyste — pokazują nieruchome tło strony.
   Jedyny wyjątek to granatowa kotwica, która pozostaje nieprzejrzysta
   i celowo przecina gradient pełną szerokością.

   Jasne pasma (mist / amber / mint / off-white) zostały usunięte:
   ich rolę przejął jeden ciągły gradient tła.
   ============================================================ */
/* Jeden odstęp międzysekcyjny w całym serwisie: 64 px u góry i u dołu każdej
   sekcji, czyli 128 px przerwy między sąsiednimi. Wcześniej strona główna
   stała na --section-y (96 px), a pozostałe podstrony na --section-y-tight
   (64 px) — przerwy na stronie głównej były o jedną trzecią większe niż gdzie
   indziej. Wyrównanie do wartości „tight" skraca je o 33% i nie rozsuwa
   przy tym żadnej sekcji, która już była w tym rytmie. */
.w-section,
.w-section--tight{padding:var(--section-y-tight) 0}

.w-section--navy{background:var(--gradient-depth);color:var(--text-on-dark)}
.w-section--navy h2,.w-section--navy h3{color:var(--text-on-dark)}
.w-split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);align-items:center}
/* min-width:0 jest konieczne, nie kosmetyczne. Element siatki ma domyślnie
   min-width:auto, czyli nie kurczy się poniżej najszerszej treści w środku —
   długi tytuł szkolenia rozpychał wtedy kolumnę ponad szerokość ekranu,
   mimo że siatka miała już jedną kolumnę. */
.w-split__main{grid-column:1/span 7;min-width:0}
.w-split__side{grid-column:9/span 4;min-width:0}
.w-split--wide-right .w-split__main{grid-column:1/span 5}
.w-split--wide-right .w-split__side{grid-column:7/span 6}
.w-eyebrow{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-accent);display:block;margin-bottom:var(--space-4)}
.w-section--navy .w-eyebrow{color:var(--blue-400)}
/* Hero nie ma własnego tła — pokazuje gradient strony */
.w-hero{padding:var(--space-20) 0 var(--space-16);max-width:none;width:100%}
.w-hero>*{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-margin-lg)}
.w-hero h1{font:var(--fw-bold) 52px/1.08 var(--font-brand);letter-spacing:var(--ls-display)}
.w-hero p{font:var(--type-lead);color:var(--text-body);margin-top:var(--space-5);max-width:46ch}
.w-hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}
.w-ph{background:var(--aqua-100);border-radius:var(--radius-media);display:flex;align-items:flex-end;padding:var(--space-4);color:var(--aqua-700);font:var(--type-caption);border:1px dashed var(--aqua-300)}
.w-ph--tall{aspect-ratio:4/5}
.w-ph--wide{aspect-ratio:16/9}
.w-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gutter)}
.w-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gutter)}
.w-h2{font:var(--type-h2);max-width:26ch}
.w-lead{font:var(--type-lead);color:var(--text-muted);max-width:56ch;margin-top:var(--space-4)}
.w-section--navy .w-lead{color:var(--text-on-dark-muted)}
.w-statement{font:var(--fw-semibold) 34px/1.28 var(--font-brand);color:var(--text-strong);letter-spacing:var(--ls-heading);max-width:22ch}
/* Kafle odbiorców — pełne panele w miękkim tincie zamiast kolumn z kreską u góry.
   Kolor nadal niesie znaczenie: niebieski = edukacja, turkusowy = administracja,
   koralowy = firmy. Kontrast tekstu na każdym z trzech tintów sprawdzony (≥5,5:1). */
.w-audience{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gutter)}
.w-aud{border-radius:var(--radius-panel);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.w-aud:nth-child(1){background:var(--blue-100)}
.w-aud:nth-child(2){background:var(--teal-100)}
.w-aud:nth-child(3){background:var(--coral-100)}
.w-aud__ico{width:44px;height:44px;flex:0 0 auto;border-radius:var(--radius-md);background:var(--white);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-1)}
.w-quote{font:var(--fw-medium) 22px/1.5 var(--font-text);color:var(--text-strong);max-width:34ch}
.w-meta{display:flex;gap:var(--space-5);flex-wrap:wrap;font:var(--type-body-sm);color:var(--text-muted)}
.w-meta span{display:inline-flex;align-items:center;gap:var(--space-2)}
.w-table{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
.w-table th{text-align:left;font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--blue-700);padding:0 var(--space-4) var(--space-3) 0;border-bottom:2px solid var(--blue-200)}
/* Jeden akcent na jeden obszar wizualny — tabela to jeden obszar,
   więc wszystkie wiersze mają ten sam znacznik, nie rotację trzech kolorów */
.w-table tbody tr td:first-child{box-shadow:inset 3px 0 0 var(--blue-200)}
.w-table td:first-child{padding-left:var(--space-4)}
.w-table td{padding:var(--space-4) var(--space-4) var(--space-4) 0;border-bottom:1px solid var(--border-subtle);color:var(--text-body);vertical-align:top}
.w-footer{background:var(--surface-inverse-deep);color:var(--text-on-dark-muted);padding:0 0 var(--space-8)}
.w-footer::before{content:"";display:block;height:4px;background:var(--gradient-brand);margin-bottom:var(--space-16)}
/* Nagłówki kolumn stopki: jeden kolor zamiast trzech różnych */
.w-footer a{color:var(--text-on-dark-muted);text-decoration:none;font:var(--type-body-sm)}
.w-footer a:hover{color:var(--text-on-dark)}
/* Trzy kolumny po usunięciu bloku „Kontakt" ze stopki */
.w-footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--grid-gutter)}
.w-footer__h{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-on-dark);margin-bottom:var(--space-4);display:block}
.w-footer__list{display:flex;flex-direction:column;gap:var(--space-3)}
.w-footer__bottom{margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);display:flex;justify-content:space-between;font:var(--type-caption)}

/* Odnośniki do Facebooka i Instagrama — ikona w kaflu na rozjaśnionym tle, żeby
   cienki glif nie ginął na granacie. Selektor musi być podwójny, bo .w-footer a
   nadpisuje kolor i rozmiar pisma. Na wąskim ekranie druga pozycja zawija się
   pod pierwszą. */
.w-socials{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-10)}
.w-footer .w-social{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text-on-dark);font:var(--type-ui)}
.w-footer .w-social:hover{color:var(--blue-400)}
.w-social__ico{width:36px;height:36px;flex:0 0 auto;border-radius:var(--radius-sm);background:rgba(255,255,255,.10);border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;transition:var(--transition-control)}
.w-footer .w-social:hover .w-social__ico{background:rgba(255,255,255,.20);border-color:var(--blue-400)}
.w-modules{display:flex;flex-direction:column;gap:var(--space-3)}
/* Lista modułów to jeden obszar wizualny — jeden akcent na wszystkie pozycje.
   Wcześniej moduły rotowały niebieski / turkusowy / bursztynowy, przez co
   program szkolenia czytał się jak zestaw niepowiązanych kafli. */
.w-module{display:grid;grid-template-columns:44px 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);border-left:3px solid var(--blue-200);border-radius:var(--radius-md);background:var(--white)}
.w-module__n{font:var(--fw-bold) 15px/1 var(--font-brand);color:var(--blue-700);background:var(--blue-100);width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.w-module__t{font:var(--type-ui);font-size:15px;color:var(--text-strong)}
.w-module__d{font:var(--type-caption);color:var(--text-muted);margin-top:2px}
.w-sticky-card{position:sticky;top:100px}
.w-sticky-card>.pa-card:first-child{border-top:3px solid var(--amber)}
.w-meta svg{color:inherit}

/* ============================================================
   Dodane przy dopasowaniu treści do ustaleń (31.08.2026).
   Nadal wyłącznie layout — kolory, typografia i promienie z tokenów.
   ============================================================ */

/* ---- Hero wariant A: jedna kolumna, wyśrodkowany ----
   Świadome odstępstwo od reguły layoutu v2r2 („no centred hero"),
   na mocy punktu 12 ustaleń. Szczegóły w README. */
.w-hero--center .w-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.w-hero--center h1{max-width:20ch}
/* Odstępy w hero nieco luźniejsze niż domyślne z .w-hero: 32 px pod nagłówkiem,
   40 px nad przyciskami i 32 px pod nimi. Przyciski dostają wtedy własne
   powietrze i nie zlewają się z tekstem nad ani pod sobą. */
.w-hero--center p{max-width:54ch;margin-top:var(--space-8)}
.w-hero--center .w-hero__actions{justify-content:center;margin-top:var(--space-10)}
.w-hero__note{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-8)}

/* Słowo „AI" w kolorze z logotypu (#0093CB = --blue, ten sam odcień co „AI"
   w wordmarku). Przy 19 px regular ten niebieski dawałby 3,1:1, czyli poniżej
   progu AA; grubość 700 czyni z niego tekst duży w rozumieniu WCAG, gdzie
   wystarczy 3:1 — i przy okazji odwzorowuje pogrubione „AI" z logo. */
.w-ai{color:var(--blue);font-weight:var(--fw-bold)}

/* ---- Karta promptu — element sygnaturowy w miejscu fotografii ---- */
.w-promptcard{border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-panel);background:var(--surface-card);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.w-promptcard__panel{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.w-promptcard__label{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-subtle);display:block;margin-bottom:var(--space-2)}
.w-promptcard__task{font:var(--type-h4);color:var(--text-strong)}
.w-promptcard__body{font-family:var(--font-mono);font-size:var(--fs-caption);line-height:var(--lh-loose);color:var(--text-body);background:var(--surface-accent-soft);border:var(--border-w) solid var(--blue-200);border-radius:var(--radius-md);padding:var(--space-4);margin:0;white-space:pre-wrap;max-width:none}
.w-promptcard__out{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-top:var(--border-w) solid var(--border-subtle);padding-top:var(--space-4);flex-wrap:wrap}
.w-promptcard__out span{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-ui);color:var(--text-strong)}

/* ---- Pięć filarów marki — w miejscu usuniętych statystyk ---- */
.w-pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5)}
/* Pięć filarów to jeden rząd — jeden akcent, nie pięciokolorowa tęcza
   (v2r2: „no rainbow card sets, no six-colour icon rows") */
.w-pillar{border-top:var(--border-w-rule) solid var(--blue-400);padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.w-pillar__t{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-on-dark)}
.w-pillar__d{font:var(--type-body-sm);color:var(--text-on-dark-muted);max-width:none}

/* ---- Osoby na stronie „O nas" — jedyne dozwolone zdjęcia ---- */
.w-people{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gutter)}
/* Tła kart z tej samej palety co kafle „Z kim współpracujemy?" na stronie głównej.
   Obwódkę zdejmujemy — przy wypełnionym tle rysowałaby drugą krawędź. */
.w-people>.pa-card{border-color:transparent}
.w-people>.pa-card:nth-child(1){background:var(--blue-100)}
.w-people>.pa-card:nth-child(2){background:var(--coral-100)}
/* Układ pionowy: zdjęcie → imię i nazwisko → opis */
.w-person{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
/* 288 px, czyli trzykrotność poprzednich 96 px. aspect-ratio zamiast sztywnej
   wysokości, żeby na wąskim ekranie kadr pozostał kwadratem. */
.w-person__photo{width:288px;max-width:100%;aspect-ratio:1;flex:0 0 auto;border-radius:var(--radius-card);background:var(--mist);border:1px dashed var(--grey-300);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-2);font:var(--type-caption);color:var(--text-subtle);overflow:hidden}
.w-person__photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card)}
.w-person__role{font:var(--type-caption);color:var(--text-muted);display:block;margin-bottom:var(--space-1)}

/* ---- Kalendarz terminów — pusta siatka bieżącego miesiąca ----
   Bez własnej obwódki, bo stoi wewnątrz przerywanej ramki .w-empty. */
.w-cal{margin-top:var(--space-3);width:100%}
.w-cal__nav{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.w-cal__head{flex:1;text-align:center;font:var(--type-ui);color:var(--text-strong);text-transform:capitalize}
.w-cal__btn{width:var(--control-h-sm);height:var(--control-h-sm);flex:0 0 auto;border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--white);color:var(--text-muted);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:var(--transition-control)}
.w-cal__btn:hover{border-color:var(--border-default);color:var(--text-strong)}
.w-cal__btn:active{transform:scale(var(--press-scale))}
.w-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1);text-align:center}
.w-cal__dow{font:var(--type-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-subtle);padding-bottom:var(--space-2)}
/* Dni bieżącego miesiąca: delikatne tło mgły, żeby odcinały się od wyszarzonych
   dni miesiąca poprzedniego i kolejnego (bez tła). */
.w-cal__day{font:var(--type-body-sm);color:var(--text-body);aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface-sunken)}
.w-cal__day:empty{background:transparent}
/* Dni poprzedniego i kolejnego miesiąca w pierwszym i ostatnim tygodniu: wyszarzone,
   bez tła. Termin szkolenia zachowuje kolor pakietu, cyfra bledsza. */
.w-cal__day--obcy{background:transparent;color:var(--text-subtle)}
.w-cal__day--t.w-cal__day--obcy{color:var(--text-muted)}

/* ---- Tekst prawny: polityka prywatności ----
   Miara wiersza węższa niż w reszcie serwisu — długi tekst prawny czyta się
   lepiej w krótszej linii. scroll-margin-top odsuwa nagłówek od przyklejonego
   paska nawigacji, gdy strona skacze wprost do konkretnego punktu. */
.w-legal{max-width:var(--container-prose);margin-top:var(--space-12)}
.w-legal h2{
  font:var(--type-h3);color:var(--text-strong);
  margin:var(--space-12) 0 var(--space-4);
  scroll-margin-top:calc(76px + var(--space-8));
}
.w-legal h2:first-child{margin-top:0}
.w-legal p{font:var(--type-body);color:var(--text-body);margin:0 0 var(--space-4)}
.w-legal a{color:var(--text-link)}
/* Tabela celów i podstaw prawnych (punkt 5). Na wąskim ekranie każdy wiersz
   staje się kartą, a druga kolumna dostaje podpis z data-label. */
.w-legal__tab{width:100%;border-collapse:collapse;margin:0 0 var(--space-6);font:var(--type-body-sm);color:var(--text-body)}
.w-legal__tab th{text-align:left;font-weight:var(--fw-semibold);color:var(--text-strong);background:var(--surface-alt);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default)}
.w-legal__tab td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);vertical-align:top}
.w-legal__tab td:first-child{width:45%;color:var(--text-strong)}
@media (max-width:600px){
  .w-legal__tab thead{display:none}
  .w-legal__tab,.w-legal__tab tbody,.w-legal__tab tr,.w-legal__tab td{display:block;width:100%}
  .w-legal__tab tr{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:var(--space-3);background:var(--surface-card)}
  .w-legal__tab td{border-bottom:0}
  .w-legal__tab td:first-child{width:100%;font-weight:var(--fw-semibold);padding-bottom:0}
  .w-legal__tab td[data-label]::before{content:attr(data-label) ": ";font-weight:var(--fw-semibold);color:var(--text-muted)}
}
.w-legal ul{list-style:none;padding:0;margin:0 0 var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.w-legal li{position:relative;padding-left:var(--space-5);font:var(--type-body);color:var(--text-body)}
.w-legal li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:var(--radius-pill);background:var(--blue-400)}
.w-legal__adres{
  border-left:3px solid var(--blue-200);padding-left:var(--space-5);
  color:var(--text-strong);
}

/* ---- Nota drobnym pismem, np. pod opiniami ---- */
.w-note{font:var(--type-body-sm);color:var(--text-muted);max-width:var(--measure-prose);margin-top:var(--space-4)}

/* ---- Karuzela opinii na stronie głównej ----
   Taśma przewija się w lewo bez końca. Lista jest w kodzie zdublowana, a animacja
   przesuwa ją dokładnie o połowę szerokości — w chwili powrotu widać ten sam kadr,
   więc sklejenie jest niewidoczne i nie potrzeba do tego JavaScriptu.
   Karta ma 340 px: przy kontenerze 1120 px mieszczą się trzy plus skrawek
   czwartej, co od razu pokazuje, że lista jest dłuższa. */
.w-marquee{
  overflow:hidden;
  /* Wygaszenie na krawędziach zamiast twardego ucięcia karty w połowie */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.w-marquee__track{display:flex;gap:var(--grid-gutter);width:max-content;animation:w-przesuw 70s linear infinite}
/* Zatrzymanie pod kursorem i przy nawigacji klawiaturą — inaczej nie da się
   spokojnie doczytać dłuższej opinii. */
.w-marquee:hover .w-marquee__track,
.w-marquee:focus-within .w-marquee__track{animation-play-state:paused}
@keyframes w-przesuw{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.w-quote{
  flex:0 0 340px;width:340px;margin:0;
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);
  background:rgba(255,255,255,.86);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
}
.w-quote blockquote{margin:0;font:var(--type-body-sm);color:var(--text-body)}

/* Bez animacji: taśma staje, a lista staje się zwykłym pasem do przewinięcia
   palcem lub kółkiem myszy. Maska znika, bo nic już nie wjeżdża zza krawędzi. */
@media (prefers-reduced-motion:reduce){
  .w-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .w-marquee__track{animation:none}
}

/* ---- Lista szkoleń na Ofercie ----
   W miejsce tabeli: wpisy oddzielone włoskową linią. Tytuł i kafelki tematów
   po lewej, parametry i przycisk po prawej. Łączny czas siedzi w pigułce, bo
   to jedyna liczba, którą placówka porównuje planując dzień; rozbicie na
   moduły odpowiada na inne pytanie i stoi obok, drobniej.
   Pigułka, a nie koło: rośnie razem z tekstem, więc „8 h" i „4,5 h" należą
   do jednej rodziny zamiast raz wypełniać kształt, raz w nim pływać. */
/* Panel pod całą listą. Biel półprzezroczysta, nie pełna: gradient tła ma
   pod nim przechodzić, a nie urywać się twardym białym prostokątem — ta sama
   zasada i ta sama krycie co w pasku nawigacji. */
.w-offers{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.86);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  padding:var(--space-8);
}
.w-offer{display:grid;grid-template-columns:1fr auto;gap:var(--space-8);align-items:start;padding:var(--space-6) 0;border-top:1px solid var(--border-subtle)}
.w-offer:first-child{border-top:0;padding-top:0}
.w-offer:last-child{padding-bottom:0}
.w-offer__t{margin:0;font:var(--type-h4);color:var(--text-strong);max-width:36ch}
.w-offer__tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.w-offer__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4)}
.w-offer__time{display:flex;align-items:center;gap:var(--space-3)}
.w-offer__meta{display:flex;flex-direction:column;gap:var(--space-05);text-align:right;font:var(--type-body-sm);color:var(--text-muted)}
.w-offer__pill{
  flex:0 0 auto;background:var(--blue-100);color:var(--blue-800);
  border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);
  font:var(--fw-bold) 17px/1 var(--font-brand);font-variant-numeric:tabular-nums;
}
@media (max-width:820px){
  .w-offers{padding:var(--space-6)}
  .w-offer{grid-template-columns:1fr;gap:var(--space-4)}
  .w-offer__side{align-items:flex-start}
  /* Pigułka przed opisem, żeby na wąskim ekranie liczba stała przy krawędzi */
  .w-offer__time{flex-direction:row-reverse}
  .w-offer__meta{text-align:left}
}

/* ---- Pieczątka ----
   Ubytki tuszu robi maska z szumu SVG (feTurbulence + progowanie kanału alfa),
   a nie bitmapa — skaluje się bezstratnie i nie dokłada pliku. Gdy przeglądarka
   nie obsłuży maski, pieczątka wyrenderuje się po prostu czysto, bez przetarć.
   Tryb multiply wtapia czerwień w podłoże zamiast kłaść ją na wierzchu.

   Cała geometria (ramka, wypełnienie, zaokrąglenie, próg zawijania) jest w em,
   więc pieczątkę skaluje się jedną liczbą: --stamp-fs. Modyfikator --lg to
   1,4-krotność rozmiaru bazowego i obsługuje oba miejsca na stronie, dzięki
   czemu obie pieczątki są dokładnie tej samej wielkości. Próg 11em zawija
   oba napisy na dwie linie, łamiąc je w naturalnym miejscu. */
:root{
  --stamp-grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.w-cal-wrap{position:relative;width:100%}
.w-stamp{
  --stamp-fs:var(--fs-lead);
  display:inline-block;
  width:max-content;
  max-width:11em;
  transform:rotate(-11deg);
  padding:.6em 1.05em;
  border:.16em solid var(--coral-700);
  border-radius:.32em;
  color:var(--coral-700);
  font-family:var(--font-brand);
  font-weight:var(--fw-extrabold);
  font-size:var(--stamp-fs);
  line-height:1.15;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  opacity:.85;
  mix-blend-mode:multiply;
  pointer-events:none;
  -webkit-mask-image:var(--stamp-grunge);
  mask-image:var(--stamp-grunge);
}
/* Nabita na coś: wyjęta z układu i wyśrodkowana na rodzicu z position:relative.
   Przy dużym rozmiarze celowo wystaje poza podłoże — tak zachowuje się prawdziwa
   pieczątka i dlatego rodzic nie może mieć overflow:hidden. */
.w-stamp--on{
  position:absolute;left:50%;top:56%;
  transform:translate(-50%,-50%) rotate(-11deg);
}
.w-stamp--lg{--stamp-fs:calc(var(--fs-lead) * 1.4)}

/* ---- Stan oczekiwania: opinie i terminy, których jeszcze nie ma ---- */
.w-empty{border:1px dashed var(--grey-300);border-radius:var(--radius-card);background:var(--surface-alt);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.w-empty__t{font:var(--type-h4);color:var(--text-muted)}
.w-empty p{font:var(--type-body-sm);color:var(--text-subtle)}
.w-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gutter)}

/* ---- Zaświadczenie — obietnica warta wyeksponowania (punkt 8 ustaleń) ---- */
.w-cert{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-8);align-items:center;border:var(--border-w) solid var(--border-subtle);border-left:4px solid var(--teal);border-radius:var(--radius-panel);background:var(--surface-card);padding:var(--space-8)}
.w-cert__mark{width:64px;height:64px;border-radius:var(--radius-card);background:var(--surface-teal-soft);display:flex;align-items:center;justify-content:center;color:var(--teal-700)}

/* ---- Moduły kursu z listą zagadnień (treść z PDF-ów ofertowych) ---- */
.w-module--rich{align-items:start}
.w-module--rich .w-module__n{margin-top:2px}
.w-module__topics{list-style:none;padding:0;margin:var(--space-3) 0 0;display:flex;flex-direction:column;gap:var(--space-2)}
.w-module__topics li{position:relative;padding-left:var(--space-5);font:var(--type-body-sm);color:var(--text-body)}
.w-module__topics li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:var(--radius-pill);background:var(--blue-400)}
.w-module__body{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-2);max-width:none}
.w-prose{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose)}

/* ---- Dwa kafle „Dwie drogi, ten sam program" na Ofercie ----
   Ta sama zasada i te same dwa pierwsze tinty co wyżej. */
.w-tiles-2>.pa-card{border-color:transparent}
.w-tiles-2>.pa-card:nth-child(1){background:var(--blue-100)}
.w-tiles-2>.pa-card:nth-child(2){background:var(--teal-100)}

/* ---- Cztery kafle na „Platformie online" ----
   Osobna klasa obok .w-grid-2, bo tej samej siatki używa Oferta, gdzie kafle
   mają zostać białe. Kolejność tintów ta sama co w kaflach „Z kim współpracujemy?"
   na stronie głównej, czwarty dobrany z tej samej rodziny (amber-100). */
.w-tiles-4>.pa-card{border-color:transparent}
.w-tiles-4>.pa-card:nth-child(1){background:var(--blue-100)}
.w-tiles-4>.pa-card:nth-child(2){background:var(--teal-100)}
.w-tiles-4>.pa-card:nth-child(3){background:var(--coral-100)}
.w-tiles-4>.pa-card:nth-child(4){background:var(--amber-100)}

/* ---- Odznaka segmentu na stronach kursów ----
   pa-badge--brand daje granat, który obok tytułu czyta się jak czarny prostokąt.
   blue-700 z palety marki: biel na nim ma 5,2:1, więc odznaka zostaje czytelna. */
.pa-badge.w-badge-seg{background:var(--blue-700)}

/* Lista z kropką — ten sam znacznik co zagadnienia w module, ale w rozmiarze
   tekstu podstawowego. Zastępuje listy z „ptaszkami" w treści kursu. */
.w-dots{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure-prose)}
.w-dots li{position:relative;padding-left:var(--space-5);font:var(--type-body);color:var(--text-body)}
.w-dots li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:var(--radius-pill);background:var(--blue-400)}

/* ---- Para pól w formularzu ----
   Wcześniej te siatki były zapisane stylem wprost w elemencie JSX. Stylu
   wpisanego w element nie da się nadpisać zapytaniem medialnym, więc pola
   zostawały obok siebie także na telefonie. Klasa rozwiązuje to u źródła. */
.w-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.w-pair--tight{gap:var(--space-4)}

/* Nagłówek strony. Wcześniej sześć ekranów miało wpisane na sztywno 44px:
   na wąskim ekranie taki nagłówek zjadał nieproporcjonalnie dużo miejsca,
   a system projektowy zabrania surowych pikseli w komponentach.
   clamp skaluje go płynnie między 30 a 44 px. */
.w-h1{
  font:var(--fw-bold) clamp(30px,6vw,44px)/1.12 var(--font-brand);
  letter-spacing:var(--ls-display);
  margin:0;
  text-wrap:balance;
}

/* ---- Odnośnik pomijający nawigację ----
   Schowany poza ekranem, wjeżdża dopiero po nadaniu mu fokusu klawiaturą.
   Nie używamy display:none, bo element ukryty w ten sposób nie może dostać
   fokusu i odnośnik byłby martwy. */
.w-skip{
  position:absolute;left:var(--space-4);top:-100px;z-index:60;
  background:var(--navy);color:var(--text-on-dark);
  font:var(--type-ui);text-decoration:none;
  padding:var(--space-3) var(--space-5);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  transition:top var(--dur-fast) var(--ease-standard);
}
.w-skip:focus{top:0}
#tresc:focus{outline:none}
@media (prefers-reduced-motion:reduce){.w-skip{transition:none}}

/* Logo w pasku nie może się kurczyć — bez tego przy wąskim ekranie
   ściska się do nieczytelnej szerokości zamiast zachować proporcje. */
.w-nav__logo{display:inline-flex;flex:0 0 auto}

/* Przycisk menu. Na szerokim ekranie nie istnieje; pojawia się dopiero
   w zapytaniu medialnym niżej. */
.w-nav__burger{
  display:none;
  margin-left:auto;flex:0 0 auto;
  width:var(--hit-min);height:var(--hit-min);
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  color:var(--text-strong);cursor:pointer;padding:0;
}
.w-nav__burger:hover{border-color:var(--border-default)}

/* ---- Responsywność ----
   Kolejność od najszerszego progu do najwęższego, żeby reguły dokładały się
   po kolei, a nie ścigały o pierwszeństwo. */
@media (max-width:1000px){
  .w-pillars{grid-template-columns:repeat(2,1fr)}
  .w-people,.w-quotes{grid-template-columns:1fr}
  .w-cert{grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-6)}
  .w-cert>a,.w-cert>.pa-btn{grid-column:1/-1}
  /* Siatka dwunastokolumnowa rozkłada się na jedną kolumnę. Bez tego panel
     boczny formularza i stron szkoleń zostawał obok treści na telefonie. */
  .w-split{grid-template-columns:1fr;gap:var(--space-10);align-items:start}
  .w-split__main,.w-split__side,
  .w-split--wide-right .w-split__main,.w-split--wide-right .w-split__side{grid-column:1/-1}
  /* Karta boczna szkolenia przestaje się przyklejać — na wąskim ekranie
     przyklejony element zjadałby połowę widoku. */
  .w-sticky-card{position:static}
  .w-audience{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .w-grid-2,.w-tiles-2,.w-tiles-4{grid-template-columns:1fr}
  /* Siatki par pól w formularzu — patrz komentarz przy .w-pair */
  .w-pair{grid-template-columns:1fr}
}

@media (max-width:720px){
  .w-pillars{grid-template-columns:1fr}

  /* Węższy margines boczny: przy 40 px z każdej strony na ekranie 320 px
     zostawało 240 px na treść, czyli za mało dla przycisków i nagłówków. */
  .w-container,.w-hero>*{padding-left:var(--page-margin);padding-right:var(--page-margin)}
  .w-nav__links{padding-left:var(--page-margin);padding-right:var(--page-margin)}

  /* Nagłówek hero miał wpisane na sztywno 52 px — przy 320 px zajmował
     377 px, czyli więcej niż cały ekran. */
  .w-hero h1{font-size:clamp(28px,8vw,52px)}
  .w-hero{padding:var(--space-12) 0 var(--space-10)}
  /* Przyciski hero na pełną szerokość: obok siebie nie mieszczą się,
     a przycięty przycisk wygląda na zepsuty. */
  .w-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .w-hero__actions .pa-btn{width:100%;justify-content:center}

  /* Zakładki segmentów w Ofercie przewijają się w poziomie zamiast rozpychać
     stronę. -mx zapewnia, że skrajna zakładka dochodzi do krawędzi ekranu. */
  /* display:flex, nie inline-flex z komponentu. Element inline dobiera
     szerokość do treści i nie zejdzie poniżej sumy zakładek, więc rozpychał
     stronę mimo overflow-x. Blokowy wypełnia dostępną szerokość i przewija. */
  .pa-tabs{
    display:flex;
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--page-margin) * -1);margin-right:calc(var(--page-margin) * -1);
    padding-left:var(--page-margin);padding-right:var(--page-margin);
  }
  .pa-tabs::-webkit-scrollbar{display:none}
  .pa-tabs__tab{flex:0 0 auto}

  /* Pieczątka przy 320 px była szersza niż kolumna, w której stoi. */
  .w-stamp--lg{--stamp-fs:calc(var(--fs-lead) * 1.05)}

  /* Przyciski z komponentu mają tekst w jednej linii, więc długie wezwanie
     („Umów bezpłatną konsultację") było szersze niż ekran i rozpychało stronę.
     Na wąskim ekranie pozwalamy im się zawijać, a duże rozciągamy na pełną
     szerokość — przycięty przycisk wygląda na zepsuty. */
  .pa-btn{max-width:100%;white-space:normal}
  .w-section .pa-btn--lg{width:100%;justify-content:center}
  .w-promptcard__out{align-items:flex-start;flex-direction:column}
  .w-audience{grid-template-columns:1fr}

  /* Stopka: trzy kolumny obok siebie nie mieszczą się poniżej 720 px. */
  .w-footer__cols{grid-template-columns:1fr;gap:var(--space-10)}
  .w-footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--space-3)}

  /* Portret zajmował 288 px sztywno, czyli prawie całą szerokość telefonu. */
  .w-person__photo{width:min(288px,60vw)}

  /* Karta opinii w karuzeli — 340 px to więcej niż szerokość ekranu 320 px. */
  .w-quote{flex:0 0 78vw;width:78vw}
}

/* Menu chowa się za przyciskiem. Rozwinięte spada pod pasek jako pionowa
   lista na pełną szerokość. Próg 860 px zamiast 720 px od dodania szóstej
   pozycji („Darmowe materiały", 28.10.2026): pełne menu potrzebuje ok. 840 px,
   a między 720 a 840 px wystawało poza ekran. Blok stoi po bloku 720 px, żeby
   na telefonie wygrywał z ogólną regułą odstępów .w-nav__links z tamtego bloku
   — tak samo jak wcześniej, gdy oba były w jednym bloku. */
@media (max-width:860px){
  .w-nav__burger{display:flex}
  .w-nav__in{gap:var(--space-4);height:64px;position:relative}
  .w-nav__links{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;
    gap:var(--space-1);margin:0;
    padding:var(--space-4) var(--page-margin-lg) var(--space-5);
    background:var(--white);
    border-bottom:1px solid var(--border-subtle);
    box-shadow:var(--shadow-md);
  }
  .w-nav__links--otwarte{display:flex}
  .w-nav__link{
    padding:var(--space-3) 0;
    border-bottom:1px solid var(--border-subtle);
    border-left:0;border-right:0;border-top:0;
  }
  .w-nav__link--on{border-bottom-color:var(--action-primary)}
  .w-nav__links .pa-btn{margin-top:var(--space-3);width:100%;justify-content:center}
}

@media (max-width:560px){
  /* Wiersz oferty: parametry i przycisk pod treścią, nie obok. */
  .w-offer__side{width:100%}
  .w-offer__side .pa-btn{width:100%;justify-content:center}
  /* Moduł kursu ma numer, treść i czas w trzech kolumnach — na wąskim
     ekranie czas przenosi się pod numer. */
  .w-module--rich{grid-template-columns:auto 1fr}
  .w-module--rich>span:last-child{grid-column:2}
  .w-cal__day,.w-cal__dow{font-size:12px}
}

/* ============================================================
   Zapowiedź kalendarza szkoleń otwartych (październik 2026).
   Pasek nad menu i kolumna obok kalendarza w Ofercie. Termin i licznik
   w screen-chrome.jsx (TERMIN_KALENDARZA).
   ============================================================ */

/* Tekst tylko dla czytników ekranu */
.w-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Pasek: ten sam gradient co granatowa sekcja strony głównej. Nie jest
   przyklejony — znika przy przewijaniu, menu pod nim zostaje na górze. */
.w-bar{background:var(--gradient-depth);color:var(--text-on-dark)}
.w-bar__in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2) var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-3);font:var(--type-body-sm);text-align:center}
.w-bar__txt{font-weight:var(--fw-semibold)}
.w-bar__krotki{display:none}
.w-bar__link{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--text-on-dark);font:var(--type-ui);font-size:var(--fs-body-sm);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.w-bar__link:hover{color:var(--blue-200)}
.w-bar__link:focus-visible{outline:2px solid var(--text-on-dark);outline-offset:3px;border-radius:var(--radius-xs)}

/* Licznik: cyfry o stałej szerokości, żeby pasek nie drgał co sekundę.
   Kafle z tym samym rozjaśnieniem co ikony mediów w stopce. */
.w-count{display:inline-flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
.w-count__u{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.w-count__n{font-family:var(--font-brand);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;background:rgba(255,255,255,.12);border:1px solid var(--border-on-dark);border-radius:var(--radius-sm);padding:1px 7px;min-width:2.2ch;text-align:center}
/* ============================================================
   Szkolenia otwarte na żywo (od 16.10.2026). Dane w screen-chrome.jsx
   (SZKOLENIA_OTWARTE). Kolor pakietu: teal — szkoła, amber — przedszkole.
   Dzień w kalendarzu: jasny tint z ciemną cyfrą (kontrast AA), nie pełny kolor.
   ============================================================ */

/* Sekcja Terminy: kalendarz 392 px po lewej, lista spotkań po prawej */
#terminy{scroll-margin-top:calc(76px + var(--space-4))}
.w-terminy{display:grid;grid-template-columns:minmax(0,392px) minmax(0,1fr);gap:var(--grid-gutter) var(--space-12);align-items:start;margin-top:var(--space-8)}
.w-terminy__cal{max-width:392px;width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface-card);box-shadow:var(--shadow-sm);padding:var(--space-5)}
.w-terminy__cal .w-cal{margin-top:0}

/* Dzień z terminem: przycisk w kolorze pakietu */
.w-cal__day--t{border:1px solid transparent;font-weight:var(--fw-semibold);color:var(--text-strong);cursor:pointer;padding:0;font-family:inherit;transition:var(--transition-control)}
.w-cal__day--teal{background:var(--teal-100);border-color:var(--teal-300)}
.w-cal__day--amber{background:var(--amber-100);border-color:var(--amber-300)}
.w-cal__day--teal.is-on{box-shadow:0 0 0 2px var(--teal);border-color:var(--teal)}
.w-cal__day--amber.is-on{box-shadow:0 0 0 2px var(--amber);border-color:var(--amber)}
.w-cal__day--t:focus-visible{outline:2px solid var(--action-primary);outline-offset:2px}
.w-cal__day--t.is-past{opacity:.45}

/* Kropka koloru pakietu — w legendzie i na liście */
/* Kropka w legendzie wygląda jak dzień w kalendarzu: jasny tint z obwódką */
.w-kropka{display:inline-block;flex:0 0 auto;width:16px;height:16px;border-radius:var(--radius-xs);border:1px solid transparent}
.w-kropka--teal{background:var(--teal-100);border-color:var(--teal-300)}
.w-kropka--amber{background:var(--amber-100);border-color:var(--amber-300)}
.w-legenda{list-style:none;margin:var(--space-4) 0 0;padding:var(--space-4) 0 0;border-top:1px solid var(--border-subtle);display:grid;gap:var(--space-2);font:var(--type-caption);color:var(--text-muted)}
.w-legenda li{display:flex;align-items:center;gap:var(--space-2)}

/* Lista spotkań */
/* Lista ma wysokość kalendarza obok (height:0 + min-height:100% w komórce
   siatki) i przewija się w sobie. Na wąskim ekranie stała wysokość. */
.w-terminy{align-items:stretch}
.w-terminy__cal{align-self:start}
.w-lista-t__box{height:0;min-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:2px var(--space-2) 2px 2px;scrollbar-width:thin}
.w-lista-t__box:focus-visible{outline:2px solid var(--action-primary);outline-offset:4px;border-radius:var(--radius-sm)}
.w-terminy__lead{max-width:none}
.w-lista-t__mnr,.w-otwarta__mnr{font-weight:var(--fw-semibold);color:var(--text-muted)}
.w-lista-t{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.w-lista-t__el{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body);text-decoration:none;transition:var(--transition-control)}
/* Wiersz: białe tło, obwódka w odcieniu 300 pakietu i pasek w głównym kolorze
   marki przy lewej krawędzi. Wskazany pakiet dostaje jasny tint i ramkę
   w głównym kolorze — tak jak dni w kalendarzu. */
.w-lista-t__el--teal{background:var(--surface-card);border-color:var(--teal-300);border-left:4px solid var(--teal)}
.w-lista-t__el--amber{background:var(--surface-card);border-color:var(--amber-300);border-left:4px solid var(--amber)}
.w-lista-t__el--teal.is-on{background:var(--teal-100);border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.w-lista-t__el--amber.is-on{background:var(--amber-100);border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.w-lista-t__el svg{margin-left:auto;flex:0 0 auto;color:var(--text-subtle)}
.w-lista-t__el.is-on svg{color:var(--text-strong)}
.w-lista-t__el.is-past{opacity:.55}
.w-lista-t__el:focus-visible{outline:2px solid var(--action-primary);outline-offset:2px}
.w-lista-t__tresc{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.w-lista-t__data{display:block;font:var(--type-ui);color:var(--text-strong)}
.w-lista-t__data::first-letter{text-transform:uppercase}
.w-lista-t__godz{display:inline-block;margin-left:var(--space-3);font-weight:var(--fw-regular);color:var(--text-muted);white-space:nowrap}
.w-lista-t__nazwa{font:var(--type-body-sm);color:var(--text-body)}
.w-lista-t__nr{font:var(--type-caption);color:var(--text-subtle)}

/* Karta szkolenia otwartego na stronie szkolenia */
.w-sticky-card>.w-otwarta--teal:first-child,.w-otwarta--teal{border-top:3px solid var(--teal)}
.w-sticky-card>.w-otwarta--amber:first-child,.w-otwarta--amber{border-top:3px solid var(--amber)}
.w-otwarta__terminy{list-style:none;margin:var(--space-1) 0 0;padding:0;display:grid;gap:var(--space-3)}
.w-otwarta__terminy li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start}
.w-otwarta__terminy li.is-past{opacity:.5}
.w-otwarta__nr{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:var(--type-caption);font-weight:var(--fw-semibold);color:var(--text-strong)}
.w-otwarta--teal .w-otwarta__nr{background:var(--teal-100)}
.w-otwarta--amber .w-otwarta__nr{background:var(--amber-100)}
.w-otwarta__data{display:block;font:var(--type-ui);color:var(--text-strong)}
.w-otwarta__data::first-letter{text-transform:uppercase}
.w-otwarta__modul{display:block;font:var(--type-caption);color:var(--text-muted)}
.w-otwarta__pakiet{display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-2) 0 var(--space-1);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--surface-alt);font:var(--type-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.w-otwarta__pakiet svg{flex:0 0 auto;margin-top:2px}
/* Wersja pod wstępem tylko na wąskim ekranie, w kolumnie bocznej tylko na szerokim */
.w-otwarta--waski{display:none;margin-top:var(--space-8)}

/* Karta szkolenia zamkniętego. Zwarta, gdy nad nią stoi karta otwarta. */
.w-zamknieta__cena{font:var(--type-body-sm);color:var(--text-body);margin:var(--space-3) 0 var(--space-1)}
.w-zamknieta__lista{display:grid;gap:var(--space-3);font:var(--type-body-sm);color:var(--text-muted)}
.w-zamknieta__lista>span{display:flex;gap:var(--space-2)}
.w-zamknieta__nota{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-3)}
.w-zamknieta--zwarta{padding:var(--space-5);gap:var(--space-2)}
.w-zamknieta--zwarta .w-zamknieta__cena{margin:var(--space-1) 0 0}
.w-zamknieta--zwarta .w-zamknieta__lista{gap:var(--space-1)}
.w-zamknieta--zwarta hr{margin:var(--space-2) 0}
.w-zamknieta--zwarta .w-zamknieta__nota{margin-top:var(--space-1)}

@media (max-width:1000px){
  .w-otwarta--waski{display:flex}
  .w-otwarta--szeroki{display:none}
  .w-otwarta--szeroki+.w-zamknieta--zwarta{margin-top:0 !important}
}
@media (max-width:820px){
  /* minmax(0,…) zamiast 1fr: inaczej kolumna nie zwęża się poniżej szerokości
     siatki kalendarza i ramka wystaje za ekran na 320 px */
  .w-terminy{grid-template-columns:minmax(0,1fr)}
  .w-lista-t__box{height:auto;min-height:0;max-height:460px}
}
@media (max-width:560px){
  .w-terminy__cal{padding:var(--space-4)}
  .w-lista-t__el{padding:var(--space-3);gap:var(--space-3)}
}
@media (max-width:600px){
  .w-bar__dlugi{display:none}
  .w-bar__krotki{display:inline}
  .w-bar__in{gap:var(--space-2) var(--space-3)}
  .w-bar__txt{flex-basis:100%}
}

/* ---- Podziękowanie po zakupie (/dziekujemy) ----
   Jedna wyśrodkowana kolumna, jak hero strony głównej: ikona potwierdzenia,
   nagłówek, tekst, ramka z dalszymi krokami i jeden przycisk. */
.w-thanks{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:var(--space-20);padding-bottom:var(--space-20)}
.w-thanks .w-lead{margin-left:auto;margin-right:auto}
.w-thanks__ico{width:88px;height:88px;border-radius:50%;background:var(--amber-100);color:var(--amber-700);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6)}
/* Rozmiar w CSS, nie tylko w propsie: Icon rysuje przez wspólne lucide.createIcons,
   a przy kilku ikonach naraz ta potrafiła dostać rozmiar sąsiedniej (16 px). */
.w-thanks__ico svg{width:44px;height:44px}
.w-thanks__box{width:100%;max-width:560px;margin:var(--space-10) 0;text-align:left;display:flex;flex-direction:column;gap:var(--space-3)}
.w-thanks__note{font:var(--type-body-sm);color:var(--text-muted);margin:0}
/* Konfetti nad treścią i nad menu (z-index 30), ale pod banerem cookies.
   pointer-events:none — nie blokuje kliknięć w trakcie opadania. */
.w-konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
/* Wiekszy odstep miedzy ramka z dalszymi krokami a notkami pod nia */
.pa-callout+.w-thanks__note{margin-top:var(--space-5)}
.w-thanks__note a{color:var(--text-link)}
@media (max-width:600px){
  .w-thanks{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .w-thanks .pa-btn{width:100%;justify-content:center}
}
.w-nowrap{white-space:nowrap}

/* ---- Komunikat o przesunięciu zapisów (16.10.2026) ----
   Pasek w kolorze ostrzegawczym zamiast licznika i okno z pełną treścią. */
.w-bar--komunikat{background:var(--amber-100);color:var(--text-strong);border-bottom:1px solid var(--amber-300)}
.w-bar--komunikat .w-bar__link{color:var(--text-strong)}
.w-bar--komunikat .w-bar__link:hover{color:var(--amber-700)}
.w-bar--komunikat .w-bar__link:focus-visible{outline-color:var(--text-strong)}
.w-bar__btn{background:none;border:0;padding:0;cursor:pointer}
.w-dlg{border:0;border-radius:var(--radius-card);padding:0;width:calc(100% - 2 * var(--space-4));max-width:640px;max-height:calc(100vh - 2 * var(--space-4));box-shadow:var(--shadow-pop);background:var(--surface-card);color:var(--text-body)}
.w-dlg::backdrop{background:rgba(16,33,61,.55)}
/* Równe odstępy: wszystkie bloki w kolumnie z jednym gap, bez marginesów */
.w-dlg__in{position:relative;padding:var(--space-8);font:var(--type-body);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
.w-dlg__in p{margin:0}
.w-dlg__x{position:absolute;top:var(--space-3);right:var(--space-3);width:var(--hit-min);height:var(--hit-min);display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}
.w-dlg__x svg{width:20px;height:20px}
.w-dlg__x:hover{color:var(--text-strong);background:var(--surface-alt)}
.w-dlg__ico{width:56px;height:56px;border-radius:50%;background:var(--amber-100);color:var(--amber-700);display:flex;align-items:center;justify-content:center;margin:0}
.w-dlg__ico svg{width:28px;height:28px}
.w-dlg__t{font:var(--type-h3);color:var(--text-strong);margin:0;padding-right:var(--space-8)}
.w-dlg__wazne{padding:var(--space-4);border-left:4px solid var(--amber-700);background:var(--amber-100);border-radius:var(--radius-sm);color:var(--text-strong);font-weight:var(--fw-semibold)}
.w-dlg__akcje{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.w-dlg__akcje .pa-btn svg{width:16px;height:16px}
@media (max-width:600px){
  .w-dlg__in{padding:var(--space-6) var(--space-5)}
  .w-dlg__akcje .pa-btn{width:100%;justify-content:center}
}

/* Dane firmy na stronie Kontakt */
.w-firma{display:grid;gap:var(--space-1);font:var(--type-body-sm);font-style:normal;color:var(--text-body)}
.w-firma strong{color:var(--text-strong)}
.w-firma a{color:var(--text-link)}

/* ---- Darmowe materiały: kafelki e-booków ----
   Miniatura w polu 4:3 na tle mgły, obraz dopasowany bez przycinania
   (object-fit: contain) — okładka w pionie, strona e-booka czy grafika
   w poziomie wyglądają poprawnie bez przygotowywania pod wymiar. */
.w-ebooki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gutter);margin-top:var(--space-10)}
.w-ebook{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden;transition:var(--transition-control)}
.w-ebook:hover{box-shadow:var(--shadow-md)}
.w-ebook__min{aspect-ratio:4/3;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;padding:var(--space-5);border-bottom:1px solid var(--border-subtle)}
.w-ebook__min img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--radius-xs);box-shadow:var(--shadow-md)}
.w-ebook__tresc{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);flex:1}
.w-ebook__t{font:var(--type-h4);color:var(--text-strong);margin:0}
.w-ebook__opis{font:var(--type-body-sm);color:var(--text-muted);margin:0}
.w-ebook__akcja{margin-top:auto;padding-top:var(--space-3)}
@media (max-width:1000px){.w-ebooki{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.w-ebooki{grid-template-columns:minmax(0,1fr)}}