/* =====================================================================
   BIZNES-TRADER 2.0 — arkusz stylów
   ---------------------------------------------------------------------
   Świat wizualny: czerń z granatem, chłodny błękit danych jako akcent.
   Bliżej terminala finansowego i kancelarii niż portalu ogłoszeniowego.

   Jeden plik, cache'owany na rok przez nazwę z odciskiem w adresie.
   Wszystkie kontrasty policzone wg WCAG, nie ocenione wzrokiem.
   ===================================================================== */

:root {
  /* --- powierzchnie --- */
  --tlo:        #070A0F;   /* prawie czerń z granatowym odchyleniem */
  --panel:      #0D131C;   /* granat — karty, listy */
  --panel2:     #131C28;   /* granat jaśniejszy — nagłówki tabel, hover */
  --linia:      #1C2836;
  --linia-moc:  #2B3B4E;

  /* --- tekst (kontrast na --tlo / --panel / --panel2) --- */
  --tekst:      #E6EDF5;   /* 16.8 / 15.8 / 14.5 : 1 */
  --tekst2:     #A8BACE;   /*  10.0 /  9.4 /  8.6 : 1 */
  --przygasly:  #7E93A9;   /*   6.3 /  5.9 /  5.4 : 1 */

  /* --- akcent i znaczenia --- */
  --akcent:     #4FA8FF;   /* 7.9 : 1 — akcja, cena, zaznaczenie */
  --akcent-tlo: #10233A;
  --wzrost:     #3FB984;
  --spadek:     #E5534B;
  --zloto:      #C9A227;   /* wyróżnienie płatne */

  /* UWAGA: biały tekst na --akcent daje 2.5:1. Przyciski mają tekst ciemny. */
  --na-akcencie: #06131F;

  /* --- typografia --- */
  --f-naglowek: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-tekst:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dane:     "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- skala odstępów, baza 4 --- */
  --o1: .25rem; --o2: .5rem;  --o3: .75rem; --o4: 1rem;
  --o5: 1.5rem; --o6: 2rem;   --o7: 3rem;   --o8: 4rem;

  --szer: 1240px;
  --promien: 3px;            /* ostro, instytucjonalnie — nie zaokrąglamy na miękko */
}

/* Projekt jest ciemny z wyboru, nie z ustawienia systemu.
   Deklarujemy to wprost, żeby formanty przeglądarki się dopasowały. */
:root { color-scheme: dark; accent-color: var(--akcent); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Powierzchnie przeglądarki należą do projektu tak samo jak reszta. */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--akcent); color: var(--na-akcencie); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tlo); }
::-webkit-scrollbar-thumb { background: var(--linia-moc); border: 3px solid var(--tlo); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--przygasly); }

.kontener { max-width: var(--szer); margin-inline: auto; padding-inline: var(--o4); }
@media (min-width: 700px) { .kontener { padding-inline: var(--o5); } }

/* Odsyłacz dla klawiatury — pierwszy element w kodzie, widoczny dopiero po Tab. */
.pomin {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akcent); color: var(--na-akcencie);
  padding: var(--o3) var(--o4); font-weight: 600;
}
.pomin:focus { left: var(--o4); top: var(--o2); }

/* =====================================================================
   PASEK GÓRNY — notowania. Sygnał „to jest serwis o pieniądzach".
   ===================================================================== */
/* ---------------------------------------------------------------------
   PASEK NOTOWAŃ — NIERUCHOMY, I TO JEST DECYZJA

   Jadącej liczby nie da się przeczytać: kto ją przegapi, czeka, aż wróci.
   Do tego WCAG 2.2.2 (poziom A) każe dać przycisk zatrzymania treści,
   która sama się rusza dłużej niż 5 sekund — a „pauza" nad paskiem kursów
   wygląda dokładnie tak głupio, jak brzmi. Terminal Bloomberga też nie
   przewija; przewija telewizja finansowa dla detalu.

   Na wąskim ekranie pasek NIE zawija się do trzech linijek, tylko
   przesuwa palcem. Przewija się wtedy, kiedy chce tego klient.
   --------------------------------------------------------------------- */
