/* ============================================================
   klasyk.pl — design system 2026 · KATALOG USŁUG (/uslugi.html)
   Źródło: makieta public/new/uslugi.html rewizja 2 (akcept Piotra
   2026-07-06: moduł realizacji jak na homepage, jedna mapa hp-map-svg
   z multi-selectem województw, wyszukiwarka bez nadobietnicy, CTA
   kontekstowe „Dodaj firmę").
   Ładowany za tokens/base/components/components-content (bez home.css).
   Rdzeń mapy choropleth, kadr szpalty .rail-search i stan .woj--none
   — w components-content.css; tu stan multi-selectu (.woj.off)
   i mobile moduł realizacji. Klasy renderowane przez
   public/js/business-explorer.js (.kl-biz-card__*, .kl-biz-explorer__*)
   są kontraktem — ten arkusz tylko nadaje im wygląd DS-2026.
   ============================================================ */

/* ---------- Nagłówek strony + wstępniak (w lewej kolumnie splitu — szpalta
   dochodzi do samej góry, jak na /szukaj) ---------- */
.us-head{ margin:0 0 1.5rem; }
.us-head h1{ font-family:var(--sans); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.55rem,calc(2.4 * var(--vwu)),2.1rem); line-height:1.15; margin:0; }
.us-head .us-lead{ margin:0.625rem 0 0; font-size:1.0625rem; line-height:1.6;
  color:var(--text); max-width:66ch; }
.us-head .us-sub{ margin:0.375rem 0 0; font-size:.95rem; color:var(--meta-strong); max-width:72ch; }

/* ---------- Moduł „Najnowsze realizacje" (wzorzec .latest z components-content) ---------- */
.us-posts{ margin:0 0 2rem; }
.us-posts .block-head{ margin-bottom:1rem; }
.bh-row{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.bh-sub{ font-family:var(--sans); font-size:.78rem; color:var(--meta); }

/* Pasek kl-biz-posts — skromny wariant poniżej progu modułu */
.kl-biz-posts{ margin:0 0 2rem; padding:1rem 1.25rem 1.125rem; background:var(--surface-warm);
  border:1px solid var(--rule); border-radius:var(--r-card); }
.kl-biz-posts__head{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.875rem; }
.kl-biz-posts__title{ margin:0; font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--heading); }
.kl-biz-posts__label{ font-family:var(--sans); font-size:.75rem; color:var(--meta); }
.kl-biz-posts__list{ list-style:none; margin:0; padding:0; display:grid; gap:.625rem; }
.kl-biz-posts__link{ display:flex; gap:.875rem; align-items:center; color:inherit; }
.kl-biz-posts__thumb{ flex:none; width:7.5rem; height:5rem; object-fit:cover;
  border-radius:var(--r-control); background:var(--gray-3); }
.kl-biz-posts__item-title{ display:block; font-family:var(--sans); font-weight:600;
  font-size:.95rem; line-height:1.3; color:var(--heading); }
.kl-biz-posts__link:hover .kl-biz-posts__item-title{ color:var(--accent); }
.kl-biz-posts__meta{ display:block; font-family:var(--sans); font-size:.78rem; color:var(--meta); margin-top:.125rem; }

/* ---------- Układ dwudzielny: wyniki + szpalta „Szukaj" (proporcje jak A1) ---------- */
.us-split{ display:grid; grid-template-columns:1.62fr 1fr; column-gap:0; margin-top:1.375rem; align-items:start; }
.us-main{ min-width:0; padding:0 clamp(1.5rem,calc(2.6 * var(--vwu)),2.5rem) 2.875rem 0; }
.us-rail{ min-width:0; align-self:stretch; border-left:1px solid var(--gray-line); background:var(--rail);
  padding:1.25rem clamp(1.25rem,calc(2.2 * var(--vwu)),2rem) 1.875rem clamp(1.5rem,calc(2.6 * var(--vwu)),2.5rem); }
.us-stick{ position:sticky; top:4rem; display:flex; flex-direction:column; gap:1.125rem; }

/* ---------- Nagłówek wyników (markup renderowany przez JS) ---------- */
.kl-biz-explorer__results-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1.25rem; padding-bottom:0.875rem; border-bottom:1px solid var(--border); }
.kl-biz-explorer__results-head[hidden]{ display:none; }
.kl-biz-explorer__results-kicker{ display:none; } /* dubluje H1 */
.kl-biz-explorer__results-title{ margin:0; font-family:var(--sans); font-size:0.9375rem; font-weight:600;
  color:var(--heading); font-variant-numeric:tabular-nums; }
