/*
 * Warstwa korekt nakładana NA oryginalny CSS z Oxygena.
 * Ładowana jako ostatnia, więc wygrywa bez `!important` tam, gdzie się da.
 *
 * Zasada: minimalny zestaw regułek naprawiających konkretne, zmierzone problemy.
 * Nie przepisujemy tu wyglądu — od tego będzie refaktor na komponenty.
 */

:root {
  --brand-mint: #2f8a77;
  --brand-cyan: #00728a;
  --brand-coral-text: #b4442f;
}

/* Kontrastu NIE poprawiamy tutaj — Oxygen ustawia kolory selektorami po ID,
   których nie da się przebić z zewnętrznego arkusza. Podmiana barw dzieje się
   wprost w arkuszach, w scripts/enhance.mjs (COLOR_MAP). */

/* --- 1. Pola dotykowe: zmierzone 37–41 px, norma to 44 px --- */
.ct-link-button,
.oxy-nav-menu a,
.facetwp-dropdown,
.facetwp-autocomplete,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="submit"],
select,
button {
  min-height: 44px;
}

.ct-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- 4. Czytelność długich bloków tekstu ---
   Klasę .txt-left nadaje enhance.mjs tylko blokom dłuższym niż 25 słów,
   żeby nie ruszać krótkich, celowo wyśrodkowanych podpisów. */
.txt-left {
  text-align: left !important;
  /* !important, bo Oxygen ustawia max-width:100% selektorem po ID.
     68ch ≈ 630 px przy 16 px — mieści się w zalecanych 60–75 znaków w linii. */
  max-width: 68ch !important;
}

/* Bloku tekstu NIE centrujemy: kontenery Oxygena to kolumny flex z własnym
   `align-items`, więc `margin-inline:auto` odrywało akapit od krawędzi, przy
   której stoi jego nagłówek (widoczne w panelach usług). Niech decyduje rodzic. */

/* --- 4b. Czwarta karta „dlaczego my" ---
   enhance.mjs nadaje .txt-left blokom dłuższym niż 25 słów, więc jedna z czterech
   kart dostała inne wyrównanie niż jej rodzeństwo. Ta sama rola = to samo
   wyrównanie; tekst zostaje wyśrodkowany jak w pozostałych trzech. */
#text_block-73-14.txt-left {
  text-align: center !important;
  max-width: none !important;
}

/* --- 4b2. Kolorowe paski w sekcji „witamy w Properton" ---
   Pasek szedł zaraz po tekście z `margin-top:45px`, więc cztery karty o różnej
   długości opisu kończyły się na czterech różnych wysokościach. Teraz odstęp
   niesie tekst (stałe 45 px, także gdy karty stoją jedna pod drugą na
   telefonie), a pasek spycha na dół wolna przestrzeń karty — dzięki temu
   wszystkie cztery lądują na wspólnej linii. */
/* Oxygen daje rzędowi `align-items:flex-start`, więc karty miały wysokość
   własnej treści i nie było czego rozpychać. Wspólna wysokość to warunek
   wspólnej linii pasków. */
#div_block-54-14 {
  align-items: stretch;
}

#text_block-60-14,
#text_block-65-14,
#text_block-69-14,
#text_block-73-14 {
  margin-bottom: 45px;
}

#div_block-62-14,
#div_block-66-14,
#div_block-70-14,
#div_block-74-14 {
  margin-top: auto;
  flex-shrink: 0;
}

/* --- 4c. Punkty w panelach usług ---
   Panele niosły po dwa akapity (559 słów łącznie = 6,4 ekrana na telefonie),
   powtarzające treść z /sprzedaj/, /kup/ i /wynajmij/. Zostaje jedno zdanie
   wprowadzające i trzy konkrety — resztę czyta się na stronie docelowej. */
.us-punkty {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  max-width: 68ch;
}

.us-punkty li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  text-align: left;
}

.us-punkty li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 0.65em ≈ środek pierwszego wiersza przy line-height 1,3 */
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

/* Dawna korekta 4d (nagłówek „zapraszamy do kontaktu" na koralowym panelu)
   oraz awaryjny stan karuzeli opinii zniknęły razem z oxygenową sekcją, której
   dotyczyły. Zastąpił ją komponent `KontaktCTA.astro` — sam pilnuje kontrastu,
   a opinie klientów mają w serwisie jedno miejsce: panel opinii Google. */

/* --- 4e. Miara wiersza w pytaniach i odpowiedziach ---
   Odpowiedzi szły przez całą szerokość sekcji (~130 znaków w wierszu).
   Ta sama miara co reszta tekstu na stronie. */
#div_block-172-14 {
  max-width: 72ch;
  margin-inline: auto;
}

/* --- 4f. FAQ jako accordion ---
   Trzy rozwinięte odpowiedzi to 1,4 ekrana ściany tekstu na telefonie, a pyta
   się zwykle o jedną rzecz. Treść zostaje w DOM (details tylko ją zwija, Google
   ją indeksuje), a blok JSON-LD FAQPage jest nietknięty. */
.faq-item {
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  cursor: pointer;
  /* 44 px celu dotykowego */
  padding: 0.9em 0;
  list-style: none;
}

/* Safari rysuje własny trójkąt mimo list-style:none */
.faq-q::-webkit-details-marker {
  display: none;
}

