/* ══════════════════════════════════════════════════════════════════════════
   PROGRAM AKADEMII NA SYSTEMIE WIZUALNYM — TRYB MŁODZIEŻOWY (pilot Tennis 10s)
   ──────────────────────────────────────────────────────────────────────────
   Ani jednej nowej barwy i ani jednego nowego wzorca: wszystko z tokenów
   `--vs-*` i z katalogu P01–P20. Tryb młodzieżowy różni się od stron
   ofertowych trzema rzeczami: jasną powierzchnią jako domyślną, mocniejszym
   akcentem i krótszymi blokami tekstu. Nie różni się jakością składu.

   Kolor poziomu (czerwony, pomarańczowy, zielony) NIGDY nie stoi sam:
   przy każdym kolorze jest nazwa kategorii. Kolor pomaga się zorientować,
   ale nie niesie informacji w pojedynkę.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SKALA TYPOGRAFICZNA STRONY ────────────────────────────────────────────
   Audyt z 09.09.2026 znalazł na tej stronie DWADZIEŚCIA różnych stopni pisma
   (bez wnętrza infografiki). Prawie każdy rodzaj informacji miał własny
   rozmiar: cena 57,6 px, minuta 31,7, liczba w pasie 28,8, licznik terminów
   24,5 — cztery stopnie na to samo, czyli „liczbę w kroju nagłówkowym".
   Hierarchii to nie budowało, tylko rozmywało.

   Zostaje SIEDEM stopni własnych. Rolę drugiego i trzeciego narzędzia
   hierarchii przejmują waga i kolor, nie kolejny rozmiar.

     --at-display   72 px   nagłówek baneru (Anton)
     --at-h2        49 px   nagłówek sekcji ORAZ cena (Anton)
     --at-liczba  31,7 px   każda liczba i myśl przewodnia (Anton)
     --at-lead    20,9 px   podprowadzenie i zdanie prowadzące rozdziału
     --at-proza   16,6 px   tekst ciągły, listy, pytania
     --at-drobne    14 px   opisy drobne i przyciski (ten sam stopień)
     --at-etykieta  13 px   etykiety, podpisy, nadtytuły

   CENA ZESZŁA DO POZIOMU NAGŁÓWKA. Wcześniej 57,6 px stało obok nagłówka
   49 px w tym samym ciemnym pasie i krzyczało głośniej od zdania, które
   ma coś załatwić. Teraz są równorzędne.

   NADTYTUŁ MIAŁ DWA ROZMIARY NARAZ: 16 px na `<p>` i 13 px na `<span>`.
   Powód to powłoka serwisu — `#app p` ma wyższą swoistość niż goła klasa
   `.vs-eyebrow` i wygrywała. Dlatego reguła niżej jest prefiksowana `#app`.
   Nadtytuł i podpis mają teraz jeden stopień: o tym, że to nadtytuł,
   mówi wersalik, odstęp międzyliterowy i kreska, nie rozmiar.

   Czego NIE ruszam: `.at-poziom__nota` (12 px) — to część tabeli anatomii,
   wspólnej ze stroną zbiorczą Tennis 10s, która jest już na produkcji.
   Zmiana tam ruszyłaby przyjętą stronę, więc ten jeden stopień zostaje
   i jest wykazany w raporcie jako dług wspólnego komponentu.        */
/* Wartości WSPÓLNE dla obu stron Akademii. Strona zbiorcza Tennis 10s jest
   już na produkcji i przyjęta, więc tutaj nic nie zmieniamy — zmiany skali
   siedzą w bloku niżej, zawężonym do strony pojedynczej kategorii. */
.at-hero,#at{
  --at-display:clamp(36px,5vw,74px);
  --at-h2:clamp(28px,3.4vw,50px);
  --at-liczba:clamp(24px,2.2vw,32px);
  --at-lead:clamp(18px,1.45vw,21px);
  --at-proza:clamp(16px,1.15vw,18px);
  --at-drobne:clamp(14px,1vw,15px);
  --at-lh:1.6;
}
/* Skala zredukowana — TYLKO strona pojedynczej kategorii (`.pz-hero`, `#at.pz`).
   `--at-drobne` schodzi z 14,4 px na równe 14 px, bo tyle ma przycisk systemu:
   dwa stopnie różniące się o 0,4 px to nie hierarchia, to szum. */
.pz-hero,#at.pz{
  --at-drobne:14px;
  --at-etykieta:var(--vs-caption);
  --vs-eyebrow:var(--vs-caption);
}
#app .pz-hero .vs-eyebrow,#app #at.pz .vs-eyebrow{font-size:var(--at-etykieta)}
.at-in{max-width:var(--vs-container);margin:0 auto;padding:0 var(--vs-gutter)}

/* ── BANER ───────────────────────────────────────────────────────────────
   Przyciemnienie lżejsze niż na stronach ofertowych: tryb młodzieżowy ma
   być jaśniejszy, a kadr z dzieckiem na korcie nie może zgasnąć. Kontrast
   pisma bierze się ze szklanego panelu, nie z gaszenia całej fotografii. */
.at-hero{position:relative;isolation:isolate;min-height:min(84vh,760px);
  display:flex;align-items:flex-end;overflow:hidden;background:#0B0B0C}
.at-hero__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.at-hero__foto picture{display:block;height:100%}
.at-hero__foto img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block}
.at-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(11,11,12,.86) 0%, rgba(11,11,12,.68) 34%,
    rgba(11,11,12,.28) 62%, rgba(11,11,12,.12) 100%)}
.at-hero__in{position:relative;z-index:2;width:100%;
  max-width:var(--vs-container);margin:0 auto;
  padding:calc(var(--vs-gutter) + 64px) var(--vs-gutter) var(--vs-gutter)}
.at-drog{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vs-2);
  margin:0 0 var(--vs-4);font-size:var(--vs-caption);color:rgba(255,255,255,.76)}