.kl-biz-explorer__results-text{ margin:0; font-family:var(--sans); font-size:0.85rem; color:var(--meta); text-align:right; }

/* ---------- Chipy aktywnych filtrów (renderuje JS) ---------- */
.kl-biz-explorer__active{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.875rem; }
.kl-biz-explorer__active[hidden]{ display:none; }
.kl-biz-explorer__chip{ font-family:var(--sans); font-size:0.8125rem; font-weight:600; color:var(--heading);
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-pill);
  padding:0.375rem 0.75rem; cursor:pointer; }
.kl-biz-explorer__chip:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Karty firm = wiersze (klasy z renderCard() w business-explorer.js) ---------- */
.kl-biz-explorer__results{ display:flex; flex-direction:column; }
.kl-biz-card{ display:block; padding:1.375rem 0 1.5rem; border-bottom:1px solid var(--border); color:inherit; }
/* miniatura 3:2 z lewej — mała, listowa; firma bez zdjęcia dostaje
   placeholder DS zamiast znikania (nota ④ przeglądu makiety) */
.kl-biz-card:has(.kl-biz-card__media){
  display:grid; grid-template-columns:10rem minmax(0,1fr); gap:0 1.25rem; align-items:start; }
.kl-biz-card__media{ position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--gray-3); }
.kl-biz-card__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:opacity .15s ease; }
.kl-biz-card:hover .kl-biz-card__media img{ opacity:.92; }
.kl-biz-card__media--placeholder{ display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/2; background:var(--gray-2); border:1px solid var(--gray-line); }
.kl-biz-card__placeholder{ display:flex; flex-direction:column; gap:0.25rem; text-align:center; padding:0.5rem; }
.kl-biz-card__placeholder-kicker{ font-family:var(--sans); font-size:0.6rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--meta); }
.kl-biz-card__placeholder-title{ font-family:var(--sans); font-size:0.78rem; font-weight:700;
  line-height:1.3; color:var(--meta-strong); }
.kl-biz-card__placeholder-note{ display:none; } /* nie mieści się w miniaturze listowej */
.kl-biz-card__badge{ display:none; } /* kategoria jest w chipach pod opisem */
.kl-biz-card__topline{ font-family:var(--sans); font-size:0.78rem; color:var(--meta); }
.kl-biz-card__header{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:0.25rem; }
.kl-biz-card__title-row{ display:flex; align-items:center; gap:0.625rem; min-width:0; flex-wrap:wrap; }
.kl-biz-card__name{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.01em;
  font-size:1.17rem; line-height:1.25; color:var(--heading); }
.kl-biz-card:hover .kl-biz-card__name{ color:var(--accent); }
/* teal wyłącznie plan płatny (taksonomia 2026) */
.kl-biz-card__plan{ flex:none; padding:0.2em 0.65em; background:var(--teal); color:#fff;
  border-radius:var(--r-pill); font-family:var(--sans); font-size:0.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; }
/* Profil przykładowy — ciemny neutralny pill, spójny z .biz-badge-example na profilu */
.kl-biz-card__example{ flex:none; padding:0.2em 0.65em; background:var(--heading); color:#fff;
  border-radius:var(--r-pill); font-family:var(--sans); font-size:0.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; }
.kl-biz-card__cta{ flex:none; font-family:var(--sans); font-size:0.875rem; font-weight:600;
  color:var(--accent); white-space:nowrap; }
.kl-biz-card__cta::after{ content:" →"; }
.kl-biz-card__desc{ margin:0.5rem 0 0; font-size:0.95rem; line-height:1.55; color:var(--text);
  max-width:64ch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.kl-biz-card__tags{ display:flex; flex-wrap:wrap; gap:0.375rem; }
.kl-biz-card__tags--services{ margin-top:0.8125rem; }
.kl-biz-card__tag{ font-family:var(--sans); font-size:0.75rem; font-weight:600;
  padding:0.25rem 0.5625rem; border-radius:var(--r-control); }
.kl-biz-card__tag--cat{ background:var(--surface-warm); border:1px solid var(--rule); color:var(--heading); }
.kl-biz-card__tag--brand{ background:var(--gray-2); border:1px solid var(--gray-line);
  color:var(--meta-strong); font-weight:500; }
.kl-biz-card__tag--muted{ background:transparent; border:1px solid var(--gray-line); color:var(--meta); }
.kl-biz-card__brand-group{ display:flex; align-items:center; gap:0.625rem; margin-top:0.5rem; flex-wrap:wrap; }
.kl-biz-card__brand-group-label{ font-family:var(--sans); font-size:0.71875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--meta); }

