/* ═══════════════════════════════════════════════════════════════════════════
   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: 20ch;
  hyphens: auto;
  overflow-wrap: break-word;
  font-weight: 900;
  font-size: clamp(1.7rem, 0.32rem + 7.45vw, 7.25rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-block: var(--s-4) var(--s-4);
}

/* Drugi człon nagłówka wychodzi konturem, tak jak „SENTINEL" na landingu
   produktu. To jest ten sam gest marki na obu stronach PTS, a nie ozdobnik:
   brief prosił wprost o spójność z RailGuard Sentinel.

   Redakcja dostaje to pod zwykłym przyciskiem kursywy, bez wpisywania klas.
   `strong` zostaje wypełnionym pomarańczem, więc są dwa akcenty do wyboru. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .hero-blok h1 em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.02em, 3px) var(--orange);
    paint-order: stroke fill;
  }
}

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

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

/* ═══ 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;
  overflow: hidden;
  background: var(--navy-deep);
  border-block: 1px solid rgba(255, 255, 255, 0.10);
  padding-block: 0.85rem;
}

.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);
}

/* ═══ NUMERACJA SEKCJI ═══════════════════════════════════════════════════
   Nadtytuł sekcji dostaje numer: „01 - CO OFERUJEMY". Numer liczy CSS, więc
   przestawienie sekcji w edytorze przenumerowuje stronę samo i redakcja nie
   musi o tym pamiętać. Licznik zeruje się na obszarze treści, żeby nagłówek
   i stopka nie weszły do numeracji.                                        */
.entry-content,
article {
  counter-reset: pts-sekcja;
}

.section > .eyebrow::before,
.section > .wp-block-group > .eyebrow::before,
.section .wp-block-columns > .wp-block-column > .eyebrow::before {
  counter-increment: pts-sekcja;
  content: counter(pts-sekcja, decimal-leading-zero) " -";
  width: auto;
  height: auto;
  margin-right: 0.75em;
  background: none;
  color: inherit;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* Hero i wezwanie do kontaktu zostają poza numeracją: pierwsze jest przed
   treścią, drugie za nią, a numer na nich sugerowałby rozdział, którego
   nie ma. */
.hero-blok .eyebrow::before,
.cta .eyebrow::before,
.card .eyebrow::before {
  counter-increment: none;
  content: "";
  width: 2.4rem;
  height: 2px;
  margin-right: 0;
  background: var(--orange);
}

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

.section h2,
.section--mist h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.3vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;

  /* 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;
}

/* ═══ 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);
}