.at-drog a{color:rgba(255,255,255,.76);text-decoration:none}
.at-drog a:hover{color:#fff;text-decoration:underline}
.at-drog span{color:rgba(255,255,255,.62)}
.at-drog b{font-weight:400;color:#fff}
.at-hero__panel{max-width:min(720px,56%);padding:var(--vs-7);
  background:rgba(11,11,12,.40)}
@supports (backdrop-filter:blur(2px)){ .at-hero__panel{background:rgba(11,11,12,.28)} }
#app .at-hero__h1{margin:var(--vs-4) 0 var(--vs-5);font-family:var(--vs-font-display);
  font-weight:400;text-transform:uppercase;font-size:var(--at-display);
  line-height:.94;letter-spacing:.4px;color:var(--vs-text-on-image)}
#app .at-hero__lead{margin:0;color:rgba(255,255,255,.92);
  font-size:var(--at-lead);line-height:1.5}
.at-hero__akcja{margin:var(--vs-7) 0 0}
#app .at-hero__podpis{margin:var(--vs-4) 0 0;font-size:var(--vs-caption);
  color:rgba(255,255,255,.70)}

/* ── OTWARCIE ROZDZIAŁU ──────────────────────────────────────────────────── */
.at-otw{margin:0 0 var(--vs-6);padding-bottom:var(--vs-3);border-bottom:var(--vs-border)}
.at-otw--srodek{text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:var(--vs-5)}
.at-h2{margin:var(--vs-2) 0 0;font-family:var(--vs-font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.4px;
  font-size:var(--at-h2);line-height:1.02;color:var(--vs-text)}
#app .at-proza{margin:0 0 var(--vs-4);font-size:var(--at-proza);line-height:var(--at-lh);
  color:var(--vs-text-secondary);text-align:left;hyphens:none;-webkit-hyphens:none;
  text-wrap:pretty}
#app .at-proza:last-child{margin-bottom:0}

/* ── TRZY POZIOMY (P07) ───────────────────────────────────────────────────
   Trzy kolumny o identycznej anatomii. Wiersze danych stoją w tej samej
   kolejności w każdej kolumnie, więc da się je porównać w poziomie —
   to jest cały sens tej sekcji. */
.at-poziomy-sec{padding:var(--vs-section-space) 0;background:var(--vs-surface)}
.at-poziomy{list-style:none;margin:0;padding:0;display:grid;
  gap:var(--vs-cluster-space)}
@media(min-width:960px){ .at-poziomy{grid-template-columns:repeat(3,minmax(0,1fr))} }
.at-poziom{display:flex;flex-direction:column;
  padding:var(--vs-6) var(--vs-5) var(--vs-5);
  background:var(--vs-canvas);border:var(--vs-border);
  border-top:4px solid var(--vs-accent);border-radius:var(--vs-radius-lg)}
.at-poziom__gora{display:flex;align-items:baseline;gap:var(--vs-3);flex-wrap:wrap}
.at-poziom__nr{font-family:var(--vs-font-display);font-size:26px;line-height:1;
  color:var(--vs-accent-text)}
.at-poziom__nazwa{margin:0;font-size:var(--vs-h3);line-height:1.15;color:var(--vs-text)}
#app .at-poziom__wiek{margin:0;width:100%;font-size:var(--vs-caption);
  letter-spacing:.06em;text-transform:uppercase;color:var(--vs-accent-text)}
/* Rysunek kortu w skali — ta sama wysokość w każdej kolumnie, żeby korty
   dało się porównać wielkością, a nie tylko liczbą w wierszu. */
.at-poziom__kort{margin:var(--vs-5) 0;display:grid;place-items:center;
  background:var(--vs-surface);border-radius:var(--vs-radius-sm);padding:var(--vs-4)}
.at-poziom__kort svg{width:100%;height:auto;max-height:230px}
#app .at-poziom__cel{margin:0 0 var(--vs-5);font-size:var(--at-proza)}
.at-poziom__dane{margin:0 0 var(--vs-5);display:grid;gap:0}
.at-poziom__dane>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:var(--vs-3);padding:var(--vs-3) 0;border-top:var(--vs-border)}
.at-poziom__dane>div:last-child{border-bottom:var(--vs-border)}
.at-poziom__dane dt{font-size:var(--vs-caption);letter-spacing:.04em;
  text-transform:uppercase;color:var(--vs-text-muted)}
#app .at-poziom__dane dd{margin:0;font-size:var(--at-drobne);line-height:1.45;
  color:var(--vs-text)}
.at-poziom__nota{display:block;margin-top:2px;font-size:12px;line-height:1.4;
  color:var(--vs-text-muted)}
.at-poziom__link{margin-top:auto;align-self:flex-start;min-height:24px;
  display:inline-flex;align-items:center;font-weight:700}

/* WIERSZE MUSZĄ SIĘ ZGADZAĆ MIĘDZY KOLUMNAMI. Proza pod rysunkiem ma różną
   długość, więc tabele anatomii startowały na różnych wysokościach i nie dało
   się porównać wiersza „Piłka" z „Piłką" w kolumnie obok — a to jest cały sens
   tej sekcji. `subgrid` wiąże wiersze trzech kart z jedną siatką. Reguła stoi
   PO regule bazowej, bo inaczej `display:flex` wygrywa kolejnością.
   Bez obsługi subgrid karta zostaje kolumną i strona działa dalej.

   Pierwsza wersja wiązała tylko pięć bloków karty (nagłówek, rysunek, proza,
   tabela, odnośnik). To wyrównywało POCZĄTEK tabeli, ale nie jej wiersze:
   „Kort" stał naprzeciw „Kortu", a już „Siatka" rozjeżdżała się o kilkadziesiąt
   pikseli, bo wartość w jednej kolumnie łamała się na dwa wiersze, a w drugiej
   na jeden. Znalezione w przeglądzie produkcji 9.09. Teraz tabela też jest
   podsiatką, więc każdy wiersz anatomii ma wspólną oś we wszystkich trzech
   kolumnach. Liczbę torów podaje renderer (najdłuższa tabela), bo zależy od
   danych — patrz `<style>` w partials/akademia-program-vs.php.

   `row-gap:0` jest konieczne: odstęp siatki działa na KAŻDY tor, więc przy
   sześciu wierszach anatomii rozpychałby tabelę. Odstępy między blokami karty
   robią marginesy, tak jak przy `display:flex`. Kolumny zachowują swój odstęp. */