/* ---------- Stany puste (renderuje/odkrywa JS) ---------- */
.kl-biz-explorer__empty, .kl-biz-explorer__no-data{ margin-top:1.5rem; padding:2.25rem 1.5rem;
  text-align:center; background:var(--gray-2); border:1px solid var(--gray-line); border-radius:var(--r-card); }
.kl-biz-explorer__empty[hidden], .kl-biz-explorer__no-data[hidden]{ display:none; }
.kl-biz-explorer__empty-title{ margin:0; font-family:var(--sans); font-weight:700; font-size:1.1rem; color:var(--heading); }
.kl-biz-explorer__empty-text{ margin:0.5rem auto 0; max-width:54ch; font-size:0.925rem;
  line-height:1.55; color:var(--meta-strong); }
.kl-biz-explorer__empty-cta{ margin:1.125rem auto 0; max-width:54ch; font-size:0.925rem; font-weight:600; color:var(--heading); }
.kl-biz-explorer__empty-button{ display:inline-flex; align-items:center; justify-content:center;
  margin-top:1rem; min-height:2.75rem; padding:0 1.375rem; background:var(--dark); color:#fff;
  border-radius:var(--r-control); font-family:var(--sans); font-size:0.9375rem; font-weight:600; }
.kl-biz-explorer__empty-button:hover{ background:var(--heading); color:#fff; }

/* ---------- Karta wejścia z artykułu (?brand=) ---------- */
.kl-biz-context{ display:flex; justify-content:space-between; align-items:center; gap:2rem;
  margin:0 0 1.375rem; padding:1.125rem 1.375rem 1.25rem; background:var(--surface-warm);
  border:1px solid var(--rule); border-radius:var(--r-card); }
.kl-biz-context__eyebrow{ margin:0 0 0.25rem; font-family:var(--sans); font-size:0.71875rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--meta-strong); }
.kl-biz-context__title{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.01em;
  font-size:1.1rem; color:var(--heading); }
.kl-biz-context__text{ margin:0.375rem 0 0; font-size:0.9rem; line-height:1.5; color:var(--meta-strong); max-width:60ch; }
.kl-biz-context__actions{ display:flex; flex-direction:column; gap:0.625rem; align-items:stretch; flex:none; }
.kl-biz-context__button{ display:inline-flex; align-items:center; justify-content:center; min-height:2.5rem;
  padding:0 1.125rem; background:var(--dark); color:#fff; border-radius:var(--r-control);
  font-family:var(--sans); font-size:0.875rem; font-weight:600; white-space:nowrap; }
.kl-biz-context__button:hover{ background:var(--heading); color:#fff; }
.kl-biz-context__link{ font-family:var(--sans); font-size:0.8125rem; font-weight:600;
  color:var(--meta-strong); text-align:center; }
.kl-biz-context__link:hover{ color:var(--accent); }

/* ---------- Alert po zgłoszeniu firmy ---------- */
.kl-biz-alert{ margin-top:1.25rem; padding:0.8rem 1.1rem; border-radius:var(--r-card);
  font-size:0.92rem; line-height:1.5; }
.kl-biz-alert--success{ background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.kl-biz-alert--success a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Szpalta: karty na grzbiecie --rail (wzorzec A1) ---------- */
.rail-card{ background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-card);
  padding:1.125rem 1.25rem 1.25rem; }
.rail-card .rc-k{ font-family:var(--sans); font-size:0.71875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--meta-strong); margin-bottom:0.75rem; }

/* Mapa: rdzeń choroplethu, kadr szpalty .rail-search i stan .woj--none
   — w components-content.css. Tu tylko stan multi-selectu tej strony. */
/* województwo odznaczone w filtrze — wyszarzone na mapie */
.woj.off{ fill:#f7f6f5; opacity:.55; }

/* Wyszukiwanie i filtry katalogu (markup hooków bez zmian) */
.rail-search .kl-biz-explorer__search{ margin-top:0.75rem; padding-top:0.875rem; border-top:1px solid var(--border); }
.kl-biz-explorer__search-label{ display:block; margin-bottom:0.375rem; font-family:var(--sans);
  font-size:0.8125rem; font-weight:600; color:var(--heading); }
.kl-biz-explorer__search-control{ position:relative; }
.kl-biz-explorer__search-input{ width:100%; min-width:0; font-family:var(--sans); font-size:0.9375rem;
  color:var(--heading); background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-control);
  min-height:2.75rem; padding:0 4.375rem 0 0.75rem; }
