/* ═══════════════════════════════════════════════════════════════════════════
   PTS - warstwa wrażenia

   Ładowany jako ostatni, więc nadpisuje `bloki.css` przy równej
   specyficzności. Siedzi osobno, bo to jest warstwa świadomie podniesiona
   ponad „poprawnie": ma robić wrażenie na spotkaniu, na którym stronę
   ogląda zarząd, i trzymać poziom landinga RailGuard Sentinel.

   Wszystko tutaj stoi na księdze identyfikacji (10.2025): granat #221E5E,
   pomarańcz #F16521, biel, Roboto do wagi Black, ikony i linie bez cieni
   i gradientów, duże przestrzenie na siatce. Żaden kolor nie jest wpisany
   wprost - idą tokeny z `tokens.css`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Szerokość paska przewijania ──────────────────────────────────────────
   `100vw` obejmuje pasek przewijania, a `100%` już nie. Sekcje pełnej
   szerokości dostawały przez to kilka pikseli nadmiaru i strona przewijała
   się w bok na wąskim ekranie. `app.js` wpisuje tu zmierzoną wartość;
   zero jest bezpiecznym startem, bo na urządzeniach z nakładanym paskiem
   różnicy nie ma.                                                          */
:root { --pasek: 0px; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */

/* Hero na wysokość okna. Pierwszy ekran jest jedyną rzeczą, którą zobaczy
   każdy odwiedzający, i jedyną, o której zapamięta, „jak wygląda ta firma".
   `svh` zamiast `vh`, bo na telefonie pasek adresu chowa się w trakcie
   przewijania i `vh` daje wtedy hero wyższe od ekranu.                     */
.hero-blok.wp-block-cover {
  min-height: min(100svh, 56rem);
  align-items: center;
}

/* Nagłówek hero w skali, w której nazwa firmy jest obrazem, a nie napisem.
   Roboto Black jest w księdze (s. 11), więc waga 900 to użycie kroju
   zgodnie z jego przeznaczeniem, a nie pogrubienie na siłę.                */
.hero-blok h1 {
  max-width: 26ch;
  /* Bez `hyphens: auto`: Firefox dzielił wyrazy dywizem także wtedy, gdy
     mieściły się w wierszu. Awaryjne łamanie zbyt długiego słowa zostaje
     w `overflow-wrap`.                                                    */
  overflow-wrap: break-word;
  font-weight: 900;
  font-size: clamp(1.7rem, 0.5rem + 5.2vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-block: var(--s-4) var(--s-4);
}

/* Kontur pomarańczowy na drugim członie nagłówka zszedł na życzenie PTS
   (Iwona, 2026-08-31): krój konturowy się nie podobał, a słów bez decyzji
   czytelnika nie podkreślamy. Kursywa w edytorze daje teraz pomarańczowe
   wypełnienie z `bloki.css`, ta sama zasada co na podstronach. */

.hero-blok h1 strong {
  font-weight: inherit;
  color: var(--orange);
}

.hero-blok .hero-blok__sub {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  color: var(--on-navy-2);
}

/* Zero przebija auto-centrowanie ukladu constrained, ale tylko w hero
   dosunietym do lewej. W kompozycji osiowej (ma-przod) kolumne ustawia
   wlasnie margines auto i zero rozjezdza podtytul wzgledem naglowka. */
.hero-blok:not(.ma-przod) .hero-blok__sub {
  margin-inline: 0 !important;
}

/* Kadr hero na telefonie: pionowy wycinek srodka pokazywal jasna pustke
   miedzy czolami pojazdow - nie bylo widac, ze to pociagi (przeglad
   mobilny 2026-09-05). Okno kadru schodzi na lewe czolo. Warstwa przodu
   jedzie razem ze zdjeciem, bo obie musza kadrowac identycznie, inaczej
   pierwszy plan dostaje podwojny obrys. `!important` bije inline'owy
   punkt ogniskowy z edytora. Glebia (canvas) jest na tej szerokosci
   wylaczona w `app.js`, wiec kadr niesie samo zdjecie. */
@media (max-width: 860px) {
  .hero-blok.ma-przod .wp-block-cover__image-background { object-position: 15% 50% !important; }
  .hero-blok.ma-przod .hero-blok__przod { background-position: 15% 50%; }
}

/* Przyciski hero na telefonie: rowna pelna szerokosc zamiast dwoch
   pigulek roznej dlugosci jedna pod druga (Oliver, 2026-09-05). */
@media (max-width: 720px) {
  .hero-blok .wp-block-buttons { width: 100%; }
  .hero-blok .wp-block-button { width: 100%; }
  .hero-blok .wp-block-button .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ═══ PAS TERMINÓW ═══════════════════════════════════════════════════════
   Wąski pas pod hero z językiem branży: oznaczenia przeglądów, typy taboru,
   certyfikaty. Mówi „znamy się na tym" szybciej niż akapit, a przewoźnik
   czyta go jak spis kompetencji. Ruch jest wolny i bez przycisków, bo to
   ozdoba pasa, a nie karuzela z treścią, której ktoś mógłby nie zdążyć
   przeczytać: każdy termin wraca co kilkanaście sekund.                    */
.pas-terminow {
  --tempo: 46s;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
  border-block: 1px solid rgba(255, 255, 255, 0.10);
  /* Stała wysokość zamiast paddingu: pas jest granicą pierwszego ekranu
     na stronie głównej, więc hero musi umieć odjąć jego wysokość. */
  height: var(--pas-terminow-h);
}

.pas-terminow__tor {
  display: flex;
  width: max-content;
  animation: pts-przesuw var(--tempo) linear infinite;
}

.pas-terminow__grupa {
  display: flex;
  align-items: center;
  flex: none;
  gap: 3rem;
  padding-right: 3rem;
}

.pas-terminow span {
  color: var(--on-navy-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pas-terminow span b {
  color: var(--on-navy);
  font-weight: 700;
}

.pas-terminow span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 1.1rem;
  vertical-align: 0.15em;
  background: var(--orange);
}

/* Krawędzie wygaszone, żeby terminy nie ucinały się w pół litery. */
.pas-terminow::before,
.pas-terminow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 7rem);
  z-index: 2;
  pointer-events: none;
}

.pas-terminow::before { left: 0;  background: linear-gradient(to right, var(--navy-deep), transparent); }
.pas-terminow::after  { right: 0; background: linear-gradient(to left,  var(--navy-deep), transparent); }

@keyframes pts-przesuw {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pas-terminow__tor { animation: none; }
}


/* Sekcja na granacie i pas terminów muszą sięgać krawędzi okna. Reguła
   pełnej szerokości w `bloki.css` wymienia klasy po nazwie, więc każda nowa
   musi się do niej dopisać - inaczej ciemny prostokąt urywa się na 1280 px
   i czyta jak baner wklejony w stronę. Marginesy liczą `50%`, co przy
   rodzicu o szerokości kolumny daje dokładnie wyjście poza nią. */
.wp-block-group.alignfull.section--navy {
  width: calc(100vw - var(--pasek, 0px));
  max-width: calc(100vw - var(--pasek, 0px));
  margin-left: calc(50% - (100vw - var(--pasek, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--pasek, 0px)) / 2);
  padding-inline: max(var(--gutter), calc((100vw - var(--pasek, 0px) - var(--shell)) / 2));
}

.wp-block-group.alignfull.section--navy .wp-block-columns.alignwide {
  margin-inline: 0;
  max-width: none;
}

/* Pas terminów wstawia się blokiem HTML, więc nie ma własnego wyrównania
   WordPressa i musi wyjść z kolumny sam. */
.pas-terminow {
  width: calc(100vw - var(--pasek, 0px));
  max-width: calc(100vw - var(--pasek, 0px));
  margin-left: calc(50% - (100vw - var(--pasek, 0px)) / 2);
  margin-right: calc(50% - (100vw - var(--pasek, 0px)) / 2);
}

/* ═══ PIERWSZY EKRAN STRONY GŁÓWNEJ ══════════════════════════════════════
   Pas terminów jest granicą pierwszego widoku (Oliver, 2026-09-04): hero
   wypełnia okno pomniejszone o wysokość pasa, pas domyka ekran, a wszystko
   niżej zaczyna się dopiero po przewinięciu. `svh` zamiast `vh`, żeby na
   telefonie granicy nie przesuwał chowający się pasek adresu.             */
:root { --pas-terminow-h: 3rem; }

.home .hero-blok.wp-block-cover {
  min-height: calc(100svh - var(--pas-terminow-h));
}

.home .pas-terminow { margin-top: 0; margin-bottom: 0; }

/* ═══ NAGŁÓWKI SEKCJI ════════════════════════════════════════════════════ */

.section h2,
.section--mist h2,
.cta h2 {
  /* Skala zeszla z 4.3 rem: Iwona (2026-08-31) chce krotszych sekcji
     i mniej tekstu na ekran. Drugie zejscie (Iwona, 2026-09-08): H2 ma
     byc wyraznie mniejszy niz H1 na kazdej stronie - 3.3 rem bylo
     praktycznie rowne tytulowi podstrony (3.6 rem). Ta skala byla
     wczesniej wyjatkiem Kariery; teraz obowiazuje wszedzie. */
  font-size: clamp(1.6rem, 1rem + 1.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.026em;

  /* Bez `max-width`. Uklad „constrained" WordPressa centruje marginesem
     `auto` z `!important` kazdy blok wezszy od kolumny, wiec ograniczenie
     szerokosci naglowka konczy sie naglowkiem na srodku, mimo tekstu
     wyrownanego do lewej. Dlugosc wiersza trzyma tu `text-wrap: balance`,
     ktory rozklada slowa rowno i nie zmienia szerokosci bloku. */
  text-wrap: balance;
}

/* Naglowki trzeciego rzedu w sekcjach (Kariera: „Pozostale oferty pracy",
   „Dla uczniow i studentow", „Wyslij CV" - Iwona, 2026-09-08): stopien
   nizej niz H2, ta sama waga jezyka co reszta naglowkow. Wybiera tylko
   bezposrednie dzieci sekcji, zeby nie ruszac nazw rejestru i kart,
   ktore maja wlasna skale. */
.section > h3,
.section--mist > h3,
.section > .section-head h3 {
  font-size: clamp(1.3rem, 0.95rem + 0.9vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* Pas wezwania w jednej formie na calej stronie (Iwona, 2026-09-06):
   naglowek w jednym wierszu i przycisk pod nim, nic wiecej. Stopien
   nizszy od naglowka sekcji, zeby zdanie nie lamalo sie przed telefonowa
   szerokoscia; ponizej 721 px i tak wygrywa zawijanie, bo `nowrap`
   wypychalby pas poza ekran. Nadpisanie stoi PO regule naglowkow sekcji
   i po `.cta h2 { max-width: 18ch }` z pages.css - stad tez `max-width`. */
.cta h2 {
  max-width: none;
  /* Pas ma byc czytelny, ale najmniej widoczny jak sie da (Iwona przez
     Olivera, 2026-09-07, ogladane na Chrome przy 100%): naglowek schodzi
     ze skali naglowkow sekcji do stopnia zwyklego wyrozniania. */
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-navy-2);
}

@media (min-width: 721px) {
  .cta h2 { white-space: nowrap; }
}

/* Caly pas nizszy: redefinicja odstepu dziala na padding wpisany w tresci
   (var --wp--preset--spacing--60 w markupie), wiec baza zostaje bez zmian. */
.cta {
  --wp--preset--spacing--60: 1.6rem;
  --wp--preset--spacing--40: 0.9rem;
}

/* Przycisk malutki i dyskretny: obrys zamiast pomaranczowego wypelnienia.
   To nie tylko estetyka - biel na pomaranczu z ksiegi (3.17:1) wymaga
   stopnia >=18.66 px przy wadze 700, wiec maly przycisk nie ma prawa byc
   pomaranczowy. Bialy tekst na granacie nie ma tego progu. */
.cta .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--on-navy-2);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5em 1.25em;
}

.cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* ═══ SEKCJA NA GRANACIE ═════════════════════════════════════════════════
   Rytm jasne-ciemne-jasne robi ze strony ciąg rozdziałów zamiast jednego
   długiego zwoju. Siatka w tle jest z księgi (s. 17: układ modułowy oparty
   na siatce), rysowana liniami bez cieni i gradientów.                     */
.section--navy {
  position: relative;
  background: var(--navy-ink);
  color: var(--on-navy);
  isolation: isolate;
}

.section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
}

.section--navy h2,
.section--navy h3,
.section--navy strong { color: var(--on-navy); }

.section--navy p { color: var(--on-navy-2); }

.section--navy .wp-block-list { color: var(--on-navy-2); }

.section--navy .wp-block-list li::marker { color: var(--orange); }

/* Karta na granacie: kontur zamiast białej płyty. Biała płyta na ciemnym
   tle rozbija sekcję na kafelki i gubi wrażenie jednej przestrzeni.        */
.section--navy .card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.section--navy .card h3 { color: var(--on-navy); }
.section--navy .card p  { color: var(--on-navy-2); }

/* ═══ KARTY ══════════════════════════════════════════════════════════════ */

.card {
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, transform 0.25s ease;
  height: 100%;
}

.card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}

/* Uklad "constrained" WordPressa nadaje kazdemu dziecku
   `margin-inline: auto !important`. Karta jest kolumna flex, a w niej
   margines auto bije rozciagniecie: krotki nadtytul i krotki naglowek
   zbiegaja sie do srodka, dlugi akapit zostaje przy lewej i karta czyta
   sie jak zlozona z dwoch roznych wyrownan. `text-align` tego nie zdejmie,
   bo przesuniete jest pudelko, a nie tekst w srodku. */
.card > * {
  margin-inline: 0 !important;
}

.card,
.card h3,
.card p {
  text-align: left;
}

.card h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  margin-bottom: var(--s-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* ═══ GALERIA ════════════════════════════════════════════════════════════ */

/* Zdjęcia realizacji dostają ten sam filtr Deep Blue co reszta materiałów
   (księga s. 15). Bez tego galeria jest jedynym miejscem na stronie, gdzie
   kolorystyka odjeżdża od marki.                                           */
.galeria img {
  filter: saturate(0.86) hue-rotate(-6deg) contrast(1.04);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.galeria img:hover {
  filter: none;
  transform: scale(1.02);
}