/* Ś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. */

.rozwoj{position:relative;z-index:3;
  --przerwa:96px;          /* odstęp pionowy między taflami */
  --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(20px,1.875vw,27px);
  --zapas:80px;            /* od górnej krawędzi sekcji do pierwszej tafli — tyle ma kreska na skręt */
  margin-top:calc(-1 * var(--podciag,0px));
  padding:var(--zapas) 5vw 104px}
.rozwoj-droga{position:relative;max-width:1000px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--przerwa)}
.rozwoj-krok{position:relative;width:46%}
.rozwoj-krok.prawa{align-self:flex-end}
.rozwoj-krok.lewa{align-self:flex-start}
.rozwoj-karta .tresc{padding:30px 34px 32px}
.rozwoj-karta h2{font-size:var(--rozwoj-h);line-height:1.16}
.rozwoj-karta p{margin:18px 0 0;font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.52;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:76%;align-self:center;scroll-margin-top:40px}
.rozwoj-opinie .tresc{padding:34px 34px 36px}
.rozwoj-opinie-tresc:empty{min-height:78px}
/* 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:84px;--wciecie:26px}
  .rozwoj-karta .tresc{padding:25px 26px 27px}
}
@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:58px;--wciecie:30px;--pod-szklem:9px;--mij:54px;--zapas:50px;
    --rozwoj-h:clamp(15.5px,calc(4.9vw - .8px),23px);
    padding:var(--zapas) 18px 72px}
  .rozwoj-droga{max-width:540px}
  .rozwoj-krok{width:calc(100% - var(--mij));max-width:none}
  .rozwoj-karta .tresc{padding:22px 20px 24px}
  .rozwoj-karta p{margin-top:15px;font-size:15.5px;line-height:1.48}
  .rozwoj-linie text{font-size:11px;letter-spacing:.12em}
  .rozwoj-opinie{width:100%;max-width:none}
  .rozwoj-opinie .tresc{padding:24px 20px 26px}
  .rozwoj-opinie-tresc:empty{min-height:54px}
}
@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}
}