/* LISTA OGLOSZEN `/oferty` - klasy z przedrostkiem `ol-`.

   KOLORY WYLACZNIE ZE ZMIENNYCH `gold.css` (oba motywy). Ani jednej
   deklaracji `--line`, `--gline`, `--gold` tutaj: lokalna wartosc odcina
   strone od wspolnej poprawki motywu. Jasny motyw ma trzy reguly i ta
   strona je trzyma przez same zmienne:
     - na zlotej zalewie (`--gold`) wylacznie `--ctafg`,
     - zloto jako napis to `--yl` / `--gtx` (w jasnym plaskie #7E5C0C),
     - drugi poziom tekstu to `--ink2`, nigdy jasniej.

   Rogow nie zaokraglamy, poza tym, co jest okragle (przelacznik, licznik).

   TELEFON JEST BAZA (kolumna do 470 px, boki 18 px), a od 1024 px strona
   dostaje WLASNY uklad: filtr w bocznej kolumnie, karty w siatce, bez
   dolnego paska - a nie rozciagniety telefon. */

.ol{max-width:470px;margin:0 auto;padding:0 18px 8px;font-family:var(--f-body);color:var(--ink)}
.ol *,.ol *::before,.ol *::after{box-sizing:border-box}
.ol a{text-decoration:none}
.ol :focus-visible{outline:2px solid var(--yl);outline-offset:2px}
.ol-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ol-h1{font:800 30px/1.05 var(--f-display);letter-spacing:-.02em;margin:18px 0 12px;color:var(--ink)}
.ol-lead{font-size:15px;line-height:1.5;color:var(--ink2);margin:0 0 6px}
.ol-bok{display:none}
.ol-glowna{min-width:0}

/* ------------------------------------------------ szukanie i szybkie filtry */

.ol-top{position:sticky;top:60px;z-index:40;margin:0 -18px;padding:10px 18px 0;
  background:var(--paper);border-bottom:1px solid var(--gline2)}
@media (max-width:620px){.ol-top{top:56px}}
.ol-szuk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ol-pole{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 12px;min-width:0;
  background:var(--card);border:1px solid var(--obw)}
.ol-pole:focus-within{outline:2px solid var(--yl);outline-offset:1px}
.ol-pole svg{flex:0 0 18px;width:18px;height:18px;fill:var(--ink2)}
.ol-pole input{flex:1 1 auto;min-width:0;width:100%;align-self:stretch;min-height:46px;border:0;background:none;outline:none;padding:0;
  font:600 16px/1.2 var(--f-body);color:var(--ink)}
.ol-pole input::placeholder{color:var(--ink2);opacity:1;font-weight:500}
.ol-szuk-b{min-height:48px;padding:0 16px;border:0;cursor:pointer;background:var(--gold);color:var(--ctafg);
  font:800 14px/1 var(--f-display)}
.ol-drop{top:calc(100% + 4px);border-radius:0}
.ol-drop[hidden]{display:none}

.ol-chipy{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:10px -18px 0;padding:0 18px 11px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ol-chipy::-webkit-scrollbar{display:none}
.ol-chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;white-space:nowrap;
  font:600 14px/1 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--obw)}
.ol-chip.on{background:var(--gold);color:var(--ctafg);border-color:transparent}

.ol-ostatnie{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font:700 14px/1.2 var(--f-body);color:var(--yl)}

/* ------------------------------------------------------- wiersz wyniku */

.ol-res{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:14px 0 8px}
.ol-n{margin:0;font:800 22px/1.1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.ol-n span{font:600 14px/1 var(--f-body);color:var(--ink2);letter-spacing:0}
.ol-sort{display:flex;gap:2px}
.ol-sort a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:700 13px/1 var(--f-body);color:var(--ink2);
  border-bottom:2px solid transparent}
.ol-sort a.on{color:var(--yl);border-bottom-color:var(--yl)}

.ol-wl{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.ol-wl a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;max-width:100%;
  font:600 13px/1.25 var(--f-body);color:var(--ink);background:var(--gsoft);border:1px solid var(--gline);overflow-wrap:anywhere}
