/* ═══════════════════════════════════════════════════════════════════════════
   PTS - komponenty
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · intro marki ─────────────────────────────────────────────────────────
   Sekwencja z księgi (s. 18, „Wideo / Intro”): białe tło, logo wyłania się
   z lewej, zatrzymuje w centrum kadru, następnie powiększa się nieznacznie.
   Odtwarzane raz na sesję.                                                    */

/* Plansza powitalna zakrywa całą stronę, więc domyślnie jej nie ma i pojawia
   się tylko wtedy, gdy jest czym ją zdjąć. Klasę `js-motion` zakłada skrypt
   w nagłówku, a zdejmuje ją bezpiecznik przy nieudanym starcie `app.js` -
   przy wyłączonym JavaScripcie i przy prośbie o ograniczenie ruchu klasy nie
   ma wcale. Bez tego jedna nieudana odpowiedź serwera zostawiałaby
   odwiedzającego przed białym ekranem z logotypem. */
.intro { display: none; }

.js-motion .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: #fff;
}
.intro__logo {
  width: min(46vw, 420px);
  will-change: transform, opacity;
}
.intro.is-done { pointer-events: none; }

/* ── 01 · pasek postępu czytania ──────────────────────────────────────────── */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-nav) + 1);
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ── 02 · nawigacja ───────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-nav);
  width: 100%;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.nav.is-solid::before { opacity: 1; }
.nav.is-solid { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(20, 17, 59, 0.06); }

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  transition: padding var(--t) var(--ease);
}
.nav.is-solid .nav__inner { padding-block: 0.4rem; }

.nav__logo { flex: none; display: block; }

/* Ksiega (s. 6) wymaga na ekranie co najmniej 200 px szerokosci znaku, wiec
   znakiem steruje szerokosc, a wysokosc idzie z proporcji pliku. Wysokosc
   ustawiona tutaj obok szerokosci sciska rysunek do obcej proporcji: SVG
   wpisuje sie wtedy w ramke i maleje, zamiast ja wypelnic.

   Pasek nosi wersje bez podpisu (ksiega s. 5b, wersja alternatywna). Przy tej
   samej, wymaganej szerokosci 200 px jest o 15 px nizsza od pelnej, a przede
   wszystkim nie ma linijki "PUBLIC TRANSPORT SERVICE", ktora schodzila ponizej
   paska i zderzala sie z nadtytulem hero. Pelny logotyp zostaje w stopce
   i w szufladzie mobilnej, gdzie ma miejsce. */
.nav__logo img {
  width: clamp(200px, 15vw, 236px);
  height: auto;
  transition: width var(--t) var(--ease);
}
.nav.is-solid .nav__logo img { width: 200px; }

