/* Data Hero Jobs — własny, krótki arkusz na semantycznym HTML.
   Bez frameworka (żaden popularny nie jest dostępny offline), bez zewnętrznych zasobów i fontów: systemowy krój pisma.
   Kolory są w zmiennych poniżej; test tests/test_templates.py liczy z nich kontrast (WCAG, co najmniej 4,5:1 dla tekstu).
   Skala pisma: 14/16/20/28/40 px. Układ: jedna kolumna na telefonie (390 px), siatka od 48 em (768 px). */

:root {
  --kolor-tekst: #1b1f24;
  --kolor-tekst-slaby: #596573;    /* teksty pomocnicze: meta, daty, podpisy */
  --kolor-tlo: #ffffff;
  --kolor-powierzchnia: #f4f6f9;   /* panele, filtry, aktywny element nawigacji */
  --kolor-ramka: #d5dbe3;
  --kolor-ramka-pola: #7a8494;     /* obramowanie pól formularza (kontrast ≥ 3:1 na białym i na powierzchni) */
  --kolor-placeholder: #6b7483;    /* podpowiedź w polu „Szukaj” */
  --kolor-glowny: #1d4ed8;         /* linki, przyciski */
  --kolor-glowny-ciemny: #1e40af;  /* hover */
  --kolor-na-glownym: #ffffff;     /* tekst na przycisku */
  --kolor-widelki: #0b5e46;        /* widełki wynagrodzenia */
  --kolor-widelki-tlo: #e3f5ec;
  --kolor-fokus: #b45309;          /* obwódka fokusu (widoczna na białym i na stopce) */
  --kolor-stopka: #1b1f24;
  --kolor-stopka-tekst: #d7dde5;
  --kolor-baner: #fff4d6;          /* pasek „podgląd demo” */
  --kolor-baner-tekst: #5c3d00;
  --szerokosc: 72rem;
  --promien: .75rem;
}

/* --- podstawy ----------------------------------------------------------------------------------- */

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  color: var(--kolor-tekst);
  background: var(--kolor-tlo);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: 1.75rem; letter-spacing: -.01em; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.0625rem; margin: 1.25rem 0 .5rem; }
p, ul, ol, dl { margin: 0 0 1rem; }
a { color: var(--kolor-glowny); text-underline-offset: .15em; }
a:hover { color: var(--kolor-glowny-ciemny); }
:focus-visible { outline: 3px solid var(--kolor-fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
.kontener { max-width: var(--szerokosc); margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }
.lead { font-size: 1.125rem; color: var(--kolor-tekst-slaby); }
@media (min-width: 48em) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.375rem; }
  .kontener { padding: 0 2rem; }
}

/* --- nagłówek, nawigacja, stopka ---------------------------------------------------------------- */

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 10;
  padding: .5rem .75rem; border-radius: .4rem;
  background: var(--kolor-tlo); color: var(--kolor-glowny); font-weight: 600;
}
.skip-link:focus { top: 1rem; }
/* Cel skip linku: obwódka tylko przy fokusie z klawiatury, wewnątrz kontenera (nie wystaje na 390 px). */
main:focus:not(:focus-visible) { outline: none; }
main:focus-visible { outline-offset: -3px; }

.demo-banner {
  margin: 0; padding: .5rem 1rem; text-align: center; font-size: .875rem;
  background: var(--kolor-baner); color: var(--kolor-baner-tekst); border-bottom: 1px solid #e3c77a;
}

