/* ==========================================================================
   AZCLEAN.pl — jedyny plik stylów nowej strony
   Standard: operat techniczny, rozdział 5. Wszystkie wartości są zapisane
   raz, poniżej, jako zmienne. Nowy kolor, rozmiar albo odstęp spoza tej
   listy wymaga decyzji Anny.
   ========================================================================== */

/* --- 1. Czcionki (pliki leżą w folderze fonts, nie są pobierane z Google) -- */
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Zmienne ------------------------------------------------------------ */
:root {
  /* kolory — z logo (#205890 i #5094C0) + kolor dopełniający z koła barw (D-077) */
  --granat: #102B47;
  --tekst: #405264;
  --niebieski: #205890;
  --niebieski-ciemny: #18456F;
  --niebieski-logo: #205890;
  --niebieski-jasny: #5094C0;
  --tlo-jasne: #EEF4F9;
  --linia: #DCEAF2;
  --bialy: #FFFFFF;
  --akcent: #F5A447;
  --akcent-ciemny: #EE932B;

  /* czcionki */
  --font-naglowki: "Red Hat Display", "Segoe UI", Arial, sans-serif;
  --font-tekst: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --waga-naglowki: 800;

  /* rozmiary tekstu — telefon */
  --h1: 30px;
  --h2: 24px;
  --h3: 19px;
  --tekst-rozmiar: 17px;
  --maly: 15px;

  /* odstępy — jedna skala */
  --o-4: 4px;
  --o-8: 8px;
  --o-16: 16px;
  --o-24: 24px;
  --o-32: 32px;
  --o-48: 48px;
  --o-64: 64px;
  --o-96: 96px;

  --sekcja: var(--o-48);
  --margines: var(--o-16);
  --odstep-kart: var(--o-16);
  --szerokosc: 1120px;

  --promien-przycisk: 8px;
  --promien-karta: 12px;
  --cien: 0 2px 12px rgba(16, 43, 71, 0.08);
}

@media (min-width: 600px) {
  :root {
    --margines: var(--o-32);
  }
}

@media (min-width: 960px) {
  :root {
    --h1: 44px;
    --h2: 32px;
    --h3: 22px;
    --tekst-rozmiar: 18px;
    --sekcja: var(--o-96);
    --odstep-kart: var(--o-24);
  }
}

/* --- 3. Podstawa ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: var(--o-64); /* miejsce na stały pasek z telefonem */
  background: var(--bialy);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-rozmiar);
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--granat);
  font-family: var(--font-naglowki);
  font-weight: var(--waga-naglowki);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--h2);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--h3);
  line-height: 1.3;
}

p {
  margin: 0;
  max-width: 70ch;
}

p + p {
  margin-top: var(--o-16);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--niebieski);
  text-decoration: none;
}

a:hover {
  color: var(--niebieski-ciemny);
}

:focus-visible {
  outline: 3px solid var(--niebieski);
  outline-offset: 3px;
  border-radius: var(--o-4);
}

strong {
  font-weight: 600;
  color: var(--granat);
}

.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomin {
  position: absolute;
  left: var(--o-16);
  top: -100px;
  z-index: 30;
  padding: var(--o-8) var(--o-16);
  background: var(--bialy);
  border-radius: var(--promien-przycisk);
}

.pomin:focus {
  top: var(--o-8);
}

.kontener {
  width: 100%;
  max-width: calc(var(--szerokosc) + 2 * var(--margines));
  margin-inline: auto;
  padding-inline: var(--margines);
}

.sekcja {
  padding-block: var(--sekcja);
}

.sekcja-jasna {
  background: var(--tlo-jasne);
}

.sekcja-naglowek {
  margin-bottom: var(--o-32);
}

.sekcja-naglowek p {
  margin-top: var(--o-16);
}

.maly {
  font-size: var(--maly);
  line-height: 1.5;
}