.ol-wl a span{font-size:18px;line-height:1;color:var(--ink2)}

/* ---------------------------------------------------------------- karta */

.ol-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.ol-karta{position:relative;display:block;min-width:0;padding:15px 15px 13px;background:var(--card);border:1px solid var(--gline2)}
.ol-karta.offer-media{display:block}
.ol-gora{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ol-st{flex:1 1 auto;min-width:0}

/* STAWKA - 40 px, zloto, nad nazwa. W jasnym motywie `--gtx` jest plaskim
   #7E5C0C, w ciemnym gradientem; oba rysuja sie przez background-clip. */
.ol-kwota{font:800 40px/.95 var(--f-display);letter-spacing:-.035em;overflow-wrap:anywhere;
  background:var(--gtx);-webkit-background-clip:text;background-clip:text;color:transparent}
.ol-kwota i{font-style:normal;font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.ol-kwota-brak{font-size:24px;letter-spacing:-.01em}
.ol-jedn{margin-top:7px;font:700 12px/1.3 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}

/* Wstawka 74x64 z boku - tylko gdy ogloszenie ja ma. Lezy NAD odnosnikiem
   karty, bo jej stukniecie otwiera pelny ekran rolek, a nie ogloszenie. */
.ol-foto{position:relative;z-index:2;flex:0 0 74px}
.ol-foto .of-wstawka{width:74px;height:64px;aspect-ratio:auto;border-radius:0;border:0}
.ol-foto .of-graj svg{width:22px;height:22px}

.ol-t{margin:11px 0 5px;font:700 18px/1.2 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.ol-t a{color:var(--ink)}
/* Odnosnik rozciagniety na cala karte: cala karta prowadzi do ogloszenia,
   a w HTML nie ma odnosnika w odnosniku. */
.ol-link::after{content:"";position:absolute;inset:0;z-index:1}
.ol .ol-link:focus-visible{outline:none}
.ol .ol-link:focus-visible::after{outline:2px solid var(--yl);outline-offset:-2px}

.ol-firma{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font:600 14px/1.35 var(--f-body);color:var(--ink2)}
.ol-fn{min-width:0;overflow-wrap:anywhere}
.ol-kr{width:3px;height:3px;border-radius:50%;background:currentColor}
.ol-ok{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:13px;color:var(--green)}
.ol-ok svg{width:14px;height:14px;fill:currentColor}

.ol-tagi{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0}
.ol-tag{padding:5px 9px;font:600 12px/1.3 var(--f-body);color:var(--ink2);background:var(--gsoft);border:1px solid var(--gline2);overflow-wrap:anywhere;max-width:100%}
.ol-tag-hi{color:var(--yl);border-color:var(--gline)}

.ol-stopka{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--gline2);font:600 13px/1.3 var(--f-body);color:var(--ink2)}
.ol-go{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;font-weight:700;color:var(--yl)}
.ol-go svg{width:16px;height:16px}

/* ------------------------------------------------------------- wstawki */

.ol-indeks,.ol-ins{padding:16px 15px;background:var(--card);border:1px solid var(--gline2)}
.ol-indeks-g{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.ol-indeks-g h2{margin:0;font:800 15px/1.2 var(--f-display);color:var(--yl)}
.ol-indeks-g span{font:700 12px/1.3 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.ol-bar{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr) auto;align-items:center;gap:9px;margin-bottom:9px;font-size:13px}
.ol-bar-n{font-weight:600;color:var(--ink2);overflow-wrap:anywhere}
.ol-bar-l{position:relative;height:7px;background:var(--gline2)}
.ol-bar-l i{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}
.ol-bar-v{font:800 14px/1 var(--f-display);color:var(--yl);white-space:nowrap}
.ol-drobne{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}

.ol-ins{margin-top:16px}
.ol-ins h2{margin:0 0 6px;font:800 17px/1.2 var(--f-display);color:var(--ink)}
.ol-ins p{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink2)}

/* ---------------------------------------------------------------- guziki */

.ol-cta,.ol-alt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;
  padding:6px 16px;text-align:center;cursor:pointer;font:800 15px/1.2 var(--f-display)}
.ol-cta{background:var(--gold);color:var(--ctafg);border:0}
.ol-alt{background:transparent;color:var(--yl);border:1px solid var(--obw);font-weight:700;font-size:14px}
.ol-cta small,.ol-alt small{font:600 12px/1.3 var(--f-body)}
.ol-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:22px;
  background:var(--ctafg);color:var(--ink);font:800 12px/1 var(--f-display)}
