/* winemarkets.ai — directory.css (WWW-28, POBOCZNE_8, 2026-09-08)
   Styl WYŁĄCZNIE stron katalogu (/directory/*). Osobny plik, bo `assets/site.css`
   i `_partials/` należą w tym samym czasie do innego pakietu (WWW-26, POBOCZNE_2) —
   dwa okna piszące do jednego arkusza to konflikt, a nie współpraca. Wszystko tutaj
   jest zakresowane klasami `dir-*` albo `.dir-table`, więc nie dotyka reszty serwisu.
   Tokeny (--ink/--muted/--wine/--green/--border/--paper-alt/--radius) pochodzą z site.css.

   Co ten plik naprawia z audytu 2026-09-08 (`www/AUDYT_WYGLAD_I_TEKSTY_2026-09-08.md`):
     * #6 tabele bez responsywności: poniżej 700 px wiersz staje się kartą (nazwa, kraj,
       kontakt jeden pod drugim) zamiast tabeli uciętej za krawędzią ekranu;
     * #6 „brak zebry i oddechu": zebra, hover, wyższe wiersze, cień-wskazówka przy
       przewijaniu w poziomie na desktopie;
     * #5 „natywne, niestylowane kontrolki": własny wygląd pola szukania i `<select>`
       kraju (w obrębie katalogu — globalny `<select>` zostaje przy WWW-26). */

/* ---------- pasek narzędzi: szukanie + kraj ---------- */

.dir-tools { margin: 24px 0 8px; }

.dir-filter {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: end;
}

.dir-filter label {
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.dir-filter input[type="search"],
.dir-filter select {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
}

/* strzałka `<select>` rysowana zamiast systemowej (audyt #5) */
.dir-filter select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.dir-filter input[type="search"]:focus,
.dir-filter select:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(110, 30, 60, 0.12);
}

.dir-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

.dir-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--wine);
  cursor: pointer;
  text-decoration: underline;
}

.dir-link-btn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

/* ---------- pasek A–Z ---------- */

.dir-az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.dir-az a,
.dir-az .dir-az-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.dir-az a { color: var(--wine); background: var(--paper-alt); border: 1px solid var(--border); }
.dir-az a:hover { background: var(--wine); color: #fff; border-color: var(--wine); }
.dir-az .dir-az-off { color: var(--muted); opacity: 0.45; border: 1px solid transparent; }

/* ---------- tabela ---------- */

.table-wrap { position: relative; }

.dir-table { font-size: 0.94rem; }
.dir-table th { white-space: nowrap; }
.dir-table td { padding: 11px 12px; vertical-align: top; }
/* Zebry NIE powtarzamy — robi ją `.table tbody tr:nth-child(even)` z site.css (WWW-26 #5).
   Własna reguła na `nth-child(odd)` pokolorowałaby po prostu wszystkie wiersze. */
.dir-table tbody tr:hover { background: rgba(110, 30, 60, 0.06); }
.dir-table td:first-child { font-weight: 500; }
.dir-table td:nth-child(2) { white-space: nowrap; color: var(--muted); }
.dir-table .dir-k { color: var(--green); font-size: 0.86rem; white-space: nowrap; }
/* Rekord bez kontaktu w pakiecie mówi to wprost — pusta komórka w tabeli, która
   sprzedaje jakość danych, czyta się jak błąd ładowania. */
.dir-table .dir-k-brak { color: var(--muted); font-size: 0.86rem; white-space: nowrap; }

.dir-page-info { margin: 14px 0 0; font-size: 0.9rem; }

/* ---------- paginacja ---------- */

.dir-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 18px 0 6px;
}

.dir-pager a,
.dir-pager .dir-page-now,
.dir-pager .dir-page-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
}

.dir-pager a { border: 1px solid var(--border); color: var(--ink); }
.dir-pager a:hover { border-color: var(--wine); color: var(--wine); }
.dir-pager .dir-page-now { background: var(--wine); color: #fff; font-weight: 600; }
.dir-pager .dir-page-gap { color: var(--muted); min-width: 20px; padding: 0 4px; }

/* ---------- wyniki wyszukiwania w całej kategorii ---------- */

.dir-results { margin: 20px 0 0; }
.dir-results h2 { font-size: 1.1rem; margin: 0 0 12px; }
.dir-results .dir-page-link { white-space: nowrap; color: var(--wine); }

/* ---------- mobile: wiersz staje się kartą (audyt #6) ---------- */

@media (max-width: 700px) {
  .dir-filter { grid-template-columns: 1fr; }

  .dir-table thead { display: none; }

  .dir-table,
  .dir-table tbody,
  .dir-table tr,
  .dir-table td { display: block; width: 100%; }

  /* `site.css` (WWW-26 #5) daje KAŻDEJ tabeli `min-width: 420px`, żeby wąska tabela wolała
     przewijać się w bok, niż ścisnąć kolumny do nieczytelności. Dla katalogu to reguła
     odwrotna do zamierzonej: karta nie ma kolumn do ściśnięcia, a próg 420 px przy ekranie
     390 px robi dokładnie to, na co skarży się audyt — treść za krawędzią telefonu. Tu
     i tylko tu ten próg znosimy. */
  .dir-table { min-width: 0; }

  .dir-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--paper) !important;   /* zebra nie ma sensu na kartach */
  }

  .dir-table td {
    border: none;
    padding: 1px 0;
    /* Bez tego długa nazwa bez spacji („WEINGUT-UND-BRENNEREI-…") rozpycha kartę poza
       ekran: tabela mierzyła 420 px przy oknie 390 px, `ui.js` (W1) pokazywał nad listą
       „Scroll to see more →" i wracał dokładnie ten problem z audytu — treść za krawędzią
       telefonu. Karta ma się zawijać, a nie przewijać w bok. */
    overflow-wrap: anywhere;
  }

  .dir-table td:first-child { font-size: 1rem; font-weight: 600; }
  .dir-table td:nth-child(2) { white-space: normal; }
  .dir-table td:empty { display: none; }
  .dir-table .dir-k::before { content: "Contact "; color: var(--muted); }

  .dir-az a,
  .dir-az .dir-az-off { min-width: 30px; height: 30px; }

  .dir-pager a,
  .dir-pager .dir-page-now { min-width: 44px; height: 44px; }   /* palec, nie kursor */
}