.tasma {
  background: #04070B;
  border-bottom: 1px solid var(--linia);
  font-family: var(--f-dane);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--przygasly);
  padding: var(--o2) 0;
}
.tasma__lista {
  display: flex; gap: var(--o5); margin: 0; padding: 0; list-style: none;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Pasek przewijania znika, bo to jest jedna linijka tekstu, a nie okno
     z treścią — widoczny suwak pod kursami wygląda jak usterka. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.tasma__lista::-webkit-scrollbar { display: none; }
.tasma li { white-space: nowrap; scroll-snap-align: start; }
.tasma b { color: var(--tekst2); font-weight: 500; }
.tasma .w { color: var(--wzrost); }
.tasma .s { color: var(--spadek); }
/* Wartość z poprzedniego pobrania: źródło nie odpowiedziało. Przygaszona,
   bez strzałki. Lepsza stara liczba niż pusty pasek, ale klient ma prawo
   widzieć różnicę. */
.tasma__stare { opacity: .55; }
.tasma__kiedy { margin-left: auto; padding-left: var(--o4); color: var(--przygasly); opacity: .7; }

/* Na wąskim ekranie pasek na pewno wychodzi poza krawędź. Ścięta w pół
   liczba przy krawędzi wygląda jak usterka; gasnący brzeg wygląda jak
   zaproszenie do przesunięcia palcem. Maska jest nieruchoma — to nadal
   nie jest animacja, tylko gradient. Na szerokim ekranie maski nie ma,
   bo tam wszystko się mieści i przygaszałaby ostatnią wartość bez powodu. */
@media (max-width: 860px) {
  .tasma__lista {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .tasma__kiedy { margin-left: 0; }
}

/* =====================================================================
   NAGŁÓWEK
   ===================================================================== */
.gora { background: var(--tlo); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 40; }
.gora__rzad { display: flex; align-items: center; gap: var(--o4); min-height: 68px; }

.logo { font-family: var(--f-naglowek); font-size: 1.5rem; font-weight: 600; color: var(--tekst);
        letter-spacing: -.02em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--akcent); }

.menu { display: flex; gap: var(--o5); margin-left: auto; align-items: center; }
.menu a {
  color: var(--tekst2); font-size: .95rem; font-weight: 500;
  padding: var(--o2) 0; border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--akcent); text-decoration: none; }

/* Uwaga na kaskadę: .menu a ma wyższą specyficzność niż .przycisk,
   więc przycisk w menu przejmował kolor linku i tekst stawał się nieczytelny.
   Deklarujemy oba selektory razem zamiast podbijać wagę !important. */
.przycisk, .menu a.przycisk {
  background: var(--akcent); color: var(--na-akcencie);
  padding: var(--o2) var(--o4); border-radius: var(--promien);
  font-weight: 600; font-size: .92rem; border: 0; cursor: pointer;
  display: inline-block; white-space: nowrap;
}
.przycisk:hover, .menu a.przycisk:hover { background: #74BCFF; color: var(--na-akcencie);
  text-decoration: none; border-bottom-color: transparent; }
.przycisk--cichy, .menu a.przycisk--cichy { background: transparent; color: var(--tekst2);
  border: 1px solid var(--linia-moc); }
.przycisk--cichy:hover { background: var(--panel2); color: var(--tekst); }

.hamburger { display: none; background: none; border: 1px solid var(--linia-moc);
             color: var(--tekst); padding: var(--o2) var(--o3); border-radius: var(--promien);
             font-size: 1rem; cursor: pointer; margin-left: auto; }

@media (max-width: 860px) {
  .hamburger { display: block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--linia); padding: var(--o2) var(--o4) var(--o4);
  }
  .menu[data-otwarte="1"] { display: flex; }
  .menu a { padding: var(--o3) 0; border-bottom: 1px solid var(--linia); }
  .menu .przycisk { margin-top: var(--o3); text-align: center; }
}

/* =====================================================================
   WYSZUKIWARKA
   ===================================================================== */
.szukaj { display: flex; gap: var(--o2); }
.szukaj input {
  flex: 1; min-width: 0;
  background: var(--panel); border: 1px solid var(--linia-moc); color: var(--tekst);
  padding: var(--o3) var(--o4); border-radius: var(--promien); font: inherit; font-size: .95rem;
}
.szukaj input::placeholder { color: var(--przygasly); }
.szukaj input:focus { border-color: var(--akcent); outline: none; }

/* =====================================================================
   NAGŁÓWEK STRONY
   ===================================================================== */
.naglowek { padding: var(--o6) 0 var(--o5); border-bottom: 1px solid var(--linia); }
.okruszki {
  font-family: var(--f-dane); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o3);
}
.okruszki a { color: var(--przygasly); }
.okruszki a:hover { color: var(--akcent); }

h1 {
  font-family: var(--f-naglowek); font-weight: 600;
  font-size: 2.125rem; line-height: 1.15; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
.podtytul { color: var(--tekst2); margin: var(--o3) 0 0; max-width: 65ch; }

h2 { font-family: var(--f-naglowek); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
     margin: 0 0 var(--o4); line-height: 1.2; }
h3 { font-family: var(--f-naglowek); font-size: 1.15rem; font-weight: 600; margin: 0; line-height: 1.3; }

.sekcja { margin: var(--o7) 0 0; }
.sekcja__gora { display: flex; align-items: baseline; justify-content: space-between;
                gap: var(--o4); border-bottom: 2px solid var(--linia-moc); padding-bottom: var(--o2);
                margin-bottom: var(--o4); }
.sekcja__gora h2 { margin: 0; }
.sekcja__gora a { font-family: var(--f-dane); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

/* etykieta sekcji — rola, nie ozdoba: mówi czym jest zbiór poniżej */
.etykieta {
  font-family: var(--f-dane); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--przygasly);
}

/* =====================================================================
   UKŁAD DWUKOLUMNOWY
   ===================================================================== */
.uklad { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--o7); align-items: start;
         padding: var(--o5) 0 var(--o8); }