/* --- 4. Przyciski ---------------------------------------------------------- */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-8);
  min-height: 48px;
  padding: 12px var(--o-24);
  border: 2px solid var(--niebieski);
  border-radius: var(--promien-przycisk);
  background: var(--niebieski);
  color: var(--bialy);
  font-family: var(--font-tekst);
  font-size: var(--tekst-rozmiar);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.przycisk:hover {
  border-color: var(--niebieski-ciemny);
  background: var(--niebieski-ciemny);
  color: var(--bialy);
}

.przycisk-drugi {
  background: var(--bialy);
  color: var(--niebieski);
}

.przycisk-drugi:hover {
  background: var(--tlo-jasne);
  border-color: var(--niebieski-ciemny);
  color: var(--niebieski-ciemny);
}

/* przyciski „Zadzwoń” — kolor dopełniający do niebieskiego z logo, napis granatowy (kontrast 7:1) */
a.przycisk[href^="tel:"] {
  border-color: var(--akcent);
  background: var(--akcent);
  color: var(--granat);
}

a.przycisk[href^="tel:"]:hover {
  border-color: var(--akcent-ciemny);
  background: var(--akcent-ciemny);
  color: var(--granat);
}

.ikona {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --- 5. Nagłówek strony ---------------------------------------------------- */
.naglowek {
  position: relative;
  z-index: 20;
  background: var(--bialy);
  border-bottom: 1px solid var(--linia);
}

.naglowek-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-16);
  padding-block: var(--o-16);
}

.logo img {
  width: 164px;
}

.naglowek-kontakt {
  display: none;
}

.menu-przycisk {
  display: none;
  align-items: center;
  gap: var(--o-8);
  min-height: 48px;
  padding: var(--o-8) var(--o-16);
  border: 1px solid var(--linia);
  border-radius: var(--promien-przycisk);
  background: var(--bialy);
  color: var(--granat);
  font-family: var(--font-tekst);
  font-size: var(--tekst-rozmiar);
  font-weight: 600;
  cursor: pointer;
}

.js .menu-przycisk {
  display: inline-flex;
}

.menu-kreski,
.menu-kreski::before,
.menu-kreski::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--granat);
  border-radius: 2px;
}

.menu-kreski {
  position: relative;
}

.menu-kreski::before,
.menu-kreski::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-kreski::before {
  top: -6px;
}

.menu-kreski::after {
  top: 6px;
}

.menu {
  border-top: 1px solid var(--linia);
}

.js .menu {
  display: none;
}

.js .menu.otwarte {
  display: block;
}

.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--o-8) 0;
  border-bottom: 1px solid var(--linia);
  color: var(--granat);
  font-weight: 600;
  text-decoration: none;
}

.menu li:last-child a {
  border-bottom: 0;
}

.menu a[aria-current="page"] {
  color: var(--niebieski);
}

@media (min-width: 960px) {
  .logo img {
    width: 205px;
  }

  .naglowek-gora {
    padding-block: var(--o-24);
  }

  .naglowek-kontakt {
    display: flex;
    align-items: center;
    gap: var(--o-24);
  }

  .naglowek-kontakt p {
    font-size: var(--maly);
    line-height: 1.5;
    text-align: right;
  }

  .js .menu-przycisk {
    display: none;
  }

  .menu,
  .js .menu {
    display: block;
  }

  .menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--o-8);
  }

  .menu a {
    position: relative;
    min-height: 56px;
    border-bottom: 0;
    padding: var(--o-16) 0;
    font-size: var(--maly);
  }

  .menu li:last-child a {
    border-bottom: 0;
  }

  /* kreska pod pozycją menu: w połowie między literami a sekcją pod nagłówkiem,
     cienka, z prostymi końcami, rozsuwa się od środka (D-080) */
  .menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 2px;
    background: var(--niebieski-jasny);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .menu a:hover,
  .menu a[aria-current="page"] {
    color: var(--niebieski);
  }

  .menu a:hover::after,
  .menu a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .menu a::after {
    transition: none;
  }
}

@media (min-width: 1120px) {
  .menu a {
    font-size: var(--tekst-rozmiar);
  }

  .menu a::after {
    bottom: 11px;
  }
}

/* --- 6. Pierwszy ekran ----------------------------------------------------- */
.wstep {
  padding-block: var(--o-32);
  background: var(--tlo-jasne);
}