/* h3 zostaje dla SEO i czytnika, ale nie może rozpychać wiersza na blok */
.faq-q h3 {
  margin: 0;
  text-align: left;
}

.faq-q::after {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-q::after {
  transform: rotate(-135deg);
}

.faq-a {
  margin: 0 0 1.2em;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .faq-q::after {
    transition: none;
  }
}

/* --- 5. Widoczny focus (Oxygen go gasi) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 2px;
}

/* --- 6. Pasek kontaktowy i link pomijający nawigację --- */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: #16211e;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--brand-coral-text);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus {
  background: #963a28;
  color: #fff;
}

/* --- 7. Hero „tryptyk usług" (wariant zaakceptowany w trybie live, 2026-08-10) ---
   Zastępuje dawne hero zdjęcie+kartonik: trzy klikalne panele usług w kolorach
   funkcyjnych (koral/mięta/cyjan) na prawdziwych zdjęciach + pasek wyszukiwarki. */
.hv1-hero {
  display: block;
}

/* H1 przejęty po usuniętej sekcji „witamy w Properton”: hero jest tryptykiem
   zdjęć i nie ma gdzie postawić nagłówka, ale strona musi go mieć — dla
   czytników ekranu i wyszukiwarek. */
.hv1-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hv1-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 66vh;
}

.hv1-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  text-decoration: none;
  background-size: cover;
  background-position: center;
}

.hv1-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.82;
  transition: all 0.3s ease-out;
}

.hv1-panel:hover::before,
.hv1-panel:focus-visible::before {
  opacity: 0.57;
}

/* Przyciemnienie przy dolnej krawędzi — warunek czytelności podpisu (16px) na
   zdjęciu: bez niego biały tekst schodzi do 3,6:1 na jasnych kadrach.
   To chrome funkcyjne, nie ozdoba. */
.hv1-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.4), transparent 42%);
  pointer-events: none;
}

/* Cyjanowy obrys focusu ginie na cyjanowym panelu — na zdjęciach biały. */
.hv1-panel:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.hv1-sprzedaj {
  background-image: url(/assets/2021/06/sprzedaz-mieszkania-przez-agencje-properton-2.webp);
}

.hv1-sprzedaj::before {
  background: var(--brand-coral-text);
}

.hv1-kup {
  background-image: url(/assets/2021/06/kup-mieszkanie-z-agencja-properton-z-warszawy-2.webp);
}

.hv1-kup::before {
  background: #2a7d6b;
}

.hv1-wynajmij {
  background-image: url(/assets/2022/03/klucze-do-nieruchomosci-w-rece-posredniczki-wynajmu-mieszkan.webp);
}

.hv1-wynajmij::before {
  background: var(--brand-cyan);
}

.hv1-label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: Lato, sans-serif;
  line-height: 1;
}

.hv1-word {
  display: block;
  font-size: 56px;
  font-weight: 800;
}

.hv1-sub {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.55px;
}

.hv1-search {
  background: #fff;
}

.hv1-search-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  padding: 24px 20px;
  align-items: stretch;
}

.hv1-field {
  flex: 1 1 0;
  min-height: 55px;
  border: 0;
  border-radius: 0;
  background: #f2f2f2;
  color: #2a2a2a;
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 0 16px;
}

.hv1-field::placeholder {
  color: #374047;
}

.hv1-submit {
  flex: 0 0 180px;
  min-height: 55px;
  border: 0;
  border-radius: 0;
  background: var(--brand-coral-text);
  color: #fff;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.hv1-submit:hover:not(:disabled) {
  background: var(--brand-cyan);
}

/* Wyszukiwarka czeka na feed ASARI — pola są wyłączone, więc przycisk też.
   Kliknięcie nic nie robiło, a wyglądał na aktywny. Włączyć razem z ASARI. */
.hv1-submit:disabled {
  background: #f2f2f2;
  color: var(--brand-coral-text);
  cursor: not-allowed;
}

@media (max-width: 991px) {
  .hv1-panels {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hv1-panel {
    min-height: 190px;
    padding: 24px 20px;
  }

  .hv1-word {
    font-size: 40px;
  }

  .hv1-search-inner {
    flex-direction: column;
  }

  .hv1-submit {
    flex-basis: auto;
  }
}

/* --- 9. Rytm długiego tekstu ---
   Panele usług niosą po ~850 znaków w jednym bloku rozdzielonym <br><br>.
   Oko nie miało gdzie wejść: nagłówek, a potem jednolita plama. Teraz trzy
   stopnie — nagłówek, zdanie prowadzące (18px), tekst podstawowy — i prawdziwy
   odstęp między akapitami zamiast pustego wiersza. Panele mają ~250px zapasu
   w pionie (wysokość dyktuje zdjęcie), więc większy lead nie wydłuża strony. */
.ct-text-block p {
  margin: 0 0 20px;
}

.ct-text-block p:last-child {
  margin-bottom: 0;
}

.ct-text-block .us-lead {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Jedna miara dla czterech paneli: było 464 px i 525 px, czyli cztery takty
   o różnej szerokości. !important, bo .txt-left narzuca 68ch. */
#text_block-27-14,
#text_block-20-14,
#text_block-133-14,
#text_block-148-14 {
  max-width: 54ch !important;
}

/* Na szerokościach pośrednich (tablet, wąski laptop) 80-pikselowe wcięcia
   zaprojektowane pod szeroki układ zjadały miarę: 42 i 48 znaków w wierszu,
   różnica 16% między panelami. Poniżej 1320px wcięcia są symetryczne i mniejsze,
   więc cztery takty mają tę samą szerokość. */
@media (max-width: 1320px) and (min-width: 992px) {
  #div_block-120-14,
  #div_block-125-14,
  #div_block-131-14,
  #div_block-146-14 {
    padding-left: 24px;
    padding-right: 24px;
  }

  #div_block-16-14,
  #div_block-145-14 {
    padding-left: 24px;
  }
}