@media (max-width: 1000px) { .uklad { grid-template-columns: 1fr; gap: var(--o6); } }
.bok { display: grid; gap: var(--o5); position: sticky; top: 88px; }
@media (max-width: 1000px) { .bok { position: static; } }

/* =====================================================================
   LISTA OFERT — gęste wiersze, nie kafle.
   Przy 20 tysiącach ogłoszeń kafle marnują ekran; wiersz z ceną
   wyrównaną do prawej skanuje się tak, jak notowania.
   ===================================================================== */
.oferty { border-top: 1px solid var(--linia); }

.oferta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--o2) var(--o5);
  align-items: baseline;
  padding: var(--o4) var(--o3);
  border-bottom: 1px solid var(--linia);
  transition: background .12s;
  position: relative;
}
.oferta:hover { background: var(--panel); }
.oferta--wyroz { background: linear-gradient(90deg, rgba(201,162,39,.07), transparent 40%); }
.oferta--wyroz::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--zloto);
}

.oferta__tytul { font-family: var(--f-naglowek); font-size: 1.08rem; font-weight: 600; line-height: 1.35; margin: 0; }
.oferta__tytul a { color: var(--tekst); }
.oferta__tytul a:hover { color: var(--akcent); text-decoration: none; }

.oferta__opis { color: var(--tekst2); font-size: .92rem; margin: var(--o1) 0 0; max-width: 78ch; }

.oferta__meta {
  font-family: var(--f-dane); font-size: .74rem; letter-spacing: .04em;
  color: var(--przygasly); margin: var(--o2) 0 0;
  display: flex; gap: var(--o3); flex-wrap: wrap; align-items: center;
}
.oferta__meta .znacznik {
  background: var(--panel2); border: 1px solid var(--linia); color: var(--tekst2);
  padding: 1px var(--o2); border-radius: var(--promien);
}
.oferta__meta .zloty { color: var(--zloto); border-color: rgba(201,162,39,.4); }

.oferta__cena {
  grid-row: 1 / span 3; grid-column: 2;
  font-family: var(--f-dane); font-size: 1.15rem; font-weight: 600;
  color: var(--akcent); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; align-self: center;
}
.oferta__cena small {
  display: block; font-family: var(--f-tekst); font-size: .72rem; font-weight: 400;
  color: var(--przygasly); letter-spacing: 0; margin-top: 2px;
}
@media (max-width: 620px) {
  .oferta { grid-template-columns: 1fr; }
  .oferta__cena { grid-row: auto; grid-column: 1; text-align: left; align-self: start; }
}

/* =====================================================================
   KAFLE — tylko tam, gdzie treść jest równorzędna (wyróżnione na głównej)
   ===================================================================== */
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: var(--o4); }
.kafel {
  background: var(--panel); border: 1px solid var(--linia); border-radius: var(--promien);
  padding: var(--o4); display: flex; flex-direction: column; gap: var(--o2);
  border-top: 2px solid var(--zloto);
}
.kafel:hover { border-color: var(--linia-moc); border-top-color: var(--zloto); }
.kafel h3 { font-size: 1rem; }
.kafel h3 a { color: var(--tekst); }
.kafel h3 a:hover { color: var(--akcent); text-decoration: none; }
.kafel__cena { font-family: var(--f-dane); font-weight: 600; color: var(--akcent);
               font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--o2); }
.kafel__meta { font-family: var(--f-dane); font-size: .72rem; color: var(--przygasly); }

/* =====================================================================
   WIADOMOŚCI
   ===================================================================== */
.wpisy { display: grid; gap: 0; border-top: 1px solid var(--linia); }
.wpis { padding: var(--o4) var(--o3); border-bottom: 1px solid var(--linia); }
.wpis:hover { background: var(--panel); }
.wpis h3 a { color: var(--tekst); }
.wpis h3 a:hover { color: var(--akcent); text-decoration: none; }
.wpis__data { font-family: var(--f-dane); font-size: .72rem; letter-spacing: .06em;
              color: var(--przygasly); text-transform: uppercase; margin: 0 0 var(--o1); }
.wpis p { color: var(--tekst2); font-size: .94rem; margin: var(--o2) 0 0; max-width: 78ch; }

/* =====================================================================
   TREŚĆ ARTYKUŁU I OFERTY
   ===================================================================== */