.site-header { border-bottom: 1px solid var(--kolor-ramka); background: var(--kolor-tlo); }
.site-header .kontener {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; min-height: 4rem; padding-top: .5rem; padding-bottom: .5rem;
}
.site-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.125rem; color: var(--kolor-tekst); text-decoration: none;
}
.site-brand svg { width: 1.75rem; height: 1.75rem; color: var(--kolor-glowny); flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.site-nav a {
  padding: .5rem .75rem; border-radius: .5rem; font-weight: 500;
  color: var(--kolor-tekst); text-decoration: none;
}
.site-nav a:hover { background: var(--kolor-powierzchnia); color: var(--kolor-glowny-ciemny); }
.site-nav a[aria-current="page"] { background: var(--kolor-powierzchnia); color: var(--kolor-glowny-ciemny); }

main.kontener { padding-top: 2rem; padding-bottom: 3rem; }   /* tylko pion — poziomy odstęp daje .kontener */

.site-footer {
  padding: 2rem 0;
  background: var(--kolor-stopka); color: var(--kolor-stopka-tekst); font-size: .9375rem;
}
.site-footer .kontener { display: grid; gap: 1.5rem; }
.site-footer p { margin: 0 0 .5rem; max-width: 40rem; }
.site-footer a { color: #ffffff; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
@media (min-width: 48em) {
  .site-footer .kontener { grid-template-columns: 1fr auto; align-items: start; }
}

/* --- przyciski i formularz filtrów ------------------------------------------------------------- */

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .6rem 1.25rem; box-sizing: border-box;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: .5rem;
}
.przycisk-glowny { background: var(--kolor-glowny); color: var(--kolor-na-glownym); }
.przycisk-glowny:hover { background: var(--kolor-glowny-ciemny); color: var(--kolor-na-glownym); }
.przycisk-drugi { background: var(--kolor-tlo); color: var(--kolor-tekst); border-color: var(--kolor-ramka-pola); }
.przycisk-drugi:hover { background: var(--kolor-powierzchnia); color: var(--kolor-tekst); }

.filtry {
  display: grid; gap: .75rem 1rem; margin: 0 0 1.25rem; padding: 1rem;
  background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
}
.filtry label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }
.filtry input, .filtry select {
  width: 100%; min-height: 2.75rem; padding: .5rem .75rem; box-sizing: border-box;
  font: inherit; color: var(--kolor-tekst); background: var(--kolor-tlo);
  border: 1px solid var(--kolor-ramka-pola); border-radius: .5rem;
}
.filtry input::placeholder { color: var(--kolor-placeholder); opacity: 1; }
@media (min-width: 48em) {
  .filtry { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
}

/* --- lista ofert -------------------------------------------------------------------------------- */

.hero { max-width: 44rem; margin-bottom: 2rem; }
.hero .lead { margin: 0; }

.lista-naglowek {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem 1rem; margin: 0 0 1rem;
}
.lista-naglowek h2 { margin: 0; }
.licznik { margin: 0; color: var(--kolor-tekst-slaby); font-size: .9375rem; }

.oferty { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.oferta {
  position: relative; display: grid; gap: .75rem 1.5rem; padding: 1.25rem;
  background: var(--kolor-tlo); border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
}
.oferta:hover { border-color: var(--kolor-glowny); box-shadow: 0 1px 3px rgba(27, 31, 36, .08); }
.oferta:focus-within { outline: 3px solid var(--kolor-fokus); outline-offset: 2px; }
.oferta-firma { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 500; color: var(--kolor-tekst-slaby); }
.oferta-tytul { margin: 0 0 .5rem; font-size: 1.25rem; }
.oferta-tytul a { color: var(--kolor-tekst); text-decoration: none; }
.oferta-tytul a:hover { color: var(--kolor-glowny); }
/* Cała karta jest klikalna: link tytułu rozciąga się na kartę, a fokus pokazuje karta (focus-within).
   Firma, widełki, meta i data leżą nad pseudo-elementem, żeby dało się je zaznaczyć i skopiować. */
.oferta-tytul a::after { content: ""; position: absolute; inset: 0; border-radius: var(--promien); }
.oferta-tytul a:focus-visible { outline: none; }
.oferta .oferta-firma, .oferta .meta, .oferta-widelki, .oferta-potwierdzenie { position: relative; z-index: 1; }

.meta {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem;
  color: var(--kolor-tekst-slaby); font-size: .9375rem;
}
.meta li { display: inline; }
/* Separator (kropka) na końcu elementu, więc przy zawijaniu zostaje w poprzednim wierszu. */
.meta li:not(:last-child)::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-left: .5rem; vertical-align: middle;
  border-radius: 50%; background: currentColor;
}

.oferta-widelki { margin: 0; display: grid; gap: .35rem; justify-items: start; }
.widelki-glowne {
  display: inline-block; margin: 0; padding: .35rem .7rem; border-radius: .5rem; max-width: 100%; box-sizing: border-box;
  font-weight: 700; color: var(--kolor-widelki); background: var(--kolor-widelki-tlo);
}
.widelki-inne { margin: 0; font-size: .9375rem; color: var(--kolor-tekst-slaby); }
.oferta-potwierdzenie {
  grid-column: 1 / -1; margin: 0; padding-top: .75rem; border-top: 1px solid var(--kolor-ramka);
  font-size: .875rem; color: var(--kolor-tekst-slaby);
}
@media (min-width: 48em) {
  .oferta { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .oferta-widelki { justify-items: end; text-align: right; max-width: 22rem; }
}

.brak-wynikow {
  display: grid; gap: .75rem; justify-items: center; margin: 0; padding: 1.5rem; text-align: center;
  border: 1px dashed var(--kolor-ramka-pola); border-radius: var(--promien);
}

/* --- strona oferty ------------------------------------------------------------------------------ */

.oferta-naglowek { max-width: 50rem; margin-bottom: 1.5rem; }
.oferta-naglowek .oferta-firma { font-size: 1.0625rem; }
.oferta-naglowek .meta { font-size: 1rem; }

.oferta-uklad { display: grid; gap: 1.5rem; }
.oferta-tresc { max-width: 44rem; min-width: 0; }
.oferta-tresc > h2 { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--kolor-ramka); }
.oferta-tresc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.oferta-tresc ul:not(.chips), .oferta-tresc ol { padding-left: 1.5rem; }
.oferta-tresc li { margin-bottom: .4rem; }

.panel {
  padding: 1.25rem; box-sizing: border-box;
  background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
}
.panel h2 {
  margin: 0 0 .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}
.widelki-lista { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.widelki-lista li {
  padding: .5rem .75rem; border-radius: .5rem; font-weight: 600;
  color: var(--kolor-widelki); background: var(--kolor-widelki-tlo);
}
.fakty { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .75rem; font-size: .9375rem; }
.fakty dt { color: var(--kolor-tekst-slaby); }
.fakty dd { margin: 0; }
.aplikuj { width: 100%; font-size: 1.0625rem; }
.aplikuj-info { margin: .75rem 0 0; font-size: .875rem; color: var(--kolor-tekst-slaby); }

.chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  margin: 0; padding: .3rem .75rem; border: 1px solid var(--kolor-ramka); border-radius: 999px;
  background: var(--kolor-tlo); font-size: .9375rem;
}
.oferta-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--kolor-ramka); }
@media (max-width: 59.99em) {
  .oferta-cta .przycisk { width: 100%; }
}
/* Na telefonie podsumowanie (widełki, daty, przycisk) jest pierwsze — w DOM też, więc czytnik ekranu dostaje je
   od razu; na komputerze treść idzie w szeroką lewą kolumnę, a podsumowanie w prawą, przyklejoną przy przewijaniu. */