/* --- 10. Pytania i odpowiedzi: łączenie w pary ---
   Odstępy były równe, więc pytanie kleiło się do cudzej odpowiedzi tak samo
   mocno jak do swojej. Blisko wewnątrz pary, luźno między parami.
   (Puste <h3></h3>, których Oxygen używał jako odstępu, usunięte ze źródła.) */
#_rich_text-190-14 h3 {
  font-size: 24px;
  line-height: 1.25;
  margin: 52px 0 10px;
}

#_rich_text-190-14 h3:first-of-type {
  margin-top: 0;
}

#_rich_text-190-14 .faq-a {
  margin: 0;
}

/* Pasek mobilny — telefon był dotąd tylko w stopce, 8 sekcji od góry. */
.contact-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  display: none;
  border-top: 1px solid rgb(0 0 0 / 0.08);
  background: #fff;
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}

.contact-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.contact-bar .cb-call {
  background: var(--brand-coral-text);
  color: #fff;
}

.contact-bar .cb-mail {
  background: #fff;
  color: #16211e;
}

@media (max-width: 991px) {
  .contact-bar {
    display: flex;
  }

  /* miejsce na pasek, żeby nie zasłaniał stopki */
  body {
    padding-bottom: 56px;
  }

  .header-phone {
    display: none;
  }
}

/* --- 11. Nagłówek „zwarty pasek" ---
   PRZENIESIONE 2026-08-15 do `src/components/Header.astro`.

   Style jechały tutaj, bo nagłówek istniał tylko na stronach ze zrzutu,
   obok CSS-u z Oxygena. Gdy nagłówek stał się jednym komponentem dla całego
   serwisu, okazało się, że `Base.astro` (strony ofert) w ogóle nie ładuje
   tego pliku — nagłówek leciał tam bez stylu: 346 px zamiast 79, bez
   przyklejenia, logo 302 px. Style mieszkają teraz przy markupie i jadą
   razem z nim wszędzie. Oxygen nie zna klas `.naglowek__*`, więc nie ma
   już czego przebijać kolejnością ładowania. */

/* --- Podstrony usługowe: jeden układ, dwa kolory (2026-08-14) ---
   /sprzedaj i /kup to ta sama strona z inną usługą: hero ze zdjęciem pod
   filtrem koloru i formularzem, sekcja wprowadzająca z gniazdem na materiał,
   proces w policzalnych krokach, „dlaczego my", sekcja zamykająca. Poprawki
   12–16 opisują ten układ raz, a listy identyfikatorów niosą oba warianty.

   Dlaczego nadal po ID, a nie po klasach: Oxygen nazwał te same bloki inaczej
   na każdej stronie (`-16` i `-18`) i stylował je selektorami po ID. Reguła
   po klasie ma niższą swoistość i przegrałaby z arkuszem Oxygena — musiałaby
   nadrabiać lawiną `!important`. Dopisanie identyfikatora do listy jest
   uczciwsze niż udawanie, że zrzut ma warstwę komponentów.

   Kolor usługi wchodzi tu zmienną, nie kopią reguł: koral na /sprzedaj,
   mięta na /kup. Zasada trzech kolorów mówi, że kolor jednej usługi nie ma
   prawa pojawić się na stronie drugiej — także w narożniku pustego gniazda
   i w kratce zgody, dlatego zmienna siedzi na `<body>`, a nie na sekcji. */
.page-id-16 {
  --usluga: #b4442f;
}

.page-id-18 {
  --usluga: #2a7d6b;
}

.page-id-20 {
  --usluga: #00728a;
}

/* --- 12. Proces usługi na /sprzedaj i /kup: ostre krawędzie zamiast kół ---
   Sekcja niosła sześć zdjęć 353×353 w kołach i sześć numerów w koralowych
   kółkach — jedyne koła w serwisie poza pigułką telefonu, a DESIGN.md stawia
   sprawę wprost: ostre krawędzie wszędzie, wyjątkiem jest pigułka. Nowe
   komponenty (Doradcy, KontaktCTA) zerują zaokrąglenia Oxygena tak samo;
   ta sekcja została pominięta, bo siedzi w zrzucie.

   Uwaga na przyszłość: okrągłość NIE była w CSS — same pliki były wykadrowane
   do koła z przezroczystym tłem. Dlatego razem z tą korektą podmienione zostały
   zdjęcia w zrzucie na prostokątne (DANE ZASTĘPCZE, do dobrania tematycznie).

   Numery były pozycjonowane na oko pod okrąg — cztery różne warianty
   (right/bottom, top/left, left/bottom, top/right) na sześć kroków. Teraz
   jeden róg dla wszystkich: numeracja czyta się z góry, jak sekwencja.

   Odstępy między krokami szły na przemian 87 px i 120 px, bez powodu.
   Jeden takt dla całej sekcji. */