/* wariant na przezroczystym, ciemnym nagłówku strony */
.nav__logo .logo--light { display: none; }
.nav:not(.is-solid) .nav__logo .logo--dark { display: none; }
.nav:not(.is-solid) .nav__logo .logo--light { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 1.1rem);
  margin-left: auto;
}
.nav__links a {
  position: relative;
  padding: 0.5rem 0.15rem;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav:not(.is-solid) .nav__links a { color: rgba(255, 255, 255, 0.88); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__links a[aria-current="page"] { color: var(--orange-ink); font-weight: 700; }
.nav:not(.is-solid) .nav__links a[aria-current="page"] { color: #fff; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__aside { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.6rem; }

/* Numer telefonu zostaje w jednej linii. Przy weszym oknie lamal sie po
   ostatniej grupie cyfr ("+48 881 242" / "881") i czytal sie wtedy jak dwa
   osobne numery. `nowrap` siedzi tylko tutaj, a nie na `.btn`, bo przyciski
   w tresci maja dluzsze etykiety i tam zawijanie jest potrzebne. */
.nav__aside .btn { white-space: nowrap; }

.nav__lang { display: flex; gap: 0.35rem; }
.nav__lang a {
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: all var(--t-fast) var(--ease);
}
.nav:not(.is-solid) .nav__lang a { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); }
.nav__lang a:hover { border-color: var(--orange); color: var(--orange-ink); }

.nav__burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav:not(.is-solid) .nav__burger { border-color: rgba(255, 255, 255, 0.35); }
.nav__burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--navy);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav:not(.is-solid) .nav__burger span { background: #fff; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__links, .nav__aside .btn { display: none; }
  .nav__burger { display: block; }
}
/* Szuflada istnieje wyłącznie w układzie mobilnym - na desktopie znika z drzewa. */
@media (min-width: 1081px) {
  .drawer { display: none; }
}

/* szuflada mobilna */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--navy-ink);
  color: #fff;
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease-in-out);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
}
.drawer__top img { width: 200px; height: auto; }
.drawer__close {
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1rem var(--gutter);
}
.drawer__links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.drawer__links a span {
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.drawer__links a[aria-current="page"] { color: var(--orange); }
.drawer__foot {
  padding: 1.4rem var(--gutter) 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
  color: var(--on-navy-2);
}
.drawer__foot a { display: block; margin-bottom: 0.35rem; font-weight: 700; color: #fff; }

/* ── 03 · przyciski ───────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), background var(--t) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateX(-101%);
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:hover, .btn:focus-visible { border-color: var(--navy); color: #fff; }
.btn .arrow { transition: transform var(--t) var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--navy { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--navy::before { background: var(--orange); }
.btn--navy:hover, .btn--navy:focus-visible { border-color: var(--orange); color: var(--navy); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: var(--navy-line);
}
.btn--ghost::before { background: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; border-color: var(--navy); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.btn--light::before { background: #fff; }
.btn--light:hover, .btn--light:focus-visible { color: var(--navy); border-color: #fff; }

.btn--sm { padding: 0.7em 1.15em; font-size: var(--fs-micro); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* link tekstowy ze strzałką */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-small);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.tlink:hover { gap: 0.95em; color: var(--orange-ink); }
.section--navy .tlink, .tlink--light { color: #fff; }

/* ── 04 · fotografia: filtr „Deep Blue” (księga s. 15) ─────────────────────── */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--navy-ink);
  isolation: isolate;
}
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04);
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-filter-color);
  opacity: var(--photo-filter-alpha);
  mix-blend-mode: color;
  pointer-events: none;
}
.ph--zoom > img { transition: transform 1.2s var(--ease-out); }
.ph--zoom:hover > img { transform: scale(1.05); }
.ph--r { border-radius: var(--r-lg); }

/* ── 05 · nagłówek podstrony ──────────────────────────────────────────────── */

.phead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 56vh, 640px);
  padding-top: 8rem;
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
  background: var(--navy-ink);
  color: #fff;
  overflow: hidden;
}
.phead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
  transform: scale(1.06);
}
.phead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, rgba(20, 17, 59, 0.92) 8%, rgba(20, 17, 59, 0.62) 55%, rgba(241, 101, 33, 0.26) 100%);
}
.phead__inner { position: relative; z-index: 1; width: 100%; }
.phead h1 { max-width: 20ch; hyphens: auto; overflow-wrap: break-word; }

/* Nagłówki i odnośniki biorą kolor z `theme.json` (granat), a wygenerowana
   z niego reguła `:root :where(h1…)` bije dziedziczenie po `.phead`. Bez
   tych dwóch linii tytuł podstrony jest granatem na granatowym gradiencie
   i znika: na zdjęciach jaśniejszych ledwo się broni, na ciemniejszych nie
   widać go wcale. Dotyczy wszystkich podstron, nie jednej. */
.phead h1 { color: #fff; }
.phead .crumbs a { color: inherit; }
.phead p { max-width: 58ch; margin-top: var(--s-5); color: var(--on-navy-2); font-size: var(--fs-lead); font-weight: 300; }

/* okruchy */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--s-5);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-3);
}
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--orange); font-weight: 700; }

