/* Wyszukiwarka. Ten sam język graficzny co okno „Wywóz odpadów”:
   tło akcentu, czerwony pasek z lewej przy tym, co najważniejsze,
   rozstrzelone nadtytuły w kolorze akcentu. */

.szukaj__naglowek { margin-bottom: var(--s4); }

.szukaj__lead {
  color: var(--tekst-przygaszony);
  max-width: 62ch;
}

/* --- Pole wyszukiwania --------------------------------------------------- */

.szukaj__form {
  padding: var(--s4);
  border-radius: var(--r-m);
  background-color: var(--akcent-tlo);
  border-left: 5px solid var(--color-indianRed);
  margin-bottom: var(--s5);
}

.szukaj__form label {
  display: block;
  font-weight: var(--weight-semi-bold);
  margin-bottom: var(--s2);
}

.szukaj__rzad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.szukaj__rzad input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: 17px;
  color: var(--tekst);
  background-color: var(--tlo-karta);
  border: 1px solid var(--obwodka-mocna);
  border-radius: var(--r-s);
}

.szukaj__rzad input:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
}

.szukaj__rzad button {
  min-height: 48px;
  padding: var(--s2) var(--s5);
  font: inherit;
  font-weight: var(--weight-semi-bold);
  color: var(--tekst-odwrocony);
  background-color: var(--akcent);
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
}

.szukaj__rzad button:hover,
.szukaj__rzad button:focus-visible { filter: brightness(.88); }

.szukaj__podpowiedz {
  margin: var(--s3) 0 0;
  font-size: 14px;
  color: var(--tekst-przygaszony);
}

/* --- Wyniki -------------------------------------------------------------- */

.szukaj__podsumowanie {
  color: var(--tekst-przygaszony);
  font-size: 14px;
  margin-bottom: var(--s4);
}

.szukaj__grupa h2 {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--akcent);
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.szukaj__ile {
  background-color: var(--akcent-tlo);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-pill);
  padding: 1px 10px;
  font-size: 12px;
  letter-spacing: 0;
}

.szukaj__wyniki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.szukaj__wynik {
  padding: var(--s3);
  border-radius: var(--r-s);
  background-color: var(--tlo-karta);
  border: 1px solid var(--obwodka);
}

.szukaj__wynik:hover { border-color: var(--akcent); }

.szukaj__tytul {
  display: block;
  font-weight: var(--weight-semi-bold);
  font-size: 17px;
  text-decoration: none;
  color: var(--akcent);
  min-height: 24px;
}

.szukaj__tytul:hover,
.szukaj__tytul:focus-visible { text-decoration: underline; }

.szukaj__fragment {
  margin: var(--s1) 0 0;
  font-size: 14px;
  color: var(--tekst);
}

.szukaj__meta {
  margin: var(--s1) 0 0;
  font-size: 13px;
  color: var(--tekst-przygaszony);
}

/* Podświetlenie trafionych słów. Żółte tło i pogrubienie — kolor sam
   nie wystarcza, bo przy monochromatycznym wydruku znika. */
.szukaj__wynik mark {
  background-color: #fff3bf;
  color: inherit;
  font-weight: var(--weight-semi-bold);
  padding: 0 2px;
  border-radius: 3px;
}

.szukaj__wiecej {
  margin: var(--s3) 0 0;
  font-size: 14px;
}

/* --- Puste i zachęta ----------------------------------------------------- */

.szukaj__pusto,
.szukaj__zacheta {
  padding: var(--s4);
  border-radius: var(--r-m);
  background-color: var(--tlo-karta);
  border: 1px solid var(--obwodka);
}

.szukaj__pusto h2,
.szukaj__zacheta h2 {
  font-size: 18px;
  margin: 0 0 var(--s2);
}

.szukaj__przyklady {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.szukaj__przyklady a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--akcent);
  font-size: 14px;
}

.szukaj__przyklady a:hover,
.szukaj__przyklady a:focus-visible {
  background-color: var(--akcent-tlo);
  border-color: var(--akcent);
}

/* --- Data z lewej, kalendarzowo -------------------------------------------
   Przy sortowaniu od najnowszych data przestaje być przypisem, a staje się
   osią całej listy — więc wychodzi z drobnego druku pod tytułem na lewą
   krawędź, gdzie oko szuka jej odruchowo. */

.szukaj__wynik--zdata {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.szukaj__tresc { min-width: 0; flex: 1 1 auto; }

.szukaj__kalendarz {
  flex: 0 0 auto;
  width: 52px;
  text-align: center;
  padding: 6px 0;
  border-radius: var(--r-s);
  background-color: var(--akcent-tlo);
  line-height: 1.1;
}

.szukaj__dzien {
  display: block;
  font-size: 20px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}

.szukaj__miesiac {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--akcent);
}

.szukaj__rok-etykieta {
  display: block;
  font-size: 11px;
  color: var(--tekst-przygaszony);
  font-variant-numeric: tabular-nums;
}

/* --- Filtr lat ----------------------------------------------------------- */

.szukaj__lata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.szukaj__rok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--tekst);
  font-size: 14px;
}

.szukaj__rok span {
  font-size: 12px;
  color: var(--tekst-przygaszony);
  font-variant-numeric: tabular-nums;
}

.szukaj__rok:hover,
.szukaj__rok:focus-visible { border-color: var(--akcent); }

/* Wybrany rok poznaje się po tle ORAZ po grubszej czcionce — przy wysokim
   kontraście tła bywają wyłączane i zostałby sam kolor. */
.szukaj__rok--wybrany {
  background-color: var(--akcent);
  border-color: var(--akcent);
  color: var(--tekst-odwrocony);
  font-weight: var(--weight-semi-bold);
}

.szukaj__rok--wybrany span { color: var(--tekst-odwrocony); opacity: .8; }

@media (max-width: 480px) {
  .szukaj__kalendarz { width: 44px; }
  .szukaj__dzien { font-size: 17px; }
}

/* --- Udostępnianie przy wyniku ------------------------------------------- */

.szukaj__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s2);
}

.szukaj__stopka .szukaj__meta { margin: 0; }