#div_block-26-16,
#div_block-56-69,
#div_block-63-69,
#div_block-70-69,
#div_block-77-69,
#div_block-84-69,
#div_block-69-18,
#div_block-84-18,
#div_block-90-18,
#div_block-105-18,
#div_block-111-18,
#div_block-21-20,
#div_block-36-20,
#div_block-42-20,
#div_block-57-20,
#div_block-63-20,
#div_block-78-20 {
  border-radius: 0;
  background-color: transparent;
  overflow: hidden;
}

/* wewnętrzne przesunięcia z Oxygena robiły miejsce na koralowy pierścień */
#div_block-26-16 > div,
#div_block-56-69 > div,
#div_block-63-69 > div,
#div_block-70-69 > div,
#div_block-77-69 > div,
#div_block-84-69 > div,
#div_block-69-18 > div,
#div_block-84-18 > div,
#div_block-90-18 > div,
#div_block-105-18 > div,
#div_block-111-18 > div,
#div_block-21-20 > div,
#div_block-36-20 > div,
#div_block-42-20 > div,
#div_block-57-20 > div,
#div_block-63-20 > div,
#div_block-78-20 > div {
  margin: 0;
}

/* Sekcja procesu stoi na szarości #f2f2f2, a pusty stan gniazda ma domyślnie
   dokładnie taką samą szarość — pole robiło się niewidzialne i zostawały same
   koralowe narożniki wiszące w powietrzu. Na tej sekcji pole jest białe;
   to ta sama zamiana ról, którą robią karty ofert na szarym tle. */
#div_block-26-16 figure,
#div_block-56-69 figure,
#div_block-63-69 figure,
#div_block-70-69 figure,
#div_block-77-69 figure,
#div_block-84-69 figure,
#div_block-69-18 figure,
#div_block-84-18 figure,
#div_block-90-18 figure,
#div_block-105-18 figure,
#div_block-111-18 figure,
#div_block-21-20 figure,
#div_block-36-20 figure,
#div_block-42-20 figure,
#div_block-57-20 figure,
#div_block-63-20 figure,
#div_block-78-20 figure {
  --gm-tlo: #fff;
}

/* Kadr kroku ma stały rozmiar niezależnie od tego, czy stoi w nim zdjęcie,
   czy gniazdo czekające na materiał — po podmianie nic się nie przesuwa. */
#div_block-26-16 img,
#div_block-56-69 img,
#div_block-63-69 img,
#div_block-70-69 img,
#div_block-77-69 img,
#div_block-84-69 img,
#div_block-26-16 figure,
#div_block-56-69 figure,
#div_block-63-69 figure,
#div_block-70-69 figure,
#div_block-77-69 figure,
#div_block-84-69 figure,
#div_block-69-18 img,
#div_block-84-18 img,
#div_block-90-18 img,
#div_block-105-18 img,
#div_block-111-18 img,
#div_block-69-18 figure,
#div_block-84-18 figure,
#div_block-90-18 figure,
#div_block-105-18 figure,
#div_block-111-18 figure,
#div_block-21-20 img,
#div_block-36-20 img,
#div_block-42-20 img,
#div_block-57-20 img,
#div_block-63-20 img,
#div_block-78-20 img,
#div_block-21-20 figure,
#div_block-36-20 figure,
#div_block-42-20 figure,
#div_block-57-20 figure,
#div_block-63-20 figure,
#div_block-78-20 figure {
  display: block;
  width: 353px;
  height: 353px;
  object-fit: cover;
  border-radius: 0;
}

#div_block-53-69,
#div_block-59-69,
#div_block-66-69,
#div_block-73-69,
#div_block-80-69,
#div_block-87-69,
#div_block-72-18,
#div_block-87-18,
#div_block-93-18,
#div_block-108-18,
#div_block-114-18,
#div_block-24-20,
#div_block-39-20,
#div_block-45-20,
#div_block-60-20,
#div_block-66-20,
#div_block-81-20 {
  border-radius: 0;
  inset: 0 auto auto 0;
}

#div_block-36-16,
#div_block-58-16,
#div_block-78-16,
#div_block-78-18,
#div_block-99-18,
#div_block-30-20,
#div_block-51-20,
#div_block-72-20 {
  margin-top: 87px;
}

/* --- 13. Hero /sprzedaj: panel usługi zamiast wyszukiwarki cudzych ofert ---
   Ekran otwierający stronę sprzedaży nie dawał właścicielowi nic do zrobienia:
   jedynym elementem interaktywnym była wyszukiwarka bazy nieruchomości, czyli
   narzędzie kupującego. Nagłówek „sprzedaj z nami" stał zepchnięty na bok,
   koralowy na jasnym zdjęciu, bez akcji.

   Ten sam język, co hero strony głównej (poprawka 7): prawdziwe zdjęcie pod
   filtrem w kolorze usługi, gradient przy dolnej krawędzi dla czytelności,
   nagłówek małą literą przy dole. Tam trzy panele usług, tu jeden — bo strona
   dotyczy jednej usługi. Wyszukiwarka zostaje na stronie głównej, gdzie stoi
   pod tryptykiem i ma sens. */
