/* ==================================================================================
   HIGH PRESSURE PIPING — landing rekrutacyjny /praca/   (2026-07-29)

   Ten arkusz DOKŁADA komponenty potrzebne tylko na tej podstronie.
   `hpp.css` (rytm, kolory, przyciski, nawigacja, stopka, formularz) ładuje się przed nim
   i NIE JEST tu zmieniany — dzięki temu strona główna nie ma jak się zepsuć,
   a cofnięcie tej podstrony to skasowanie dwóch plików i jednego wpisu w functions.php.

   RYTM — dziedziczony z hpp.css, czyli 1:1 z referencje-www/szablon-editorial.html:
     sekcja 120px (1024px → 96, 640px → 72) · container 1280 / 40 · 32 · 20
     nagłówek sekcji margin-bottom 60 · lead 19px / 46ch · karta padding 32 / radius 20

   KOLOR — wyłącznie paleta z prototyp/marka/paleta.md (zmierzona w logo klienta).
     Ani jednej nowej wartości. Sprawdzane przez narzedzia/playwright/straz-kolorow.js.

   PREFIKS — wszystkie klasy `pr-` (praca), żeby nic nie kolidowało z klasami strony głównej.
   ================================================================================== */

/* ====== DWIE DROGI (doświadczony / do przyuczenia) ======
   Największy element decyzyjny strony. Kandydat ma w dwie sekundy rozpoznać,
   który wariant jest jego — stąd dwa równorzędne pola, nie lista. */
.pr-drogi{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.pr-droga{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); padding:32px;
     display:flex; flex-direction:column; position:relative; overflow:hidden;
     transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;}
.pr-droga:hover{transform:translateY(-6px); border-color:rgba(0,120,191,.4);
     box-shadow:0 28px 56px -32px rgba(21,46,61,.5);}