.tresc { font-size: 1.05rem; line-height: 1.75; color: var(--tekst2); max-width: 70ch; }
.tresc > *:first-child { margin-top: 0; }
.tresc p { margin: 0 0 var(--o4); }
.tresc h2, .tresc h3 { color: var(--tekst); margin: var(--o6) 0 var(--o3); }
.tresc ul, .tresc ol { padding-left: var(--o5); margin: 0 0 var(--o4); }
.tresc li { margin-bottom: var(--o2); }
.tresc img { border-radius: var(--promien); margin: var(--o4) 0; }
.tresc strong { color: var(--tekst); }
.tresc blockquote {
  margin: var(--o5) 0; padding-left: var(--o4);
  border-left: 1px solid var(--akcent); color: var(--tekst); font-style: normal;
}
.tresc table { width: 100%; border-collapse: collapse; margin: var(--o4) 0; font-size: .95rem; }
.tresc th, .tresc td { padding: var(--o2) var(--o3); border-bottom: 1px solid var(--linia); text-align: left; }
.tresc th { color: var(--tekst); font-family: var(--f-dane); font-size: .76rem;
            text-transform: uppercase; letter-spacing: .06em; }
.przewijane { overflow-x: auto; }

/* --- pasek danych oferty: to jest ten „terminalowy" moment --- */
.dane {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 1px; background: var(--linia); border: 1px solid var(--linia);
  border-radius: var(--promien); overflow: hidden; margin: 0 0 var(--o5);
}
.dane > div { background: var(--panel); padding: var(--o3) var(--o4); }
.dane dt { font-family: var(--f-dane); font-size: .68rem; letter-spacing: .12em;
           text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o1); }
.dane dd { margin: 0; font-family: var(--f-dane); font-size: 1.05rem; font-weight: 600;
           color: var(--tekst); font-variant-numeric: tabular-nums; line-height: 1.3; }
.dane dd.akcent { color: var(--akcent); }

/* =====================================================================
   BLOK KONTAKTOWY
   ===================================================================== */
.kontakt { background: var(--panel); border: 1px solid var(--linia-moc); border-radius: var(--promien);
           padding: var(--o4); }
.kontakt h2 { font-family: var(--f-dane); font-size: .72rem; letter-spacing: .12em;
              text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o3); }
.kontakt__poz { display: block; padding: var(--o2) 0; border-bottom: 1px solid var(--linia);
                color: var(--tekst); font-family: var(--f-dane); font-size: .95rem; }
.kontakt__poz:last-of-type { border-bottom: 0; }
.kontakt__poz:hover { color: var(--akcent); text-decoration: none; }
.kontakt__poz span { display: block; font-family: var(--f-tekst); font-size: .7rem;
                     color: var(--przygasly); letter-spacing: .06em; text-transform: uppercase; }

/* =====================================================================
   BLOKI BOCZNE
   ===================================================================== */
.blok { background: var(--panel); border: 1px solid var(--linia); border-radius: var(--promien); }
.blok__gora { padding: var(--o3) var(--o4); border-bottom: 1px solid var(--linia); background: var(--panel2); }
.blok__gora h2 { margin: 0; font-family: var(--f-dane); font-size: .72rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--tekst2); }
.blok ul { list-style: none; margin: 0; padding: var(--o2) var(--o4) var(--o3); }
.blok li a { display: flex; justify-content: space-between; gap: var(--o3);
             padding: var(--o2) 0; color: var(--tekst2); font-size: .93rem; }
.blok li a:hover { color: var(--akcent); text-decoration: none; }
.blok li a b { font-family: var(--f-dane); font-size: .78rem; color: var(--przygasly); font-weight: 500; }

/* =====================================================================
   SLOTY REKLAMOWE
   Sześć pozycji przeniesionych ze starego serwisu. Renderowane
   serwerowo i pod neutralnymi nazwami klas — nie „ad", nie „banner".
   ===================================================================== */
.slot { margin: var(--o5) 0; text-align: center; }
.slot__etykieta {
  font-family: var(--f-dane); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o2); text-align: left;
}
.slot__link { display: inline-block; max-width: 100%; }
.slot__link img { border-radius: var(--promien); margin-inline: auto; }
.slot__tekst { display: block; background: var(--panel); border: 1px solid var(--linia-moc);
               border-radius: var(--promien); padding: var(--o5) var(--o4); }
.slot__tekst strong { display: block; font-family: var(--f-naglowek); font-size: 1.1rem; color: var(--tekst); }
.slot__tekst small { display: block; color: var(--tekst2); margin-top: var(--o1); }
.slot__partner { font-family: var(--f-dane); font-size: .68rem; color: var(--przygasly);
                 margin: var(--o2) 0 0; text-align: left; }

.slot--wolny .slot__oferta {
  background: var(--akcent-tlo); border: 1px dashed var(--linia-moc); border-radius: var(--promien);
  padding: var(--o5) var(--o4); margin: 0;
}
.slot--wolny strong { display: block; font-family: var(--f-naglowek); font-size: 1.05rem; color: var(--tekst); }
.slot--wolny small { display: block; font-family: var(--f-dane); font-size: .72rem;
                     color: var(--przygasly); margin-top: var(--o1); }
