/* ==========================================================================
   Sprzętoteka — arkusz stylów.

   Źródło designu: "Pozyczsprzet - platforma wypozyczania sprzetu.html"
   w korzeniu repo (design system o nazwie "modernist"). Tokeny kolorów,
   typografii i odstępów są przeniesione z tamtego pliku 1:1; komponenty
   (.przycisk, .pole, .karta, .znacznik) odwzorowują .btn/.input/.card/.tag
   z projektu.

   CSP z Tasku 8 (default-src 'self', bez unsafe-inline) zabrania atrybutów
   style= i znaczników <style> — w projekcie makiety WSZYSTKO było inline,
   więc każda taka reguła musiała trafić tutaj jako klasa. Pilnują tego
   TestPoradnikBrakInlineJS i TestZadanieBrakInlineJS.

   Ta sama reguła dotyczy fontu: Archivo jest SERWOWANY Z WŁASNEGO ORIGINU
   (web/static/fonts/), bo default-src 'self' zablokowałoby i arkusz
   z fonts.googleapis.com, i pliki z fonts.gstatic.com. Pliki woff2 pochodzą
   z osadzonego bundla projektu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archivo — dwa podzbiory znaków.

   Podzbiór "latin" nie zawiera ą ć ę ł ń ś ź ż (są w U+0100-017F), a "latin-ext"
   nie zawiera ó ani znaków ASCII — polski tekst potrzebuje OBU. Wietnamski
   podzbiór z projektu świadomie pominięty: nic go tu nie użyje, a to 13 kB.

   Trzy deklaracje wagi wskazujące na TEN SAM plik to sposób, w jaki Google
   Fonts serwuje font zmienny — przeglądarka przypina oś wagi do zadeklarowanej
   wartości. Bez tego nagłówki (waga 800) renderowałyby się sztucznym,
   syntetycznym pogrubieniem.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokeny — przeniesione z [data-ds="modernist"] w projekcie.

   Projekt zapisywał linie jako color-mix(in srgb, #201e1d 40%, transparent).
   Tutaj to samo wyrażone przez rgba() — wynik identyczny, a reguła działa
   też tam, gdzie color-mix nie jest wspierany.
   -------------------------------------------------------------------------- */

:root {
  --tlo: #f3f2f2;
  --powierzchnia: #eae9e9;
  --tekst: #201e1d;
  --akcent: #ec3013;

  --linia: rgba(32, 30, 29, 0.4);        /* 2 px — podziały sekcji */
  --linia-slaba: rgba(32, 30, 29, 0.18); /* 1 px — podziały wewnątrz sekcji */
  --tekst-slaby: rgba(32, 30, 29, 0.55);
  --tekst-meta: rgba(32, 30, 29, 0.5);

  --neutral-200: #eae7e7;
  --neutral-300: #d7d3d3;

  --akcent-100: #fff2ef;
  --akcent-200: #ffe0d9;
  --akcent-600: #dd2b0f;
  --akcent-700: #ae1800;
  --akcent-800: #7c1405;

  /* Zieleń liczników podaży — jedyny kolor spoza palety projektu. Projekt
     nie miał stanu "jest dostępne", bo zakładał niezerową podaż wszędzie;
     ten serwis musi odróżnić "0 ofert" od "3 oferty". */
  --zielen: #2f6b34;
  --czerwien-bledu: #b3261e;

  --font-naglowek: "Archivo", system-ui, -apple-system, sans-serif;
  --font-tekst: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --odstep-1: 4px;
  --odstep-2: 8px;
  --odstep-3: 12px;
  --odstep-4: 16px;
  --odstep-6: 24px;
  --odstep-8: 32px;

  /* Projekt ma --radius-sm/md/lg wszystkie ustawione na 0 px. To nie
     przeoczenie, tylko charakter tego designu — ostre kanty i linie
     zamiast zaokrągleń i cieni. */
  --promien: 0;
}