#section-2-16,
#section-2-18,
#section-2-20 {
  position: relative;
  background-position: center;
}

#section-2-16::before,
#section-2-18::before,
#section-2-20::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--usluga);
  opacity: 0.82;
}

/* warunek czytelności białego tekstu na jasnym kadrze — chrome funkcyjne */
#section-2-16::after,
#section-2-18::after,
#section-2-20::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.4), transparent 42%);
  pointer-events: none;
}

/* Wysokość i wyrównanie jak w panelach tryptyku: treść siedzi przy dolnej
   krawędzi, nad nią pracuje zdjęcie. Bez tego sekcja spłaszczała się do paska,
   bo padding 296px z Oxygena robił miejsce pod kartonik wyszukiwarki. */
#section-2-16 > .ct-section-inner-wrap,
#section-2-18 > .ct-section-inner-wrap,
#section-2-20 > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 80px;
  padding-bottom: 64px;
}

/* tekst schodzi z prawej krawędzi do lewej, jak w panelach na stronie głównej */
#div_block-3-16,
#div_block-4-16,
#div_block-3-18,
#div_block-4-18,
#div_block-3-20,
#div_block-4-20 {
  align-items: flex-start;
  text-align: left;
}

/* `padding-inline`, a nie sama prawa strona: Oxygen odsuwał nagłówek od środka
   strony, ale na /sprzedaj zrobił to paddingiem z prawej, a na /kup z lewej —
   ta sama intencja, dwa różne zapisy. Zerujemy obie krawędzie. */
#div_block-4-16,
#div_block-4-18,
#div_block-4-20 {
  width: 100%;
  padding-inline: 0;
}

#headline-5-16,
#text_block-7-16,
#headline-5-18,
#text_block-6-18,
#headline-5-20,
#text_block-6-20 {
  color: #fff;
}

/* Wyszukiwarka (#div_block-141-16) nie jest tu chowana CSS-em, tylko wycięta
   ze zrzutu — jej miejsce zajmuje szew <!--hero-zgloszenie-->, patrz poprawka 16. */

.hero-usluga__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* `.hero-usluga__cta` (biały przycisk prowadzący do formularza na dole strony)
   zniknął razem z poprawką 16 — formularz stoi teraz w hero, więc odnośnik do
   samego siebie nie miał już do czego prowadzić. */

.hero-usluga__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  /* stopień `headline` z DESIGN.md — telefon jest tu drugą akcją, nie podpisem */
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-decoration: none;
  border-bottom: 2px solid rgb(255 255 255 / 0.6);
}

.hero-usluga__tel:hover,
.hero-usluga__tel:focus-visible {
  border-bottom-color: #fff;
}

/* biały obrys focusu — cyjanowy ginie na koralowym polu */
#section-2-16 a:focus-visible,
#section-2-18 a:focus-visible,
#section-2-20 a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  #section-2-16 > .ct-section-inner-wrap,
  #section-2-18 > .ct-section-inner-wrap,
  #section-2-20 > .ct-section-inner-wrap {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}

/* --- 14. Sekcja wprowadzająca /sprzedaj: koniec ze ścianą i pustką ---
   Sekcja łamała trzy zasady systemu naraz. Nagłówek szedł wielką literą
   i w całości koralem, choć DESIGN.md mówi: małą literą, jedno słowo
   w kolorze usługi (sąsiednia sekcja „jak wygląda u nas proces sprzedaży"
   robi to poprawnie). Zdjęcie to był stockowy uścisk dłoni nad modelem
   domku, przy zasadzie „zdjęcia prawdziwe, nigdy stockowe" — usunięte
   ze zrzutu. Tekst stał w połowie szerokości, druga połowa świeciła pustką,
   a pod spodem szło 1372 znaki w jednej kolumnie.

   Najpierw (2026-08-13) treść poszła w dwa łamy przy tej samej liczbie słów.
   To leczyło kształt, nie chorobę: pięć akapitów w kółko powtarzało, że jesteśmy
   sprawdzonym biurem, więc dwa łamy dawały tylko dwie ściany zamiast jednej.

   Teraz (2026-08-14) tekst schodzi z pięciu akapitów do trzech, w jednej
   kolumnie z normalną miarą wiersza, a zwolnioną połowę zajmuje gniazdo
   na zdjęcie. Frazy, na które strona jest pozycjonowana, zostały co do słowa
   razem z pełną listą miejscowości — skrócone są powtórzenia, nie SEO. */
#headline-14-16,
#headline-13-18,
#headline-13-20 {
  color: var(--ink, #2a2a2a);
  max-width: 24ch;
}

#div_block-12-16,
#div_block-12-18,
#div_block-12-20 {
  width: 100%;
  padding-left: 0;
}

/* Tekst w kolumnie pierwszej (dwa wiersze: nagłówek z leadem, potem miasta),
   zdjęcie w drugiej — przez oba wiersze, więc kadr jest wysoki. */