@media(min-width:960px){
  @supports (grid-template-rows: subgrid){
    .at-poziomy{row-gap:0;column-gap:var(--vs-cluster-space)}
    .at-poziom{display:grid;grid-template-rows:subgrid;align-content:start}
    .at-poziom__dane{display:grid;grid-template-rows:subgrid;gap:0;margin-bottom:0}
    .at-poziom__link{margin-top:var(--vs-5);align-self:end;justify-self:start}
  }
}

/* ── ŚCIEŻKA ROZWOJU (P13) ────────────────────────────────────────────────
   Pozioma na dużym ekranie, pionowa na telefonie. Kropka bierze kolor
   swojego poziomu, ale pod nią zawsze stoi nazwa. */
.at-sciezka-sec{padding:var(--vs-section-space) 0;background:var(--vs-canvas);
  color:var(--vs-text)}
.at-sciezka{list-style:none;margin:var(--vs-7) 0 0;padding:0;display:grid;
  gap:var(--vs-5)}
@media(min-width:900px){
  .at-sciezka{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vs-4)}
  /* Linia biegnąca przez wszystkie kroki — rysuje ją tło listy, nie osobny
     element, więc nie ma czego czytać czytnikowi ekranu. */
  .at-sciezka{position:relative}
  .at-sciezka::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;
    background:rgba(255,255,255,.16)}
}
.at-sciezka li{position:relative;padding-top:var(--vs-6)}
.at-sciezka__kropka{position:absolute;top:0;left:0;width:20px;height:20px;
  border-radius:var(--vs-radius-pill);background:var(--vs-canvas);
  border:3px solid var(--vs-accent)}
.at-sciezka--dalej .at-sciezka__kropka{border-color:rgba(255,255,255,.42)}
.at-sciezka h3{margin:0 0 var(--vs-2);font-size:var(--vs-h3);line-height:1.15;
  color:var(--vs-text)}
#app .at-sciezka p{margin:0;font-size:var(--at-drobne);line-height:1.5;
  color:var(--vs-text-muted)}

/* ── PROGRAM W SKRÓCIE (P10) ──────────────────────────────────────────── */
.at-fakty-sec{padding:var(--vs-section-space) 0;background:var(--vs-surface)}
.at-fakty{margin:0;display:grid;gap:1px;background:var(--vs-canvas);
  border:var(--vs-border);border-radius:var(--vs-radius-lg);overflow:hidden}
@media(min-width:760px){ .at-fakty{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1200px){ .at-fakty{grid-template-columns:repeat(6,minmax(0,1fr))} }
.at-fakty>div{background:var(--vs-surface);padding:var(--vs-5) var(--vs-4)}
.at-fakty dt{font-size:var(--vs-caption);letter-spacing:.06em;text-transform:uppercase;
  color:var(--vs-accent-text);margin:0 0 var(--vs-2)}
#app .at-fakty dd{margin:0;font-size:var(--at-proza);line-height:1.3;
  font-weight:700;color:var(--vs-text)}
#app .at-fakty p{margin:var(--vs-2) 0 0;font-size:13px;line-height:1.45;
  color:var(--vs-text-muted)}

/* ── OPOWIEŚĆ (P16) ───────────────────────────────────────────────────── */
.at-opowiesc-sec{padding:var(--vs-section-space) 0;background:var(--vs-canvas)}
.at-opowiesc__tekst{display:grid;gap:var(--vs-4)}
@media(min-width:900px){
  .at-opowiesc__tekst{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(32px,3.4vw,64px)}
}
.at-opowiesc{list-style:none;margin:var(--vs-7) 0 0;padding:0;display:grid;
  gap:var(--vs-cluster-space)}
@media(min-width:760px){ .at-opowiesc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1200px){ .at-opowiesc{grid-template-columns:repeat(4,minmax(0,1fr))} }
.at-opowiesc figure{margin:0;position:relative}
.at-opowiesc img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--vs-radius-lg);background:var(--vs-surface)}
.at-opowiesc__nr{position:absolute;top:var(--vs-3);left:var(--vs-3);z-index:1;
  width:34px;height:34px;border-radius:var(--vs-radius-pill);
  display:grid;place-items:center;background:var(--vs-accent);
  color:var(--vs-on-accent);font-family:var(--vs-font-display);font-size:17px}
#app .at-opowiesc figcaption{margin:var(--vs-3) 0 0;font-size:var(--vs-caption);
  line-height:1.5;color:var(--vs-text-muted)}

/* ── WEZWANIE (P17) ───────────────────────────────────────────────────── */
.at-cta{padding:var(--vs-section-space) 0;background:var(--vs-canvas);color:var(--vs-text)}
.at-cta__uklad{display:grid;gap:var(--vs-cluster-space);align-items:start}
@media(min-width:1024px){
  .at-cta__uklad{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
}
#app .at-cta__opis{margin:var(--vs-4) 0 0;font-size:var(--at-proza);line-height:var(--at-lh);
  color:var(--vs-text-secondary)}
.at-cta__akcje{display:flex;flex-wrap:wrap;gap:var(--vs-3);margin:var(--vs-6) 0 0}
.at-dalej__poziomy{display:grid;gap:var(--vs-3)}
.at-dalej__poziomy a{display:block;padding:var(--vs-4) var(--vs-5);
  border:var(--vs-border);border-radius:var(--vs-radius-lg);
  text-decoration:none;background:var(--vs-surface);
  transition:border-color var(--vs-ruch)}
