/* Szary pas pod nagłówkiem działu — pomiar z prototypu: tło n-50 od krawędzi
   do krawędzi, treść w kontenerze 1240. Lista poniżej stoi na bieli. */
.dzial__pas {
  background: var(--v-n-50);
  border-bottom: 1px solid var(--v-n-100);
}

.dzial__pas > * {
  max-width: var(--v-w-page);
  margin-inline: auto;
  padding-inline: 24px;
}

.dzial__pas > :first-child { padding-top: var(--v-s-5); }
.dzial__pas > :last-child { padding-bottom: var(--v-s-6); }

.kat {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-10) 24px var(--v-s-16);
}

/* Ekran działu — makieta: prototypy Desktop i Mobile po kliknięciu w dział.
   Filtry stoją POZIOMO nad siatką. Kolumna filtrów z boku należy do `/szukaj`. */

/* Pomiar z makiety: 13 px z interlinią 1,4, odstęp 8. Odnośnik jest granatowy
   i półgruby, bieżąca pozycja granatowa i gruba — szary zostaje tylko ukośnik.
   Wcześniej cała linia była szara i cienka, więc nie dało się odczytać, co jest
   klikalne, a co mówi, gdzie jesteś. */
.dzial__okruszki {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  font: 400 13px/1.4 var(--v-font-body);
  color: var(--v-n-600);
  margin-bottom: var(--v-s-4);
}

.dzial__okruszki a {
  color: var(--v-primary);
  font-weight: 600; /* makieta */
}

.dzial__okruszki [aria-current] {
  color: var(--v-primary);
  font-weight: 700; /* makieta */
}

.dzial__naglowek {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.dzial__tytul {
  margin: 0;
  font: 600 34px/1.15 var(--v-font-display);
}

.dzial__lead {
  margin: 0;
  font-size: 15px; /* pomiar z prototypu */
  color: var(--v-n-700);
}

.dzial__podkategorie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
  margin-top: var(--v-s-5);
}

/* Pasek filtrów: od kogo | pastylki | sortowanie dosunięte do prawej. */
.kat__filtry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v-s-4);
  margin-top: var(--v-s-5);
  padding: var(--v-s-4) 0;
  border-top: 1px solid var(--v-n-100);
  border-bottom: 1px solid var(--v-n-100);
}

/* Cały pasek mieści się w jednym rzędzie, odkąd „Od kogo” to cztery ikony
   (wcześniej były wypisane słowami i zajmowały 634 px). Po grupie ikon stoi
   pionowa kreska — tak dzieli je makieta. */
/* Pionowa kreska po grupie ikon „Od kogo" — tak dzieli pasek makieta. Stoi jako OSOBNY
   element (`.kat__kreska`), a nie `::after` grupy: przy zawijaniu paska pseudoelement
   jechał razem z ikonami i kreska lądowała w środku pustego wiersza. */
.kat__kreska {
  width: 1px;
  height: 24px; /* makieta */
  background: var(--v-n-200);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .kat__kreska { display: none; }
}

.kat__pastylki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-s-2);
}

.kat__sort {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  margin-left: auto;
}

/* Etykieta w pasku: ten sam zapis co „OD KOGO” przy chipach. */
.kat__etykieta {
  font: 700 12px/1.2 var(--v-font-body); /* pomiar z prototypu */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-500);
}

.kat__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-5);
  margin-top: var(--v-s-6);
}

.kat__wiecej {
  display: flex;
  justify-content: center;
  margin-top: var(--v-s-8);
}