.wstep-uklad {
  display: grid;
  gap: var(--o-24);
}

.wstep-opis {
  margin-top: var(--o-16);
  font-size: var(--h3);
  line-height: 1.5;
  color: var(--granat);
}

.wstep-przyciski {
  display: grid;
  gap: var(--o-16);
  margin-top: var(--o-24);
}

.wstep-fakty {
  display: grid;
  gap: var(--o-8);
  margin-top: var(--o-24);
}

.wstep-fakty li {
  display: flex;
  align-items: flex-start;
  gap: var(--o-8);
  font-size: var(--maly);
  line-height: 1.5;
}

.wstep-fakty .ikona {
  margin-top: 1px;
  color: var(--niebieski);
}

/* na komputerze godziny są już w nagłówku — w sekcji wstępnej tylko na telefonie (D-059) */
@media (min-width: 960px) {
  .wstep-fakty .wstep-fakt-godziny {
    display: none;
  }
}

/* para zdjęć „przed / po” — prawdziwa realizacja */
.przed-po {
  margin: 0;
}

.przed-po-zdjecia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-8);
}

.kadr {
  position: relative;
  overflow: hidden;
  border-radius: var(--promien-karta);
  background: var(--bialy);
  box-shadow: var(--cien);
}

.kadr img {
  width: 100%;
}

.etykieta {
  position: absolute;
  left: var(--o-8);
  bottom: var(--o-8);
  padding: var(--o-4) var(--o-8);
  border-radius: var(--o-4);
  background: var(--granat);
  color: var(--bialy);
  font-size: var(--maly);
  font-weight: 600;
  line-height: 1.2;
}

.etykieta-po {
  background: var(--niebieski);
}

.przed-po figcaption,
.seria figcaption {
  margin-top: var(--o-8);
  font-size: var(--maly);
  line-height: 1.5;
}

@media (min-width: 600px) {
  .wstep-przyciski {
    display: flex;
    flex-wrap: wrap;
  }

  .przed-po-zdjecia {
    gap: var(--o-16);
    max-width: 640px;
  }
}

@media (min-width: 960px) {
  .wstep {
    padding-block: var(--o-64);
  }

  .wstep-uklad {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--o-64);
  }

  /* zdjęcia zachodzą na siebie: „po” wysuwa się na pierwszy plan */
  .przed-po-zdjecia {
    display: block;
    position: relative;
    max-width: none;
    padding-bottom: var(--o-96);
  }

  .przed-po-zdjecia .kadr {
    width: 72%;
  }

  .przed-po-zdjecia .kadr + .kadr {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 4px solid var(--bialy);
  }
}

/* kropla wody ze starej strony — ozdoba sekcji wstępnej (decyzja D-017).
   Obraz ma białe tło; „multiply” wtapia je w jasne tło sekcji. */
.wstep-kropla img {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  mix-blend-mode: multiply;
}

@media (min-width: 960px) {
  .wstep-kropla img {
    max-width: 520px;
  }
}

/* --- 7. Usługi ------------------------------------------------------------- */
.uslugi {
  display: grid;
  gap: var(--odstep-kart);
}

.karta {
  position: relative;
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  background: var(--bialy);
  box-shadow: var(--cien);
}

.usluga {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: start;
  gap: var(--o-16);
  padding: var(--o-16);
}

.usluga img {
  width: 100%;
  border-radius: var(--promien-przycisk);
}

.usluga h3 a {
  color: var(--granat);
  text-decoration: none;
}

/* cała karta jest klikalna */
.usluga h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--promien-karta);
}

.usluga:hover {
  border-color: var(--niebieski);
}

.usluga:hover h3 a {
  color: var(--niebieski);
}

.usluga p {
  margin-top: var(--o-4);
  font-size: var(--maly);
  line-height: 1.5;
}

.usluga-cennik {
  grid-template-columns: 1fr;
  padding: var(--o-24);
  background: var(--tlo-jasne);
  box-shadow: none;
}

.usluga-cennik h3 a {
  color: var(--niebieski);
  text-decoration: none;
}

