/* Katalog uslug - dodatek do styles.css, nie osobny system.
   Wszystko, co da sie zalatwic klasami ze strony glownej (.section, .card,
   .btn, .eyebrow, .lead), jest zalatwione tam. Tu siedza wylacznie rzeczy,
   ktorych na stronie glownej nie ma: siatka wizytowek, chipy kategorii,
   ramka „czego nie robi" i formularz kontaktu na ciemnym tle. */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Zdjecia ludzi. Katalog poleca konkretne osoby, wiec twarz jest trescia,
   nie ozdoba - stad krazek, a nie kwadrat z 4px jak reszta layoutu: krazek
   czyta sie jako czlowiek, prostokat jako obrazek produktu. Kiedy zdjecia nie
   ma, u_foto() zwraca ten sam krazek z inicjalami na czerni. */
.usl-pub-foto{flex:none;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--ink-800);color:#fff}
.usl-pub-foto-lit{font-family:var(--font-display);font-weight:900;
  font-size:1.35rem;letter-spacing:.02em;line-height:1}
.usl-pub-foto.duze{width:128px;height:128px}
.usl-pub-foto.duze.usl-pub-foto-lit{font-size:3rem}
.usl-pub-foto.male{width:34px;height:34px}
.usl-pub-foto.male.usl-pub-foto-lit{font-size:.9rem}

/* Naglowek wizytowki: zdjecie obok tekstu, nie nad nim. */
.usl-pub-hero-siatka{display:flex;align-items:flex-start;gap:1.6rem}
.usl-pub-hero-tekst{min-width:0}

.usl-pub-h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;font-size:clamp(2.4rem,7vw,4.2rem);margin:.3rem 0 1rem}
.usl-pub-hero .lead{max-width:56ch}
.usl-pub-odznaka{display:inline-block;margin:.4rem 0 0;padding:.35em .8em;
  background:var(--ink-800);color:#fff;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem}
.usl-pub-meta{margin:.7rem 0 1.2rem;color:var(--ink-600);font-size:.95rem}
.usl-pub-meta b{color:var(--ink-800)}

/* Filtr i kategorie. Chipy, nie <select> - na telefonie wybor jednym palcem,
   a liczba przy nazwie od razu mowi, czy warto tam klikac. */
.usl-pub-filtr{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
.usl-pub-szuk{flex:1 1 280px}
.usl-pub-szuk input{width:100%;box-sizing:border-box;padding:.95em 1.1em;
  border:2px solid var(--line-200);border-radius:var(--radius-sm);
  font:inherit;font-size:1rem;background:#fff;color:var(--ink-800)}
.usl-pub-szuk input:focus{outline:none;border-color:var(--ink-800)}
.usl-pub-kat{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 2rem}
.usl-pub-chip{display:inline-flex;align-items:center;gap:.45em;
  padding:.5em .9em;border:1px solid var(--line-200);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink-800);text-decoration:none;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.8rem;line-height:1}
.usl-pub-chip:hover{border-color:var(--ink-800)}
.usl-pub-chip.on{background:var(--ink-800);color:#fff;border-color:var(--ink-800)}
.usl-pub-chip i{font-style:normal;opacity:.55;font-size:.75rem}

.usl-pub-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.usl-pub-karta{display:flex;flex-direction:column;justify-content:space-between}
.usl-pub-lnk{text-decoration:none;color:inherit;display:block}
.usl-pub-lnk:hover .usl-pub-imie{color:var(--mocno-red)}
.usl-pub-kat-lb{display:block;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ink-600)}
.usl-pub-glowa{display:flex;align-items:center;gap:.9rem;margin:.35rem 0 .5rem}
.usl-pub-imie{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.6rem;line-height:1.05;margin:0}
.usl-pub-zdanie{margin:0 0 .9rem;color:var(--ink-600)}
.usl-pub-karta .usl-pub-meta{margin:0;font-size:.85rem}
.usl-pub-pusto{max-width:56ch;color:var(--ink-600)}

.usl-pub-kolumny{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:2.4rem;align-items:start}
.usl-pub-kolumny h2{font-family:var(--font-display);font-weight:900;
  text-transform:uppercase;font-size:1.5rem;margin:0 0 .6rem}
.usl-pub-kolumny h2+p{margin:0 0 1.6rem;color:var(--ink-600)}
.usl-pub-nie{border-left:3px solid var(--mocno-red);padding:0 0 0 1.2rem}
.usl-pub-nie h2{margin:0 0 .6rem}
.usl-pub-nie p{margin:0;color:var(--ink-600)}

.usl-pub-opinie{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.usl-pub-op-co{margin:0 0 .6rem}
.usl-pub-op-co span{display:block;font-size:.8rem;color:var(--ink-600);font-weight:400}
.usl-pub-op-kto{display:flex;align-items:center;gap:.6rem;
  margin:.7rem 0 0;font-size:.85rem;color:var(--ink-600)}

.usl-pub-kontakt{max-width:60ch}
.usl-pub-form label{display:block;margin:0 0 1rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.usl-pub-form input,.usl-pub-form textarea{display:block;width:100%;box-sizing:border-box;
  margin:.4rem 0 0;padding:.85em 1em;border:2px solid rgba(255,255,255,.22);
  border-radius:var(--radius-sm);background:rgba(255,255,255,.06);color:#fff;
  font:inherit;font-size:1rem;text-transform:none;letter-spacing:0}
.usl-pub-form input:focus,.usl-pub-form textarea:focus{outline:none;border-color:#fff}
.usl-pub-zgoda{font-size:.8rem;color:rgba(255,255,255,.6);max-width:56ch}
.usl-pub-zgoda a{color:#fff}
.usl-pub-blad{border-left:3px solid var(--mocno-red);padding-left:1rem;color:#fff}
.usl-pub-pulapka{position:absolute;left:-9999px;top:0;height:0;overflow:hidden}

@media (max-width:760px){
  .usl-pub-kolumny{grid-template-columns:1fr;gap:1.6rem}
  .usl-pub-hero-siatka{gap:1.1rem}
  .usl-pub-foto.duze{width:84px;height:84px}
  .usl-pub-foto.duze.usl-pub-foto-lit{font-size:2rem}
  .usl-pub-nie{padding-left:1rem}
}