/* KARTA OFERTY - JEDNA NA CALY PORTAL (`parts/_karta-oferty`).
   Strona firmy i lenta rysuja ja tym samym szablonem i TYM arkuszem, wiec
   nie wolno tu siegac po zmienne strony firmy (`--fs-*`) - w lencie ich
   nie ma. Kolory z motywu portalu.

   Wymiary z zadania (28.09): zdjecie 112 px, stawka 27 px, nazwa 14.5 px,
   linijka miasta 11.5 px, najwyzej dwie metki. Siatka, nie flex: dluga
   nazwa stanowiska nie wypchnie stawki za ekran. Uklad KILKU kart (jedna
   kolumna, dwie na laptopie) nalezy do strony, ktora je stawia. */
.kof{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:124px;overflow:hidden;
  text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--gline)}
.kof:focus-visible{outline:2px solid var(--yl);outline-offset:2px}
.kof-foto{position:relative;display:block;background:#15130F}
.kof-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kof-w{display:flex;flex-direction:column;min-width:0;padding:11px 12px 11px 13px}
.kof-stawka{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 5px;margin-bottom:4px}
/* `--gold` to gradient - do koloru napisu sluzy `--yl`, a w ciemnym
   motywie zloto kladzie sie przez `background-clip:text`. */
.kof-stawka b{font-family:var(--f-cond);font-weight:700;font-size:27px;line-height:.9;letter-spacing:-.01em;color:var(--yl)}
:root[data-theme="dark"] .kof-stawka b{background:var(--gtx);-webkit-background-clip:text;background-clip:text;color:transparent}
.kof-stawka i{font-style:normal;padding-bottom:1px;font-size:11px;font-weight:600;color:var(--ink2)}
.kof-stawka-brak{font-size:15px;font-weight:700;color:var(--ink2)}
.kof-t{font-family:var(--f-display);font-weight:700;font-size:14.5px;line-height:1.22;letter-spacing:-.01em;
  overflow-wrap:break-word}
.kof-m{margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--ink2)}
.kof-metki{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.kof-metki span{padding:3px 7px;font-size:11px;font-weight:600;line-height:1.3;
  border:1px solid var(--gline2);color:var(--ink2)}
@media (hover:hover){
  .kof{transition:border-color .15s ease,transform .15s ease}
  .kof:hover{border-color:var(--yl);transform:translateY(-2px)}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .kof:hover{transform:none}
}