@media (min-width: 600px) {
  .usluga {
    grid-template-columns: 160px 1fr;
    gap: var(--o-24);
  }
}

@media (min-width: 960px) {
  .uslugi {
    grid-template-columns: repeat(4, 1fr);
  }

  .usluga {
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    gap: var(--o-16);
    padding: var(--o-24);
  }

  .usluga-cennik {
    align-content: center;
    grid-column: 1 / -1; /* cennik jako pas na całą szerokość pod kafelkami */
  }
}

/* --- 8. Efekty pracy ------------------------------------------------------- */
.efekty {
  display: grid;
  gap: var(--o-32);
}

.seria {
  margin: 0;
}

.seria-zdjecia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-8);
}

/* na telefonie efekt końcowy dostaje pełną szerokość */
.seria-3 .kadr:last-child {
  grid-column: 1 / -1;
}

.seria figcaption strong {
  display: block;
  font-family: var(--font-naglowki);
  font-size: var(--h3);
  font-weight: var(--waga-naglowki);
  line-height: 1.3;
}

@media (min-width: 600px) {
  .seria-zdjecia {
    gap: var(--o-16);
  }

  .seria-3 .seria-zdjecia {
    grid-template-columns: repeat(3, 1fr);
  }

  .seria-3 .kadr:last-child {
    grid-column: auto;
  }

  .seria-2 .seria-zdjecia {
    max-width: calc((100% - 2 * var(--o-16)) / 3 * 2 + var(--o-16));
  }
}

@media (min-width: 960px) {
  .efekty {
    gap: var(--o-48);
  }

  .seria-zdjecia {
    gap: var(--o-24);
  }

  .seria-2 .seria-zdjecia {
    max-width: calc((100% - 2 * var(--o-24)) / 3 * 2 + var(--o-24));
  }
}

/* --- 9. Metoda i sprzęt ---------------------------------------------------- */
.dwie-kolumny {
  display: grid;
  gap: var(--o-48);
}

.dwie-kolumny h2 {
  margin-bottom: var(--o-24);
}

.sprzet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--o-16);
  margin-bottom: var(--o-24);
  padding: var(--o-16);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  background: var(--bialy);
}

.sprzet img {
  margin-inline: auto;
  max-height: 120px;
  width: auto;
}

@media (min-width: 960px) {
  .dwie-kolumny {
    grid-template-columns: 1fr 1fr;
    gap: var(--o-64);
  }

  .sprzet {
    padding: var(--o-24);
  }
}

/* --- 10. Zalety, obszar, promocje ----------------------------------------- */
.zalety {
  display: grid;
  gap: var(--o-16);
  margin-top: var(--o-24);
}

.zalety li {
  display: flex;
  align-items: flex-start;
  gap: var(--o-16);
  color: var(--granat);
}

.zalety .ikona {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--niebieski);
}

.zalety-tytul {
  margin-top: var(--o-32);
}

.stos {
  display: grid;
  align-content: start;
  gap: var(--odstep-kart);
}

.ramka {
  padding: var(--o-24);
}

.ramka h2 {
  margin-bottom: var(--o-16);
  font-size: var(--h3);
  line-height: 1.3;
  letter-spacing: 0;
}

.ramka p + p {
  margin-top: var(--o-8);
}

.ramka .wyroznione {
  margin-top: var(--o-16);
  padding-top: var(--o-16);
  border-top: 1px solid var(--linia);
  font-weight: 600;
  color: var(--granat);
}

/* --- 11. Koszenie trawy ---------------------------------------------------- */
.pozostale {
  display: grid;
  gap: var(--o-24);
}

.pozostale .zdjecie {
  margin-top: var(--o-16);
}

.pozostale .wyroznione {
  font-weight: 600;
  color: var(--granat);
}

@media (min-width: 960px) {
  .pozostale {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--o-64);
  }
}

/* --- 12. Pas z wezwaniem do telefonu -------------------------------------- */
.wezwanie {
  padding-block: var(--o-48);
  background: var(--niebieski);
  color: var(--bialy);
}

.wezwanie h2 {
  color: var(--bialy);
}