@media (max-width: 1100px) {
  .kat__siatka { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .dzial__tytul { font-size: 26px; }

  .kat__filtry {
    gap: var(--v-s-3);
  }

  /* Na telefonie sortowanie wraca pod pastylki — inaczej ucieka poza ekran. */
  .kat__sort {
    margin-left: 0;
    width: 100%;
  }

  /* Filtr „od kogo” bierze cały wiersz i przewija się w sobie (pastylki mają tu
     podpisy, więc są szersze niż ekran). Kreska po prawej traci sens w kolumnie. */
  .kat__od-kogo { width: 100%; min-width: 0; }
  .kat__od-kogo::after { display: none; }
}

/* ---------- Pasek wynikow wyszukiwania ---------- */
/* Zrodlo: „Vistitio Strona Glowna.dc.html", ekran `isResults`: szary pas od krawedzi
   do krawedzi, w nim powrot, nazwa ekranu i licznik dosuniety do prawej. */

.wyniki__pas {
  background: var(--v-n-50);
  border-bottom: 1px solid var(--v-n-100);
}

.wyniki__pas-in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: 18px 24px; /* makieta */
  display: flex;
  align-items: center;
  gap: 14px; /* makieta */
  flex-wrap: wrap;
}

.wyniki__pas-nazwa {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.wyniki__pas-licznik {
  margin-left: auto;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.wyniki__glowka {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-8) 24px 0;
}

/* Na ekranie wynikow lista zaczyna sie tuz pod naglowkiem — nie ma miedzy nimi
   drugiego tytulu, wiec nie ma tez po co zostawiac pelnego odstepu sekcji. */
.wyniki__glowka + .kat { padding-top: var(--v-s-5); }

.wyniki__tytul {
  margin: 0;
  font: 600 var(--v-t-h1) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

/* ---------- Pusty stan katalogu ---------- */
/* Szara karta, kolko, jedno zdanie i jedno wyjscie — 1:1 z planszy. Przy zerze wynikow
   czlowiek chce wrocic, a nie czytac liste porad. */

.kat__pusto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* makieta */
  text-align: center;
  background: var(--v-n-50);
  border-radius: 20px; /* makieta */
  padding: var(--v-s-16) var(--v-s-8);
  margin-top: var(--v-s-6);
}

.kat__pusto-kolo {
  width: 56px; /* makieta */
  height: 56px;
  border-radius: 50%;
  background: var(--v-n-200);
}

.kat__pusto-tytul {
  margin: 0;
  font: 600 22px/1.25 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.kat__pusto-opis {
  margin: 0;
  max-width: 380px; /* makieta */
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
}

/* Cel dotyku: „Strona główna” w okruszkach stoi sama w wierszu (audyt mobile 30.09). */
@media (max-width: 759px) {
  .dzial__okruszki a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}



/* PODWOJNA RYNNA NA TELEFONIE (uwaga Huberta 30.09 o szerokosci kafli). `.kat` ma
   wlasna wysciolke 24 px, bo na web sama tworzy kontener — a powloka daje juz 18 px
   od krawedzi. Razem 42 px z kazdej strony i kafelek zwezony o 48 px wobec reszty
   ekranu. Ta sama pulapka co przy sekcjach glownej (30.09): plansza mierzy odstepy
   w kontenerze BEZ wysciolki, nasz ja ma. */
@media (max-width: 759px) {
  .kat { padding: var(--v-s-5) 0 var(--v-s-16); } /* makieta v76: 20 px nad tytułem listy */
}


/* ⚠️ SIATKA OFERT: DWIE KOLUMNY NA DESKTOPIE, nie trzy i nie cztery.

   Bylo tu 3 kolumny do 1119 px i 4 powyzej — przepisane z README handoffu PWA
   (sekcja 2). Tamte liczby opisuja KAFELEK PIONOWY z aplikacji, a desktop rysuje
   karte POZIOMA: zdjecie 200 px po lewej, tresc po prawej. Cztery kolumny daly
   karcie 283 px, czyli tresci 81 px — tytul i cena lamaly sie po jednym slowie
   w linii (zrzut Huberta 08.10, projekt „Wszystkie oferty" ma dwie kolumny).

   Ponizej 1000 px jedna kolumna: dwie poziome karty po ~350 px to znowu za malo
   miejsca na tresc. Telefon ma wlasny, pionowy uklad karty (blok `@media` w
   `k-oferta-i-transakcja.css`), wiec tam jedna kolumna jest kafelkiem, nie rzedem. */
@media (min-width: 760px) and (max-width: 999px) {
  .kat__siatka { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1000px) {
  .kat__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}