@media(hover:hover){ .at-dalej__poziomy a:hover{border-color:var(--vs-accent)} }
.at-dalej__poziomy b{display:block;font-size:var(--at-proza);color:var(--vs-text)}
.at-dalej__poziomy span{display:block;margin-top:2px;font-size:var(--vs-caption);
  color:var(--vs-text-muted)}
.at-etapy{display:grid;gap:var(--vs-3);margin:var(--vs-7) 0 0}
@media(min-width:760px){ .at-etapy{grid-template-columns:repeat(2,minmax(0,1fr))} }
.at-etapy a{display:block;padding:var(--vs-4) var(--vs-5);border:var(--vs-border);
  border-radius:var(--vs-radius-lg);text-decoration:none;
  transition:border-color var(--vs-ruch)}
@media(hover:hover){ .at-etapy a:hover{border-color:var(--vs-accent)} }
.at-etapy span{display:block;font-size:var(--vs-caption);letter-spacing:.06em;
  text-transform:uppercase;color:var(--vs-accent-text)}
.at-etapy b{display:block;margin-top:2px;font-size:var(--at-proza);color:var(--vs-text)}

/* ── TELEFON ─────────────────────────────────────────────────────────────
   Trzy poziomy stają jeden pod drugim — nie zwężamy ich do mikroskopijnej
   tabeli. Rysunek kortu zostaje: to on najszybciej mówi, czym się różnią. */
@media(max-width:899px){
  .at-hero{min-height:auto}
  .at-hero__panel{max-width:none}
  .at-hero__scrim{background:linear-gradient(180deg,
    rgba(11,11,12,.45) 0%, rgba(11,11,12,.66) 44%, rgba(11,11,12,.92) 100%)}
  .at-poziom__kort svg{max-height:200px}
}
@media(max-width:600px){
  .at-poziom{padding:var(--vs-5) var(--vs-4)}
  .at-poziom__dane>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ══════════════════════════════════════════════════════════════════════════
   STRONA POJEDYNCZEJ KATEGORII (.pz-*) — przebudowa podstron, iteracja 1
   ──────────────────────────────────────────────────────────────────────────
   Ta strona nie porównuje trzech poziomów, tylko prowadzi rodzica przez jedną
   decyzję. Dlatego zamiast trzech kolumn o wspólnych osiach ma rytm rozdziałów:
   powierzchnie zmieniają się na przemian, a co drugi—trzeci rozdział przerywa
   ciemne pasmo albo fotografia. Prymitywy i tokeny bez zmian; nowe są tylko
   układy, których strona zbiorcza nie ma.
   ══════════════════════════════════════════════════════════════════════════ */

.pz-fakty-sec,.pz-terminy,.pz-kogo-sec,.pz-arg-sec,.pz-trening-sec,
.pz-rozdz,.pz-sprzet-sec,.pz-droga-sec,.pz-pyt-sec{
  padding:var(--vs-section-space) 0}
/* RYTM POWIERZCHNI. Dwie sąsiadujące sekcje o tym samym tle zlewają się
   w jeden blok z podwójną dziurą w środku — dokładnie to, co właściciel
   nazwał „przypadkową pustką". Powierzchnie idą więc naprzemiennie:
   baner (ciemny) · liczby (płótno) · terminy (powierzchnia) · dla kogo
   (płótno) · argument (powierzchnia) · trening (ciemny) · pasmo (zdjęcie) ·
   trzy rozdziały (płótno / powierzchnia / płótno) · sprzęt (powierzchnia) ·
   droga (ciemny) · pytania (płótno) · wezwanie (ciemny). */
.pz-terminy,.pz-arg-sec,.pz-rozdz--tlo,.pz-sprzet-sec{background:var(--vs-surface)}
.pz-fakty-sec{padding-top:var(--vs-7);padding-bottom:var(--vs-7);
  border-bottom:var(--vs-border)}

/* ── PROGRAM W SKRÓCIE ────────────────────────────────────────────────────
   Pas liczb tuż pod banerem. Nie kafle w ramkach: kolumny rozdzielone samą
   kreską, żeby pas czytał się jako jedna tabela, a nie pięć pudełek.
   Piąty człon („Pierwszy krok") jest ciemny, bo jako jedyny jest akcją. */
.pz-fakty{display:grid;gap:var(--vs-5);margin:0}
@media(min-width:700px){ .pz-fakty{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1000px){
  /* `align-items:start` jest tu istotne: bez niego wszystkie pola rozciągają
     się do wysokości ciemnego kafla z przyciskiem, a pionowe kreski zamykają
     130 px pustki pod „raz w tygodniu". Kreska ma sięgać tam, dokąd sięga
     treść. Kafel akcji wraca do pełnej wysokości osobną regułą. */
  .pz-fakty{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr);
    gap:0;align-items:start}
  .pz-fakt{padding:0 var(--vs-5);border-left:var(--vs-border)}
  .pz-fakt:first-child{padding-left:0;border-left:0}
}
#app .pz-fakt dt{margin:0 0 var(--vs-2);font-size:var(--vs-caption);letter-spacing:.06em;
  text-transform:uppercase;color:var(--vs-text-muted)}
#app .pz-fakt dd{margin:0;font-family:var(--vs-font-display);font-weight:400;
  font-size:var(--at-liczba);line-height:1.06;color:var(--vs-text)}
#app .pz-fakt dd small{display:block;margin-top:var(--vs-2);font-family:var(--vs-font-body);
  font-size:var(--vs-caption);line-height:1.4;color:var(--vs-text-muted)}
/* PUŁAPKA NAZWY: `--vs-canvas-light` to JASNA powierzchnia, nie „jasny wariant
   ciemnego tła". Piąty kafel i pas „żaden termin nie pasuje" mają być ciemne,
   więc noszą klasy `vs vs-dark` i biorą `--vs-canvas` z ciemnego motywu.
   Pierwsza wersja miała biały tekst na kremowym tle — nie do odczytania. */
.pz-fakt--krok{background:var(--vs-canvas);color:var(--vs-text);
  border-radius:var(--vs-radius-lg);padding:var(--vs-4) var(--vs-5)}