#section-9-16 > .ct-section-inner-wrap,
#section-8-18 > .ct-section-inner-wrap,
#section-8-20 > .ct-section-inner-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  /* odstęp wiersza jak między akapitami, nie jak między blokami — akapit
     z miejscowościami jest dalszym ciągiem tekstu, a nie osobną sekcją */
  gap: 24px 64px;
  align-items: start;
}

#div_block-10-16,
#div_block-9-18,
#div_block-9-20 {
  grid-column: 1;
  grid-row: 1;
}

/* Akapit z miejscowościami jest dalszym ciągiem tekstu, nie osobnym blokiem —
   odstęp robi margines akapitu, a nie odstęp siatki i padding z Oxygena. */
#div_block-18-16,
#div_block-15-18,
#div_block-15-20 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
  padding-top: 0;
}

#section-9-16 > .ct-section-inner-wrap > figure,
#section-8-18 > .ct-section-inner-wrap > figure,
#section-8-20 > .ct-section-inner-wrap > figure {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Dwadzieścia osiem nazw miejscowości pogrubionych w jednym ciągu czyta się
   jak upychanie fraz, a nie jak zdanie. Pogrubienie zostaje przy nazwie
   głównego biura, lista wraca do zwykłego tekstu — treść i frazy bez zmian. */
.lista-miast {
  font-weight: 400;
}

@media (max-width: 991px) {
  #section-9-16 > .ct-section-inner-wrap,
  #section-8-18 > .ct-section-inner-wrap,
  #section-8-20 > .ct-section-inner-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* zdjęcie schodzi pod tekst; kolumna jedna, więc wiersze ustawiają się same */
  #section-9-16 > .ct-section-inner-wrap > figure,
  #section-8-18 > .ct-section-inner-wrap > figure,
  #section-8-20 > .ct-section-inner-wrap > figure {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --- 15. Proces jako droga policzalna ---
   Sprzedajacy nie boi sie ceny, boi sie procesu: ile to potrwa i ile jeszcze
   przede mna. Numery krokow byly ozdoba — teraz sa licznikiem. „1" mowi,
   gdzie jestes; „/6" mowi, ile calosc ma w ogole krokow, wiec juz przy
   pierwszym zdjeciu wiadomo, ze droga sie konczy.

   Zadnej dekoracji: ten sam prostokat w kolorze uslugi, ta sama biel, tylko
   drugi stopien wielkosci (15px, `label-pill` z DESIGN.md). Bez przezroczystosci
   — biel z alfa zeszlaby ponizej AA na koralu. Czytnik ekranu przeczyta „1/6",
   czyli dokladnie to, co widzi wzrok.

   Mianownik stoi w tresci strony (`<span class="krok-licznik__z">`), a nie
   w `content` reguly ::after. Wczesniej byla to wartosc wpisana w CSS, wiec
   /kup — proces o pieciu krokach, nie szesciu — musialby dostac wlasna regule
   z innym napisem. Liczba krokow jest faktem o stronie, a fakty mieszkaja
   w tresci; CSS nadaje im tylko stopien wielkosci. */
.krok-licznik__z {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#div_block-53-69,
#div_block-59-69,
#div_block-66-69,
#div_block-73-69,
#div_block-80-69,
#div_block-87-69,
#div_block-72-18,
#div_block-87-18,
#div_block-93-18,
#div_block-108-18,
#div_block-114-18,
#div_block-24-20,
#div_block-39-20,
#div_block-45-20,
#div_block-60-20,
#div_block-66-20,
#div_block-81-20 {
  width: auto;
  min-width: 53px;
  padding-inline: 10px;
}

/* Sekcja szla od naglowka wprost w krok 1 i urywala sie po ostatnim kroku.
   Zdanie wprowadzajace nazywa cala droge, domkniecie ja zamyka i przekazuje
   do formularza — pierwszy krok jest jeden klik stad. */
.proces-wstep {
  max-width: 46ch;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.5;
}

.proces-domkniecie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* rodzic z Oxygena to kolumna z `align-items:flex-start`, więc bez pełnej
     szerokości blok kleiłby się do lewej krawędzi mimo wyśrodkowanej treści */
  width: 100%;
  margin-top: 87px;
  text-align: center;
}

.proces-domkniecie p {
  max-width: 40ch;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.6px;
}

.proces-domkniecie__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 25px 10px;
  background: var(--usluga);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}

/* cyjan jako uniwersalny hover — tak samo jak przyciski uslug na glownej */
.proces-domkniecie__cta:hover,
.proces-domkniecie__cta:focus-visible {
  background: var(--brand-cyan);
  color: #fff;
}

@media (max-width: 767px) {
  .proces-domkniecie {
    margin-top: 60px;
  }

  .proces-domkniecie p {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  #headline-14-16,
  #headline-13-18,
  #headline-13-20 {
    max-width: none;
  }
}

/* Oxygen trzymał tu na wąskich ekranach `padding-top: 350px` — rezerwę pod
   kartonik wyszukiwarki, który zwisał z hero (`#div_block-141-16`,
   `bottom: -450px`). Wyszukiwarki nie ma od poprawki 16, więc został pas
   pustej bieli na trzysta pikseli. Takt jak w progu 991 px. */
@media (max-width: 767px) {
  #section-9-16 > .ct-section-inner-wrap,
  #section-8-18 > .ct-section-inner-wrap,
  #section-8-20 > .ct-section-inner-wrap {
    padding-top: 50px;
  }
}