/* --------------------------------------------------------------------------
   Reset i typografia bazowa
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { background: var(--neutral-300); }

body {
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border-inline: 1px solid var(--linia-slaba);
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-naglowek);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

a { color: var(--akcent); text-underline-offset: 3px; }

img { display: block; max-width: 100%; }

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
::selection { background: var(--akcent-200); }

/* Elementy przełączane przez JS atrybutem hidden (patrz widget-popytu.js).
   Reguła [hidden]{display:none} jest w domyślnym arkuszu przeglądarki, ale
   ma niższy priorytet niż nasze reguły na klasach (np. display:block na
   .widget-popytu__alert-form) — bez !important tamta reguła by przegrywała
   i "ukryty" formularz zostawałby widoczny. */
[hidden] { display: none !important; }

/* Klasyczny wzorzec "visually hidden": pole zostaje w DOM i jest wypełnialne
   (więc boty wypełniające każdy input i tak je wypełnią), ale niewidoczne dla
   człowieka i pominięte przez czytniki ekranu (aria-hidden w znaczniku).
   Świadomie NIE display:none/visibility:hidden — część botów pomija pola
   schowane w ten łatwy do wykrycia sposób. */
.pole-niewidoczne {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  left: -9999px;
}

/* --------------------------------------------------------------------------
   Elementy wspólne
   -------------------------------------------------------------------------- */

/* .card-kicker z projektu: mała wersalikowa etykieta w akcencie, która
   nazywa kontekst sekcji, zanim padnie nagłówek. */
.nadtytul {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akcent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Przyciski — .btn z projektu
   -------------------------------------------------------------------------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--tekst);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--promien);
  padding: var(--odstep-2) calc(var(--odstep-3) * 1.2);
  min-height: 38px;
  transition: background-color 120ms ease, color 120ms ease;
}

.przycisk--glowny {
  background: var(--akcent);
  color: var(--tlo);
}
.przycisk--glowny:hover { background: var(--akcent-600); }
.przycisk--glowny:active { background: var(--akcent-700); }

.przycisk--drugi { border-color: var(--linia); }
.przycisk--drugi:hover { background: rgba(32, 30, 29, 0.07); }
.przycisk--drugi:active { background: rgba(32, 30, 29, 0.14); }

/* Wariant na tle akcentu (blok "Twój sprzęt stoi 350 dni w roku") —
   w projekcie zapisany inline jako background:var(--color-bg). */
.przycisk--odwrotny {
  background: var(--tlo);
  color: var(--tekst);
}
.przycisk--odwrotny:hover { background: #fff; }

.przycisk--blok {
  width: 100%;
  justify-content: center;
}

.przycisk:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Pola formularzy — .input i .field z projektu
   -------------------------------------------------------------------------- */

.pole {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--tekst);
  caret-color: var(--akcent);
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}
.pole:hover { border-color: rgba(32, 30, 29, 0.65); }
.pole:focus-visible {
  border-color: var(--akcent);
  outline-offset: 0;
}
.pole::placeholder { color: var(--tekst-meta); }

.etykieta {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: rgba(32, 30, 29, 0.7);
}

/* --------------------------------------------------------------------------
   Karty i znaczniki — .card i .tag z projektu
   -------------------------------------------------------------------------- */

.karta {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-2);
  padding: var(--odstep-3);
  background: var(--powierzchnia);
  border-radius: var(--promien);
}

.karta__tytul {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.karta__opis {
  font-size: 13px;
  color: var(--tekst-slaby);
  flex: 1;
}

.karta__meta {
  font-size: 11px;
  color: var(--tekst-meta);
}

.znacznik {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--promien);
}
.znacznik--neutralny { background: var(--neutral-200); color: var(--tekst); }
.znacznik--akcent { background: var(--akcent-100); color: var(--akcent-800); }
.znacznik--obrys { border: 1px solid var(--akcent); color: var(--akcent); }