@media(min-width:1000px){ .pz-fakt--krok{margin-left:var(--vs-5);border-left:0} }
#app .pz-fakt--krok dt{color:rgba(255,255,255,.55)}
#app .pz-fakt--krok dd{display:flex;flex-direction:column;align-items:flex-start;
  gap:2px}
#app .pz-krok__mocne{font-family:var(--vs-font-display);font-size:var(--at-liczba);
  line-height:1.06;color:#fff}
#app .pz-krok__slabe{font-family:var(--vs-font-body);font-size:var(--vs-caption);
  color:rgba(255,255,255,.66)}
/* Ta sama pułapka, co przy panelu stanu pustego: `.vs-btn` ma
   `display:inline-flex`, które bije `[hidden]` z arkusza przeglądarki.
   Bez tej linijki oba przyciski stały obok siebie zawsze. */
.pz-krok__btn{margin-top:var(--vs-4)}
.pz-krok__btn[hidden]{display:none}

/* ── BANER BEZ FOTOGRAFII ─────────────────────────────────────────────────
   Kategoria zielona nie ma w banku kadru, który pokazuje grę na pełnym korcie
   i nadaje się na baner. Zamiast wstawiać zdjęcie z innego kontekstu, baner
   jest typograficzny — i ma wyglądać na decyzję, a nie na brak. Dlatego:
   · znika szklany panel (szkło bez fotografii pod spodem jest bez sensu),
     zostaje sam blok tekstu na ciemnym tle;
   · nagłówek dostaje więcej powietrza nad sobą, bo nie konkuruje z kadrem;
   · pod nagłówkiem stoi kreska w kolorze poziomu — ten sam znak, co przy
     nadtytule, tylko na całą szerokość kolumny.
   Gdy kadr się pojawi, wystarczy dopisać `vs_foto` w pliku treści i baner
   wraca do postaci fotograficznej bez żadnej zmiany w arkuszu. */
/* PUŁAPKA SYSTEMU, ZNALEZIONA TUTAJ. `.vs-tryb--mlodziez` stoi w arkuszu
   systemu PO `.vs-dark` i obie reguły mają tę samą swoistość, więc na
   elemencie z obiema klasami wygrywa tryb młodzieżowy i `--vs-canvas` robi
   się KREMOWE. Sekcje w środku strony tego nie widzą, bo leżą w `.vs-light`
   i łapią się na mocniejszy selektor `.vs-light .vs-dark`. Baner leży poza
   nim — i przy fotografii nikt tego nie zauważył, bo `.at-hero` ma własne
   tło `#0B0B0C` pod zdjęciem. Baner BEZ fotografii pokazał problem wprost:
   biały tekst na kremowym tle. Przywracamy tu komplet ciemnych ról zamiast
   podnosić swoistość we wspólnym arkuszu — ten jest na produkcji i obsługuje
   dziewięć tras ofertowych oraz stronę zbiorczą. */
.pz-hero--bezfoto{
  --vs-canvas:#0B0B0C;
  --vs-surface:#141417;
  --vs-text:#EDE9E5;
  --vs-text-secondary:rgba(237,233,229,.80);
  --vs-text-muted:rgba(237,233,229,.58);
  --vs-border:1px solid rgba(255,255,255,.12);
  min-height:min(62vh,560px);background:var(--vs-canvas)}
.pz-hero--bezfoto .at-hero__scrim{display:none}
.pz-hero--bezfoto .at-hero__panel{max-width:min(820px,72%);padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
@supports (backdrop-filter:blur(2px)){ .pz-hero--bezfoto .at-hero__panel{background:none} }
.pz-hero--bezfoto .at-hero__panel::after{content:"";display:block;
  width:min(220px,40%);height:3px;margin:var(--vs-6) 0 0;background:var(--vs-accent)}
#app .pz-hero--bezfoto .at-hero__h1{margin-top:var(--vs-5)}
.pz-hero--bezfoto .at-hero__akcja{margin-top:var(--vs-7)}

/* ── KIEDY TRENUJEMY ─────────────────────────────────────────────────────── */
.pz-terminy{scroll-margin-top:80px}
.pz-terminy__otw{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--vs-2) var(--vs-5)}
.pz-terminy__otw .vs-eyebrow{flex:1 0 100%}
#app .pz-terminy__meta{margin:0;font-size:var(--vs-caption);color:var(--vs-text-muted)}
#app .pz-terminy__meta b{color:var(--vs-text)}
#app .pz-terminy__cena{margin:var(--vs-5) 0 0;font-size:var(--vs-caption);
  color:var(--vs-text-muted)}
.pz-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vs-3) var(--vs-5);
  margin:var(--vs-5) 0 0}
.pz-pusto{padding:var(--vs-6);background:var(--vs-canvas);
  border:var(--vs-border);border-left:4px solid var(--vs-accent);
  border-radius:var(--vs-radius-lg)}
@media(min-width:820px){
  .pz-pusto{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    column-gap:var(--vs-cluster-space);align-items:start}
}
/* PUŁAPKA: `display:grid` w regule kontekstowej bije `[hidden]`, bo atrybut
   daje tylko `display:none` z arkusza przeglądarki. Panel stanu pustego jest
   domyślnie ukryty i odsłania go dopiero skrypt, gdy grafik odda zero
   terminów — bez tej linijki pokazywał się ZAWSZE, obok pełnej listy godzin. */
.pz-pusto[hidden]{display:none}
#app .pz-pusto h3{margin:0;font-family:var(--vs-font-display);font-weight:400;
  text-transform:uppercase;font-size:var(--vs-h3);line-height:1.15;color:var(--vs-text)}
/* Pas „żaden termin nie pasuje" — ciemny, bo to zaproszenie do rozmowy,
   a nie kolejny wiersz grafiku. */
.pz-brak{margin:var(--vs-6) 0 0;padding:var(--vs-5) var(--vs-6);
  border-radius:var(--vs-radius-lg);background:var(--vs-canvas)}