.kl-biz-explorer__search-input:hover{ border-color:var(--heading); }
.kl-biz-explorer__search-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.kl-biz-explorer__search-clear{ position:absolute; right:0.375rem; top:50%; transform:translateY(-50%);
  border:0; background:none; padding:0.375rem 0.5rem; font-family:var(--sans); font-size:0.8125rem;
  font-weight:600; color:var(--meta-strong); cursor:pointer; }
.kl-biz-explorer__search-clear:hover{ color:var(--accent); }
.kl-biz-explorer__search-clear[hidden]{ display:none; }

.kl-biz-explorer__filter{ margin-top:1.125rem; }
.kl-biz-explorer__filter-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
  border:0; background:none; padding:0 0 0.5rem; font-family:var(--sans); font-size:0.8125rem;
  font-weight:700; letter-spacing:.02em; color:var(--heading); cursor:pointer; }
.kl-biz-explorer__filter-toggle::after{ content:"▾"; color:var(--meta); }
.kl-biz-explorer__filter-toggle[aria-expanded="false"]::after{ content:"▸"; }
.kl-biz-explorer__filter-body{ display:grid; grid-template-columns:1fr 1fr; gap:0.3125rem 0.875rem; }
.kl-biz-explorer__filter-body[hidden]{ display:none; }
.kl-biz-explorer__filter-option{ display:flex; align-items:center; gap:0.4375rem;
  font-family:var(--sans); font-size:0.85rem; color:var(--text); cursor:pointer; }
.kl-biz-explorer__filter-option input{ accent-color:var(--accent); width:0.9375rem; height:0.9375rem;
  margin:0; flex:none; }
.kl-biz-explorer__filter-option:hover span{ color:var(--heading); }
.kl-biz-explorer__filter-note{ grid-column:1 / -1; margin:0.25rem 0 0; font-family:var(--sans);
  font-size:.75rem; line-height:1.45; color:var(--meta); }

/* CTA w szpalcie (na desktopie jedyna na stronie) */
.rail-cta p{ margin:0 0 0.875rem; font-size:0.9rem; line-height:1.5; color:var(--text); }
.rail-cta .btn-black{ width:100%; justify-content:center; display:inline-flex; }

/* ---------- Mobile: pasek skoku do karty Szukaj (spójnie z A1) ---------- */
.us-mobilebar{ display:none; }

@media (max-width:999px){
  .us-split{ grid-template-columns:1fr; }
  .us-main{ padding-right:0; padding-bottom:1.75rem; }
  .us-rail{ border-left:0; border-top:1px solid var(--gray-line);
    margin:0 -1.75rem; padding:1.5rem 1.75rem 5.5rem; }
  .us-stick{ position:static; }
  .kl-biz-explorer__results-head{ flex-direction:column; align-items:flex-start; gap:0.25rem; }
  .kl-biz-explorer__results-text{ text-align:left; }
  .kl-biz-context{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .us-mobilebar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:#fff; border-top:1px solid var(--gray-line); box-shadow:var(--shadow-bar);
    padding:0.625rem 1.125rem calc(0.625rem + env(safe-area-inset-bottom)); gap:0.625rem; }
  .us-mobilebar a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    font-family:var(--sans); font-size:0.9375rem; font-weight:600; color:var(--heading);
    background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-control); min-height:2.75rem; }
  .us-mobilebar a:hover{ border-color:var(--heading); }
}
@media (max-width:699px){
  /* shell zwęża padding do 1.125rem — ujemny margines szpalty idzie za nim */
  .us-rail{ margin:0 -1.125rem; padding-left:1.125rem; padding-right:1.125rem; }
  /* moduł realizacji: zdjęcie nad listą (bez paska cen — to nie ogłoszenie) */
  .latest{ grid-template-columns:1fr; grid-template-areas:"media" "list"; gap:0.875rem; }
  .kl-biz-posts__thumb{ width:6rem; height:4rem; }
}
@media (max-width:559px){
  .kl-biz-card:has(.kl-biz-card__media){ grid-template-columns:1fr; gap:0.75rem 0; }
  .kl-biz-card__media{ max-width:20rem; }
}