/* --------------------------------------------------------------------------
   Nagłówek i stopka serwisu — .nav z projektu
   -------------------------------------------------------------------------- */

.naglowek {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--odstep-4);
  padding: var(--odstep-3) var(--odstep-6);
  border-bottom: 2px solid var(--linia);
}

.naglowek__marka {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--tekst);
  text-decoration: none;
  margin-right: auto;
}
.naglowek__marka:hover { color: var(--akcent); }

.naglowek__nawigacja {
  display: flex;
  gap: var(--odstep-4);
}
.naglowek__nawigacja a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.naglowek__nawigacja a:hover,
.naglowek__nawigacja a[aria-current="page"] { color: var(--akcent); }

main { flex: 1; }

.stopka {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2) var(--odstep-6);
  align-items: baseline;
  padding: var(--odstep-6);
  border-top: 2px solid var(--linia);
  font-size: 13px;
}
.stopka__zasada { font-weight: 600; }
.stopka__meta { color: var(--tekst-meta); margin-left: auto; }

/* --------------------------------------------------------------------------
   Kontener treści stron wewnętrznych (poradniki, ekran zestawu).

   Strona główna go NIE używa: jej sekcje idą na całą szerokość i same
   trzymają swój padding, bo cały charakter tego designu polega na pasach
   rozdzielonych liniami przez całą szerokość okna.
   -------------------------------------------------------------------------- */

.strona { padding: var(--odstep-8) 40px 64px; }

/* --------------------------------------------------------------------------
   Strona główna — hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: 2px solid var(--linia);
}

.hero__glowna {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero__tytul {
  font-size: clamp(34px, 4.4vw, 52px);
  max-width: 15ch;
}

.hero__lead {
  font-size: 17px;
  max-width: 44ch;
}

/* Formularz "Co masz do zrobienia?" — ten sam komponent w hero strony
   głównej i w pasku nad wynikami na /szukaj. */
.szukaj-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.szukaj-form .etykieta { flex-basis: 100%; margin-bottom: 0; }
.szukaj-form .pole { flex: 1 1 14rem; }
.szukaj-form .przycisk { white-space: nowrap; }

.znaczniki {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
}

/* Prawa kolumna hero — realna odpowiedź serwisu na realne zadanie.

   W projekcie było tu miejsce na zdjęcie ("sąsiad przekazuje pilarkę"),
   podane jako makieta w ukośne paski z podpisem "podkład do podmiany".
   Zdjęcia nie mamy, a wysłanie na produkcję samej szrafury wyglądałoby na
   niedokończoną stronę — więc to miejsce pokazuje to, co jest tu naprawdę
   najbardziej charakterystyczne: wpisujesz zadanie, dostajesz komplet
   narzędzi. Dane prawdziwe, prosto ze słownika zadań. */
.hero__zestaw {
  border-left: 2px solid var(--linia);
  background: var(--powierzchnia);
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--odstep-3);
}

.hero__zestaw-zadanie {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.hero__zestaw-lista {
  list-style: none;
  width: 100%;
  max-width: 36ch;
  counter-reset: pozycja;
}
.hero__zestaw-lista li {
  display: flex;
  align-items: baseline;
  gap: var(--odstep-3);
  padding: 9px 0;
  border-top: 1px solid var(--linia-slaba);
  font-size: 15px;
}
.hero__zestaw-lista li::before {
  content: counter(pozycja, decimal-leading-zero);
  counter-increment: pozycja;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--akcent);
}

.hero__zestaw-dopisek {
  font-size: 13px;
  color: var(--tekst-slaby);
  max-width: 36ch;
}

/* --------------------------------------------------------------------------
   Strona główna — trzy kroki.

   Numeracja 01/02/03 jest tu uzasadniona: to realna kolejność, w której
   człowiek przechodzi przez serwis, a nie ozdobnik.
   -------------------------------------------------------------------------- */

.kroki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--linia);
}

.krok {
  padding: var(--odstep-8) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--odstep-2);
}
.krok + .krok { border-left: 1px solid var(--linia-slaba); }