/* --- 16. Hero /sprzedaj: formularz zgłoszenia w pierwszym ekranie (2026-08-14) ---
   Poprawka 13 zdjęła z hero wyszukiwarkę cudzych ofert i zostawiła nagłówek
   z telefonem — ekran otwierający stronę wciąż nie miał niczego, co sprzedający
   mógłby wypełnić. Teraz hero jest dwukolumnowe: po lewej zdjęcie pod koralem
   niesie „sprzedaj z nami" i numer, po prawej stoi biała płyta formularza
   (komponent HeroZgloszenie.astro, szew hero-zgloszenie).

   Dwie drogi kontaktu zostają równorzędne — tak jak w sekcji zamykającej —
   tylko obie awansują do pierwszego ekranu. Dlatego odnośnik „zgłoś
   nieruchomość" zniknął z lewej kolumny: prowadził do formularza na dole
   strony, a ten stoi teraz obok. */
#div_block-3-16,
#div_block-3-18,
#div_block-3-20 {
  display: grid;
  /* stała kolumna formularza: pola nie mają powodu rosnąć z szerokością ekranu,
     a nagłówek ma */
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: end;
  width: 100%;
}

/* O wysokości sekcji decyduje sam formularz — i to jest zamierzone (prośba
   właściciela 2026-08-15: hero na desktopie niższe). Wcześniejsze 76vh
   dorzucało pustego kadru na wysokich ekranach; teraz płyta z zagęszczonymi
   odstępami (media ≥992px w HeroZgloszenie.astro) wyznacza pion, a zerowanie
   poniżej wyłącza też 60vh z poprawki 13. */
#section-2-16 > .ct-section-inner-wrap,
#section-2-18 > .ct-section-inner-wrap,
#section-2-20 > .ct-section-inner-wrap {
  min-height: 0;
}

@media (max-width: 1120px) {
  #div_block-3-16,
  #div_block-3-18,
  #div_block-3-20 {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
  }
}

/* Poniżej 992 px kolumny stają w słupek — tak samo jak w sekcji zamykającej.
   Nagłówek zostaje pierwszy: obietnica przed formularzem, nie odwrotnie. */
@media (max-width: 991px) {
  #div_block-3-16,
  #div_block-3-18,
  #div_block-3-20 {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }

  #section-2-16 > .ct-section-inner-wrap,
  #section-2-18 > .ct-section-inner-wrap,
  #section-2-20 > .ct-section-inner-wrap {
    min-height: 0;
  }
}

/* --- 17. Reszta bagażu Oxygena na /kup (2026-08-14) ---
   Trzy rzeczy, których poprawki 12–16 nie łapią, bo na /sprzedaj nie istniały.

   1. Kadry kroków na /kup miały pod spodem miętowe koło (`background-color`
      + `border-radius:50%`) i wewnętrzne przesunięcia pod koralowy pierścień;
      zdejmuje je poprawka 12. Zostaje jednak `@media (max-width:479px)`, gdzie
      Oxygen zbija kadr do 300 px, a licznik przesuwa `right`/`left` pod okrąg.
      Przy `inset: 0 auto auto 0` z poprawki 12 obie krawędzie byłyby ustawione
      naraz i prostokąt licznika rozciągnąłby się na całą szerokość kadru.
   2. Kadr trzymał sztywne 353 px także wtedy, gdy rodzic schodził do 300 px —
      różnicę zjadał `overflow:hidden`, czyli brief w gnieździe był przycinany
      na najwęższych telefonach. Kadr bierze teraz szerokość rodzica.
   3. Sekcja pod hero miała na wąskich ekranach `padding-top: 350px` rezerwy
      pod kartonik wyszukiwarki (`#div_block-147-18`, `bottom: -450px`).
      Wyszukiwarki nie ma — to ta sama korekta, co przy poprawce 15. */
@media (max-width: 479px) {
  #div_block-72-18,
  #div_block-87-18,
  #div_block-93-18,
  #div_block-108-18,
  #div_block-114-18,
  #div_block-24-20,
  #div_block-39-20,
  #div_block-45-20,
  #div_block-60-20,
  #div_block-66-20,
  #div_block-81-20 {
    inset: 0 auto auto 0;
  }
}

#div_block-26-16 figure,
#div_block-56-69 figure,
#div_block-63-69 figure,
#div_block-70-69 figure,
#div_block-77-69 figure,
#div_block-84-69 figure,
#div_block-69-18 figure,
#div_block-84-18 figure,
#div_block-90-18 figure,
#div_block-105-18 figure,
#div_block-111-18 figure,
#div_block-21-20 figure,
#div_block-36-20 figure,
#div_block-42-20 figure,
#div_block-57-20 figure,
#div_block-63-20 figure,
#div_block-78-20 figure {
  width: 100%;
  height: auto;
}