.wezwanie p {
  margin-top: var(--o-16);
}

.wezwanie-uklad {
  display: grid;
  gap: var(--o-32);
}

.wezwanie .przycisk {
  border-color: var(--bialy);
  background: var(--bialy);
  color: var(--niebieski);
  font-size: var(--h3);
}

.wezwanie .przycisk:hover {
  border-color: var(--tlo-jasne);
  background: var(--tlo-jasne);
  color: var(--niebieski-ciemny);
}

.wezwanie-godziny {
  font-size: var(--maly);
  line-height: 1.5;
}

@media (min-width: 960px) {
  .wezwanie {
    padding-block: var(--o-64);
  }

  .wezwanie-uklad {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--o-64);
  }

  .wezwanie-telefon {
    text-align: center;
  }
}

/* --- 13. Stopka ------------------------------------------------------------ */
.stopka {
  padding-block: var(--o-48) var(--o-32);
  background: var(--tlo-jasne);
  font-size: var(--maly);
  line-height: 1.5;
}

.stopka-uklad {
  display: grid;
  gap: var(--o-32);
}

.stopka .logo img {
  width: 164px;
}

.stopka h2 {
  margin-bottom: var(--o-16);
  font-size: var(--h3);
  line-height: 1.3;
  letter-spacing: 0;
}

.stopka li + li {
  margin-top: var(--o-8);
}

.stopka a {
  display: inline-block;
  padding-block: var(--o-4);
}

.stopka-opis {
  margin-top: var(--o-16);
}

.stopka-dol {
  max-width: none;
  margin-top: var(--o-32);
  padding-top: var(--o-24);
  border-top: 1px solid var(--linia);
}

@media (min-width: 600px) {
  .stopka-uklad {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .stopka-uklad {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--o-48);
  }
}

/* --- 14. Stały pasek z telefonem (tylko telefon i tablet) ------------------ */
.pasek-telefon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-8);
  min-height: var(--o-64);
  padding: var(--o-8) var(--o-16);
  background: var(--akcent);
  color: var(--granat);
  font-size: var(--h3);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 -2px 12px rgba(16, 43, 71, 0.08);
}

.pasek-telefon:hover {
  background: var(--akcent-ciemny);
  color: var(--granat);
}

@media (min-width: 960px) {
  body {
    padding-bottom: 0;
  }

  .pasek-telefon {
    display: none;
  }
}

/* --- 16. Podstrony (od 09.10.2026: pranie tapicerki meblowej) --------------
   Klocki wspólne dla wszystkich podstron. Używają wyłącznie zmiennych
   z punktu 2 — żadnych nowych kolorów, rozmiarów ani odstępów. */