/* ── 06 · karty ───────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  background: #fff;
  border: var(--hair);
  border-radius: var(--r);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
  border-radius: var(--r) var(--r) 0 0;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card p { color: var(--ink-2); font-size: var(--fs-body); }
.card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.card--navy p { color: var(--on-navy-2); }
.card--flat:hover { transform: none; box-shadow: none; }

.card__no {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange-ink);
}
.card--navy .card__no, .fleet__item:hover .card__no { color: var(--orange); }

/* ikona liniowa (księga s. 16: outline, równomierna grubość, bez cieni) */
.ico {
  width: 48px; height: 48px;
  flex: none;
  color: var(--navy);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--orange { color: var(--orange); }
.ico--light { color: #fff; }
.ico--lg { width: 68px; height: 68px; stroke-width: 1.4; }
.ico--sm { width: 24px; height: 24px; stroke-width: 1.8; }

/* rysowanie ikony przy wejściu w kadr */
.js-motion .ico--draw path,
.js-motion .ico--draw circle,
.js-motion .ico--draw rect,
.js-motion .ico--draw line,
.js-motion .ico--draw polyline { stroke-dasharray: 400; stroke-dashoffset: 400; }
.ico--draw.is-in path, .ico--draw.is-in circle, .ico--draw.is-in rect,
.ico--draw.is-in line, .ico--draw.is-in polyline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .ico--draw * { stroke-dashoffset: 0 !important; }
}

/* ── 07 · pasek faktów ────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.facts > div {
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  border-right: var(--hair);
}
.facts > div:last-child { border-right: 0; }
.facts dt {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
}
.facts dt small { font-size: 0.45em; font-weight: 700; color: var(--orange-ink); }
.facts dd {
  margin: 0.6rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(2n) { border-right: 0; }
  .facts > div:nth-child(-n+2) { border-bottom: var(--hair); }
}

/* ── 08 · taśma przewijana ────────────────────────────────────────────────── */

.marquee {
  display: flex;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  user-select: none;
}
.marquee__run {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2.5rem;
  padding: 0.95rem 1.25rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__run > span {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.marquee__run > span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.marquee:hover .marquee__run { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__run { animation: none; }
}

/* ── 09 · stopka ──────────────────────────────────────────────────────────── */

.footer {
  background: var(--navy-ink);
  color: var(--on-navy-2);
  font-size: var(--fs-small);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* Nagłówki stopki to h2, a nie h3: stopka jest osobnym obszarem strony,
   a nie podrozdziałem treści. Na podstronie bez własnych h2 czytnik ekranu
   ogłaszał wcześniej przeskok z h1 wprost do h3. */
.footer h2 {
  margin-bottom: var(--s-4);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer__logo { width: 200px; margin-bottom: var(--s-5); }
.footer a { transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--orange); }
.footer li { margin-bottom: 0.5rem; }
.footer strong { color: #fff; }

.footer__map {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--r);
  filter: grayscale(1) contrast(1.05) opacity(0.85);
  transition: filter var(--t-slow) var(--ease);
}
.footer__map:hover { filter: none; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-micro);
  color: var(--on-navy-3);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ── 10 · formularz ───────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.15rem; }
.field label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  width: 100%;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--orange-wash);
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: var(--fs-micro); color: var(--ink-3); font-weight: 400; letter-spacing: 0; text-transform: none; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-micro); color: var(--ink-2); line-height: 1.5; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--orange); }

.form-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--orange-wash);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

/* ── 11 · akordeon ────────────────────────────────────────────────────────── */

.acc { border-top: var(--hair); }
.acc__item { border-bottom: var(--hair); }
.acc__btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.acc__btn:hover { color: var(--orange-ink); }
.acc__btn .no {
  flex: none;
  min-width: 2.6rem;
  color: var(--orange-ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.acc__btn .sign {
  flex: none;
  margin-left: auto;
  width: 26px; height: 26px;
  position: relative;
}
.acc__btn .sign::before, .acc__btn .sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease);
}
.acc__btn .sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__btn[aria-expanded="true"] { color: var(--navy); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-in-out);
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p, .acc__panel ul { padding-bottom: 1.5rem; color: var(--ink-2); font-size: var(--fs-small); max-width: 78ch; }
.acc__panel ul li { position: relative; padding-left: 1.35rem; margin-bottom: 0.45rem; }
.acc__panel ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--orange);
}

/* ── 12 · lightbox galerii ────────────────────────────────────────────────── */

.lbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 10, 38, 0.94);
  backdrop-filter: blur(6px);
}
.lbox.is-open { display: grid; }
.lbox__fig { position: relative; max-width: 100%; max-height: 100%; margin: 0; text-align: center; }
.lbox__fig img {
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--r);
  object-fit: contain;
}
.lbox__cap { margin-top: 1rem; color: rgba(255, 255, 255, 0.8); font-size: var(--fs-small); }
.lbox__cap b { color: #fff; }
.lbox button {
  position: absolute;
  top: 50%;
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lbox button:hover { background: var(--orange); border-color: var(--orange); }
.lbox__prev { left: clamp(0.5rem, 2vw, 2rem); }
.lbox__next { right: clamp(0.5rem, 2vw, 2rem); }
.lbox__close {
  top: clamp(0.8rem, 3vw, 2rem) !important;
  right: clamp(0.8rem, 3vw, 2rem);
  transform: none !important;
  position: fixed !important;
}

/* ── 13 · zakładki filtrów ────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chips button {
  padding: 0.6rem 1.15rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chips button:hover { border-color: var(--navy); color: var(--navy); }
.chips button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── 14 · smugi (motyw ze znaku graficznego) ──────────────────────────────── */

.streaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.streaks svg { position: absolute; width: 140%; height: auto; opacity: 0.14; }

/* ── 15 · zgoda na cookies ────────────────────────────────────────────────────
   Pasek u dołu ekranu, nie okno na całą stronę. Zasłonięta treść zmusza do
   kliknięcia czegokolwiek, żeby cokolwiek przeczytać, a zgoda wymuszona nie
   jest zgodą. Oba przyciski mają ten sam ciężar wizualny z tego samego
   powodu.                                                                    */

.zgoda {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-zgoda);
  padding: var(--s-4) var(--gutter);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 3px solid var(--navy);
  box-shadow: var(--lift-2);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.zgoda.is-in { transform: translateY(0); }

.zgoda__tresc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  max-width: var(--shell);
  margin-inline: auto;
}
.zgoda__tytul {
  flex: 0 0 100%;
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
}
.zgoda__opis {
  flex: 1 1 32ch;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.zgoda__opis a { color: var(--navy); text-decoration: underline; }
.zgoda__wybor { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.zgoda__wybor .btn { flex: 1 1 auto; justify-content: center; }

/* Na telefonie baner nie może zjeść pół ekranu. Zmierzone przy pierwszej
   wersji: 325 px wysokości przy oknie 568 px, czyli 57% widoku na pytanie,
   które ma zająć chwilę. Przyciski zostają obok siebie, a nie jeden pod
   drugim - to samo w sobie oszczędza jeden wiersz wysokości. */
@media (max-width: 560px) {
  .zgoda { padding-block: var(--s-3); }
  .zgoda__tresc { gap: var(--s-3); }
  .zgoda__tytul { font-size: var(--fs-body); }
  .zgoda__wybor { flex-wrap: nowrap; width: 100%; }
  .zgoda__wybor .btn { flex: 1 1 0; padding-inline: 0.6em; font-size: var(--fs-micro); }
}

.footer__prawne { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.footer__zgoda {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer__zgoda:hover, .footer__zgoda:focus-visible { color: var(--orange); }

/* ── 16 · osłona materiału z serwisu zewnętrznego ─────────────────────────────
   Zajmuje miejsce materiału, dopóki nie ma zgody. Proporcje filmu, żeby
   odsłonięcie nie przesuwało treści pod spodem.                              */

.oslona {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--s-5);
  background: var(--mist-2);
  border: var(--hair);
  border-radius: var(--r);
}
.oslona__karta { max-width: 46ch; text-align: center; }
.oslona__opis {
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.oslona__opis a { color: var(--navy); text-decoration: underline; }

/* ── 17 · spis skrótów (strona 404) ──────────────────────────────────────────
   Ten sam walker co w nawigacji wypisuje odnośniki bez separatorów, bo tam
   rozdziela je siatka nagłówka. Poza nagłówkiem klasa `lista-linkow` nie miała
   żadnych reguł i pozycje sklejały się w jeden ciąg: „01O firmie 02Oferta".  */

.lista-linkow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-6);
  margin-block: var(--s-6);
}
.lista-linkow a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: var(--hair);
  color: var(--navy);
  font-size: var(--fs-h4);
  font-weight: 700;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lista-linkow a span {
  color: var(--orange-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
}
.lista-linkow a:hover,
.lista-linkow a:focus-visible { color: var(--orange-ink); border-color: var(--orange); }