.slot--wolny .slot__cta { display: inline-block; margin-top: var(--o3); font-family: var(--f-dane);
                          font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.slot--rectangle, .slot--skyscraper { margin-top: 0; }

/* =====================================================================
   STRONICOWANIE
   ===================================================================== */
.strony { display: flex; flex-wrap: wrap; gap: var(--o2); margin: var(--o6) 0 0; align-items: center; }
.strony a, .strony span {
  min-width: 2.5rem; text-align: center; padding: var(--o2) var(--o3);
  border: 1px solid var(--linia); border-radius: var(--promien);
  font-family: var(--f-dane); font-size: .85rem; color: var(--tekst2);
}
.strony a:hover { border-color: var(--akcent); color: var(--akcent); text-decoration: none; }
.strony .teraz { background: var(--akcent); color: var(--na-akcencie); border-color: var(--akcent); font-weight: 600; }
.strony .przerwa { border: 0; color: var(--przygasly); min-width: auto; padding-inline: 0; }

/* =====================================================================
   PRZEŁĄCZNIK KOLEJNOŚCI OFERT
   ---------------------------------------------------------------------
   Te same proporcje co stronicowanie — to jest to samo urządzenie
   sterujące listą, tylko na drugim jej końcu. Aktywny stan rysujemy
   ramką i kolorem akcentu, nie wypełnieniem: pełne tło ma na tej stronie
   przycisk „Szukaj" i dwa równie mocne elementy obok siebie zaczęłyby
   ze sobą konkurować o kliknięcie.
   ===================================================================== */
.sortowanie {
  display: flex; flex-wrap: wrap; gap: var(--o2); align-items: center;
  margin: 0 0 var(--o4); padding-bottom: var(--o3);
  border-bottom: 1px solid var(--linia);
}
.sortowanie__etykieta {
  font-family: var(--f-dane); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--przygasly); margin-right: var(--o1);
}
.sortowanie a, .sortowanie__teraz {
  padding: var(--o2) var(--o3);
  border: 1px solid var(--linia); border-radius: var(--promien);
  font-family: var(--f-dane); font-size: .78rem; letter-spacing: .04em;
  color: var(--tekst2); white-space: nowrap;
}
.sortowanie a:hover { border-color: var(--akcent); color: var(--akcent); text-decoration: none; }
.sortowanie__teraz { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); font-weight: 600; }

/* =====================================================================
   BLOK SPRZEDAŻOWY POD ARTYKUŁEM
   ---------------------------------------------------------------------
   Domknięcie tekstu, nie reklama w tekście. Dlatego ma tło panelu
   i niebieską krawędź, a nie przerywaną ramkę z napisem REKLAMA:
   czytelnik, który bierze coś za baner, omiata to wzrokiem i nie czyta.
   Zjawisko znane od dwudziestu lat jako ślepota banerowa i jedyny powód,
   dla którego ten blok nie wygląda jak sąsiadujące z nim sloty.
   ===================================================================== */
.cta-box {
  margin: var(--o7) 0 var(--o2); padding: var(--o5) var(--o5);
  background: var(--panel2); border: 1px solid var(--linia);
  border-left: 2px solid var(--akcent); border-radius: var(--promien);
}
.cta-box h2 { font-size: 1.3rem; margin: 0 0 var(--o2); }
.cta-box p { color: var(--tekst2); margin: 0 0 var(--o4); }
.cta-box p:last-child { margin-bottom: 0; }
.cta-box__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o3) var(--o5); }
.cta-box__drugi {
  font-family: var(--f-dane); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
}
@media (max-width: 620px) { .cta-box { padding: var(--o4) var(--o4); } }

/* =====================================================================
   STANY
   ===================================================================== */
.pusto { background: var(--panel); border: 1px dashed var(--linia-moc); border-radius: var(--promien);
         padding: var(--o7) var(--o4); text-align: center; }
.pusto h2 { font-size: 1.15rem; margin: 0 0 var(--o2); }
.pusto p { color: var(--tekst2); margin: 0 auto var(--o4); max-width: 46ch; }

/* =====================================================================
   STOPKA
   ===================================================================== */
.stopka { background: #04070B; border-top: 1px solid var(--linia); margin-top: var(--o8);
          padding: var(--o6) 0 var(--o5); }
.stopka__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--o5); }
.stopka h2 { font-family: var(--f-dane); font-size: .7rem; letter-spacing: .14em;
             text-transform: uppercase; color: var(--przygasly); margin: 0 0 var(--o3); }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o2); }
.stopka a { color: var(--tekst2); font-size: .92rem; }
.stopka a:hover { color: var(--akcent); }
.stopka__dol { margin-top: var(--o6); padding-top: var(--o4); border-top: 1px solid var(--linia);
               display: flex; justify-content: space-between; gap: var(--o4); flex-wrap: wrap;
               font-family: var(--f-dane); font-size: .74rem; color: var(--przygasly); }

/* =====================================================================
   DROBIAZGI
   ===================================================================== */
.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   ZDJĘCIA W OFERTACH
   ---------------------------------------------------------------------
   Blok dopisany na końcu arkusza celowo. Reguły poniżej nadpisują
   ustawienia wiersza oferty i galerii z sekcji wyżej — przy równej
   specyficzności wygrywa reguła późniejsza, więc kolejność jest tu
   częścią działania, nie przypadkiem. Wcześniej w tym projekcie
   dokładnie taka kolizja (.menu a kontra .przycisk) zjadła czytelność
   przycisku i wolę tego nie powtarzać.
   ===================================================================== */