/* ścieżka „Strona główna › …” nad tytułem podstrony */
.okruszki {
  margin-bottom: var(--o-16);
  font-size: var(--maly);
  line-height: 1.5;
}

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* „Strona główna” i nazwa podstrony w jednej linii */
  gap: var(--o-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.okruszki li + li::before {
  content: "›";
  margin-right: var(--o-8);
}

.okruszki a {
  display: inline-block;
  padding-block: var(--o-4);
}

/* tekst obok zdjęcia */
.tekst-zdjecie {
  display: grid;
  align-items: start;
  gap: var(--o-24);
}

.tekst-zdjecie h2 {
  margin-bottom: var(--o-24);
}

.tekst-zdjecie h3 {
  margin-bottom: var(--o-16);
}

.zdjecie img {
  border-radius: var(--promien-karta);
}

.zdjecie-ramka img {
  border: 1px solid var(--linia);
}

.blok + .blok,
.tekst-zdjecie + .blok,
.tekst-zdjecie + .uwaga,
.blok + .uwaga {
  margin-top: var(--o-32);
}

.blok h2 {
  margin-bottom: var(--o-24);
}

/* listy w treści */
.lista,
.lista-numery {
  display: grid;
  gap: var(--o-8);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 70ch;
}

.lista li,
.lista-numery li {
  position: relative;
  padding-left: var(--o-32);
}

.lista li::before {
  content: "";
  position: absolute;
  left: var(--o-8);
  top: 0.65em;
  width: var(--o-8);
  height: var(--o-8);
  border-radius: 50%;
  background: var(--niebieski-jasny);
}

.lista-numery {
  counter-reset: krok;
}

.lista-numery li {
  counter-increment: krok;
}

.lista-numery li::before {
  content: counter(krok) ".";
  position: absolute;
  left: 0;
  color: var(--niebieski);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

.lista-litery li::before {
  content: counter(krok, upper-alpha);
}

.po-liscie {
  margin-top: var(--o-24);
}

/* wyróżniona informacja: biała karta z cieniem, jak kafelki i opinie (D-080) */
.uwaga {
  max-width: none;
  padding: var(--o-24);
  border-radius: var(--promien-karta);
  background: var(--bialy);
  box-shadow: var(--cien);
  color: var(--granat);
}

.sekcja-jasna .uwaga {
  background: var(--bialy);
}

/* dwa zdjęcia obok siebie, każde z podpisem (zdjęcia mają 316 px — nie rozciągamy) */
.para {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--o-8);
  max-width: 648px;
}

.para figure {
  margin: 0;
}

.para figcaption {
  margin-top: var(--o-8);
  font-size: var(--maly);
  line-height: 1.5;
}

.sprzet-szeroki {
  max-width: 720px;
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .para {
    gap: var(--o-16);
  }
}

@media (min-width: 960px) {
  .tekst-zdjecie {
    grid-template-columns: 400px 1fr;
    align-items: start;
    gap: var(--o-64);
  }

  .tekst-zdjecie-odwrotnie {
    grid-template-columns: 1fr 400px;
  }

  .tekst-zdjecie-male {
    grid-template-columns: 316px 1fr;
  }

  .tekst-zdjecie-male.tekst-zdjecie-odwrotnie {
    grid-template-columns: 1fr 316px;
  }

  .blok + .blok,
  .tekst-zdjecie + .blok,
  .tekst-zdjecie + .uwaga,
  .blok + .uwaga {
    margin-top: var(--o-48);
  }
}

/* --- 17. Cennik (od 16.10.2026: cennik.html) -------------------------------
   Tabele cen. Używają wyłącznie zmiennych z punktu 2 — żadnych nowych
   kolorów, rozmiarów ani odstępów. */

/* zdjęcie obok tabel; na telefonie zdjęcie nad tabelą */
.cennik-uklad {
  display: grid;
  align-items: start;
  gap: var(--o-32);
}

.cennik-uklad .zdjecie img {
  width: 100%;
  max-width: 316px;
}

.cennik-uklad h3 {
  margin-bottom: var(--o-16);
}

.cennik-tytul {
  margin-top: var(--o-48);
}

.cennik-h2 {
  margin-bottom: var(--o-24);
}

.cennik {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bialy);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  overflow: hidden;
  font-variant-numeric: lining-nums tabular-nums;
}

.cennik thead th {
  padding: var(--o-8) var(--o-16);
  background: var(--granat);
  color: var(--bialy);
  font-size: var(--maly);
  font-weight: 600;
  text-align: left;
}

.cennik thead th:last-child {
  text-align: right;
}

.cennik tbody th,
.cennik tbody td {
  padding: 12px var(--o-16);
  border-top: 1px solid var(--linia);
  vertical-align: top;
  line-height: 1.4;
}

.cennik tbody tr:first-child th,
.cennik tbody tr:first-child td {
  border-top: 0;
}

.cennik tbody tr:nth-child(even) {
  background: var(--tlo-jasne);
}

.cennik tbody th {
  color: var(--granat);
  font-weight: 400;
  text-align: left;
}