.krok__numer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--akcent);
}
.krok h2 { font-size: 20px; }
.krok p { font-size: 14px; color: var(--tekst-slaby); }

/* --------------------------------------------------------------------------
   Pasy strony głównej — popularne zadania, wyniki wyszukiwania
   -------------------------------------------------------------------------- */

.pas {
  padding: var(--odstep-8) 40px;
  border-bottom: 2px solid var(--linia);
}

.pas__naglowek {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--odstep-3);
  margin-bottom: var(--odstep-6);
}
.pas__naglowek h2 { font-size: 20px; }
.pas__naglowek p { font-size: 13px; color: var(--tekst-slaby); }

/* Pasek wyszukiwania nad wynikami (/szukaj) — odpowiednik górnej belki
   z ekranu "Wyniki i mapa" w projekcie: niski, roboczy, bez nagłówka. */
.pas--szukanie { padding-block: var(--odstep-4); }

.zadania-siatka {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Cała karta jest odnośnikiem — powierzchnia klikalna zamiast samego
   tytułu, bo w siatce trafienie w tekst na telefonie jest loterią. */
.karta--zadanie { padding: 0; }
.karta__link {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-2);
  height: 100%;
  padding: var(--odstep-4);
  color: var(--tekst);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.karta__link:hover {
  border-color: var(--akcent);
  background: var(--akcent-100);
}
.karta__link:hover .karta__tytul { color: var(--akcent); }

/* Blok akcentu — najmocniejszy punkt strony. W projekcie to pełnej
   szerokości plama #ec3013 domykająca stronę główną. */
.blok-akcentu {
  padding: 40px;
  background: var(--akcent);
  color: var(--tlo);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.blok-akcentu h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  max-width: 24ch;
}
.blok-akcentu p {
  font-size: 16px;
  max-width: 52ch;
}
.blok-akcentu *:focus-visible { outline-color: var(--tlo); }

/* --------------------------------------------------------------------------
   Lista zadań (wyniki wyszukiwania)
   -------------------------------------------------------------------------- */

.zadania-lista { list-style: none; }
.zadania-lista li { border-top: 1px solid var(--linia-slaba); }
.zadania-lista a {
  display: block;
  padding: var(--odstep-3) 0;
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
}
.zadania-lista a:hover { color: var(--akcent); }

.szukaj-wyniki p { margin-top: var(--odstep-2); color: var(--tekst-slaby); }

/* --------------------------------------------------------------------------
   Poradniki — lista
   -------------------------------------------------------------------------- */

.poradniki-lista__wstep {
  margin-top: var(--odstep-3);
  font-size: 17px;
  max-width: 52ch;
  color: var(--tekst-slaby);
}

.poradniki-lista__pozycje {
  list-style: none;
  margin-top: var(--odstep-8);
  border-top: 2px solid var(--linia);
}

.poradniki-lista__pozycja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: var(--odstep-6);
  align-items: baseline;
  padding: var(--odstep-6) 0;
  border-bottom: 1px solid var(--linia-slaba);
}
.poradniki-lista__pozycja h2 { font-size: 25px; }
.poradniki-lista__pozycja h2 a {
  color: var(--tekst);
  text-decoration: none;
}
.poradniki-lista__pozycja h2 a:hover { color: var(--akcent); }
.poradniki-lista__opis {
  margin-top: var(--odstep-2);
  max-width: 62ch;
  color: var(--tekst-slaby);
}
.poradniki-lista__sezon {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tekst-meta);
}

/* --------------------------------------------------------------------------
   Układ dwukolumnowy: artykuł + widget popytu (poradnik i ekran zestawu)
   -------------------------------------------------------------------------- */

.poradnik-uklad {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .poradnik-uklad {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }
}

.poradnik__powrot {
  font-family: var(--font-mono);
  font-size: 12px;
}
.poradnik__powrot a { text-decoration: none; }
.poradnik__powrot a:hover { text-decoration: underline; }