@media (min-width: 60em) {
  .oferta-uklad { grid-template-columns: minmax(0, 1fr) 24rem; gap: 2.5rem; align-items: start; }
  .oferta-tresc { grid-column: 1; grid-row: 1; }
  .oferta-aside { grid-column: 2; grid-row: 1; position: sticky; top: 1rem; }
}

/* --- strona główna bez ofert i newsletter ------------------------------------------------------- */

.pusty, .newsletter-sekcja {
  display: grid; gap: 1.25rem 2.5rem; margin: 0 0 1.5rem; padding: 1.5rem; box-sizing: border-box;
  border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
}
.pusty { background: var(--kolor-powierzchnia); }
.pusty h2, .newsletter-sekcja h2 { margin: 0 0 .5rem; }
.pusty p { max-width: 36rem; }
.newsletter-sekcja p { margin: 0; max-width: 40rem; }
.pusty .lista-kontrolna { margin: 0; align-self: center; }
@media (min-width: 48em) {
  .pusty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 2rem; }
  .newsletter-sekcja { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 47.99em) {
  .pusty .przycisk, .newsletter-sekcja .przycisk { width: 100%; }
}

/* Lista z „ptaszkami” rysowanymi w CSS (bez obrazków i fontów z ikonami). */
.lista-kontrolna { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lista-kontrolna li { position: relative; padding-left: 2rem; font-weight: 500; }
.lista-kontrolna li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--kolor-widelki-tlo);
}
.lista-kontrolna li::after {
  content: ""; position: absolute; left: .45rem; top: .4em;
  width: .3rem; height: .6rem; border: solid var(--kolor-widelki); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* --- strony statyczne --------------------------------------------------------------------------- */

.strona { max-width: 44rem; }
.strona-szeroka { max-width: 60rem; }
.strona-naglowek { max-width: 44rem; margin-bottom: 1rem; }
.strona-naglowek .lead { margin-bottom: 1.25rem; }
.sekcja { margin-top: 2rem; }
.sekcja h2 { margin-top: 0; }
.punkty { padding-left: 1.5rem; }
.punkty li { margin-bottom: .5rem; }

.karty-standardu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.karty-standardu li {
  padding: 1.25rem; border: 1px solid var(--kolor-ramka); border-radius: var(--promien); background: var(--kolor-tlo);
}
.karty-standardu h3 { margin: 0 0 .4rem; }
.karty-standardu p { margin: 0; color: var(--kolor-tekst-slaby); }
@media (min-width: 40em) {
  .karty-standardu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
  .karty-standardu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pilotaz { display: grid; gap: 1rem; margin-top: 2rem; }
.panel-tresc {
  padding: 1.5rem; box-sizing: border-box;
  background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
}
.panel-tresc h2 { margin: 0 0 .5rem; }
.panel-tresc p { margin: 0; }
@media (min-width: 48em) {
  .pilotaz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Szkic polityki prywatności: etykieta nad tytułem, ramka z uwagą i wyróżnione braki („do uzupełnienia”). */
.etykieta-szkic {
  display: inline-block; margin: 0 0 .75rem; padding: .2rem .65rem; border-radius: 999px;
  font-size: .875rem; font-weight: 700; letter-spacing: .02em;
  background: var(--kolor-baner); color: var(--kolor-baner-tekst); border: 1px solid #e3c77a;
}
.szkic-uwaga {
  padding: .9rem 1rem; border-left: 4px solid #e3c77a; border-radius: .5rem;
  background: var(--kolor-baner); color: var(--kolor-baner-tekst);
}
mark.brak { padding: 0 .2em; border-radius: .25rem; background: var(--kolor-baner); color: var(--kolor-baner-tekst); font-weight: 600; }

/* --- strona 404 --------------------------------------------------------------------------------- */

.blad { max-width: 36rem; margin: 1rem auto 2rem; text-align: center; }
.blad-kod {
  margin: 0 0 .25rem; font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--kolor-glowny);
}
.blad .lead { margin-bottom: 1.5rem; }