/* --- miniatura w wierszu listy --------------------------------------- */
.oferta--zdjecie { grid-template-columns: 6rem minmax(0, 1fr) auto; }
.oferta--zdjecie > .oferta__foto {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: block; border-radius: var(--promien); overflow: hidden;
  border: 1px solid var(--linia); background: var(--panel2);
}
.oferta--zdjecie > .oferta__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .18s ease-out;
}
.oferta--zdjecie:hover > .oferta__foto img { transform: scale(1.04); }
.oferta--zdjecie > .oferta__tytul,
.oferta--zdjecie > .oferta__opis,
.oferta--zdjecie > .oferta__meta { grid-column: 2; }
.oferta--zdjecie > .oferta__cena  { grid-column: 3; }

@media (prefers-reduced-motion: reduce) {
  .oferta--zdjecie > .oferta__foto img { transition: none; }
  .oferta--zdjecie:hover > .oferta__foto img { transform: none; }
}

@media (max-width: 620px) {
  .oferta--zdjecie { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .oferta--zdjecie > .oferta__foto { grid-column: 1; grid-row: 1 / span 3; }
  .oferta--zdjecie > .oferta__cena { grid-column: 2; grid-row: auto; text-align: left; }
}

/* --- galeria na karcie oferty ---------------------------------------- */
.galeria { margin: 0 0 var(--o5); }

/* Pas przewijany w poziomie z zatrzaskiwaniem — zachowanie znane
   z telefonu, a na komputerze działa kółkiem i klawiaturą. */
.galeria__pas {
  display: flex; gap: var(--o2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--promien); background: var(--panel);
  border: 1px solid var(--linia);
}
.galeria__pas::-webkit-scrollbar { height: 6px; }
.galeria__pas::-webkit-scrollbar-thumb { background: var(--linia-moc); border-radius: 3px; }
.galeria__pas img {
  flex: 0 0 100%; width: 100%; scroll-snap-align: start;
  aspect-ratio: 3 / 2; object-fit: cover;
  /* Bez górnego ograniczenia zdjęcie na szerokim monitorze rośnie do
     ~770 px wysokości i spycha cenę oraz kontakt pod krawędź ekranu.
     Ogłoszenie ma sprzedawać, a nie być galerią. */
  max-height: 26rem;
  scroll-margin-top: var(--o6);
}
.galeria__pas:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.galeria__mini {
  display: flex; gap: var(--o2); margin-top: var(--o2);
  overflow-x: auto; padding-bottom: var(--o1);
}
.galeria__mini a {
  flex: 0 0 5rem; border-radius: var(--promien); overflow: hidden;
  border: 1px solid var(--linia); background: var(--panel2);
}
.galeria__mini a:hover, .galeria__mini a:focus-visible { border-color: var(--akcent); }
.galeria__mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.galeria figcaption {
  font-family: var(--f-dane); font-size: .72rem; color: var(--przygasly);
  margin-top: var(--o2);
}

@media (prefers-reduced-motion: reduce) {
  .galeria__pas { scroll-behavior: auto; }
}

/* --- kafel wyróżnionej oferty ze zdjęciem ---------------------------- */
.kafel--zdjecie { padding-top: 0; overflow: hidden; }
.kafel__foto { display: block; margin: 0 calc(-1 * var(--o4)) var(--o3); }
.kafel__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* =====================================================================
   FORMULARZE PUBLICZNE — rejestracja firmy, zamówienie
   ---------------------------------------------------------------------
   Ten formularz jest jedynym miejscem, w którym serwis zarabia. Dlatego
   pola są szerokie, etykiety stoją nad nimi (nie obok — przy wąskim
   ekranie etykieta obok pola zjada połowę szerokości), a błąd siedzi
   pod polem, którego dotyczy. Zbiorcza lista „popraw błędy" na górze
   zmusza do szukania, które pole jest złe, i kosztuje porzucone
   zgłoszenia.
   ===================================================================== */

.uklad--rejestracja { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .uklad--rejestracja { grid-template-columns: 1fr; } }

.form { display: grid; gap: var(--o5); }

.form fieldset {
  border: 1px solid var(--linia); border-radius: var(--promien);
  padding: var(--o5); margin: 0; display: grid; gap: var(--o4);
  background: var(--panel);
}
.form legend {
  font-family: var(--f-dane); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--przygasly);
  padding-inline: var(--o2);
}

.pole { display: grid; gap: var(--o2); }
.pole label { font-size: .85rem; color: var(--tekst2); }
.pole input, .pole textarea, .pole select {
  width: 100%; box-sizing: border-box;
  background: var(--tlo); color: var(--tekst);
  border: 1px solid var(--linia-moc); border-radius: var(--promien);
  padding: var(--o3); font: inherit; font-size: .95rem;
}
.pole textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }
.pole input:focus-visible, .pole textarea:focus-visible {
  outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent);
}
.pole input::placeholder { color: var(--przygasly); }