.ol-dok .ol-cta{flex-direction:row}

.ol-wiecej{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:12px;
  color:var(--yl);border:1px solid var(--obw);font:700 14px/1.2 var(--f-display)}
.ol-wiecej[hidden]{display:none}
.ol-strony[hidden]{display:none}
.ol-strony{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ol-strony a,.ol-strony span{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 8px;
  font:700 14px/1 var(--f-display);color:var(--ink);border:1px solid var(--gline2)}
.ol-strony a{border-color:var(--obw)}
.ol-strony [aria-current]{background:var(--gold);color:var(--ctafg);border-color:transparent}
.ol-strony span[aria-hidden]{border:0;min-width:20px}
.ol-prawo{margin:22px 0 6px;text-align:center;font-size:13px;line-height:1.5;color:var(--ink2)}

/* Dol ekranu: sam guzik filtrow. Stoi NAD dolnym paskiem portalu (66 px
   plus wyciety pasek gestow) - tam, gdzie jest telefon albo aplikacja. */
.ol-dok{position:sticky;bottom:0;z-index:45;display:flex;margin:14px -18px 0;
  padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--gline)}
.ol-dok .ol-cta{flex:1 1 auto}
@media (max-width:760px){.ol-dok,.ol-fdol{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:11px}}
@media (display-mode:standalone){.ol-dok,.ol-fdol{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:11px}}

/* ----------------------------------------------------------------- pusto */

.ol-pusto{padding:34px 4px 6px;text-align:center}
.ol-zero{font:800 72px/1 var(--f-display);letter-spacing:-.04em;
  background:var(--gtx);-webkit-background-clip:text;background-clip:text;color:transparent}
.ol-pusto h2{margin:12px 0 8px;font:800 24px/1.15 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.ol-pusto p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ink2);overflow-wrap:anywhere}
.ol-pusto .ol-cta,.ol-pusto .ol-alt{margin-top:10px}
.ol-lb{display:block;padding:0;margin:0 0 11px;font:700 12px/1.3 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ol-lb label{color:inherit}
.ol-bliskie-h{margin:30px 0 12px}

/* ----------------------------------------------------------------- filtr */

.ol-fh{padding-top:8px}
.ol-wstecz{display:inline-flex;align-items:center;gap:4px;min-height:44px;font:700 14px/1 var(--f-body);color:var(--yl)}
.ol-wstecz svg{width:18px;height:18px}
.ol-filtr{margin:0}
.ol-fg{margin:0;padding:18px 0;border:0;border-bottom:1px solid var(--gline2);min-width:0}
.ol-fg legend{float:left;width:100%}
.ol-fg legend + *{clear:both}

.ol-suwak{display:block;width:100%;height:44px;margin:0;accent-color:var(--yl);background:transparent}
.ol-suwak-v{margin:2px 0 12px;font:600 14px/1.3 var(--f-body);color:var(--ink2)}
.ol-suwak-v b{font:800 20px/1 var(--f-display);color:var(--yl)}

.ol-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--obw);margin-top:9px}
.ol-seg label{position:relative;display:block;min-width:0}
.ol-seg input,.ol-wyb input,.ol-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ol-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 6px;text-align:center;cursor:pointer;
  font:700 13px/1.2 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.ol-seg input:checked + span{background:var(--gold);color:var(--ctafg)}
.ol-seg input:focus-visible + span{outline:2px solid var(--yl);outline-offset:-4px}

.ol-wybory{display:flex;flex-wrap:wrap;gap:7px}
.ol-wyb{position:relative;display:block;max-width:100%}
.ol-wyb span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 13px;cursor:pointer;
  font:600 14px/1.2 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--obw);overflow-wrap:anywhere}