#app .pz-brak p{margin:0;font-size:var(--at-drobne);line-height:var(--at-lh);
  color:rgba(255,255,255,.78)}
#app .pz-brak p b{display:block;color:#fff}
#app .pz-brak .pz-akcje{margin-top:var(--vs-4)}
#app a.pz-brak__tel{color:#fff}
/* POLE DOTYKOWE NUMERU. Sam napis ma 22 px wysokości, a na telefonie numer
   jest najważniejszym przyciskiem tej sekcji. Powiększamy OBSZAR KLIKANIA
   do 44 px, nie zmieniając wyglądu: kreska pod tekstem przenosi się
   z krawędzi elementu do ::after tuż pod linią pisma. Ten sam zabieg, co
   w starym szablonie — tam opisany jako naprawa z 08.09. */
#app .pz-akcje a{position:relative;display:inline-flex;align-items:center;
  min-height:44px;border-bottom:0;padding-bottom:0}
#app .pz-akcje a::after{content:'';position:absolute;left:0;right:0;
  top:calc(50% + 10px);border-bottom:1px solid currentColor;opacity:.45}
@media(hover:hover){ #app .pz-akcje a:hover::after{opacity:1} }

/* ── DLA KOGO / TO NIE JEST ──────────────────────────────────────────────
   Jeden moduł, dwie odpowiedzi. Rozróżnia je etykieta i kolor kreski, nie
   ramka — dwie ramki obok siebie czytają się jak dwa niezależne pudełka. */
.pz-kogo{display:grid;gap:var(--vs-6)}
@media(min-width:860px){ .pz-kogo{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--vs-cluster-space)} }
.pz-kogo__it{padding-left:var(--vs-5);border-left:3px solid var(--vs-accent)}
.pz-kogo__it--tak{border-left-color:var(--vs-accent)}
.pz-kogo__it--nie{border-left-color:var(--vs-text-muted)}
#app .pz-kogo__it--nie .vs-eyebrow{color:var(--vs-text-muted)}

/* ── ARGUMENT Z RYSUNKIEM KORTU ──────────────────────────────────────────
   Rysunek nie jest ilustracją obok tekstu: jest jego dowodem, więc dostaje
   pełną kolumnę i nie kurczy się poniżej czytelności. Na szerokim ekranie
   stoi po lewej i przykleja się przy przewijaniu, żeby towarzyszył całemu
   akapitowi o wielkości pola gry, a nie tylko jego pierwszym wierszom. */
/* KOMPOZYCJA ARGUMENTU — WARIANT A (wybrany po przeglądzie, 09.09.2026).
   Rysunek jest niski (345 px), wywód wysoki (456 px): w pierwszej wersji lewa
   kolumna kończyła się 254 px przed prawą na 1440 i 365 px na 1024. To była
   pustka z niedopasowania wysokości, nie z rytmu.

   Sprawdzone warianty (różnica wysokości kolumn / szerokość niewykorzystana):
     A  rysunek + teza po lewej, wywód po prawej, 5fr/7fr   128 px / 186 px
     B  większy rysunek, teza po prawej, 1fr/30em            63 px /   0 px
   Liczby wskazują B, ale oko wskazuje A: w B karta rysunku rozciąga się na
   835 px, a sam rysunek zostaje w środku z szerokim marginesem po bokach —
   pustka przenosi się do środka karty i wygląda gorzej niż lekko krótsza
   kolumna. Wybrany A.

   `grid-template-areas` przenosi tezę pod rysunek TYLKO na szerokim ekranie.
   W kodzie stoi ona po wywodzie, więc na telefonie i w czytniku ekranu
   kolejność czytania zostaje redakcyjna: rysunek, wywód, teza. */
.pz-arg{display:grid;gap:var(--vs-6);
  grid-template-areas:"rys" "tekst" "mysl"}
.pz-arg__rys{grid-area:rys}
.pz-arg__tekst{grid-area:tekst}
.pz-arg__mysl{grid-area:mysl}
@media(min-width:1000px){
  .pz-arg{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:"rys tekst" "mysl tekst";
    grid-template-rows:auto 1fr;
    column-gap:var(--vs-cluster-space);row-gap:var(--vs-6);align-items:start}
}
.pz-rys{margin:0;padding:var(--vs-5);background:var(--vs-canvas);
  border-radius:var(--vs-radius-lg)}
.pz-rys svg{display:block;width:100%;height:auto}
#app .pz-rys figcaption{margin:var(--vs-4) 0 0;font-size:var(--vs-caption);
  line-height:1.5;color:var(--vs-text-muted)}

/* Myśl przewodnia. Nie „cytat z kimś podpisanym" — to zdanie, wokół którego
   zbudowana jest cała metodyka, więc dostaje krój nagłówkowy i kreskę. */
.pz-mysl{margin:var(--vs-6) 0;padding:0 0 0 var(--vs-5);
  border-left:3px solid var(--vs-accent)}
#app .pz-arg__mysl{margin:0}
#app .pz-mysl__t{margin:0 0 var(--vs-3);font-family:var(--vs-font-display);font-weight:400;
  font-size:var(--at-liczba);line-height:1.12;color:var(--vs-text)}

/* ── PRZEBIEG TRENINGU ───────────────────────────────────────────────────
   Siedem kroków jako oś, nie jako siedem pudełek. Minuty są liczbą wiodącą,
   bo o to rodzic pyta; kroki, w których dziecko GRA, są wypełnione akcentem
   — po to ten blok istnieje. */