.cennik tbody td {
  color: var(--granat);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* dłuższy opis zamiast ceny może się łamać */
.cennik td.cena-opis {
  width: 40%;
  white-space: normal;
  font-weight: 400;
}

.cennik-wariant {
  display: block;
  color: var(--tekst);
  font-size: var(--maly);
  font-weight: 400;
}

.cennik-przypis {
  margin-top: var(--o-8);
  font-size: var(--maly);
  line-height: 1.5;
}

@media (min-width: 960px) {
  .cennik-uklad {
    grid-template-columns: 316px 1fr;
    gap: var(--o-64);
  }

  .cennik-uklad .zdjecie {
    position: sticky;
    top: var(--o-24);
  }

  .cennik-uklad-bez-zdjecia {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }
}

/* --- 18. Kontakt (od 17.10.2026: kontakt.html) ----------------------------
   Karta z danymi kontaktowymi i ramka z obszarem działalności. Wyłącznie
   zmienne z punktu 2 — żadnych nowych kolorów, rozmiarów ani odstępów. */
.kontakt-uklad {
  display: grid;
  align-items: start;
  gap: var(--odstep-kart);
}

.kontakt-dane {
  display: grid;
  gap: var(--o-16);
  margin: 0;
}

.kontakt-dane > div + div {
  padding-top: var(--o-16);
  border-top: 1px solid var(--linia);
}

.kontakt-dane dt {
  font-size: var(--maly);
  font-weight: 600;
}

.kontakt-dane dd {
  margin: var(--o-4) 0 0;
  color: var(--granat);
  overflow-wrap: anywhere;
}

.kontakt-telefon {
  font-family: var(--font-naglowki);
  font-weight: var(--waga-naglowki);
  font-size: var(--h2);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .kontakt-uklad {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* --- 19. Galeria (od 17.10.2026: galeria.html) ----------------------------
   Siatka zdjęć z realizacji. Zdjęcia mają 340 px — nie rozciągamy ich ponad
   ten rozmiar. Wyłącznie zmienne z punktu 2. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 340px));
  justify-content: start;
  gap: var(--odstep-kart);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria img {
  width: 100%;
  border-radius: var(--promien-karta);
}

/* --- 20. Opinie z Google (od 23.10.2026: strona główna, D-049) -------------
   Tylko prawdziwe opinie, słowo w słowo; pisownia Klientów zachowana. */
.opinie {
  display: grid;
  gap: var(--odstep-kart);
}

.opinia {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--o-24);
}

.gwiazdki {
  margin: 0 0 var(--o-8);
  color: var(--akcent);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
}

.opinia blockquote {
  flex: 1;
  margin: 0;
  color: var(--granat);
}

.opinia figcaption {
  margin-top: var(--o-16);
  padding-top: var(--o-16);
  border-top: 1px solid var(--linia);
  font-size: var(--maly);
  line-height: 1.5;
}

.opinia figcaption strong {
  display: block;
  color: var(--granat);
  font-weight: 600;
}

.opinie-przycisk {
  max-width: none;
  margin-top: var(--o-32);
  text-align: center;
}

@media (min-width: 760px) {
  .opinie {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- 21. Najczęstsze pytania (od 24.10.2026: strona główna, D-050, D-062) ---
   Pytanie otwiera się po kliknięciu (zwykły HTML, bez skryptu). */
.pytania {
  display: grid;
  gap: var(--o-8);
  max-width: 860px;
}

.pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-16);
  padding: var(--o-16) var(--o-24);
  color: var(--granat);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.pytanie summary::-webkit-details-marker {
  display: none;
}

.pytanie summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: var(--o-32);
  height: var(--o-32);
  border-radius: 50%;
  background: var(--tlo-jasne);
  color: var(--niebieski);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.pytanie[open] summary::after {
  content: "−";
}

.pytanie summary:hover {
  color: var(--niebieski);
}

.pytanie summary:focus-visible {
  border-radius: var(--promien-karta);
}

.odpowiedz {
  padding: 0 var(--o-24) var(--o-24);
}

.odpowiedz .lista {
  margin-top: var(--o-16);
}

/* --- 15. Druk -------------------------------------------------------------- */
@media print {
  .pasek-telefon,
  .menu-przycisk,
  .menu {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}

/* linki w zwykłym tekście: pogrubione, żeby nie odróżniał ich tylko kolor (D-089) */
main p > a:not([class]),
main dd > a:not([class]),
main th > a:not([class]) {
  font-weight: 600;
}