/* ŚCIEŻKA PO TECZCE „AKTUALIZACJE" — wersja 2 (22.09.2026, po uwagach Kuby).
   Co się zmieniło wobec wersji Codexa: (1) połączenia są KĄTOWE, nie ukośne — włosowa kreska
   schodzi pionowo, skręca pod kątem prostym i wchodzi pod szkło następnej tafli, dokładnie tym
   samym językiem, co klamry w sekcji 2 (atlas: ostre naroża, podpis LEŻY na poziomym odcinku);
   (2) ścieżka jest ZAGĘSZCZONA i podciągnięta pod teczkę (mniejsze odstępy, węższe tafle
   w mijance, sekcja wchodzi ujemnym marginesem w pusty pas pod teczką); (3) kreska od teczki
   to osobny element .rozwoj-nic W ŚRODKU przyklejonego ekranu — nigdy się nie odczepia
   i nie trzeba jej przeliczać przy każdej klatce (opis w src/aktualizacje.js).
   Materiał tafli (.szklo) i krój nagłówków (.pdz-h) — te same co w sekcji 2.
   01.10.2026 (Kuba: „za dużo miejsca jak na tyle treści, zwęzić, także na szerokość, zwłaszcza desktop”): ścieżka 1000 → 880 px,
   tafle 460 → 414 px, odstęp 96 → 64 px, mniejsze wnętrza i stopnie pisma; telefon odstęp 58 → 46 px, wnętrza 22/20/24 → 18/18/20. */

.rozwoj{position:relative;z-index:3;
  --przerwa:64px;          /* odstęp pionowy między taflami (01.10: 96 → 64) */
  --wciecie:34px;          /* jak daleko od WEWNĘTRZNEJ krawędzi tafli biegnie kreska */
  --pod-szklem:10px;       /* ile kreska wchodzi pod szkło (jak szyny w sekcji 2) */
  --rozwoj-h:clamp(19px,1.7vw,24px);
  --zapas:64px;            /* od górnej krawędzi sekcji do pierwszej tafli — tyle ma kreska na skręt */
  margin-top:calc(-1 * var(--podciag,0px));
  /* 04.10.2026 (Kuba): kolorowa sekcja kończy się „jakiś kawałek” pod taflą „W swoim gronie”, szklaną krawędzią na górze #dostep.
     Dolny odstęp = tyle, ile sekcja 2 ma oddechu u góry i u dołu (16 % ekranu, telefon 12 %). Wcześniej pod ostatnią taflą było
     80 px + dokładka #liquidZapas (do 1436 px pustej wody na ekranie 2000 × 1295). */
  padding:var(--zapas) 5vw calc(var(--vh,1svh)*16)}
.rozwoj-droga{position:relative;max-width:880px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--przerwa)}
.rozwoj-krok{position:relative;width:47%}
.rozwoj-krok.prawa{align-self:flex-end}
.rozwoj-krok.lewa{align-self:flex-start}
.rozwoj-karta .tresc{padding:26px 30px 28px}
.rozwoj-karta h2{font-size:var(--rozwoj-h);line-height:1.16}
.rozwoj-karta p{margin:14px 0 0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.48;font-weight:400;
  color:rgba(13,13,13,.8);text-wrap:pretty}

/* KRESKA OD TECZKI: pionowa nitka od dolnej krawędzi podpisu teczki do dołu sekcji z płytą,
   czyli dokładnie do miejsca, w którym ścieżka podejmuje ją dalej (patrz aktualizacje.js).
   Siedzi w zestawie teczek, więc na telefonie jedzie z przyklejonym ekranem i nigdy nie
   odrywa się od teczki; na górze ma poprzeczkę jak punkt zaczepienia kreski w atlasie. */
@media(min-width:821px){ .zestaw.zestaw-nic{position:relative} }
.rozwoj-nic{position:absolute;top:var(--nic-y,0px);left:var(--nic-x,50%);width:1px;height:var(--nic-h,0px);
  background:var(--bordo);transform-origin:50% 0;pointer-events:none;z-index:0}
.rozwoj-nic::before{content:'';position:absolute;left:-4px;top:0;width:9px;height:1px;background:var(--bordo)}
/* nitka wysnuwa się z teczki dopiero, kiedy zestaw UPDATES jest aktywny */
.rozwoj-js .rozwoj-nic{scale:1 0;opacity:0}
.rozwoj-js .zestaw.akt .rozwoj-nic{scale:1 1;opacity:1;transition:scale .9s cubic-bezier(.2,.8,.2,1) .45s,opacity .2s linear .45s}

.rozwoj-linie{position:absolute;left:0;top:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.rozwoj-linie path{fill:none;stroke:var(--bordo);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.rozwoj-linie text{fill:var(--bordo);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}
.rozwoj-opinie{width:72%;align-self:center;scroll-margin-top:40px}
.rozwoj-opinie .tresc{padding:28px 30px 30px}
.rozwoj-opinie-tresc:empty{min-height:56px}
/* Odsłanianie: samo krycie — krawędzie tafli zostają tam, gdzie je zmierzono, więc kreski
   nie muszą się przeliczać w trakcie wjazdu. */
.rozwoj-js .rozwoj-karta{opacity:0;transition:opacity .5s ease}
.rozwoj-js .rozwoj-krok.wid .rozwoj-karta{opacity:1}

@media(min-width:821px) and (max-width:1100px){
  .rozwoj{--przerwa:56px;--wciecie:26px}
  .rozwoj-karta .tresc{padding:22px 24px 24px}
}
@media(max-width:820px){
  /* TELEFON: tafle w mijance (jak tafle sekcji 2) — każda węższa od kolumny o --mij i dosunięta
     do swojej ściany, więc „lewa, prawa" widać na pierwszy rzut oka, a kreska ma czym skręcać. */
  .rozwoj{--przerwa:46px;--wciecie:30px;--pod-szklem:9px;--mij:54px;--zapas:42px;
    --rozwoj-h:clamp(15.5px,calc(4.9vw - .8px),23px);
    padding:var(--zapas) 18px calc(var(--vh,1svh)*12)}
  .rozwoj-droga{max-width:540px}
  .rozwoj-krok{width:calc(100% - var(--mij));max-width:none}
  .rozwoj-karta .tresc{padding:18px 18px 20px}
  .rozwoj-karta p{margin-top:12px;font-size:15px;line-height:1.42}
  .rozwoj-linie text{font-size:11px;letter-spacing:.12em}
  .rozwoj-opinie{width:100%;max-width:none}
  .rozwoj-opinie .tresc{padding:20px 18px 22px}
  .rozwoj-opinie-tresc:empty{min-height:40px}
}
@media(max-width:350px){
  .rozwoj{--mij:42px}
}
@media(prefers-reduced-motion:reduce){
  .rozwoj-js .rozwoj-karta{opacity:1}
  .rozwoj-js .rozwoj-nic{scale:1 1;opacity:1}
}