#app .pz-trening__wstep{color:rgba(255,255,255,.80)}
.pz-os{list-style:none;margin:var(--vs-7) 0 0;padding:0;display:grid;gap:var(--vs-4)}
@media(min-width:760px){ .pz-os{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1100px){ .pz-os{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pz-os__krok{padding:var(--vs-5) var(--vs-4);border-top:2px solid rgba(255,255,255,.22)}
.pz-os__krok--gra{border-top-color:var(--vs-accent);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 70%)}
#app .pz-os__min{margin:0;font-family:var(--vs-font-display);font-weight:400;
  font-size:var(--at-liczba);line-height:1;color:rgba(255,255,255,.62)}
#app .pz-os__krok--gra .pz-os__min{color:var(--vs-accent-text)}
#app .pz-os__nazwa{margin:var(--vs-3) 0 var(--vs-2);font-size:var(--at-proza);
  line-height:1.25;color:#fff}
#app .pz-os__opis{margin:0;font-size:var(--at-drobne);line-height:var(--at-lh);
  color:rgba(255,255,255,.72)}
#app .pz-os__suma{margin:var(--vs-6) 0 0;font-size:var(--at-drobne);
  line-height:var(--at-lh);color:rgba(255,255,255,.72);max-width:34em}
#app .pz-os__suma b{color:#fff}

/* ── PASMO OBRAZU ────────────────────────────────────────────────────────
   Jedyna przerwa czysto wizualna. Wysokość dobrana tak, żeby fotografia
   zajmowała co najmniej dwie piąte ekranu — inaczej nie jest przerwą,
   tylko ozdobnikiem. */
/* Pasmo obrazu — te same reguły dla strony kategorii (.pz-) i dla strony
   zbiorczej (.at-). Jedna deklaracja, dwie nazwy: gdyby arkusz miał dwa
   osobne bloki, prędzej czy później rozjechałyby się wysokością pasa. */
.pz-pasmo,.at-pasmo{position:relative;isolation:isolate}
.pz-pasmo picture,.at-pasmo picture{display:block}
.pz-pasmo img,.at-pasmo img{display:block;width:100%;height:clamp(320px,52vh,600px);
  object-fit:cover}
#app .pz-pasmo__podpis,#app .at-pasmo__podpis{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:var(--vs-8) var(--vs-gutter) var(--vs-5);
  font-size:var(--vs-caption);color:rgba(255,255,255,.92);
  background:linear-gradient(180deg,transparent,rgba(11,11,12,.72));
  max-width:var(--vs-container);margin-left:auto;margin-right:auto}

/* ── ROZDZIAŁY ŚRODKA STRONY ─────────────────────────────────────────────
   Zdanie prowadzące (pierwszy krótki akapit sekcji) jest większe od reszty
   i mieści się w jednym rzucie oka — dopiero pod nim idzie wyliczenie. */
/* MIARA WIERSZA — JEDNA REGUŁA NA CAŁĄ STRONĘ.
   Proza stała na całym paśmie: przy 18 px dawało to 160 znaków w wierszu
   na 1440 i 101 na 768, czyli dwa razy powyżej progu z zasad kompozycji
   (60–70 znaków). Ograniczenie idzie na KAŻDY ciągły tekst tej strony,
   nie na wybrane sekcje — inaczej za tydzień nowa sekcja znów wyjedzie
   na pełne pasmo i nikt tego nie zauważy.
   Wyliczenia i tabele zostają na pełnej szerokości: mają krótkie pozycje
   i to one korzystają z miejsca, którego proza nie potrzebuje.

   MIARA W `em`, NIE W `ch`. Jednostka `ch` to szerokość znaku „0", a w tym
   kroju zero jest wąskie: 66ch dawało 90 realnych znaków w wierszu, czyli
   nadal o jedną trzecią za dużo. 34em daje zmierzone 55–73 znaków na
   wszystkich pięciu szerokościach. Zmieniasz krój — zmierz ponownie
   (liczba wierszy z Range.getClientRects, nie oszacowanie z szerokości). */
#app #at.pz .at-proza,#app #at.pz .pz-teza{max-width:34em}
/* Pozycje wyliczeń dostają tę samą miarę osobną regułą. Na szerokim ekranie
   nic to nie zmienia (łamy są węższe od miary), ale przy 768 px lista wraca
   do jednej kolumny i bez tego pozycja rozciągała się na 82 znaki. */
#app #at.pz .pz-punkty li{max-width:34em}
#app .pz-brak p{max-width:none}
#app .pz-teza{margin:0 0 var(--vs-5);font-size:var(--at-lead);line-height:1.45;
  color:var(--vs-text)}

/* ROZDZIAŁ NA JEDNO ZDANIE — układ zwarty. Nagłówek i zdanie stoją obok
   siebie, a nie jedno pod drugim z pełnym zapasem rozdziału. Kreska pod
   nagłówkiem znika, bo przy jednym zdaniu zapowiadałaby treść, której nie ma.
   Zdanie dostaje stopień podprowadzenia: to jest myśl, nie akapit wywodu. */
.pz-rozdz--krotki{padding:var(--vs-8) 0}
@media(min-width:1000px){
  .pz-rozdz--krotki .at-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:var(--vs-cluster-space);align-items:start}
}
.pz-rozdz--krotki .at-otw{margin:0;padding:0;border-bottom:0}
#app .pz-rozdz--krotki .at-proza{font-size:var(--at-lead);line-height:1.45;
  color:var(--vs-text)}
.pz-punkty{list-style:none;margin:var(--vs-5) 0 0;padding:0;display:grid;
  gap:var(--vs-4)}
@media(min-width:820px){ .pz-punkty{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--vs-cluster-space)} }
#app .pz-punkty li{margin:0;padding:0 0 0 var(--vs-5);position:relative;
  font-size:var(--at-proza);line-height:var(--at-lh);color:var(--vs-text-secondary)}
#app .pz-punkty li::before{content:"";position:absolute;left:0;top:.62em;
  width:10px;height:2px;background:var(--vs-accent)}
/* Akapit domykający rozdział stoi PO wyliczeniu. Bez tego odstępu zaczynał
   się tuż pod ostatnią pozycją lewego łamu i czytał się jak jej dalszy ciąg —
   widoczne na pomarańczowej, gdzie zdanie zamykające ma cztery wiersze. */