/* Numer NIP i kod pocztowy to dane, nie proza — czytają się cyfra po
   cyfrze, więc idą krojem o stałej szerokości znaku. */
#p-nip, #p-kod, #p-telefon { font-family: var(--f-dane); letter-spacing: .04em; }

.pole--zle input, .pole--zle textarea { border-color: var(--spadek); }
.pole__blad { margin: 0; font-size: .82rem; color: var(--spadek); }
.pole__pod  { margin: 0; font-size: .8rem; color: var(--przygasly); line-height: 1.5; }

/* NIP z przyciskiem „pobierz z rejestru" obok. Przycisk zrównany z dolną
   krawędzią pola, a nie ze środkiem — pod polem bywa opis i podpięcie do
   środka rozjeżdżałoby się przy każdym błędzie walidacji. */
.pole-z-akcja { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--o3); align-items: start; }
.pole-z-akcja .przycisk { margin-top: 1.65rem; white-space: nowrap; }
@media (max-width: 620px) {
  .pole-z-akcja { grid-template-columns: 1fr; }
  .pole-z-akcja .przycisk { margin-top: 0; justify-self: start; }
}

.pole-para { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: var(--o4); }
@media (max-width: 620px) { .pole-para { grid-template-columns: 1fr; } }

.form__stopka { display: grid; gap: var(--o3); justify-items: start; }

/* Pułapka na automaty — poza ekranem, ale nie display:none: część botów
   pomija pola ukryte tą właśnie deklaracją. */
.pulapka {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* --- komunikaty ---------------------------------------------------- */
.komunikat {
  border: 1px solid var(--linia); border-left: 3px solid var(--linia-moc);
  border-radius: var(--promien); background: var(--panel);
  padding: var(--o4); margin: 0 0 var(--o5); font-size: .9rem; line-height: 1.6;
}
.komunikat--ok    { border-left-color: var(--wzrost); }
.komunikat--uwaga { border-left-color: var(--zloto); }
.komunikat--zle   { border-left-color: var(--spadek); }

/* --- karta z ceną -------------------------------------------------- */
.oferta-abonament {
  border: 1px solid var(--linia); border-radius: var(--promien);
  background: var(--panel); padding: var(--o5); display: grid; gap: var(--o3);
}
.oferta-abonament--cicha { background: transparent; }
.oferta-abonament__cena {
  margin: 0; font-family: var(--f-naglowek); font-size: 2rem; line-height: 1.1;
  color: var(--akcent); font-variant-numeric: tabular-nums;
}
.oferta-abonament__vat { margin: 0; font-size: .82rem; color: var(--przygasly); }

.lista-zalet, .lista-krokow { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--o2);
                              font-size: .88rem; color: var(--tekst2); line-height: 1.5; }
.lista-zalet { list-style: none; padding-left: 0; }
.lista-zalet li { position: relative; padding-left: 1.1rem; }
.lista-zalet li::before { content: "—"; position: absolute; left: 0; color: var(--akcent); }
.lista-zalet strong, .lista-krokow strong { color: var(--tekst); }

/* --- dane do przelewu ---------------------------------------------- */
.karta-przelew {
  border: 1px solid var(--linia); border-radius: var(--promien);
  background: var(--panel); padding: var(--o5); margin-bottom: var(--o5);
}
.karta-przelew h2 { margin: 0 0 var(--o4); font-size: 1.05rem; }

.dane-przelewu { margin: 0; display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: var(--o3) var(--o4); }
@media (max-width: 620px) { .dane-przelewu { grid-template-columns: 1fr; gap: var(--o1) var(--o4); } }
.dane-przelewu dt { font-size: .8rem; color: var(--przygasly); padding-top: .15rem; }
.dane-przelewu dd { margin: 0; display: grid; gap: var(--o1); }
.dane-przelewu__drobne { font-size: .78rem; color: var(--przygasly); line-height: 1.5; }

/* Numer konta i tytuł przelewu przepisuje się ręcznie do bankowości —
   stała szerokość znaku i odstęp między grupami cyfr zmniejszają szansę
   pomyłki, a przy tytule przelewu pomyłka znaczy nierozpoznaną wpłatę. */
.dane-przelewu__konto, .dane-przelewu__tytul, .dane-przelewu__kwota {
  font-family: var(--f-dane); color: var(--tekst); font-variant-numeric: tabular-nums;
}
.dane-przelewu__konto { font-size: 1.02rem; letter-spacing: .04em; word-break: break-word; }
.dane-przelewu__tytul { font-size: 1.02rem; color: var(--akcent); }
.dane-przelewu__kwota { font-size: 1.25rem; }