.ol-wyb small,.ol-sw small{font:700 12px/1 var(--f-cond);color:var(--ink2)}
.ol-wyb input:checked + span{background:var(--gold);color:var(--ctafg);border-color:transparent}
.ol-wyb input:checked + span small{color:var(--ctafg)}
.ol-wyb input:focus-visible + span{outline:2px solid var(--yl);outline-offset:2px}

.ol-sw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:12px;
  min-height:56px;padding:10px 0;border-top:1px solid var(--gline2);cursor:pointer}
.ol-sw:first-of-type{border-top:0}
.ol-sw-t b{display:block;font:600 15px/1.3 var(--f-body);color:var(--ink)}
.ol-sw-t span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--ink2)}
.ol-tg{position:relative;display:block;width:48px;height:28px;border-radius:28px;background:var(--card);border:1px solid var(--obw)}
.ol-tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink2);transition:left .18s}
.ol-sw input:checked + .ol-tg{background:var(--gold);border-color:transparent}
.ol-sw input:checked + .ol-tg::after{left:23px;background:var(--ctafg)}
.ol-sw input:focus-visible + .ol-tg{outline:2px solid var(--yl);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ol-tg::after{transition:none}}

.ol-sel{display:block;width:100%;min-height:48px;padding:0 12px;font:600 16px/1.2 var(--f-body);color:var(--ink);
  background:var(--card);border:1px solid var(--obw);border-radius:0}

.ol-fdol{position:sticky;bottom:0;z-index:45;display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr);gap:9px;
  margin:0 -18px;padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--gline)}
.ol-ekran-filtr .ol-filtr{padding-bottom:4px}

/* --------------------------------------------------------- najechanie */

@media (hover:hover){
  .ol-karta:hover{border-color:var(--gline)}
  .ol-karta:hover .ol-t a{color:var(--yl)}
  .ol-chip:not(.on):hover,.ol-wyb input:not(:checked) + span:hover,.ol-alt:hover,.ol-wiecej:hover{border-color:var(--yl)}
  .ol-cta:hover,.ol-szuk-b:hover{filter:brightness(1.08)}
  .ol-sort a:hover,.ol-wstecz:hover{color:var(--yl)}
}

/* ============================================================ LAPTOP */

@media (min-width:1024px){
  .ol{max-width:1280px;padding:0 32px 24px}
  .ol-uklad{display:grid;grid-template-columns:320px minmax(0,1fr);gap:40px;align-items:start}
  .ol-bok{display:block;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;
    padding:26px 22px 0;margin-top:26px;background:var(--card);border:1px solid var(--gline2);overscroll-behavior:contain}
  .ol-bok-h{margin:0 0 4px;font:800 22px/1.1 var(--f-display);color:var(--ink)}
  .ol-bok .ol-fdol{margin:0 -22px;padding:12px 22px;background:var(--card);grid-template-columns:minmax(0,96px) minmax(0,1fr)}
  .ol-h1{font-size:52px;margin:28px 0 18px}
  .ol-top{position:static;margin:0;padding:0;border:0;background:none}
  .ol-chipy{margin:12px 0 0;padding:0 0 4px;flex-wrap:wrap;overflow:visible}
  .ol-dok{display:none}
  .ol-lista{gap:14px}
  .ol-karta{padding:18px 18px 15px}
  .ol-pusto{max-width:560px;margin:0 auto}

  /* Ekran filtra na laptopie to srodek strony, nie telefon rozciagniety. */
  .ol-ekran-filtr{max-width:720px}
  .ol-ekran-filtr .ol-fdol{margin:0;padding:14px 0;bottom:0}
}
@media (min-width:1280px){
  .ol-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Wstawki miedzy kartami zajmuja caly rzad - to nie sa karty. */
  .ol-lista > .ol-indeks{grid-column:1 / -1}
}
@media (min-width:1600px){
  .ol-uklad{grid-template-columns:340px minmax(0,1fr)}
}