#app .pz-punkty + .at-proza{margin-top:var(--vs-6)}
.pz-punkty--num{counter-reset:pz}
#app .pz-punkty--num li{counter-increment:pz;padding-left:var(--vs-7)}
#app .pz-punkty--num li::before{content:counter(pz,decimal-leading-zero);
  top:0;width:auto;height:auto;background:none;
  font-family:var(--vs-font-display);font-size:var(--at-proza);
  color:var(--vs-accent-text)}
.pz-trening-sec .pz-punkty li{color:rgba(255,255,255,.78)}

/* ── SPRZĘT I TABELA PARAMETRÓW ──────────────────────────────────────────
   Tabela ma ten sam skład, co anatomia poziomu na stronie zbiorczej —
   obie strony czyta się jednym nawykiem. */
/* PRÓG DWÓCH KOLUMN PODNIESIONY Z 1000 NA 1200 px. Przy 1024 tabela ściśnięta
   do pięciu dwunastych rosła do 517 px, a proza obok kończyła się na 339 —
   177 px pustki pod tekstem, wyłącznie z niedopasowania wysokości. Poniżej
   1200 px proza i tabela idą jedna pod drugą i czyta się je w tej kolejności,
   w jakiej mówią: najpierw dlaczego, potem ile. */
.pz-sprzet{display:grid;gap:var(--vs-7)}
@media(min-width:1200px){
  .pz-sprzet{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--vs-cluster-space);align-items:start}
}
#app .pz-dane__h{margin:0 0 var(--vs-4);font-size:var(--vs-caption);letter-spacing:.06em;
  text-transform:uppercase;color:var(--vs-text-muted)}
.pz-sprzet-sec .at-poziom__dane{margin:0}

/* ── ŚCIEŻKA SZKOLENIOWA ─────────────────────────────────────────────────
   Ten sam wzorzec, co na stronie zbiorczej; bieżący etap nie jest odnośnikiem
   i ma wypełnioną kropkę. */
.pz-droga{list-style:none;margin:0;padding:0;display:grid;gap:var(--vs-5)}
@media(min-width:760px){
  .pz-droga{grid-template-columns:repeat(var(--pz-etapow,4),minmax(0,1fr));
    gap:var(--vs-4)}
}
.pz-droga__it a,.pz-droga__it--tu{display:block;text-decoration:none}
.pz-droga__kropka{display:block;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.38);margin:0 0 var(--vs-3)}
.pz-droga__it--tu .pz-droga__kropka{background:var(--vs-accent);border-color:var(--vs-accent)}
#app .pz-droga__it b{display:block;font-weight:400;font-size:var(--at-proza);
  color:rgba(255,255,255,.74)}
#app .pz-droga__it--tu b{color:#fff}
#app .pz-droga__wiek{display:block;margin-top:2px;font-size:var(--vs-caption);
  color:rgba(255,255,255,.52)}
#app .pz-droga__it--tu .pz-droga__wiek{color:var(--vs-accent-text)}
@media(hover:hover){ .pz-droga__it a:hover b{color:#fff}
  .pz-droga__it a:hover .pz-droga__kropka{border-color:var(--vs-accent)} }

/* ── PYTANIA RODZICÓW ────────────────────────────────────────────────────
   Pełny rozdział, nie wąski moduł na końcu. Dwanaście pytań w dwóch łamach
   na szerokim ekranie; każde jest samodzielnym <details>, więc działa bez
   skryptu, a treść odpowiedzi stoi w kodzie strony od początku. */
.pz-pyt{display:grid;gap:0}
@media(min-width:960px){ .pz-pyt{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--vs-cluster-space)} }
.pz-pyt__it{border-bottom:var(--vs-border)}
.pz-pyt__it:first-child{border-top:var(--vs-border)}
@media(min-width:960px){ .pz-pyt__it:nth-child(2){border-top:var(--vs-border)} }
#app .pz-pyt__it summary{display:flex;align-items:flex-start;gap:var(--vs-4);
  min-height:56px;padding:var(--vs-4) 0;cursor:pointer;list-style:none;
  font-size:var(--at-proza);line-height:1.4;color:var(--vs-text)}
.pz-pyt__it summary::-webkit-details-marker{display:none}
.pz-pyt__it summary::after{content:"";flex:none;margin-left:auto;margin-top:.35em;
  width:9px;height:9px;border-right:2px solid var(--vs-accent);
  border-bottom:2px solid var(--vs-accent);transform:rotate(45deg);
  transition:transform var(--vs-ruch)}
.pz-pyt__it[open] summary::after{transform:rotate(-135deg)}
.pz-pyt__o{padding:0 0 var(--vs-5)}
#app .pz-pyt__o .at-proza{font-size:var(--at-drobne)}

/* ── WEZWANIE, CENA, SĄSIEDNIE ETAPY ─────────────────────────────────────── */
.pz-cena{align-self:end}
#app .pz-cena__kwota{margin:0;display:flex;align-items:baseline;gap:var(--vs-2);
  flex-wrap:wrap}
#app .pz-cena__kwota b{font-family:var(--vs-font-display);font-weight:400;
  font-size:var(--at-h2);line-height:1;color:#fff}
#app .pz-cena__kwota span{font-size:var(--vs-caption);color:rgba(255,255,255,.66)}
#app .pz-cena__alt{margin:var(--vs-3) 0 0;font-size:var(--at-drobne);
  color:rgba(255,255,255,.72)}
#app .pz-etap__opis{display:block;margin-top:2px;font-size:var(--vs-caption);
  letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62)}
#app .pz-wroc{margin:var(--vs-7) 0 0;font-size:var(--at-drobne);
  color:rgba(255,255,255,.72)}
#app .pz-wroc a{color:#fff}

/* ── TELEFON ─────────────────────────────────────────────────────────────
   Rysunek kortu przestaje się przyklejać (na krótkim ekranie przykleja się
   do niczego), a pas liczb wraca do jednej kolumny. */

@media(max-width:699px){
  .pz-fakty{gap:var(--vs-5)}
  .pz-os{grid-template-columns:1fr}
  .pz-punkty{grid-template-columns:1fr}
}