@media print {
  .gora, .stopka, .bok, .slot, .okruszki { display: none !important; }
  .karta-przelew { border-color: #999; }
}

/* =====================================================================
   NEWSLETTER — blok na stronie głównej
   ---------------------------------------------------------------------
   Grafika i formularz obok siebie na szerokim ekranie, jedno pod drugim
   na telefonie. Obrazek ma zarezerwowane miejsce, żeby treść nie
   podskakiwała w trakcie wczytywania — Google liczy taki skok jako CLS.
   ===================================================================== */
.newsletter{
  margin:var(--o6) 0;
  background:var(--panel);
  border:1px solid var(--linia);
  border-radius:8px;
  overflow:hidden;
}
.newsletter .kontener{ padding:0; max-width:none; }
.newsletter__srodek{ display:grid; grid-template-columns:320px 1fr; align-items:stretch; }
@media (max-width:820px){ .newsletter__srodek{ grid-template-columns:1fr; } }

.newsletter__foto{ background:var(--panel2); }
.newsletter__foto img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .newsletter__foto img{ height:190px; } }

.newsletter__tresc{ padding:var(--o5); }
.newsletter__tresc h2{ margin:0 0 var(--o2); font-size:1.25rem; color:var(--tekst); }
.newsletter__tresc > p{ margin:0 0 var(--o4); color:var(--tekst2); font-size:.95rem; }

.newsletter__rzad{ display:flex; gap:var(--o2); flex-wrap:wrap; margin-bottom:var(--o3); }
.newsletter__rzad input[type=email]{
  flex:1 1 220px; min-width:0;
  padding:.7rem .85rem; background:var(--tlo); color:var(--tekst);
  border:1px solid var(--linia-moc); border-radius:4px; font:inherit;
}
.newsletter__rzad input[type=email]::placeholder{ color:var(--przygasly); }
.newsletter__rzad input[type=email]:focus-visible{ outline:2px solid var(--akcent); outline-offset:1px; }
.newsletter__rzad .przycisk{ flex:0 0 auto; }
@media (max-width:520px){ .newsletter__rzad .przycisk{ width:100%; } }

.newsletter__zgoda{ display:flex; gap:.55rem; align-items:flex-start; margin-bottom:var(--o3); }
.newsletter__zgoda input{ margin-top:.2rem; flex:0 0 auto; }
.newsletter__zgoda label{ font-size:.8rem; line-height:1.5; color:var(--tekst2); }

.newsletter__drobne{ margin:0; font-size:.75rem; line-height:1.55; color:var(--przygasly); }
.newsletter__drobne a{ color:var(--akcent); }

/* Pułapka na boty: niewidoczna, ale NIE display:none — część botów
   nauczyła się rozpoznawać właśnie tamtą regułę i pomijać takie pola. */
.pulapka{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.tylko-czytnik{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- stopka: blok operatora serwisu ------------------------------- */
.stopka__operator{ color:var(--przygasly); font-size:.78rem; line-height:1.6; }
.stopka__operator strong{ color:var(--tekst2); font-weight:600; display:block; margin-bottom:.15rem; }

/* =====================================================================
   STRONY PRAWNE — polityka prywatności, RODO, cookies, regulamin
   ---------------------------------------------------------------------
   Te strony mają wyglądać DOKŁADNIE jak reszta serwisu i dlatego jest
   tu tak mało kodu.
   Pierwsza wersja nadpisywała typografię z `.tresc` własnymi, prawie
   takimi samymi wartościami: 72ch zamiast 70ch, nagłówki mniejsze
   o pół kroku, inny odstęp listy, kreska pod h2, której nigdzie indziej
   w serwisie nie ma. Każda różnica z osobna niewidoczna, wszystkie
   naraz dawały wrażenie strony z innego serwisu.
   Teraz strony prawne biorą całą typografię z `.tresc`, tak samo jak
   karta ogłoszenia i strony treściowe. Zostają wyłącznie dwie rzeczy,
   których w serwisie wcześniej nie było.
   ===================================================================== */

/* Akapit wprowadzający. Ten sam zabieg, co cytat w treści serwisu
   (`.tresc blockquote`) — cienka kreska w kolorze akcentu i jaśniejszy
   tekst. Nie panel, nie ramka, nie własny wynalazek. */
.prawna__wstep{
  margin: 0 0 var(--o5); padding-left: var(--o4);
  border-left: 1px solid var(--akcent);
  color: var(--tekst);
}

/* Data wersji dokumentu — wielkością i kolorem jak stopka serwisu. */
.prawna__stopka{
  margin-top: var(--o7); padding-top: var(--o3);
  border-top: 1px solid var(--linia);
  font-size: .8rem; color: var(--przygasly);
}

/* Miejsce do uzupełnienia. Jedyny element, który CELOWO odstaje —
   ma zostać zauważony i skasowany, zanim dokument pójdzie na produkcję.
   Kolor z palety serwisu (złoto oznacza tu „uwaga"), nie przypadkowa żółć. */
mark.douzupelnienia{
  background: var(--akcent-tlo); color: var(--zloto);
  padding: .05rem .35rem; border: 1px dashed var(--zloto);
  border-radius: var(--promien);
  font-family: var(--f-dane); font-size: .85em;
}