/* catalog.css — katalog komisów (otoauta) i agencji (osiedlo). WSPÓLNY dla obu portali. Utworzony 2026-08-03. CZTERY SZABLONY, JEDEN MARKUP. Tryb ustawia klasa na (cat-tpl--*), a nie osobna strona ani osobny plik. Dzięki temu przełączenie jest natychmiastowe: nie ma ponownego pobrania danych ani przeładowania, zmienia się wyłącznie warstwa prezentacji. Mapa jest JEDNĄ instancją Leaflet, nigdy nie niszczoną — przy zmianie trybu wołamy tylko invalidateSize(). Niszczenie i tworzenie mapy od nowa gubiłoby pozycję, zoom i wczytane kafelki, a to najdroższy element widoku. */ :root{ --cat-linia:#e6e9ec; --cat-tlo:#f7f8fa; --cat-karta:#fff; --cat-tekst:#1a2530; --cat-przygas:#6b7681; --cat-akcent:#f5631e; --cat-zielony:#1f8a52; --cat-cien:0 1px 3px rgba(16,24,40,.08); } .cat-wrap{max-width:1400px;margin:0 auto;padding:0 16px} /* ── Pasek wyszukiwania i filtrów — wspólny dla wszystkich trybów ────────────── */ .cat-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 0} .cat-search input[type=search]{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--cat-linia); border-radius:10px;font-size:15px} .cat-search select,.cat-search button{padding:10px 13px;border:1px solid var(--cat-linia); border-radius:10px;background:#fff;font-size:14px;cursor:pointer} .cat-search button.cat-primary{background:var(--cat-akcent);color:#fff;border-color:transparent;font-weight:700} .cat-promien{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cat-przygas)} .cat-promien input[type=range]{width:120px} /* Przełącznik szablonów */ .cat-tpl-switch{display:flex;gap:4px;margin-left:auto} .cat-tpl-switch button{width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:16px} .cat-tpl-switch button[aria-pressed=true]{background:var(--cat-akcent);color:#fff;border-color:transparent} .cat-meta{display:flex;align-items:center;gap:12px;padding:6px 0 14px;font-size:13px;color:var(--cat-przygas)} /* ── Układ dwukolumnowy ──────────────────────────────────────────────────────── */ .cat-body{display:grid;gap:16px;align-items:start} .cat-lista{min-width:0;display:flex;flex-direction:column;gap:12px} .cat-mapa{min-width:0;position:sticky;top:14px;height:calc(100vh - 120px); border:1px solid var(--cat-linia);border-radius:14px;overflow:hidden;background:var(--cat-tlo)} /* ── Karta firmy (tryb klasyczny) ────────────────────────────────────────────── */ .cat-card{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:14px;background:var(--cat-karta); border:1px solid var(--cat-linia);border-radius:14px;box-shadow:var(--cat-cien); /* Pominięcie rysowania kart poza ekranem — przy dużym katalogu to różnica między płynnym przewijaniem a szarpaniem. Rozmiar zastępczy trzyma pasek przewijania. */ content-visibility:auto;contain-intrinsic-size:auto 150px} .cat-card:hover{border-color:#cfd6dd} .cat-card.is-highlight{border-color:var(--cat-akcent);box-shadow:0 0 0 2px rgba(245,99,30,.16)} .cat-card__logo{width:72px;height:72px;border-radius:12px;object-fit:cover;background:var(--cat-tlo); display:grid;place-items:center;font-weight:800;color:var(--cat-przygas);font-size:22px} .cat-card__nazwa{font-weight:800;font-size:16px;margin:0 0 2px;color:var(--cat-tekst)} .cat-card__adres{font-size:13px;color:var(--cat-przygas);margin:0 0 6px} .cat-card__badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .cat-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--cat-tlo); color:var(--cat-przygas)} .cat-badge--open{background:rgba(31,138,82,.12);color:var(--cat-zielony)} .cat-badge--closed{background:rgba(107,118,129,.12)} .cat-badge--dist{background:rgba(245,99,30,.12);color:var(--cat-akcent)} .cat-card__stats{display:flex;gap:14px;font-size:13px;color:var(--cat-przygas);margin-bottom:8px} .cat-card__akcje{display:flex;gap:8px;flex-wrap:wrap} .cat-card__akcje a,.cat-card__akcje button{font-size:13px;padding:7px 12px;border-radius:9px; border:1px solid var(--cat-linia);background:#fff;text-decoration:none;color:var(--cat-tekst);cursor:pointer} .cat-card__akcje a.cat-primary{background:var(--cat-akcent);color:#fff;border-color:transparent;font-weight:700} /* Własna subdomena — to jest „Twoja strona www" i ma być widoczna, nie schowana. */ .cat-card__www{font-size:12px;color:var(--cat-akcent);text-decoration:none} /* ── TRYB A: klasyczny (domyślny) ────────────────────────────────────────────── */ .cat-tpl--classic .cat-body{grid-template-columns:minmax(0,55fr) minmax(0,45fr)} /* ── TRYB B: mapa dominująca ─────────────────────────────────────────────────── */ .cat-tpl--map .cat-body{grid-template-columns:360px minmax(0,1fr)} .cat-tpl--map .cat-card{grid-template-columns:44px 1fr;padding:10px;gap:10px;contain-intrinsic-size:auto 84px} .cat-tpl--map .cat-card__logo{width:44px;height:44px;font-size:15px} .cat-tpl--map .cat-card__stats,.cat-tpl--map .cat-card__akcje, .cat-tpl--map .cat-card__opis,.cat-tpl--map .cat-card__www{display:none} .cat-tpl--map .cat-mapa{height:calc(100vh - 120px)} /* ── TRYB C: kafelki (mobile-first) ──────────────────────────────────────────── */ .cat-tpl--tiles .cat-body{grid-template-columns:1fr} .cat-tpl--tiles .cat-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .cat-tpl--tiles .cat-card{grid-template-columns:1fr;text-align:center;padding:18px 14px; contain-intrinsic-size:auto 230px} .cat-tpl--tiles .cat-card__logo{width:64px;height:64px;margin:0 auto 10px} .cat-tpl--tiles .cat-card__badges,.cat-tpl--tiles .cat-card__stats{justify-content:center} .cat-tpl--tiles .cat-card__akcje{justify-content:center} /* W kafelkach mapa nie zabiera miejsca — otwiera się na żądanie, pełnym ekranem. */ .cat-tpl--tiles .cat-mapa{display:none} .cat-tpl--tiles .cat-mapa.is-overlay{display:block;position:fixed;inset:0;z-index:9000; height:100vh;border-radius:0;border:0} /* ── TRYB D: kompaktowy (dla zawodowców) ─────────────────────────────────────── */ .cat-tpl--compact .cat-body{grid-template-columns:minmax(0,1fr) 280px} .cat-tpl--compact .cat-lista{gap:0;border:1px solid var(--cat-linia);border-radius:12px;overflow:hidden; background:#fff} .cat-tpl--compact .cat-card{grid-template-columns:32px 1fr;border:0;border-bottom:1px solid var(--cat-linia); border-radius:0;box-shadow:none;padding:9px 12px;align-items:center;contain-intrinsic-size:auto 52px} .cat-tpl--compact .cat-card:last-child{border-bottom:0} .cat-tpl--compact .cat-card__logo{width:32px;height:32px;font-size:13px;border-radius:7px} .cat-tpl--compact .cat-card__nazwa{font-size:14px;margin:0} .cat-tpl--compact .cat-card__opis,.cat-tpl--compact .cat-card__akcje{display:none} .cat-tpl--compact .cat-card__adres{margin:0;display:inline} .cat-tpl--compact .cat-card__badges{display:inline-flex;margin:0 0 0 8px} .cat-tpl--compact .cat-card__stats{margin:0;display:inline-flex;margin-left:10px} .cat-tpl--compact .cat-mapa{height:260px;position:sticky;top:14px} /* ── Przycisk „szukaj w tym obszarze" — sedno wyszukiwania lokalnego ─────────── */ .cat-research{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:800; padding:9px 16px;border-radius:999px;border:0;background:#fff;box-shadow:0 4px 14px rgba(16,24,40,.18); font-weight:700;font-size:13px;cursor:pointer;display:none} .cat-research.is-widoczny{display:block} .cat-mapa{position:relative} .cat-pusto{padding:40px;text-align:center;color:var(--cat-przygas);background:#fff; border:1px solid var(--cat-linia);border-radius:14px} @media (max-width:991.98px){ /* Na wąskim ekranie każdy tryb sprowadza się do jednej kolumny — dwie kolumny poniżej tej szerokości dają dwa nieczytelne paski zamiast jednego czytelnego. */ .cat-tpl--classic .cat-body,.cat-tpl--map .cat-body,.cat-tpl--compact .cat-body{grid-template-columns:1fr} .cat-mapa{position:relative;top:0;height:320px;order:-1} .cat-tpl--compact .cat-mapa{height:220px} }