.poradnik h1,
.zestaw h1 {
  margin-top: var(--odstep-3);
  font-size: clamp(30px, 4vw, 42px);
}

.poradnik__sezon {
  display: inline-block;
  margin-top: var(--odstep-3);
  padding: 3px 10px;
  background: var(--akcent-100);
  color: var(--akcent-800);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Treść poradnika idzie 17 px, nie bazowymi 15 px: projekt był makietą
   interfejsu (karty, tabele, filtry), a tu czyta się tysiąc słów ciągiem.
   Ta sama zasada co w projekcie przy akapicie opisu oferty — tekst do
   czytania dostaje własny stopień. */
.poradnik__tresc {
  margin-top: var(--odstep-8);
  font-size: 17px;
  line-height: 1.65;
  max-width: 68ch;
}
.poradnik__tresc h2 {
  margin-top: 40px;
  font-size: 25px;
}
.poradnik__tresc h3 {
  margin-top: var(--odstep-8);
  font-size: 20px;
}
.poradnik__tresc p,
.poradnik__tresc ul,
.poradnik__tresc ol,
.poradnik__tresc blockquote { margin-top: var(--odstep-4); }
.poradnik__tresc ul,
.poradnik__tresc ol { padding-left: var(--odstep-6); }
.poradnik__tresc li { margin-top: var(--odstep-2); }
.poradnik__tresc blockquote {
  padding: var(--odstep-3) var(--odstep-4);
  border-left: 3px solid var(--akcent);
  background: var(--powierzchnia);
}
.poradnik__tresc blockquote p:first-child { margin-top: 0; }
.poradnik__tresc table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--odstep-6);
  font-size: 15px;
}
.poradnik__tresc th {
  text-align: left;
  padding: var(--odstep-2);
  border-bottom: 2px solid var(--linia);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-meta);
}
.poradnik__tresc td {
  padding: var(--odstep-2);
  border-bottom: 1px solid var(--linia-slaba);
}

/* --------------------------------------------------------------------------
   Ekran zestawu (/zadanie/{slug})
   -------------------------------------------------------------------------- */

.zestaw__opis {
  margin-top: var(--odstep-3);
  font-size: 17px;
  max-width: 60ch;
  color: var(--tekst-slaby);
}

/* Reguła R1 z projektu UX: "Każde narzędzie rezerwujesz osobno, u jego
   właściciela" — ma być widoczna od pierwszego kontaktu z ekranem, stąd
   wyróżnienie linią akcentu zamiast zwykłego akapitu. */
.zestaw__regula-r1 {
  margin-top: var(--odstep-6);
  padding: var(--odstep-3) var(--odstep-4);
  border-left: 3px solid var(--akcent);
  background: var(--powierzchnia);
  font-weight: 600;
  max-width: 60ch;
}

.zestaw__grupa { margin-top: var(--odstep-8); }
.zestaw__grupa h2 {
  padding-bottom: var(--odstep-2);
  border-bottom: 2px solid var(--linia);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-meta);
}
.zestaw__grupa ul { list-style: none; }
.zestaw__grupa li {
  padding: var(--odstep-3) 0;
  border-bottom: 1px solid var(--linia-slaba);
  font-size: 17px;
}

/* Licznik podaży przy pozycji — ukryty do czasu podania kodu pocztowego
   w widgecie popytu obok (patrz [hidden] wyżej i data-widget-licznik
   w web/static/widget-popytu.js). Ten sam wygląd co
   .widget-popytu__licznik, bo to ten sam koncept, tylko w innym miejscu. */
.zestaw__licznik {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zielen);
}

/* --------------------------------------------------------------------------
   Widget popytu
   -------------------------------------------------------------------------- */

.widget-popytu {
  position: sticky;
  top: var(--odstep-6);
  padding: var(--odstep-6);
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
}
.widget-popytu h2 { font-size: 17px; }
.widget-popytu__wstep {
  margin-top: var(--odstep-2);
  font-size: 13px;
  color: var(--tekst-slaby);
}

