/* ---------- Wyniki wyszukiwania (/szukaj?q=…) ---------- */
/* Zrodlo: makieta v73 „Vistitio Wyniki wyszukiwania.dc.html", stany „wyniki" i „brak".
   Naglowek, pasek filtrow i lista to `oferty.czesci.katalog` (od 10.10 naglowek ekranu tez,
   makieta v76 „Lista - Pasek filtrow”); tu tylko zdanie „Widac N z M" i pusty stan. */

/* „Widac 8 z 12" nad „Pokaz wiecej", wysrodkowane, 10 px odstepu. */
.kat__wiecej--widac {
  flex-direction: column;
  align-items: center;
  gap: 10px; /* makieta */
}

.kat__widac {
  margin: 0;
  font: 400 13.5px/1.4 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

/* ---------- Stan „brak" ---------- */
/* Pusty katalog konczy sie na belce; makieta ma pod nia 20 px do kart. */
.kat:has(+ .wyn-brak) { padding-bottom: var(--v-s-5); }

.wyn-brak {
  --wyn-brak-obwodka: #E3E8EF; /* makieta, TODO token */
  --wyn-brak-tekst: #5A4524; /* makieta, TODO token */
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: 0 24px 72px; /* makieta */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--v-s-5);
  align-items: start;
}

.wyn-brak__karta {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  padding: var(--v-s-6);
  border: 1px solid var(--wyn-brak-obwodka);
  border-radius: 20px; /* makieta */
  background: var(--v-n-0);
}

.wyn-brak__karta--ochra {
  gap: var(--v-s-3);
  padding: var(--v-s-7);
  border: none;
  background: var(--v-warning-soft);
}

.wyn-brak__tytul {
  margin: 0;
  font: 600 24px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em;
  /* Stały granat: tło karty (miękka ochra) nie odwraca się w ciemnym motywie. */
  color: var(--v-granat-staly);
  text-wrap: balance;
}

.wyn-brak__opis {
  margin: 0;
  font: 400 14.5px/1.55 var(--v-font-body); /* makieta */
  color: var(--wyn-brak-tekst);
  text-wrap: pretty;
}

.wyn-brak__naglowek {
  margin: 0;
  font: 800 15.5px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-primary);
}

/* „Usuń filtry": 40 px, granatowa obwodka 1,5 i pismo 800 jak w makiecie. */
.v-btn.wyn-brak__usun {
  align-self: flex-start;
  border-radius: var(--v-s-3);
  border-color: var(--v-primary);
  font-size: 14px;
  font-weight: 800;
}

.wyn-brak__frazy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
}

:root.jak-aplikacja[data-motyw="ciemny"] .wyn-brak { --wyn-brak-obwodka: var(--v-n-200); }

/* Telefon: rynne 18 px daje juz powloka (`.powloka__tresc`). */
@media (max-width: 760px) {
  .wyn-brak { padding: 0; grid-template-columns: minmax(0, 1fr); }
}

/* Siatka kafelków 3a w wynikach (makieta v73: auto-fill, min 220 px, odstęp 20). Makieta ma
   kontener 1152 px, więc wychodzą w niej CZTERY kolumny; nasz ma 1192 i sam `minmax(220px)`
   dałby pięć wąskich — stąd górny limit czterech, ten sam wzór co siatka strony marki.
   Mocniejszy selektor, bo `s-dzial.css` ustawia `.kat__siatka` na dwie szerokie karty. */
.kat__siatka.kat__siatka--3a {
  grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 60px) / 4)), 1fr)); /* makieta */
  gap: var(--v-s-5);
}

@media (max-width: 760px) {
  .kat__siatka.kat__siatka--3a { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-s-3); }
}