.pr-droga .pr-znak{width:52px; height:52px; border-radius:14px; background:var(--brand); color:#fff;
     display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.pr-droga h3{font-size:26px; margin-bottom:12px;}
.pr-droga > p{color:var(--gray-1); font-size:15.5px; max-width:44ch;}
.pr-droga .pr-dla{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
     color:#5c666f; margin-bottom:10px;}
.pr-droga .btn{margin-top:26px; align-self:flex-start;}
/* Stawka wywołana w karcie drogi — to jest powód, dla którego ktoś czyta dalej.
   `margin-top:auto` dokleja blok stawki i przycisk do dołu karty, więc w obu kartach
   siedzą na tej samej wysokości mimo różnej długości opisu (CARD-BLUEPRINT-2026:
   metadane kotwiczone do dołu kafelka). */
.pr-droga .pr-widelki{margin-top:auto; padding-top:20px; border-top:1px solid var(--steel);
     font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
     color:#00618f;}
/* Sama kwota wraca do kroju tekstowego — w monospace rozjeżdżała się na dwa wiersze
   i czytało się ją jak fragment kodu, a nie jak stawkę. */
.pr-droga .pr-widelki b{font-family:var(--body); font-size:18px; font-weight:700;
     letter-spacing:-0.02em; text-transform:none; display:block; margin-top:8px; color:var(--ink);}

/* ====== STAWKI ======
   Dwa pola: Polska i Niemcy. Liczba ma być pierwszą rzeczą, którą widać. */
.pr-stawki{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.pr-stawka{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
     border-radius:var(--radius); padding:34px 32px; display:flex; flex-direction:column;}
.pr-stawka .pr-gdzie{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
     text-transform:uppercase; color:#6cc5f2;}
.pr-stawka .pr-kwota{font-size:clamp(34px,4.6vw,54px); font-weight:800; letter-spacing:-0.04em;
     line-height:1; margin-top:14px; color:#fff; font-variant-numeric:tabular-nums;}
.pr-stawka .pr-jedn{font-size:15px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.7);
     display:block; margin-top:10px;}
.pr-stawka p{color:rgba(255,255,255,.72); font-size:15px; margin-top:22px; padding-top:20px;
     border-top:1px solid rgba(255,255,255,.12);}

/* co decyduje o stawce — lista w ciemnej sekcji */
.pr-czynniki{list-style:none; padding:0; margin:0;}
.pr-czynniki li{position:relative; padding:12px 0 12px 30px; border-top:1px solid rgba(255,255,255,.12);
     font-size:15.5px; color:rgba(255,255,255,.86);}
.pr-czynniki li:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.pr-czynniki li::before{content:''; position:absolute; left:0; top:21px; width:14px; height:2px;
     background:var(--brand-hi);}

/* Nota prawna i wyjaśniająca w ciemnej sekcji.
   Osobna klasa zamiast `.uwaga` z hpp.css: tamta ma kolor rgba(255,255,255,.55)
   i jest pomyślana na jedno zdanie drobnym drukiem w karcie oferty. Tutaj niosą
   treść, którą kandydat MA przeczytać (przeliczenie netto na brutto, zakaz pytania
   o obecne wynagrodzenie), więc dostają wyższy kontrast i kreskę porządkującą. */
.pr-nota{font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.75);
     border-left:2px solid rgba(255,255,255,.22); padding-left:18px; margin-top:22px;}
.pr-nota:first-of-type{margin-top:26px;}
.pr-nota sup{font-size:.7em;}

/* forma współpracy */
.pr-formy{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px;}
.pr-forma{border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:20px 22px;
     background:rgba(255,255,255,.04);}
.pr-forma .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
     color:#6cc5f2;}
.pr-forma .w{font-size:16px; font-weight:600; color:#fff; margin-top:6px;}
.pr-forma p{font-size:13.5px; color:rgba(255,255,255,.66); margin-top:6px; border:0; padding:0;}
/* Kwota w karcie formy współpracy — dodane 2026-07-30 razem z widełkami brutto.
   Własna reguła, bo `.pr-kwota` wyżej jest scope'owane na `.pr-stawka` i ma
   clamp(34px,4.6vw,54px) — w tej karcie rozsadziłoby układ. Tu chodzi tylko o to,
   żeby liczba odcinała się od zdania, w którym stoi. */
.pr-forma .pr-kwota{display:block; color:#fff; font-size:15.5px; font-weight:700;
     letter-spacing:-0.015em; margin-bottom:5px;}
.pr-forma p b{color:rgba(255,255,255,.92); font-weight:600;}

/* ====== NARZĘDZIA — kafle w sekcji w kolorze marki ======
   Sekcja stoi na `--brand`, więc kafle budowane są na białej przezroczystości,
   tak jak karty oferty w sekcji ciemnej. Zero nowych kolorów. */
.pr-narzedzia{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px;}
.pr-narzedzie{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
     border-radius:16px; padding:26px 24px; transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);}
.pr-narzedzie:hover{background:rgba(255,255,255,.16); transform:translateY(-4px);}
.pr-narzedzie .ik{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.18);
     display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px;}
.pr-narzedzie h4{font-size:17.5px; color:#fff; letter-spacing:-0.02em; margin-bottom:8px;}
.pr-narzedzie p{font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.55;}

/* pasek pod kaflami: skąd te narzędzia się wzięły */
/* Celowo bez linku wychodzącego — patrz komentarz przy tym bloku w praca.html. */
.pr-autor{margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.26);
     font-size:16px; line-height:1.6; color:rgba(255,255,255,.92); max-width:74ch;}

/* ====== ZAKRES PRACY — kroki (realistyczny podgląd stanowiska) ======
   Numerowana lista czynności z briefu. Dwie kolumny, żeby dwanaście pozycji
   nie zrobiło ściany tekstu na jeden ekran. */
.pr-kroki{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; list-style:none; padding:0; margin:0;
     counter-reset:krok;}
.pr-krok{counter-increment:krok; position:relative; padding:15px 0 15px 46px;
     border-top:1px solid var(--steel); font-size:15.5px; color:var(--gray-1);}
.pr-krok::before{content:counter(krok,decimal-leading-zero); position:absolute; left:0; top:16px;
     font-family:var(--mono); font-size:12px; color:#00618f; letter-spacing:.05em;}
.pr-krok b{color:var(--ink); font-weight:600;}
.pr-kroki-uwaga{margin-top:32px; padding:18px 20px; border-radius:12px; background:var(--bg-alt);
     border-left:3px solid var(--brand); font-size:15px; color:var(--gray-1);}

/* zdjęcie obok zakresu prac */
.pr-zakres{display:grid; grid-template-columns:1fr 1.35fr; gap:64px; align-items:start;}
.pr-foto{border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); position:relative;}
.pr-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.pr-foto figcaption{position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
     background:linear-gradient(180deg, rgba(21,46,61,0), rgba(21,46,61,.88));
     font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff;}

/* ====== POZIOMY / ŚCIEŻKA ROZWOJU ======
   Trzy stopnie z briefu. Pasek postępu pod numerem pokazuje, że to jedna droga,
   a nie trzy osobne oferty pracy. */
.pr-poziom{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); padding:32px;
     display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.7,.2,1),
     border-color .28s ease, box-shadow .28s ease;}
.pr-poziom:hover{transform:translateY(-6px); border-color:rgba(0,120,191,.4);
     box-shadow:0 26px 52px -30px rgba(21,46,61,.45);}
.pr-poziom .pr-stopien{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
     text-transform:uppercase; color:#5c666f;}
.pr-poziom h3{font-size:22px; margin:10px 0 14px;}
.pr-poziom p{color:var(--gray-1); font-size:15.5px;}
.pr-pasek{display:flex; gap:5px; margin-top:24px;}
.pr-pasek i{height:5px; flex:1; border-radius:3px; background:var(--steel); display:block;}
.pr-pasek i.jest{background:var(--brand);}
.pr-poziom .pr-plac{margin-top:22px; padding-top:20px; border-top:1px solid var(--steel);
     font-family:var(--mono); font-size:12.5px; color:#00618f;}

/* ====== KIM BYŁEŚ DO TEJ PORY — chipy zawodów ====== */
.pr-zawody{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.pr-zawod{font-size:14.5px; color:var(--ink); background:#fff; border:1px solid var(--steel-2);
     border-radius:100px; padding:11px 18px; min-height:44px; display:inline-flex; align-items:center;
     transition:border-color .2s ease, background .2s ease, transform .2s ease;}
.pr-zawod:hover{border-color:var(--brand); background:rgba(0,120,191,.06); transform:translateY(-2px);}

/* ====== GDZIE PRACUJESZ ====== */
.pr-miejsca{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.pr-miejsce{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); overflow:hidden;
     display:flex; flex-direction:column;}
.pr-miejsce-foto{aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt);}
.pr-miejsce-foto img{width:100%; height:100%; object-fit:cover;
     transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.pr-miejsce:hover .pr-miejsce-foto img{transform:scale(1.05);}
.pr-miejsce-tresc{padding:28px 30px 30px; display:flex; flex-direction:column; flex:1;}
.pr-miejsce h3{font-size:22px; margin-bottom:12px;}
.pr-miejsce p{color:var(--gray-1); font-size:15.5px;}

/* ====== PROCES REKRUTACJI ====== */
.pr-proces{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:etap;}
.pr-etap{counter-increment:etap; position:relative; padding-top:30px;}
.pr-etap::before{content:''; position:absolute; left:0; right:0; top:12px; height:2px;
     background:var(--steel);}
.pr-etap::after{content:''; position:absolute; left:0; top:7px; width:12px; height:12px;
     border-radius:50%; background:var(--brand); border:3px solid var(--bg-alt);}
.pr-etap .n{font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:#5c666f;}
.pr-etap h4{font-size:16.5px; margin:8px 0 8px; letter-spacing:-0.02em;}
.pr-etap p{font-size:14px; color:var(--gray-1);}

/* ====== FAQ ====== */
.pr-faq{display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:start;}
.pr-pyt{border-top:1px solid var(--steel);}
.pr-pyt:last-of-type{border-bottom:1px solid var(--steel);}
.pr-pyt summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
     align-items:center; gap:18px; padding:22px 0; font-size:18px; font-weight:600;
     letter-spacing:-0.02em; min-height:52px;}
.pr-pyt summary::-webkit-details-marker{display:none;}
.pr-pyt summary::after{content:'+'; font-family:var(--mono); font-size:20px; color:var(--brand);
     flex:none;}
.pr-pyt[open] summary::after{content:'–';}
.pr-pyt summary:hover{color:var(--brand);}
.pr-pyt summary:focus-visible{outline:3px solid var(--brand-hi); outline-offset:3px;}
.pr-pyt-tresc{padding:0 0 24px; font-size:15.5px; color:var(--gray-1); max-width:64ch;}
.pr-pyt-tresc p + p{margin-top:14px;}

/* ====== FORMULARZ ZGŁOSZENIOWY ======
   Rozszerzenia .formularz z hpp.css: grupy opcji klikanych zamiast pól do wpisania.
   Powód: kandydat wypełnia to najczęściej z telefonu, jedną ręką, często na budowie.
   Klik jest szybszy i mniej zawodny niż wpisywanie. */
.pr-zglos{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start;}
.pr-grupa{margin-bottom:24px;}
.pr-grupa > .pr-etykieta{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
     text-transform:uppercase; color:#5c666f; margin-bottom:11px;}
.pr-opcje{display:flex; flex-wrap:wrap; gap:9px;}
/* Radio i checkbox schowane wizualnie, ale nadal w drzewie dostępności i pod klawiaturą.
   Klikalna jest etykieta, która ma pełne 44 px wysokości (touch target). */
.pr-opcja{position:relative;}
.pr-opcja input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.pr-opcja span{display:inline-flex; align-items:center; min-height:48px; padding:12px 18px;
     border:1px solid var(--steel-2); border-radius:10px; background:var(--bg-alt);
     font-size:15px; color:var(--gray-1); cursor:pointer;
     transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;}
.pr-opcja input:hover + span{border-color:var(--brand); color:var(--ink);}
.pr-opcja input:checked + span{border-color:var(--brand); background:rgba(0,120,191,.08);
     color:#00618f; font-weight:600;}
.pr-opcja input:focus-visible + span{outline:3px solid var(--brand-hi); outline-offset:3px;}
/* checkbox umiejętności — układ jednokolumnowy, bo teksty są dłuższe */
.pr-opcje-kolumna{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.pr-opcje-kolumna .pr-opcja span{width:100%;}

/* pole pliku CV */
.pr-plik{position:relative; border:1px dashed var(--steel-2); border-radius:12px; background:var(--bg-alt);
     padding:20px; text-align:center; transition:border-color .16s ease, background .16s ease;}
.pr-plik:hover{border-color:var(--brand); background:#fff;}
.pr-plik input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;}
.pr-plik .pr-plik-opis{font-size:14.5px; color:var(--gray-1);}
.pr-plik .pr-plik-opis b{color:#00618f;}
.pr-plik .pr-plik-limit{font-size:12.5px; color:#5c666f; margin-top:6px;}
.pr-plik input:focus-visible{outline:3px solid var(--brand-hi); outline-offset:3px;}
.pr-plik-nazwa{font-size:13.5px; color:#00618f; margin-top:10px; word-break:break-all;}

/* Etykieta zgody jest realnym obszarem kliknięcia dla pola wyboru (24 px to za mało).
   Krótsza z dwóch zgód łamała się na dwa wiersze i wychodziła 40 px, czyli poniżej progu. */
.zgoda label{display:flex; align-items:center; min-height:44px;}

/* Pasek boczny formularza — po co to wypełniać.
   Sticky, bo formularz jest sporo wyższy od tej kolumny i bez tego pod danymi
   kontaktowymi zostawała pusta biała płachta na ponad pół ekranu. */
.pr-obok{position:sticky; top:110px;}
.pr-obok .lista li{font-size:15.5px;}
.pr-czas{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
     letter-spacing:.14em; text-transform:uppercase; color:#00618f; background:rgba(0,120,191,.08);
     border:1px solid rgba(0,120,191,.2); border-radius:8px; padding:9px 13px; margin-top:26px;}

/* ====== PASEK ZGŁOSZENIA NA TELEFONIE ======
   Na desktopie niepotrzebny (formularz jest w zasięgu wzroku po jednym przewinięciu),
   na telefonie strona ma ponad 4000 px i CTA znika z pola widzenia na długo. */
.pr-belka{display:none;}

/* ====== RESPONSYWNOŚĆ ====== */
@media (max-width:1024px){
  .pr-drogi,.pr-stawki,.pr-miejsca{grid-template-columns:1fr;}
  .pr-zakres,.pr-zglos,.pr-faq{grid-template-columns:1fr; gap:48px;}
  .pr-obok{position:static;}   /* w jednej kolumnie sticky nie ma czego trzymać */
  .pr-kroki{grid-template-columns:1fr; gap:0;}
  .pr-proces{grid-template-columns:1fr 1fr 1fr; gap:26px 20px;}
  .pr-formy{grid-template-columns:1fr;}
  .pr-narzedzia{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .pr-droga,.pr-stawka,.pr-poziom,.pr-miejsce-tresc{padding:24px;}

  /* Liczby w hero na telefonie.
     Trzy kolumny po ~110 px łamały „50–110 zł" na dwa wiersze i rozjeżdżały
     linię bazową obu kwot. Dwie kolumny na stawki, trzeci wskaźnik pod nimi
     na całą szerokość — kwoty zostają w jednym wierszu i można je porównać. */
  .hero-dane{grid-template-columns:1fr 1fr; gap:20px 14px;}
  .hero-dane .l{white-space:nowrap;}
  .hero-dane > div:last-child{grid-column:1 / -1; padding-top:16px;
       border-top:1px solid rgba(255,255,255,.16);}
  .hero-dane > div:last-child .o{max-width:34ch;}
  .pr-proces{grid-template-columns:1fr; gap:0;}
  .pr-etap{padding:20px 0 20px 30px;}
  .pr-etap::before{left:5px; right:auto; top:0; bottom:0; width:2px; height:auto;}
  .pr-etap:first-child::before{top:22px;}
  .pr-etap:last-child::before{bottom:auto; height:22px;}
  .pr-etap::after{top:16px;}
  .pr-opcje-kolumna{grid-template-columns:1fr;}
  .pr-narzedzia{grid-template-columns:1fr; gap:14px; margin-top:36px;}
  .pr-narzedzie{padding:22px 20px;}
  .pr-zawod{font-size:14px; padding:10px 15px;}
  .pr-faq{gap:32px;}
  .pr-pyt summary{font-size:16.5px;}

  /* Belka zgłoszenia przyklejona do dołu ekranu.
     Startuje SCHOWANA i wjeżdża dopiero, gdy hero wyjedzie z ekranu (klasę dokłada
     hpp-praca.js). Powód: w hero stoi już ten sam przycisk, więc belka pokazana od razu
     dublowała CTA i zasłaniała drugi przycisk hero. */
  .pr-belka{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px;
       padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);
       -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
       border-top:1px solid var(--steel); box-shadow:0 -12px 30px -22px rgba(21,46,61,.8);
       transform:translateY(112%); transition:transform .3s cubic-bezier(.2,.7,.2,1);
       will-change:transform;}
  .pr-belka.widoczna{transform:none;}
  html:not(.js) .pr-belka{transform:none;}   /* bez JS belka po prostu jest */
  .pr-belka .btn{flex:1; padding:14px 18px; min-height:50px; font-size:14.5px;}
  .pr-belka .btn-obrys{flex:0 0 54px; padding:0;}
  /* stopka nie może chować się pod belką */
  footer{padding-bottom:104px;}
}

/* ====== USTAWIENIA UŻYTKOWNIKA ====== */
@media (prefers-reduced-motion: reduce){
  .pr-droga:hover,.pr-poziom:hover,.pr-zawod:hover{transform:none;}
  .pr-miejsce:hover .pr-miejsce-foto img{transform:none;}
  /* belka nadal się pojawia, tylko bez wjazdu — to element nawigacyjny, nie dekoracja */
  .pr-belka{transition:none;}
}