.widget-popytu__kod-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
  margin-top: var(--odstep-4);
}
.widget-popytu__kod-form .etykieta { flex-basis: 100%; margin-bottom: 0; }
.widget-popytu__kod-form .pole { flex: 1 1 8rem; }

.widget-popytu__status {
  margin-top: var(--odstep-4);
  font-size: 13px;
}
.widget-popytu__status--blad { color: var(--czerwien-bledu); }

.widget-popytu__lista {
  list-style: none;
  margin-top: var(--odstep-4);
}
.widget-popytu__pozycja {
  padding: var(--odstep-3) 0;
  border-top: 1px solid var(--linia-slaba);
}

/* Pozycja, której wszystkie dzieci są ukryte, nie ma czego pokazać — a
   rysowała kreskę i padding. Dotyczy ekranu zestawu (PozycjeWTresci=true):
   nazwa i licznik są tam wypisane w treści artykułu, więc w widgecie zostaje
   sam formularz alertu, ukryty do czasu podania kodu pocztowego. Efektem
   były trzy puste kreski pod przyciskiem "Sprawdź dostępność".

   Reguła jest ogólna, nie zaszyta pod ten jeden ekran: gdy JS odkryje
   formularz (usunie hidden), pozycja wraca sama. Na stronie poradnika nic
   nie zmienia — tam widoczna nazwa kategorii trzyma pozycję na ekranie.
   Brak wsparcia :has() degraduje się do stanu sprzed tej reguły. */
.widget-popytu__pozycja:not(:has(> :not([hidden]))) { display: none; }
.widget-popytu__nazwa { font-weight: 600; }
.widget-popytu__licznik {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zielen);
}

.widget-popytu__alert-form {
  display: block;
  margin-top: var(--odstep-2);
}
.widget-popytu__alert-form .etykieta { font-size: 12px; }
.widget-popytu__alert-form .pole { margin-bottom: var(--odstep-2); }

.widget-popytu__potwierdzenie {
  margin-top: var(--odstep-2);
  font-size: 13px;
  color: var(--zielen);
}

/* --------------------------------------------------------------------------
   Węższe ekrany.

   Projekt był makietą 1280 px i nie miał wariantu mobilnego. Kolejność
   załamań: najpierw rozpada się siatka kart (4 → 2 → 1), potem układy
   dwukolumnowe (hero, kroki).
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .zadania-siatka { grid-template-columns: repeat(2, 1fr); }
}

/* Widget przestaje być przyklejony tam, gdzie kolumny są już pod sobą —
   inaczej przykleiłby się w środku przewijania długiego poradnika. */
@media (max-width: 62rem) {
  .widget-popytu { position: static; }
}

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; }
  .hero__glowna { padding: 40px var(--odstep-6); }
  .hero__zestaw {
    border-left: 0;
    border-top: 2px solid var(--linia);
    padding: var(--odstep-8) var(--odstep-6);
  }

  .kroki { grid-template-columns: 1fr; }
  .krok { padding: var(--odstep-6); }
  .krok + .krok {
    border-left: 0;
    border-top: 1px solid var(--linia-slaba);
  }

  .pas { padding: var(--odstep-8) var(--odstep-6); }
  .blok-akcentu { padding: var(--odstep-8) var(--odstep-6); }
  .strona { padding: var(--odstep-6) var(--odstep-6) 48px; }

  .poradniki-lista__pozycja {
    grid-template-columns: 1fr;
    gap: var(--odstep-2);
  }

  .naglowek { padding: var(--odstep-3) var(--odstep-4); }
  .stopka { padding: var(--odstep-6) var(--odstep-4); }
  .stopka__meta { margin-left: 0; }
}

@media (max-width: 40rem) {
  .zadania-siatka { grid-template-columns: 1fr; }
  .poradnik__tresc { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}