/* --- 18. Trzecia podstrona usługowa: /wynajmij (2026-08-15) ---
   Poprawki 12–17 opisują układ podstrony usługowej raz, a listy identyfikatorów
   niosą warianty: `-16` /sprzedaj, `-18` /kup, `-20` /wynajmij. Trzy rzeczy
   zostają poza tymi listami, bo dotyczą wyłącznie cyjanu.

   1. Zdjęcie hero. Oxygen dał /wynajmij dokładnie ten sam plik, co /sprzedaj
      (`sprzedaz-mieszkania-przez-agencje-properton-3.webp`). Pod filtrem koloru
      różnica koral/cyjan maskuje to na pierwszy rzut oka, ale obie strony
      otwiera ten sam kadr — a przy przejściu między nimi widać, że to jedno
      zdjęcie przemalowane. Wynajem dostaje własny: klucze w dłoni doradcy,
      czyli dokładnie to, czym ta usługa się kończy.
   2. Hover domknięcia procesu. `.proces-domkniecie__cta:hover` idzie w cyjan
      jako uniwersalny hover — ale tutaj przycisk JEST cyjanowy, więc najazd
      nie robiłby nic. Ciemniejszy odcień tej samej barwy, ta sama para co
      koral → ciemny koral i ta sama, której używa panel w hero. */
#section-2-20 {
  background-image: url(/assets/2021/06/biuro-sprzedazy-mieszkan-properton-agent-z-kluczami.webp);
}

.page-id-20 .proces-domkniecie__cta:hover,
.page-id-20 .proces-domkniecie__cta:focus-visible {
  background: #005a6d;
}

/* --- 19. Hero usługowe na desktopie: zdjęcie zamiast pustego pola koloru (2026-08-15) ---
   Na szerokich ekranach lewa kolumna hero niosła tylko dwuwierszowy nagłówek
   i telefon w dolnym rogu — nad nimi stało ~600px płaszczyzny koloru, bo filtr
   0.82 (wartość z paneli tryptyku) gasi zdjęcie niemal do jednolitej barwy.
   Na telefonie ta sama sekcja jest zwarta i niczego jej nie brakuje.

   Trzy ruchy, wszystkie tylko od 992px w górę:
   1. Filtr luzuje do 0.66 — pusta przestrzeń staje się kadrem, który ma tam
      pracować. To nie nowy stan idiomu „zdjęcie pod kolorem": tryptyk już
      odsłania zdjęcie do 0.57 na hoverze, tu odsłona jest spoczynkowa, bo
      panel jest jeden i nie ma z kim konkurować.
   2. Słowo usługi idzie na pełną siłę pisma display: 96px (pułap 6rem),
      z systemową linią akcentu na polu koloru (biel 6px o kryciu 40% —
      ten sam zapis, co akcentowane słowa nagłówków na /kariera). Na tej
      stronie h1 JEST słowem usługi, więc linia podkreśla cały nagłówek,
      nie fragment. 60px z Oxygena było stopniem nagłówka sekcji, a to
      jest znak firmowy całej podstrony — jedyny element, który ma prawo
      krzyczeć, i dlatego wszystko wokół zostaje ciche.
   3. Pod nagłówkiem staje jednozdaniowy lead (Body-large 18px, biały) —
      obietnica strony jej własnymi słowami, wzięta ze wstępu, nie dopisana.
      Poniżej 992px lead znika: kolumny stoją w słupku, a wstęp z tą samą
      treścią zaczyna się ekran niżej — dwa razy tego samego nie czytamy.

   Gradient sięga wyżej niż dolne 42% z poprawki 13, bo stustopniowy nagłówek
   wchodzi tekstem w środek kadru: przy dole 0.5, w połowie ~0.2, gaśnie przy
   70% wysokości. To warunek czytelności (chrome funkcyjne), nie dekoracja. */
.hero-usluga__lead {
  display: none;
}

@media (min-width: 992px) {
  .hero-usluga__lead {
    display: block;
    margin: 28px 0 0;
    max-width: 44ch;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
  }

  #headline-5-16,
  #headline-5-18,
  #headline-5-20 {
    width: fit-content;
    padding-bottom: 12px;
    border-bottom: 6px solid rgb(255 255 255 / 0.4);
    font-size: 96px;
    line-height: 1;
    letter-spacing: 2px;
  }

  #text_block-7-16,
  #text_block-6-18,
  #text_block-6-20 {
    margin-top: 16px;
  }

  #section-2-16::before,
  #section-2-18::before,
  #section-2-20::before {
    opacity: 0.66;
  }

  #section-2-16::after,
  #section-2-18::after,
  #section-2-20::after {
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.5),
      rgb(0 0 0 / 0.2) 48%,
      transparent 70%
    );
  }

  /* niższe hero (prośba właściciela): 80/64 z poprawki 13 zostaje dla widoków
     w słupku, desktop dostaje ciaśniejszą ramę wokół płyty */
  #section-2-16 > .ct-section-inner-wrap,
  #section-2-18 > .ct-section-inner-wrap,
  #section-2-20 > .ct-section-inner-wrap {
    padding-top: 56px;
    padding-bottom: 48px;
  }
}

/* Formularze kontaktowe: honeypot niewidoczny dla ludzi, czytelny status wysyłki. */
.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.wpcf7-response-output:not(:empty) {
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid currentColor;
  background: #fff;
  color: #16211e;
}

.wpcf7-response-output.contact-status--success {
  color: #176647;
}

.wpcf7-response-output.contact-status--error {
  color: #9b2c20;
}

.wpcf7-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}