/* ============================================================
   KŁYSZMED — Gabinet Rehabilitacji i Terapii Kręgosłupa
   Arlek.pl. Vanilla CSS, zmienne własne, mobile first.

   Kroje wzięte z geometrii logotypu: szeroki, techniczny sans
   z płaskimi zakończeniami i kontrastem lekki + gruby (KŁYSZ / MED).
   Saira na nagłówki, Manrope na treść.

   Kolory z jego znaku, sprawdzone pomiarem (_tools/akcent.py).
   ============================================================ */

/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-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: 'Saira';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/saira-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: 'Saira';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/saira-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: 'Manrope zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 101.3%;
  ascent-override: 105.23%;
  descent-override: 29.61%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Manrope zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 100.36%;
  ascent-override: 106.22%;
  descent-override: 29.89%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Saira zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 103.48%;
  ascent-override: 109.69%;
  descent-override: 42.43%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Saira zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 99.01%;
  ascent-override: 114.64%;
  descent-override: 44.34%;
  line-gap-override: 0.0%;
}

:root {
  --km-granat:        #171C41;
  --km-granat-90:     #1E2450;
  --km-granat-70:     #3A4068;
  --km-granat-50:     #6E7392;
  --km-akcent:        #A2560F;   /* 5,42:1 z bielą */
  --km-akcent-ciemny: #7E430C;
  --km-akcent-jasny:  #F2B25C;   /* 8,83:1 z granatem */
  --km-akcent-mgla:   #FBF1E3;
  --km-tlo:           #FFFFFF;
  --km-tlo-cieple:    #FAF8F5;
  --km-tlo-cieple-2:  #F4EFE8;
  --km-linia:         #E8E1D7;
  /* Obramowanie POL FORMULARZA i przyciskow ikonowych. WCAG 1.4.11 wymaga
     3:1 dla elementow, ktore rozpoznaje sie po ksztalcie, a nie po tresci.
     Zmierzone: #E8E1D7 na bieli daje 1,30:1, czyli pola formularza gineły.
     #8C8579 daje 3,65:1 na bieli i 3,45:1 na cieplym tle sekcji. */
  --km-linia-pole:    #8C8579;
  /* Obramowanie KART informacyjnych. `niewidoczne.py` stawia im prog 2:1,
     nizszy niz kontrolkom, wlasnie po to, zeby lekka karta nie zmienila sie
     w obrysowany prostokat. Zmierzone: #E8E1D7 dawal 1,22:1 na cieplym tle,
     czyli krawedzi kart praktycznie nie bylo widac. #A9A49D daje 2,48:1 na
     bieli, 2,34:1 na #FAF8F5 i 2,13:1 na #F2EDE6. */
  --km-linia-karta:   #A9A49D;
  --km-linia-ciemna:  rgba(255,255,255,.15);
  --km-tekst:         #171C41;
  --km-tekst-cichy:   #5A6080;

  --w-content: min(92vw, 76rem);

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;

  --section-sm: clamp(2.5rem, 5vw, 4rem);
  --section-md: clamp(3.5rem, 7vw, 5.5rem);
  --section-lg: clamp(4.5rem, 8.5vw, 7rem);

  /* Saira: szeroka, geometryczna, płaskie zakończenia — jak w logotypie.
     Manrope: bardzo czytelna w długim tekście, spokrewniona kształtem. */
  --font-display: Saira, 'Saira zapasowy', system-ui, sans-serif;
  --font-tekst:   Manrope, 'Manrope zapasowy', system-ui, sans-serif;

  --fs-h1:    clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem);    /* 28 → 42 px */
  --fs-h2:    clamp(1.4375rem, 1.2rem + 1.05vw, 1.9375rem); /* 23 → 31 px */
  --fs-h3:    clamp(1.0625rem, 1rem + .3vw, 1.25rem);       /* 17 → 20 px */
  --fs-body:  clamp(1rem, .96rem + .18vw, 1.0625rem);       /* 16 → 17 px */
  --fs-mala:  .9375rem;
  --fs-nad:   .75rem;

  --lh-ciasna: 1.18;
  --lh-srednia: 1.45;
  --lh-luzna: 1.72;

  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;  --r-pelny: 999px;

  --cien-sm: 0 1px 2px rgba(23,28,65,.05);
  --cien-md: 0 6px 24px rgba(23,28,65,.07);
  --cien-lg: 0 16px 48px rgba(23,28,65,.12);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: 220ms;

  --naglowek-h: 72px;
}

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

/* `scroll-padding-top` odsuwa cel kotwicy spod PRZYKLEJONEGO naglowka.
   Bez tego kazde wejscie na adres z „#” chowa tytul sekcji za paskiem menu:
   javascript koryguje to tylko przy klikniecu W OBREBIE strony, a adres
   podany z zewnatrz (podmenu „Dokumenty do pobrania” prowadzi wprost do
   `/informacje-dla-pacjentow/#dokumenty`) obsluguje sama przegladarka.
   Zmierzone 21.09.2026 na zrzucie sekcji: tytul byl przyciety. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--naglowek-h) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--km-tlo);
  color: var(--km-tekst);
  font-family: var(--font-tekst);
  font-size: var(--fs-body);
  line-height: var(--lh-luzna);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* tylko na body; na html psuje pozycjonowanie lepkie */
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-ciasna);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  color: var(--km-granat);
}
/* Kontrast wagi jak w znaku: lekki człon i gruby człon. */
h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.005em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h1 strong, h2 strong { font-weight: 700; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--km-akcent); text-underline-offset: .18em; }
a:hover { color: var(--km-akcent-ciemny); }

:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: 3px; border-radius: var(--r-sm); }

.km-pomijalny {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--km-granat); color: #fff; padding: var(--space-3) var(--space-5);
}
.km-pomijalny:focus { left: 0; }

.km-ikona { flex: none; }

/* ============================ układ ============================ */
.km-kontener { width: var(--w-content); margin-inline: auto; }

.km-sekcja { padding-block: var(--section-md); }
.km-sekcja--lg { padding-block: var(--section-lg); }
.km-sekcja--biala { background: var(--km-tlo); }
.km-sekcja--ciepla { background: var(--km-tlo-cieple); }
.km-sekcja--granat { background: var(--km-granat); color: rgba(255,255,255,.85); }
.km-sekcja--granat h2, .km-sekcja--granat h3 { color: #fff; }

/* Nadtytuł powtarza układ z logotypu: rozstrzelone wersaliki przy kresce. */
.km-nad {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-nad); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--km-akcent);
  margin: 0 0 var(--space-4);
}
.km-nad::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; opacity: .7; }
.km-sekcja--granat .km-nad { color: var(--km-akcent-jasny); }

.km-naglowek-sekcji { margin-bottom: var(--space-10); }
.km-naglowek-sekcji p { color: var(--km-tekst-cichy); }
.km-sekcja--granat .km-naglowek-sekcji p { color: rgba(255,255,255,.72); }

/* ============================ przyciski ============================ */
.km-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 600; letter-spacing: .03em; line-height: 1.2;
  text-decoration: none; border: 1.5px solid transparent; border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.km-btn--glowny { background: var(--km-akcent); color: #fff; }
.km-btn--glowny:hover { background: var(--km-akcent-ciemny); color: #fff; }
.km-btn--obrys { background: transparent; color: var(--km-granat); border-color: rgba(23,28,65,.28); }
.km-btn--obrys:hover { background: var(--km-granat); color: #fff; border-color: var(--km-granat); }
.km-sekcja--granat .km-btn--glowny { background: var(--km-akcent-jasny); color: var(--km-granat); }
.km-sekcja--granat .km-btn--glowny:hover { background: #fff; }
.km-sekcja--granat .km-btn--obrys { color: #fff; border-color: rgba(255,255,255,.4); }
.km-sekcja--granat .km-btn--obrys:hover { background: #fff; color: var(--km-granat); }

/* ======================= pasek górny i nagłówek ======================= */
.km-pasek-info {
  background: var(--km-granat); color: rgba(255,255,255,.72);
  font-size: var(--fs-nad); letter-spacing: .04em;
}
.km-pasek-info__w {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-6); min-height: 38px;
}
.km-pasek-info a {
  color: rgba(255,255,255,.9); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
}
.km-pasek-info a:hover { color: var(--km-akcent-jasny); }
.km-pasek-info__poz { display: inline-flex; align-items: center; gap: var(--space-2); }
.km-pasek-info__kropka { width: 7px; height: 7px; border-radius: 50%; background: #5FBF86; flex: none; }
.km-pasek-info__kropka--zamkniete { background: var(--km-granat-50); }

.km-naglowek {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--km-linia);
  transition: box-shadow var(--dur) var(--ease);
}
.km-naglowek.przewiniety { box-shadow: 0 1px 20px rgba(23,28,65,.08); }
.km-naglowek__w {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: var(--naglowek-h);
}
.km-logo { display: inline-flex; align-items: center; flex: none; min-height: 48px; }
.km-logo img { width: 168px; height: auto; }

/* Menu to NAPISY. Po najechaniu zmienia się wyłącznie barwa napisu:
   nic nie podskakuje, nic nie zmienia szerokości. */
.km-menu { display: none; }
.km-menu ul { display: flex; align-items: center; justify-content: center;
              gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.km-menu a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-block: var(--space-2);
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 600; letter-spacing: .015em;
  color: var(--km-granat); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
/* Zakladki maja byc czytelne, ale nadal NAPISAMI: po najechaniu zmienia sie
   wylacznie barwa. Widocznosc robi grubosc i kontrast, nie pudelko. */
.km-menu a:hover, .km-menu .current-menu-item > a { color: var(--km-akcent); }
.km-menu .current-menu-item > a { font-weight: 700; }

/* Podmenu na desktopie. Rozwija sie po najechaniu ORAZ po wejsciu klawiatura
   (`:focus-within`), wiec nie potrzebuje javascriptu i nie ma stanu, ktory
   moglby sie rozjechac z widokiem. Rodzic zostaje zwyklym odnosnikiem:
   podmenu jest skrotem, nie jedyna droga do tych stron. */
.km-menu li { position: relative; }
.km-menu .menu-item-has-children > a::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .5;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.km-menu .menu-item-has-children:hover > a::after,
.km-menu .menu-item-has-children:focus-within > a::after { opacity: 1; }
.km-menu .sub-menu {
  position: absolute; top: 100%; left: 50%; z-index: 30;
  display: block; min-width: 232px; padding: var(--space-2) 0;
  margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--km-linia); border-radius: 12px;
  box-shadow: 0 18px 36px -18px rgba(16, 32, 64, .28);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.km-menu .menu-item-has-children:hover > .sub-menu,
.km-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition-delay: 0s;
}
.km-menu .sub-menu a {
  display: block; min-width: 0; min-height: 0;
  padding: var(--space-3) var(--space-5); text-align: left;
  font-size: .9063rem; font-weight: 500; line-height: 1.35;
}
.km-menu .sub-menu a::after { content: none; }

/* Odstep miedzy napisem a panelem lapie kursor w drodze w dol. Bez tego
   podmenu znika w polowie ruchu myszy. */
.km-menu .menu-item-has-children > .sub-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}

.km-naglowek__akcje { display: flex; align-items: center; gap: var(--space-4); }
.km-naglowek__tel {
  display: none; align-items: center; gap: var(--space-3);
  color: var(--km-granat); text-decoration: none; min-height: 48px;
}
.km-naglowek__tel:hover { color: var(--km-akcent); }
.km-naglowek__tel-ikona {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--km-akcent-mgla); color: var(--km-akcent);
}
.km-naglowek__tel b {
  display: block; font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 700; letter-spacing: .01em; line-height: 1.2;
}
.km-naglowek__tel small {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--km-tekst-cichy);
}

.km-hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 11px; background: none; border: 0; cursor: pointer;
}
.km-hamburger span {
  display: block; height: 1.5px; width: 100%; background: var(--km-granat);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
body.menu-otwarte .km-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-otwarte .km-hamburger span:nth-child(2) { opacity: 0; }
body.menu-otwarte .km-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.km-menu-mobilne {
  position: fixed; inset: 0; z-index: 95; background: var(--km-tlo);
  transform: translateX(100%); transition: transform 280ms var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; visibility: hidden;
}
body.menu-otwarte .km-menu-mobilne { transform: translateX(0); visibility: visible; }
body.menu-otwarte { overflow: hidden; }

/* Wlasny naglowek panelu: znak po lewej, zamkniecie po prawej. Wczesniej
   panel przykrywal naglowek strony i nie bylo widac ani logo, ani krzyzyka. */
.km-menu-mobilne__gora {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--km-linia);
  position: sticky; top: 0; background: var(--km-tlo); z-index: 2;
}
.km-menu-mobilne__gora .km-logo img { width: 150px; }
.km-menu-mobilne__zamknij {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--km-tlo-cieple-2); border: 1px solid var(--km-linia-pole);
  color: var(--km-granat);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.km-menu-mobilne__zamknij:hover { background: var(--km-granat); color: #fff; }

.km-menu-mobilne__nawigacja { padding: var(--space-2) var(--space-5) var(--space-6); }
.km-menu-mobilne__nawigacja ul { list-style: none; margin: 0; padding: 0; }
.km-menu-mobilne__nawigacja li + li { border-top: 1px solid var(--km-linia); }
/* Selektor celuje w NAWIGACJE, nie w kazdy odnosnik panelu. Wczesniej
   `.km-menu-mobilne a` przejmowal przycisk telefonu i rozbijal go na dwa
   wiersze (memory: lekcja-wlasny-selektor-potomka-przejmuje-komponent). */
.km-menu-mobilne__nawigacja a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0; min-height: 56px;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .01em; color: var(--km-granat); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.km-menu-mobilne__nawigacja a::after {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 2px solid var(--km-akcent); border-top: 2px solid var(--km-akcent);
  transform: rotate(45deg); opacity: .55;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.km-menu-mobilne__nawigacja a:hover,
.km-menu-mobilne__nawigacja .current-menu-item > a { color: var(--km-akcent); }
.km-menu-mobilne__nawigacja a:hover::after { transform: rotate(45deg) translate(2px, -2px); opacity: 1; }
.km-menu-mobilne__nawigacja .current-menu-item > a { font-weight: 700; }

/* Na telefonie podmenu stoi otwarte, jako wcieta lista. Akordeon dokladalby
   stan do zamkniecia i jedno dodatkowe stukniecie przed dojsciem do strony,
   a pozycji jest szesc, nie szescdziesiat. */
.km-menu-mobilne__nawigacja .sub-menu {
  list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--km-linia);
}
.km-menu-mobilne__nawigacja .sub-menu li + li { border-top: none; }
.km-menu-mobilne__nawigacja .sub-menu a {
  min-height: 48px; padding: var(--space-3) 0;
  font-size: .9375rem; font-weight: 500;
}

.km-menu-mobilne__stopka {
  margin-top: auto; padding: var(--space-6) var(--space-5) var(--space-8);
  background: var(--km-tlo-cieple);
  border-top: 1px solid var(--km-linia);
}
.km-menu-mobilne__tel {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  background: var(--km-granat); color: #fff; text-decoration: none;
  border-radius: var(--r-lg);
}
.km-menu-mobilne__tel-ikona {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(242,178,92,.16); color: var(--km-akcent-jasny);
}
.km-menu-mobilne__tel small {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.km-menu-mobilne__tel b {
  display: block; font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 700; letter-spacing: .01em; line-height: 1.2;
}
.km-menu-mobilne__dane { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.km-menu-mobilne__dane li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3);
  align-items: start; font-size: .8125rem; line-height: 1.5;
  color: var(--km-tekst-cichy); padding-block: var(--space-1);
}
.km-menu-mobilne__dane .km-ikona { color: var(--km-akcent); margin-top: 3px; }
.km-menu-mobilne__dane a {
  color: var(--km-granat); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.km-menu-mobilne__dane a:hover { color: var(--km-akcent); }

/* ============================ hero ============================ */
.km-hero { position: relative; background: var(--km-tlo); overflow: hidden; }
/* Ślad znaku w tle: krąg z logotypu, ledwo widoczny. */
.km-hero::before {
  content: ""; position: absolute; top: -18%; right: -14%;
  width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, var(--km-akcent-mgla) 0%, rgba(251,241,227,0) 68%);
  pointer-events: none;
}
.km-hero__w { position: relative; display: grid; gap: var(--space-10); padding-block: var(--section-md); }
.km-hero__tresc { align-self: center; }
.km-hero h1 { margin-bottom: var(--space-5); }
.km-hero__lead { font-size: 1.0625rem; color: var(--km-tekst-cichy); margin-bottom: var(--space-8); }
.km-hero__akcje { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.km-hero__nota {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-mala); color: var(--km-tekst-cichy); line-height: var(--lh-srednia);
}
.km-hero__nota .km-ikona { color: var(--km-akcent); margin-top: 2px; }

/* Kolaz: duze zdjecie plus dwa mniejsze. Na telefonie jedna kolumna,
   zeby male kadry nie robily sie nieczytelne. */
.km-hero__kolaz { position: relative; display: grid; gap: var(--space-3); }
.km-hero__kolaz img { width: 100%; object-fit: cover; border-radius: var(--r-lg); }
.km-hero__kolaz-duze img { aspect-ratio: 4/3; }
.km-hero__kolaz-male { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.km-hero__kolaz-male img { aspect-ratio: 1/1; }
.km-hero__kolaz--pojedynczy .km-hero__kolaz-duze img { aspect-ratio: 4/3.4; }

/* Ocena z wizytówki Google */
.km-ocena {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: #fff; border-radius: var(--r-md); box-shadow: var(--cien-md);
  padding: var(--space-3) var(--space-5); text-decoration: none; color: var(--km-granat);
  border: 1px solid var(--km-linia-pole);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
/* Sam cień to za mało: hover ma być widoczny także przy pomiarze i dla osoby,
   która nie odróżnia subtelnych cieni. */
.km-ocena:hover { box-shadow: var(--cien-lg); border-color: var(--km-akcent);
                  background: var(--km-akcent-mgla); color: var(--km-granat); }
.km-ocena__l { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.km-ocena__gwiazdki { display: flex; gap: 1px; color: var(--km-akcent); }
.km-ocena__o { font-size: .75rem; color: var(--km-tekst-cichy); line-height: 1.3; letter-spacing: .02em; }
.km-hero__ocena { position: absolute; left: var(--space-5); bottom: var(--space-5); }

/* ==================== pasek pod hero: fakty, nie kafle ==================== */
.km-fakty { background: var(--km-granat); color: rgba(255,255,255,.78); }
/* Lista siedzi w `.km-kontener`, wiec zadnych wlasnych marginesow bocznych.
   Wczesniej `margin: 0` na tej regule kasowalo `margin-inline: auto`
   z kontenera i pasek rozlewal sie na cala szerokosc okna. */
.km-fakty__lista { list-style: none; margin: 0; padding: 0; display: grid; }
/* Ikona nad tekstem, wszystko wysrodkowane. Ustawienie poziome sprawialo,
   ze dwuwierszowy opis rozpychal wiersz na cala szerokosc komorki i tresc
   wygladala na dosunieta do lewej, mimo `justify-content: center`. */
.km-fakty__poz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center;
  padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--km-linia-ciemna);
}
.km-fakty__poz:last-child { border-bottom: 0; }
.km-fakty__ikona {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(242,178,92,.14); color: var(--km-akcent-jasny);
}
.km-fakty__l {
  display: block; font-family: var(--font-display); font-size: .9375rem;
  font-weight: 600; color: #fff; letter-spacing: .01em; line-height: 1.3;
}
.km-fakty__o { display: block; font-size: .8125rem; line-height: 1.4; }

/* ============================ dolegliwości ============================ */
.km-schorzenia { display: grid; gap: var(--space-4); }
.km-schorzenie {
  border: 1px solid var(--km-linia-karta); border-radius: var(--r-lg);
  background: var(--km-tlo); overflow: hidden; align-self: start;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.km-schorzenie:hover { border-color: rgba(162,86,15,.35); }
.km-schorzenie.otwarte { border-color: var(--km-akcent); box-shadow: var(--cien-md); }
.km-schorzenie__przycisk {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; min-height: 68px; padding: var(--space-4) var(--space-5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .01em; color: var(--km-granat);
  transition: color var(--dur) var(--ease);
}
.km-schorzenie__przycisk:hover { color: var(--km-akcent); }
.km-schorzenie__ikona {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--km-akcent-mgla); color: var(--km-akcent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.km-schorzenie.otwarte .km-schorzenie__ikona { background: var(--km-akcent); color: #fff; }
.km-schorzenie__nazwa { flex: 1; }
.km-schorzenie__znak {
  flex: none; width: 18px; height: 18px; color: var(--km-akcent);
  transition: transform var(--dur) var(--ease);
}
.km-schorzenie.otwarte .km-schorzenie__znak { transform: rotate(45deg); }
/* Sekcja stojaca zaraz POD naglowkiem strony nie potrzebuje pelnego
   gornego oddechu: naglowek ma juz swoj dolny padding, a razem robily
   176 px pustki miedzy zdaniem wprowadzajacym a trescia (zmierzone
   21.09.2026 na /kontakt/ przy 1440 px). Dotyczy wszystkich podstron,
   wiec odstep robi sie przy okazji spojny. */
.km-sekcja:has(> .km-kontener > .km-naglowek-strony) + .km-sekcja {
  padding-top: var(--section-sm);
}

/* Odnosnik w ciaglym tekscie ma na telefonie 22 px wysokosci, czyli polowe
   pola dotyku. Powiekszamy je paddingiem i cofamy marginesem, zeby wiersze
   nie rozjechaly sie w pionie: klikalne rosnie, uklad zostaje.
   Zmierzone na /polityka-prywatnosci/ (adres e-mail, 193x22 px). */
@media (max-width: 1023px) {
  .km-proza p > a,
  .km-proza li > a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* ------------------------------------------------------- DOKUMENT PRAWNY
   Polityki prywatnosci nie czyta sie od poczatku do konca: gosc szuka
   konkretnego paragrafu. Spis stoi wiec obok tresci i przykleja sie przy
   przewijaniu. Kolumna skraca przy okazji wiersz z 1216 do 783 px BEZ
   `max-width` na tekscie, bo szerokosc reguluje kontener, nigdy akapit.

   Nazwa `km-prawny`, a nie `km-dokument`: ta druga jest zajeta przez kafel
   pliku do pobrania i moja sekcja dziedziczyla po nim ramke oraz trzy
   kolumny (21.09.2026). */
.km-prawny { display: grid; gap: var(--space-8); }
.km-prawny__spis { align-self: start; }
.km-prawny__spis ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.km-prawny__spis a {
  display: block; padding: var(--space-2) 0;
  font-size: var(--fs-mala); line-height: 1.35;
  color: var(--km-tekst-cichy); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.km-prawny__spis a:hover,
.km-prawny__spis a:focus-visible {
  color: var(--km-akcent-ciemny); border-bottom-color: currentColor;
}
.km-prawny__spis-tytul {
  margin: 0 0 var(--space-3); font-family: var(--font-display);
  font-size: var(--fs-mala); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--km-granat);
  cursor: pointer; list-style: none;
}
.km-prawny__spis-tytul::-webkit-details-marker { display: none; }
/* Strzalka mowi, ze to sie zwija. Obraca sie, gdy spis jest otwarty. */
.km-prawny__spis-tytul::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.km-prawny__zwijak[open] > .km-prawny__spis-tytul::after { transform: translateY(1px) rotate(-135deg); }
.km-prawny__spis-tytul:hover { color: var(--km-akcent-ciemny); }
.km-prawny__spis-tytul:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: 3px; }
@media (max-width: 1023px) {
  /* Na telefonie spisu NIE MA. Jedenascie pozycji zajmowalo caly pierwszy
     ekran, wiec gosc czytal spis zamiast dokumentu, a dokument na telefonie
     przeglada sie przewijaniem, nie skakaniem po paragrafach. Zwijak tez
     odpada: stan `open` jest atrybutem HTML, wiec CSS go nie cofnie
     w jedna strone bez sztuczek, ktore psuja sie w starszych silnikach. */
  .km-prawny__spis { display: none; }
}
@media (min-width: 1024px) {
  .km-prawny { grid-template-columns: 250px 1fr; gap: var(--space-16); }
  .km-prawny__spis {
    position: sticky;
    top: calc(var(--naglowek-h) + var(--space-6));
  }
  .km-prawny__spis ol { flex-direction: column; gap: 0; }
}
/* Trzeci poziom naglowka doszedl razem z podstawami prawnymi dla danych
   o zdrowiu, wiec potrzebuje wlasnego rozmiaru. */
.km-proza h3 { font-size: var(--fs-h3); }

/* Domkniecie listy dolegliwosci: zdanie klienta, nie kolejny kafel. */
.km-schorzenia__domkniecie {
  margin: var(--space-6) 0 0; text-align: center;
  font-size: 1.0313rem; color: var(--km-tekst-cichy);
}
.km-schorzenia__domkniecie a {
  color: var(--km-akcent-ciemny, var(--km-akcent)); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.km-schorzenia__domkniecie a:hover { color: var(--km-granat); text-decoration-thickness: 2px; }
.km-schorzenie__tresc { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 42px + var(--space-4)); }
.km-schorzenie__tresc p { color: var(--km-tekst-cichy); font-size: var(--fs-mala); }
.km-schorzenie__etykieta {
  font-family: var(--font-display); font-size: var(--fs-nad); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--km-granat-50);
  margin: var(--space-5) 0 var(--space-3);
}
.km-schorzenie__terapie { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.km-schorzenie__terapie li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--km-tlo-cieple-2); border-radius: var(--r-pelny);
  font-size: .8125rem; font-weight: 600; color: var(--km-granat);
}
.km-schorzenie__terapie li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--km-akcent);
}

/* ============================ sprzęt ============================ */
.km-sprzet-glowny {
  display: grid; gap: var(--space-8);
  padding: var(--space-6); margin-bottom: var(--space-8);
  background: var(--km-tlo); border: 1px solid var(--km-linia-karta); border-radius: var(--r-lg);
}
.km-sprzet-glowny img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); }
.km-sprzet-glowny__tresc { align-self: center; }
.km-sprzet-glowny h3 { font-size: 1.375rem; font-weight: 600; }
.km-sprzet-glowny p { color: var(--km-tekst-cichy); font-size: var(--fs-mala); }

.km-sprzet { display: grid; gap: var(--space-4); }
.km-sprzet__poz {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); background: var(--km-tlo);
  border: 1px solid var(--km-linia-karta); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.km-sprzet__poz:hover { border-color: rgba(162,86,15,.35); box-shadow: var(--cien-sm); }
.km-sprzet__ikona {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--km-akcent-mgla); color: var(--km-akcent);
}
.km-sprzet__nazwa {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: .01em; margin: 0 0 var(--space-1); color: var(--km-granat);
}
.km-sprzet__opis { margin: 0; font-size: var(--fs-mala); color: var(--km-tekst-cichy); line-height: var(--lh-srednia); }

/* ============================ o nas ============================ */
.km-onas__siatka { display: grid; gap: var(--space-10); align-items: stretch; }
.km-onas__obraz { position: relative; height: 100%; }
.km-onas__obraz img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-lg); }
/* Justowanie tylko w biogramie: krotkie akapity w innych sekcjach
   robia po justowaniu dziury miedzy slowami. */
.km-onas__proza .km-proza p { text-align: justify; hyphens: auto; }
.km-onas__tresc { position: relative; }
/* Ślad kręgosłupa ze znaku jako tło, ledwie widoczny. */
/* Ozdobny znak w tle. Na wąskich ekranach wystawał poza krawędź o 2-3 px
   i rozpychał stronę w bok (zmierzone na 320 i 360 px), więc tam go nie ma. */
.km-onas__znak { display: none; }
@media (min-width: 56.25em) {
  .km-onas__znak {
    display: block; position: absolute; right: 0; top: -3rem;
    width: 11rem; height: auto;
    color: var(--km-akcent); opacity: .06; pointer-events: none; z-index: 0;
  }
}
.km-onas__proza { position: relative; z-index: 1; }
.km-cytat {
  margin: var(--space-8) 0 0; padding: var(--space-5) var(--space-6);
  background: var(--km-tlo-cieple); border-left: 3px solid var(--km-akcent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500;
  line-height: var(--lh-srednia); color: var(--km-granat);
}

.km-kursy { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.km-kursy li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-mala); line-height: var(--lh-srednia); color: var(--km-tekst-cichy);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--km-linia);
}
.km-kursy .km-ikona { color: var(--km-akcent); margin-top: 3px; }

/* Dyplomy jako pas przewijany w bok, na KAZDEJ szerokosci.
   Do 20.09.2026 komputer dostawal siatke dwukolumnowa: 17 skanow to osiem
   wierszy, ktore zjadaly pol strony, a skany pionowe i poziome mieszaly sie
   w nierowny blok. Klient poprosil o to samo co na telefonie. */
.km-galeria {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-1);
  padding-bottom: var(--space-3);
  /* Pasek przewijania jest tu informacja, ze da sie przesunac dalej. */
  scrollbar-width: thin;
  scrollbar-color: var(--km-linia-pole) transparent;
}
.km-galeria__poz {
  margin: 0;
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
}

/* Skan poziomy zajmuje dwie kolumny. Proporcja 25/16 jest policzona tak, by
   wysokosc wyszla rowna kaflom pionowym: dwie kolumny plus przerwa to 394 px
   przy 1440 px, a kafel pionowy ma tam 252 px, czyli 394/252 = 1,56.
   Pierwsze podejscie dawalo `height: 100%`, ale w kaflu o nieokreslonej
   wysokosci degeneruje sie ono do naturalnej wysokosci skanu i wiersze
   uroslly do 550 px. */
.km-galeria { align-items: start; }
/* Skan poziomy dostaje szersze pole zamiast dwoch kolumn siatki. */
.km-galeria__poz--poziomy { width: 330px; }
/* Selektor celowo z dwoma klasami. `.km-galeria__poz--poziomy a` ma tę samą
   specyficzność co `.km-galeria a` (klasa + typ), więc wygrywała reguła
   późniejsza w pliku i kafle poziome dalej dostawały 3/4. Zmierzone:
   `aspect-ratio` na kaflu wynosiło `3 / 4`, a wysokość 526 px zamiast 252 px. */
.km-galeria .km-galeria__poz--poziomy a { aspect-ratio: 25/16; }
/* Proporcja siedzi na KAFLU, nie na obrazie. WordPress wypisuje w <img>
   atrybuty `width` i `height`, ktore dzialaja jak reguly CSS i unieważniaja
   `aspect-ratio`. Skutek byl zmierzony na 390 px: cztery rozne wysokosci
   kafli (282, 283, 285 i 296 px) zamiast jednej. */
.km-galeria a {
  display: block; position: relative; aspect-ratio: 3/4;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--km-linia-pole); background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.km-galeria a:hover { border-color: var(--km-akcent); transform: translateY(-2px); }
/* `contain`, nie `cover`. Certyfikat to dokument: obciety dyplom traci
   naglowek i pieczec. Pierwszy skan jest poziomy (proporcja 1,44), pozostale
   pionowe (~0,70), wiec przy `cover` widac z niego bylo tylko pasek.
   Biale tlo pod spodem gra role kartki, na ktorej lezy skan. */
.km-galeria img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  background: #fff; padding: 6px;
}
.km-galeria figcaption {
  margin-top: var(--space-2); font-size: .75rem; line-height: 1.35; color: var(--km-tekst-cichy);
}
/* Tlo pod skanem. Bez niego miejsce po niezaladowanym obrazie jest biale
   i wyglada jak brak grafiki — klient zapytal o to 6.09.2026. */
.km-galeria__poz img { background: var(--km-tlo-cieple-2); }

.km-galeria__lupa {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(23,28,65,.55); color: #fff; opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.km-galeria a:hover .km-galeria__lupa, .km-galeria a:focus-visible .km-galeria__lupa { opacity: 1; }

/* ============================ powiekszanie zdjec ============================
   Poprzednia wersja gubila strzalki i podpis: obraz z `max-height: 100%`
   zjadal cala kratke, a dolny pasek wypadal poza ekran. Teraz kazdy pas ma
   wlasna, PEWNA wysokosc, a obraz dostaje to, co zostanie. */
.km-lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  background: rgba(9,11,26,.985); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.km-lightbox.otwarty { opacity: 1; visibility: visible; }

.km-lightbox__gora {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 0 var(--space-4);
  color: rgba(255,255,255,.75);
}
.km-lightbox__licznik {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

.km-lightbox__srodek {
  position: relative; display: grid; place-items: center;
  min-height: 0; overflow: hidden; padding: 0 var(--space-4);
}
.km-lightbox__obraz {
  max-width: 100%;
  /* `max-height: 100%` w komorce `1fr` nie ma sie do czego odniesc: obraz
     brał 844 px w oknie 900 px i podpis lezal NA zdjeciu. Wysokosc liczona
     wprost od okna, z odjeciem obu paskow. */
  max-height: calc(100vh - 56px - 118px);
  object-fit: contain; border-radius: var(--r-md); background: #fff;
}

/* Strzalki lezakuja na obrazie, ale nigdy go nie zaslaniaja calkowicie:
   sa przy krawedziach ekranu, nie przy krawedzi zdjecia. */
.km-lightbox__strzalka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff;
  backdrop-filter: blur(6px);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.km-lightbox__strzalka--wstecz { left: var(--space-3); }
.km-lightbox__strzalka--dalej { right: var(--space-3); }
.km-lightbox__strzalka:hover { background: #fff; color: var(--km-granat); border-color: #fff; }

.km-lightbox__zamknij {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.km-lightbox__zamknij:hover { background: #fff; color: var(--km-granat); }

/* Podpis na wlasnym pasie, zawsze widoczny, nigdy nie na zdjeciu. */
.km-lightbox__dol {
  padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  text-align: center; color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.km-lightbox__podpis {
  margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: .01em;
}
.km-lightbox__wskazowka {
  margin: var(--space-2) 0 0; font-size: .75rem; color: rgba(255,255,255,.5);
}
@media (max-width: 37.4375em) {
  .km-lightbox__strzalka { width: 44px; height: 44px; }
  .km-lightbox__strzalka--wstecz { left: 4px; }
  .km-lightbox__strzalka--dalej { right: 4px; }
  .km-lightbox__srodek { padding: 0 52px; }
}

/* ============================ opinie ============================
   Jedna wypowiedz naraz, na PELNEJ szerokosci sekcji. Rzad waskich kart
   zostawial na tekst 205-270 px, przez co zdania lamaly sie co trzy slowa
   i trzeba bylo doklejac „Czytaj wiecej”. Tutaj cala opinia jest widoczna. */
.km-opinie { display: grid; gap: var(--space-8); }

.km-opinie__panel h2 { margin-bottom: var(--space-5); }
.km-opinie__ocena { margin-bottom: var(--space-6); }

.km-opinie__sterowanie {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.km-opinie__btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--km-tlo); border: 1.5px solid rgba(23,28,65,.2); color: var(--km-granat);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.km-opinie__btn:hover { background: var(--km-granat); color: #fff; border-color: var(--km-granat); }
.km-opinie__licznik {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; color: var(--km-tekst-cichy); margin-left: var(--space-2);
}

.km-opinie__kropki { display: flex; gap: var(--space-2); }
.km-opinie__kropka {
  width: 44px; height: 44px; border: 0; padding: 20px 10px; cursor: pointer;
  background: rgba(23,28,65,.16); background-clip: content-box; border-radius: 2px;
  transition: background-color var(--dur) var(--ease);
}
.km-opinie__kropka[aria-selected="true"] { background: var(--km-akcent); background-clip: content-box; }
.km-opinie__kropka:hover { background: var(--km-akcent-ciemny); background-clip: content-box; }

/* Scena: biala plyta, na ktorej zmieniaja sie wypowiedzi. */
.km-opinie__scena {
  position: relative;
  background: var(--km-tlo); border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg); padding: var(--space-8) var(--space-6) var(--space-6);
}
/* Plakietka wychodzi CALA ponad krawedz plyty. Przy mniejszym przesunieciu
   zachodzila na rzad gwiazdek pierwszej opinii. */
.km-opinie__cudzyslow {
  position: absolute; top: -24px; left: var(--space-6);
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--km-akcent); color: #fff;
  box-shadow: var(--cien-md);
}

/* Wysokosc sceny ustala najdluzsza opinia (liczy ja JS). Krotsze wypowiedzi
   sa wysrodkowane w pionie, zeby nie zostawialy dziury pod spodem. */
/* KOLUMNA, nie rzad. Przy `flex-direction: row` dwie opinie widoczne przez
   chwile podczas pomiaru stawaly obok siebie, sciskaly sie i wychodzily
   wyzsze — scena robila sie o 134 px za wysoka. */
.km-opinie__tor {
  position: relative; display: flex; flex-direction: column; justify-content: center;
}
.km-opinia { width: 100%; }

.km-opinia { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); width: 100%; }
.km-opinia[hidden] { display: none; }
.js .km-opinia.aktywna { animation: km-opinia-wejscie 340ms var(--ease) both; }
@keyframes km-opinia-wejscie {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .km-opinia.aktywna { animation: none; }
}

.km-opinia__gwiazdki { display: flex; gap: 3px; color: var(--km-akcent); }
.km-opinia__tekst {
  margin: 0; padding: 0; border: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, .96rem + .28vw, 1.125rem);
  line-height: 1.65; color: var(--km-granat);
}
.km-opinia__stopka {
  display: flex; align-items: center; gap: var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--km-linia);
}
.km-opinia__inicjal {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--km-tlo-cieple-2); color: var(--km-granat);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.km-opinia__autor {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--km-granat);
}
.km-opinia__zrodlo { display: block; font-size: .8125rem; color: var(--km-tekst-cichy); }

@media (min-width: 56.25em) {
  .km-opinie { grid-template-columns: .78fr 1.22fr; gap: var(--space-16); align-items: center; }
  .km-opinie__scena { padding: var(--space-10) var(--space-10) var(--space-8); }
  .km-opinie__cudzyslow { left: var(--space-10); }
}

/* ============================ kontakt ============================ */
.km-kontakt { display: grid; gap: var(--space-10); }
.km-kontakt__glowny {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6);
  background: var(--km-granat); border-radius: var(--r-lg); color: #fff;
  text-decoration: none; transition: background-color var(--dur) var(--ease);
}
.km-kontakt__glowny:hover { background: var(--km-granat-90); color: #fff; }
.km-kontakt__glowny .km-ikona { color: var(--km-akcent-jasny); }
.km-kontakt__glowny b {
  display: block; font-family: var(--font-display); font-size: 1.375rem;
  font-weight: 700; letter-spacing: .01em; line-height: 1.2;
}
.km-kontakt__glowny small {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.km-dane { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-5); }
.km-dane > li { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-4); align-items: start; }
.km-dane__ikona {
  width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--km-akcent-mgla); color: var(--km-akcent);
}
.km-dane__etykieta {
  display: block; font-family: var(--font-display); font-size: var(--fs-nad); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--km-tekst-cichy);
  margin-bottom: var(--space-1);
}
.km-dane a { color: var(--km-granat); text-decoration: none; font-weight: 600;
             display: inline-flex; align-items: center; min-height: 44px; }
.km-dane a:hover { color: var(--km-akcent); }

.km-godziny { list-style: none; margin: 0; padding: 0; font-size: var(--fs-mala); }
.km-godziny li {
  display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--km-linia);
}
.km-godziny li:last-child { border-bottom: 0; }

/* Mapa na pelna szerokosc, jako domkniecie sekcji. Karta z dojazdem lezy
   NA mapie, w rogu — pasek nad mapa odcinal ja od reszty i zostawial szpare. */
.km-mapa-pelna { position: relative; margin-top: var(--section-sm); }
.km-mapa-pelna iframe { display: block; width: 100%; height: 400px; border: 0; }

.km-mapa-pasek {
  position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--km-granat); color: #fff; text-decoration: none;
  border-radius: var(--r-lg); box-shadow: var(--cien-lg);
  max-width: calc(100% - var(--space-10));
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.km-mapa-pasek:hover { background: var(--km-granat-90); color: #fff; transform: translateY(-2px); }
.km-mapa-pasek__ikona {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(242,178,92,.16); color: var(--km-akcent-jasny);
}
.km-mapa-pasek__tekst b {
  display: block; font-family: var(--font-display); font-size: 1rem;
  font-weight: 600; letter-spacing: .01em;
}
.km-mapa-pasek__tekst small { font-size: .75rem; color: rgba(255,255,255,.7); }
.km-mapa-pasek__strzalka { flex: none; color: var(--km-akcent-jasny); }
.km-mapa-pasek:hover .km-mapa-pasek__strzalka { color: #fff; }

/* Mapa konczy sekcje, wiec sekcja nie dodaje juz odstepu pod nia. */
.km-sekcja--mapa-na-dole { padding-bottom: 0; }

@media (min-width: 56.25em) {
  .km-mapa-pelna iframe { height: 440px; }
  .km-mapa-pasek { left: max(var(--space-8), calc((100vw - 76rem) / 2)); bottom: var(--space-8); }
}

/* formularz */
.km-form {
  display: grid; gap: var(--space-4);
  background: var(--km-tlo); border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg); padding: var(--space-6);
}
.km-form__para { display: grid; gap: var(--space-4); }
.km-form label {
  display: block; font-size: .8125rem; font-weight: 600; margin-bottom: var(--space-2);
  color: var(--km-granat);
}
.km-form input, .km-form textarea {
  width: 100%; min-height: 50px; padding: var(--space-3) var(--space-4);
  font-family: inherit; font-size: 1rem; color: var(--km-tekst);
  background: var(--km-tlo); border: 1px solid var(--km-linia-pole); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.km-form textarea { min-height: 132px; resize: vertical; line-height: var(--lh-srednia); }
.km-form input:focus, .km-form textarea:focus { border-color: var(--km-akcent); }
.km-form__zgoda {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: center;
  min-height: 44px;
  font-size: .8125rem; line-height: var(--lh-srednia); color: var(--km-tekst-cichy);
}
.km-form__zgoda input { width: 24px; height: 24px; min-height: 24px; margin: 0; accent-color: var(--km-akcent); }
.km-form__zgoda label { font-weight: 400; margin: 0; color: inherit; font-size: inherit;
                        display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.km-form__ul { position: absolute; left: -9999px; }
.km-form__info { padding: var(--space-4); border-radius: var(--r-md); font-size: var(--fs-mala); }
.km-form__info--ok { background: #E9F5ED; color: #1B5E30; }
.km-form__info--blad { background: #FBEAE7; color: #8A2314; }

/* ============================ stopka ============================ */
.km-stopka { background: var(--km-granat); color: rgba(255,255,255,.7); font-size: var(--fs-mala); }
.km-stopka a { color: rgba(255,255,255,.7); text-decoration: none; }
.km-stopka a:hover { color: var(--km-akcent-jasny); }
.km-stopka__gora { display: grid; gap: var(--space-10); padding-block: var(--section-md); align-items: start; }
.km-stopka__logo img { width: 200px; margin-bottom: var(--space-5); }
.km-stopka__opis { line-height: var(--lh-srednia); margin-bottom: var(--space-5); }
.km-stopka h3 {
  color: #fff; font-family: var(--font-display); font-size: var(--fs-nad); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--space-5);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--km-linia-ciemna);
}
.km-stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
/* Ikona wyrownana do PIERWSZEGO WIERSZA tekstu, nie do srodka bloku.
   Przy dwuwierszowym adresie uciekala na wysokosc miedzy wiersze. */
.km-stopka__kontakt li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3);
  align-items: start; padding-block: var(--space-1); line-height: 1.5;
}
/* Ikona ma 16 px, wiersz tekstu okolo 24 px. Zeby srodek ikony trafil
   w srodek PIERWSZEGO wiersza, schodzi o (24-16)/2 = 4 px. */
.km-stopka__kontakt .km-ikona { color: var(--km-akcent-jasny); margin-top: 4px; }
.km-stopka__kontakt a { min-height: 32px; }
.km-stopka__kontakt a { color: #fff; font-weight: 600;
                        display: inline-flex; align-items: center; min-height: 40px; }
/* Dane rejestrowe: drobny wiersz pod adresem, nie element nawigacji.
   Bez wlasnej barwy: stopka ma juz `rgba(255,255,255,.7)` na granacie,
   a kazdy ciemniejszy odcien to osobne pytanie o kontrast. Tutaj
   dziedziczenie jest jedyna wartoscia, ktorej nie trzeba mierzyc. */
.km-stopka__rejestr { margin: var(--space-3) 0 0; }
.km-stopka__trasa {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1); font-weight: 600; color: var(--km-akcent-jasny);
}
.km-stopka__trasa:hover { color: #fff; }
.km-stopka__nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* Sroda ma dwa zakresy godzin i rozwalala wiersz. Nazwa dnia nie zawija,
   godziny moga zlamac sie na dwa wiersze i wyrownuja sie do prawej. */
.km-stopka .km-godziny li {
  border-bottom-color: var(--km-linia-ciemna);
  align-items: flex-start; gap: var(--space-3);
}
.km-stopka .km-godziny li > span:first-child { flex: none; white-space: nowrap; }
.km-stopka .km-godziny li > span:last-child { text-align: right; line-height: 1.35; white-space: normal; }
.km-stopka__dol {
  border-top: 1px solid var(--km-linia-ciemna); padding-block: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between; align-items: center; font-size: .8125rem;
}
.km-stopka__dol nav { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
/* Pole dotyku 44 px także w dolnym pasku: odnośniki miały 18 i 22 px. */
.km-stopka__dol a { display: inline-flex; align-items: center; justify-content: center;
                    min-width: 44px; min-height: 44px; }

/* ============================ pływający telefon ============================ */
.km-tel-plywajacy {
  position: fixed; right: 14px; bottom: 14px; z-index: 80;
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--km-akcent); color: #fff; box-shadow: var(--cien-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.km-tel-plywajacy.widoczny { opacity: 1; visibility: visible; transform: none; }
.km-tel-plywajacy:hover { background: var(--km-akcent-ciemny); color: #fff; }

/* ============================ pasek ciasteczek ============================ */
.km-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: var(--km-granat); color: rgba(255,255,255,.78);
  padding: var(--space-2) var(--space-4); padding-right: 78px;
  transform: translateY(110%); transition: transform 260ms var(--ease);
  font-size: .75rem; line-height: 1.35;
}
.km-cookies.widoczny { transform: none; }
.km-cookies__w { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; }
.km-cookies p { margin: 0; }
.km-cookies a { color: var(--km-akcent-jasny); }
.km-cookies .km-btn {
  min-height: 36px; padding-inline: var(--space-4); font-size: .75rem;
  white-space: nowrap; background: var(--km-akcent-jasny); color: var(--km-granat); border: 0;
}
.km-cookies .km-btn:hover { background: #fff; }

/* ============================ animacje wejścia ============================ */
.js .km-anim { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.js .km-anim.widoczna { opacity: 1; transform: none; }

/* ============================ proza ============================ */
.km-proza h2 { margin-top: var(--space-10); }
.km-proza h3 { margin-top: var(--space-8); }
.km-proza ul, .km-proza ol { padding-left: 1.15rem; }
.km-proza li { margin-bottom: var(--space-2); }
.km-proza table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.km-proza th, .km-proza td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--km-linia); }

/* ======================= najwęższe telefony ======================= */
@media (max-width: 23.4375em) {
  .km-cookies { padding: var(--space-2) var(--space-3); padding-right: 70px; font-size: .75rem; }
  .km-cookies .km-btn { min-height: 44px; padding-inline: var(--space-3); font-size: .75rem; }
  .km-logo img { width: 148px; }
}

/* ======================= od 600 px ======================= */
@media (min-width: 37.5em) {
  .km-galeria { grid-template-columns: repeat(3, 1fr); }
  .km-form__para { grid-template-columns: 1fr 1fr; }
  .km-sprzet { grid-template-columns: repeat(2, 1fr); }
}

/* ======================= od 900 px ======================= */
@media (min-width: 56.25em) {
  :root { --naglowek-h: 78px; }
  .km-logo img { width: 196px; }
  .km-pasek-info a { min-height: 0; }
  .km-dane a { min-height: 0; }

  .km-hero__w { grid-template-columns: 1.05fr .95fr; gap: var(--space-16);
                padding-block: var(--section-md); align-items: center; }
  /* Proporcja 4/5 dawala hero 930 px wysokosci i tekst wiszacy w pustce.
     4/3.4 schodzi do okolo 700 px, czyli w widelki „wizytowkowe”. */
  .km-hero__obraz img { aspect-ratio: 4/3.4; }

  .km-fakty__lista { grid-template-columns: repeat(4, 1fr); }
  .km-fakty__poz {
    border-bottom: 0; border-right: 1px solid var(--km-linia-ciemna);
    padding: var(--space-5) var(--space-4);
  }
  .km-fakty__poz:last-child { border-right: 0; }

  .km-schorzenia { grid-template-columns: repeat(2, 1fr); }
  .km-sprzet-glowny { grid-template-columns: .9fr 1.1fr; padding: var(--space-8); gap: var(--space-10); }
  /* Bylo 1/1, a plik ma 4:3, wiec `cover` zabieral 25 procent kadru
     (`kadry.py`, 21.09.2026). Pole trzyma teraz proporcje pliku. */
  .km-sprzet { grid-template-columns: repeat(3, 1fr); }

  .km-onas__siatka { grid-template-columns: .8fr 1.2fr; gap: var(--space-16); }
  .km-galeria { grid-template-columns: repeat(6, 1fr); }
  .km-kursy { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); }

  .km-opinie__gora { grid-template-columns: 1.4fr auto; }

  .km-kontakt { grid-template-columns: .95fr 1.05fr; gap: var(--space-12); }
  .km-stopka__gora { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .km-tel-plywajacy { display: none; }
  .km-cookies { padding-right: var(--space-5); }
}


/* ============================ zakladka w budowie ============================ */
.km-budowa { background: var(--km-tlo-cieple); }
.km-budowa__w {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 68vh; padding-block: var(--section-lg);
}
.km-budowa__lead { font-size: 1.0625rem; color: var(--km-tekst-cichy); margin-bottom: var(--space-8); }
.km-budowa__lista { list-style: none; margin: 0 0 var(--space-10); padding: 0; display: grid; gap: var(--space-4); }
.km-budowa__lista li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start;
  background: var(--km-tlo); border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg); padding: var(--space-5);
}
.km-budowa__lista strong {
  display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--km-granat); margin-bottom: var(--space-1);
}
.km-budowa__lista span span { font-size: var(--fs-mala); color: var(--km-tekst-cichy); line-height: var(--lh-srednia); }
.km-budowa__ikona {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--km-akcent-mgla); color: var(--km-akcent);
}
.km-budowa__akcje { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================ stopka na telefonie ============================ */
@media (max-width: 56.1875em) {
  /* Zmierzone przed poprawka: 1182 px wysokosci, czyli poltora ekranu samej
     stopki. Godziny i odnosniki ida na dwie kolumny, reszta sie zaciska. */
  .km-stopka { font-size: .8125rem; }
  .km-stopka__gora { gap: var(--space-6); padding-block: var(--space-8); }
  .km-stopka__logo img { width: 170px; margin-bottom: var(--space-3); }
  .km-stopka__opis { margin-bottom: var(--space-4); line-height: 1.5; }
  .km-stopka h3 { margin-bottom: var(--space-3); padding-bottom: var(--space-2); }

  .km-stopka__kontakt li { padding-block: 0; }
  .km-stopka__kontakt a { min-height: 44px; }

  /* Siedem dni w jednej kolumnie zjadalo pol ekranu. */
  .km-stopka .km-godziny {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5); row-gap: 0;
  }
  .km-stopka .km-godziny li { padding: 3px 0; font-size: .75rem; }
  .km-stopka .km-godziny li:nth-last-child(2) { border-bottom: 0; }

  .km-stopka__nav ul { grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
  .km-stopka__nav a { min-height: 44px; }

  .km-stopka__ocena { padding: var(--space-2) var(--space-3); }
  .km-stopka__dol { padding-block: var(--space-2); font-size: .75rem; gap: var(--space-1); }
  .km-stopka__dol a { min-height: 44px; }
  .km-stopka__dol nav { gap: var(--space-3); }
}

/* ==================== telefon w pasku gornym ==================== */
.km-pasek-info__w { justify-content: space-between; }
.km-pasek-info__tel {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: #fff; text-decoration: none; min-height: 42px;
}
.km-pasek-info__tel .km-ikona { color: var(--km-akcent-jasny); }
.km-pasek-info__tel b {
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  letter-spacing: .02em;
}
.km-pasek-info__tel small { color: rgba(255,255,255,.6); margin-left: var(--space-1); }
.km-pasek-info__tel:hover b { color: var(--km-akcent-jasny); }
.km-pasek-info__reszta {
  display: none; align-items: center; gap: var(--space-2) var(--space-6);
}

/* Na wąskim ekranie w pasku zostaje sam telefon, wyśrodkowany. */
@media (max-width: 37.4375em) {
  .km-pasek-info__w { justify-content: center; }
}
@media (min-width: 37.5em) {
  .km-pasek-info__reszta { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
}

/* ==================== menu poziome dopiero od 1100 px ====================
   Siedem pozycji plus znak nie mieszczą się wygodnie poniżej. Wcześniejsze
   podejście z trzecim wierszem rozwiązywało ścisk, ale nagłówek robił się
   za wysoki. Poniżej progu wchodzi hamburger. */
@media (min-width: 68.75em) {
  .km-menu { display: block; }
  .km-hamburger { display: none; }
  .km-menu-mobilne { display: none; }
  .km-menu ul { gap: var(--space-6); }
  .km-menu a { padding-block: var(--space-3); }
}


/* Sekcja z dolegliwosciami ma wiecej tresci niz pozostale, wiec mniejsze
   odstepy gora i dol trzymaja ja w ryzach (uwaga Pawla, 18.08). */
.km-sekcja--ciasna { padding-block: var(--section-sm); }

/* Ocena Google na kolazu: przy trzech zdjeciach ustawiamy ja na duzym kadrze. */
.km-hero__kolaz .km-hero__ocena { left: var(--space-4); bottom: var(--space-4); }
@media (min-width: 56.25em) {
  /* Kolaz na siatce: duze zdjecie siega ponad i ponizej malych, przez co uklad
     przestaje byc dwoma rownymi prostokatami obok siebie. */
  .km-hero__kolaz { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--space-4); }
  .km-hero__kolaz-duze img { aspect-ratio: 3/3.8; }
  .km-hero__kolaz-male { grid-template-columns: 1fr; gap: var(--space-4); }
  .km-hero__kolaz-male img { aspect-ratio: 4/3; }
  .km-hero__kolaz-male > div:first-child { margin-top: calc(var(--space-8) * -1); }
  .km-hero__kolaz-male > div:last-child { margin-bottom: calc(var(--space-8) * -1); }
  .km-hero__kolaz--pojedynczy { grid-template-columns: 1fr; }
  .km-hero__kolaz--pojedynczy .km-hero__kolaz-duze img { aspect-ratio: 4/3.4; }
}


/* Ocena z wizytowki w stopce: wypelnia pierwsza kolumne, ktora po usunieciu
   przycisku Facebooka zostawala pusta na pol wysokosci. */
.km-stopka__ocena {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid var(--km-linia-ciemna);
  border-radius: var(--r-md); color: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.km-stopka__ocena:hover { background: rgba(255,255,255,.12); border-color: var(--km-akcent-jasny); color: #fff; }
.km-stopka__ocena b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.km-stopka__ocena .km-ocena__gwiazdki { color: var(--km-akcent-jasny); }
.km-stopka__ocena small { display: block; font-size: .75rem; color: rgba(255,255,255,.6); }


/* Pasek faktow ma byc wezszy od reszty tresci: to jest wtracenie miedzy
   hero a sekcjami, nie kolejna pelnowymiarowa sekcja (uwaga Pawla, 18.08). */
.km-fakty > .km-kontener { width: min(92vw, 64rem); }
.km-fakty__ikona { width: 30px; height: 30px; }
.km-fakty__l { font-size: .875rem; }
.km-fakty__o { font-size: .75rem; }


/* Odnosnik do trasy tez potrzebuje 44 px pola dotyku. */
.km-stopka__trasa { min-height: 44px; }

@media (max-width: 56.1875em) {
  /* Wysokosc odzyskana bez ruszania pol dotyku: ciasniejszy opis i godziny
     bez linii miedzy wierszami.
     ZNAKU JUZ NIE ZMNIEJSZAMY. Zeszlismy do 124x29 px, czyli PONIZEJ znaku
     w naglowku (148x48) — na granatowym tle wtopil sie i klient zglosil to
     23.08.2026 slowami "tlo jest ciemne i malo czytelne (gubi sie w nim logo)".
     Znak w stopce jest podpisem pod strona i ma byc czytelny. */
  .km-stopka__logo img { width: 168px; margin-bottom: var(--space-3); }
  .km-stopka__opis { margin-bottom: var(--space-3); }
  .km-stopka__gora { gap: var(--space-5); padding-block: var(--space-6); }
  .km-stopka h3 { margin-bottom: var(--space-2); }
  .km-stopka .km-godziny li { border-bottom: 0; padding: 1px 0; }
}


/* Male kadry kolazu wygladaja jak odbitki w passe-partout: cienka krawedz,
   za nia biala ramka, na koncu miekki cien.
   Sama biala obwodka nie dzialala. Zmierzone pikselami: kadry leza na cieplym
   tle sekcji (252,246,239), a nie na duzym zdjeciu, wiec biel na bieli dawala
   1,06:1 i krawedzi po prostu nie bylo. Bialy pierscien robi teraz `box-shadow`,
   a widoczna krawedz to `border` w barwie kart. */
.km-hero__kolaz-male img {
  border: 1px solid var(--km-linia-karta);
  box-shadow: 0 0 0 4px var(--km-tlo), var(--cien-md);
}
.km-hero__kolaz-duze img { box-shadow: var(--cien-md); }




/* ==================== poprawki na telefon ==================== */
@media (max-width: 56.1875em) {
  /* Pasek faktow po DWA w rzedzie: siedem wierszy pod hero bylo za dlugie.
     Zmierzone przed poprawka: 423 px wysokosci. */
  .km-fakty__lista { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  .km-fakty__poz {
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--km-linia-ciemna);
  }
  .km-fakty__poz:nth-child(odd) { border-right: 1px solid var(--km-linia-ciemna); }
  .km-fakty__poz:nth-last-child(-n+2) { border-bottom: 0; }
  .km-fakty__l { font-size: .875rem; }
  .km-fakty__o { font-size: .75rem; line-height: 1.35; }
  .km-fakty__ikona { width: 30px; height: 30px; }

  /* Opinie mniejsze */
  .km-opinie__scena { padding: var(--space-6) var(--space-5) var(--space-5); }
  .km-opinie__cudzyslow { width: 40px; height: 40px; top: -20px; left: var(--space-5); }
  .km-opinia__tekst { font-size: .9375rem; line-height: 1.6; }
  .km-opinia { gap: var(--space-4); }
  .km-opinia__inicjal { width: 38px; height: 38px; font-size: .875rem; }
  .km-opinia__autor { font-size: .9375rem; }
  .km-opinie__panel h2 { margin-bottom: var(--space-4); }
  .km-opinie__ocena { margin-bottom: var(--space-4); }
  .km-opinie__sterowanie { margin-bottom: var(--space-4); }

  /* Galeria certyfikatow: pasek do przewijania zamiast siatki na 2591 px */
  .km-galeria {
    display: grid; grid-auto-flow: column;
    grid-template-columns: none;      /* bez tego dwa pierwsze kafle sa mniejsze */
    /* 46% dawalo 165 px na telefonie, za malo na skan. Sam procent nie
       wystarczy: na tablecie 768 px 62% to bylo 438 px, czyli jeden
       certyfikat na pol ekranu. Stad sufit. */
    grid-auto-columns: clamp(160px, 62%, 240px);
    gap: var(--space-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: var(--space-2);
  }
  .km-galeria::-webkit-scrollbar { display: none; }
  .km-galeria__poz { scroll-snap-align: start; }

  /* W pasku poziomym rozpietosc na dwie kolumny nie ma sensu: kafel wychodzil
     na 492 px przy 359 px widoku, wiec dyplomu nie dalo sie obejrzec w calosci.
     Wszystkie kafle sa tu kwadratowe, dzieki czemu pionowy i poziomy skan
     wypelniaja ramke tak samo (po okolo 70%), a wysokosci sa rowne. */
  .km-galeria .km-galeria__poz--poziomy { grid-column: auto; }
  .km-galeria a,
  .km-galeria .km-galeria__poz--poziomy a { aspect-ratio: 1; }
  .km-galeria figcaption { font-size: .75rem; }

  /* Pasek ciasteczek: JEDEN wiersz. Wersja z przyciskiem pod tekstem urosla
     do 108 px, czyli ponad nasz prog 80 px na telefonie. Kreska w akcencie
     u gory wystarczy, zeby pasek byl zauwazalny. */
  .km-cookies {
    padding: var(--space-3) var(--space-4);
    padding-right: 76px;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--km-akcent);
  }
  .km-cookies__w { grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; }
  .km-cookies p { font-size: .75rem; line-height: 1.45; }
  .km-cookies a { text-decoration: underline; text-underline-offset: .15em; }
  /* 44 px pola dotyku takze tutaj: prog jest nienegocjowalny. */
  .km-cookies .km-btn { min-height: 44px; padding-inline: var(--space-4); font-size: .75rem; }
}

/* Sterowanie galeria dyplomow.
   Do 20.09.2026 pokazywalo sie tylko na telefonie, bo komputer dostawal
   siatke. Klient poprosil o karuzele takze na komputerze („dyplomy zajmuja
   bardzo duzo miejsca i maja rozne proporcje”), wiec strzalki i licznik
   sa teraz wszedzie. */
.km-galeria-sterowanie {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (max-width: 56.1875em) {
  .km-galeria-sterowanie {
    display: flex; align-items: center; gap: var(--space-3);
    margin-top: var(--space-4);
  }
}

/* Przyciski i licznik POZA regula telefonu. Siedzialy w niej, bo sterowanie
   bylo wczesniej tylko mobilne — po odsloniecie go na komputerze przyciski
   zostaly bez stylu i bez reakcji na najechanie (zmierzone: „hover nic nie
   zmienia” w stany.py). */
.km-galeria-sterowanie__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--km-tlo);
  /* 3:1 wobec tla, bo ksztalt niesie tu funkcje (WCAG 1.4.11). */
  border: 1.5px solid var(--km-linia-pole);
  color: var(--km-granat);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.km-galeria-sterowanie__btn:hover { background: var(--km-granat); border-color: var(--km-granat); color: #fff; }
.km-galeria-sterowanie__btn:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: 2px; }
.km-galeria-sterowanie__btn[disabled] { opacity: .4; cursor: default; }
.km-galeria-sterowanie__licznik {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; color: var(--km-tekst-cichy); margin-left: auto;
}

/* ============================================================================
   PODSTRONY Z TREŚCIĄ KLIENTA (23.08.2026)

   Baza dolegliwości, zabiegi z przeciwwskazaniami, cennik, pytania pacjentów,
   dokumenty do pobrania. Wszystko na tokenach z :root, zero nowych wartości.

   Tekst NIE dostaje `max-width`. Szerokość reguluje wyłącznie kontener,
   treść leci od lewej do prawej — twardy standard Pawła.
   ========================================================================= */

/* ------------------------------------------------- nagłówek podstrony */
.km-naglowek-strony { padding-block: var(--space-4) 0; }
.km-naglowek-strony h1 { margin-block: var(--space-3) 0; }
.km-naglowek-strony__podtytul {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--km-tekst);
}
.km-naglowek-strony__podtytul + .km-naglowek-strony__lead { margin-top: var(--space-3); }
.km-naglowek-strony__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-luzna);
  color: var(--km-tekst-cichy);
}
.km-naglowek-strony__lead p { margin: 0 0 var(--space-4); }
.km-naglowek-strony__lead p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- baza dolegliwości */
.km-baza { display: grid; gap: var(--space-4); }

.km-baza__poz {
  background: var(--km-tlo);
  border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.km-baza__poz.otwarte { border-color: var(--km-akcent); box-shadow: var(--cien-md); }

.km-baza__tytul { margin: 0; font-size: var(--fs-h3); font-weight: 600; }

.km-baza__przycisk {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--km-tekst);
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--lh-srednia);
  transition: background var(--dur) var(--ease);
}
.km-baza__przycisk:hover { background: var(--km-akcent-mgla); }
.km-baza__przycisk:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: -3px; }

.km-baza__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--km-akcent-mgla);
  /* Ciemniejszy odcien niz --km-akcent. Zmierzone: jasny akcent dawal 3,89:1
     na tle kafla, formalnie powyzej progu 3:1, ale przy 22 px na telefonie
     kwadrat czytal sie jak puste pole na zdjecie (pytanie klienta 6.09.2026). */
  color: var(--km-akcent-ciemny);
  flex: none;
}
.km-baza__nazwa { min-width: 0; }

.km-baza__znak {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pelny);
  border: 1px solid var(--km-linia-pole);
  color: var(--km-akcent);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.km-baza__poz.otwarte .km-baza__znak {
  transform: rotate(45deg);
  background: var(--km-akcent-mgla);
}

.km-baza__tresc { padding: 0 var(--space-5) var(--space-6); }
.km-baza__opis {
  margin: 0 0 var(--space-5);
  color: var(--km-tekst-cichy);
  line-height: var(--lh-luzna);
}
.km-baza__kolumny { display: grid; gap: var(--space-6); }
.km-baza__etykieta {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-nad);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--km-akcent);
}
.km-baza__objawy,
.km-baza__terapie { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.km-baza__objawy li,
.km-baza__terapie li {
  position: relative;
  padding-left: var(--space-5);
  line-height: var(--lh-srednia);
  font-size: var(--fs-mala);
}
.km-baza__objawy li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: var(--r-pelny);
  background: var(--km-granat-50);
}
.km-baza__terapie li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--km-akcent);
  border-bottom: 2px solid var(--km-akcent);
  transform: rotate(-45deg);
}
.km-baza__uwaga {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start;
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  background: var(--km-tlo-cieple-2);
  border-radius: var(--r-md);
  font-size: var(--fs-mala);
  line-height: var(--lh-srednia);
  color: var(--km-tekst-cichy);
}
.km-baza__uwaga-ikona { color: var(--km-akcent); display: grid; place-items: center; height: 1.4em; }

@media (min-width: 780px) {
  .km-baza__kolumny { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .km-baza__tresc { padding-inline: calc(var(--space-5) + 44px + var(--space-4)) var(--space-8); }
}

/* ------------------------------------------------- zdjęcie aparatury */
.km-aparatura { margin: 0; }
.km-aparatura__foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--cien-md);
}
.km-aparatura__podpis {
  margin-top: var(--space-3);
  font-size: var(--fs-mala);
  color: var(--km-tekst-cichy);
}

/* ------------------------------------------------- zabiegi */
.km-zabiegi { display: grid; gap: var(--space-5); }

.km-zabieg {
  display: flex; flex-direction: column;
  background: var(--km-tlo);
  border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.km-sekcja--biala .km-zabieg { background: var(--km-tlo-cieple); }
.km-sekcja--ciepla .km-zabieg { background: var(--km-tlo); }

/* Zdjecie zabiegu jako pasek u gory karty. Karta bez zdjecia zachowuje
   dotychczasowy uklad, wiec brak fotografii przy jednym zabiegu niczego
   nie rozjezdza. */
.km-zabieg { overflow: hidden; }
.km-zabieg--foto { padding-top: 0; }
.km-zabieg__foto {
  margin: 0 calc(-1 * var(--space-6)) var(--space-5);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--km-tlo-cieple-2);
}
/* Kształty kadru: pole dostaje proporcję swojego pliku, więc `cover` nie ma
   czego uciąć. Klasę dobiera `km_ksztalt()` z wymiarów załącznika. */
.km-zabieg__foto--pion { aspect-ratio: 3 / 4; }
.km-zabieg__foto--kwadrat { aspect-ratio: 1 / 1; }
.km-zabieg__foto--poziom { aspect-ratio: 4 / 3; }
.km-zabieg__foto--panorama { aspect-ratio: 16 / 10; }
.km-zabieg__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.km-zabieg__glowa {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}
.km-zabieg__ikona {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--km-granat); color: var(--km-akcent-jasny);
}
.km-zabieg__grupa {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-nad);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--km-akcent-ciemny);
}
.km-zabieg__tytul h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-srednia); }
.km-zabieg__urzadzenie {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-mala);
  color: var(--km-tekst-cichy);
  line-height: var(--lh-srednia);
}
/* Korzysci zamiast opisu technicznego (prosba klienta, 1.10.2026).
   Etykieta jest WERSALIKAMI i mniejsza od tresci: ma prowadzic oko,
   a nie konkurowac ze zdaniem, ktore niesie informacje. */
.km-zabieg__korzysci { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); }
.km-zabieg__korzysc { margin: 0; line-height: var(--lh-luzna); }
.km-zabieg__korzysc-etykieta {
  display: block; margin-bottom: 2px;
  font-family: var(--font-display); font-size: .8125rem;   /* nie ma tokenu mniejszego niz --fs-mala */
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--km-akcent-ciemny);
}
.km-zabieg__opis {
  margin: 0 0 var(--space-5);
  line-height: var(--lh-luzna);
  color: var(--km-tekst-cichy);
}
.km-zabieg__pw { margin-top: auto; border-top: 1px solid var(--km-linia); padding-top: var(--space-4); }

.km-zabieg__przycisk {
  width: 100%; min-height: 44px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  color: var(--km-akcent-ciemny);
  font-family: var(--font-display);
  font-size: var(--fs-mala);
  font-weight: 600;
}
.km-zabieg__przycisk:hover { color: var(--km-granat); }
.km-zabieg__przycisk:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: 2px; }
.km-zabieg__przycisk-ikona { display: grid; place-items: center; }
.km-zabieg__znak {
  display: grid; place-items: center; width: 24px; height: 24px;
  transition: transform var(--dur) var(--ease);
}
.km-zabieg__pw.otwarte .km-zabieg__znak { transform: rotate(45deg); }

.km-zabieg__lista { padding-top: var(--space-4); }
.km-zabieg__lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.km-zabieg__lista li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--fs-mala); line-height: var(--lh-srednia);
  color: var(--km-tekst-cichy);
}
.km-zabieg__lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--km-akcent);
  opacity: .55;
}
.km-zabieg__wstep {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-mala);
  line-height: var(--lh-srednia);
  color: var(--km-tekst-cichy);
}
.km-zabieg__podetykieta {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-nad);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--km-akcent-ciemny);
}
.km-zabieg__uwaga {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  background: var(--km-tlo-cieple-2);
  border-radius: var(--r-md);
  font-size: var(--fs-mala);
  line-height: var(--lh-srednia);
  color: var(--km-tekst-cichy);
}

@media (min-width: 900px) {
  .km-zabiegi { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ------------------------------------------------- zastrzeżenie w ramce */
.km-zastrzezenie {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  align-items: start;
  padding: var(--space-6);
  background: var(--km-akcent-mgla);
  border-radius: var(--r-lg);
}
.km-zastrzezenie__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pelny);
  background: var(--km-tlo); color: var(--km-akcent);
}
.km-zastrzezenie__tytul {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3);
}
.km-zastrzezenie p { margin: 0; line-height: var(--lh-luzna); }

/* ----------------------------------- podsumowanie pod listą aparatów */
/* Zdanie zdejmujące z pacjenta wybór zabiegu (klient, 1.10.2026: sekcja
   „wydaje mi się odstraszająca”). Większy stopień, bo to konkluzja całej
   strony, a nie przypis. */
.km-tech-podsumowanie {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-srednia);
  color: var(--km-tekst);
}

.km-link-strzalka {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  font-weight: 600; font-size: var(--fs-mala);
  color: var(--km-akcent-ciemny);
}
.km-link-strzalka:hover { color: var(--km-granat); }

/* ------------------------------------------------- cennik */
.km-cennik { display: grid; gap: var(--space-5); }
.km-cennik__poz {
  background: var(--km-tlo);
  border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.km-cennik__glowa {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.km-cennik__glowa h3 { margin: 0; font-size: var(--fs-h3); }
.km-cennik__cena {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: 700;
  color: var(--km-akcent-ciemny);
  white-space: nowrap;
}
.km-cennik__opis { margin: 0; line-height: var(--lh-luzna); color: var(--km-tekst-cichy); }
.km-cennik__czas {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-mala); color: var(--km-tekst-cichy);
}

.km-cennik-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.km-cennik-lista__poz {
  /* Nazwa bierze tyle, ile potrzebuje; wypelniacz dostaje CALA reszte.
     Przy `1fr` na nazwie kropki schodzily do minimum i wygladaly jak
     przypadkowa kreska obok ceny, zamiast prowadzic wzrok do kwoty. */
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--km-linia);
}
.km-cennik-lista__poz:last-child { border-bottom: 0; }
.km-cennik-lista__nazwa { font-weight: 600; }
.km-cennik-lista__opis {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: var(--fs-mala); color: var(--km-tekst-cichy);
}
.km-cennik-lista__kropki {
  border-bottom: 1px dotted var(--km-linia-pole);
  transform: translateY(-.25em);
}
.km-cennik-lista__cena {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); color: var(--km-akcent-ciemny);
  white-space: nowrap;
}

@media (min-width: 860px) {
  .km-cennik { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------- organizacja wizyt */
.km-organizacja { display: grid; gap: var(--space-5); }
.km-organizacja__poz {
  background: var(--km-tlo);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.km-organizacja__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--km-akcent-mgla); color: var(--km-akcent);
  margin-bottom: var(--space-4);
}
.km-organizacja__poz h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.km-organizacja__poz p { margin: 0; line-height: var(--lh-luzna); color: var(--km-tekst-cichy); }
.km-organizacja__akcje { margin-top: var(--space-8); }

@media (min-width: 860px) {
  .km-organizacja { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------- dokumenty */
.km-dokumenty { display: grid; gap: var(--space-4); }
.km-dokument {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-5);
  background: var(--km-tlo);
  /* Karta jest odnosnikiem do pobrania, wiec prog 3:1 jak dla kontrolki.
     --km-linia-karta dawala 2,34:1 na cieplym tle sekcji. */
  border: 1px solid var(--km-linia-pole);
  border-radius: var(--r-lg);
  color: var(--km-tekst);
  /* Klikalna jest cala karta, wiec podkreslenie tekstu w srodku jest zbedne:
     robi z karty zwykly odnosnik. Ramka i strzalka niosa te informacje. */
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.km-dokument:hover { border-color: var(--km-akcent); box-shadow: var(--cien-md); color: var(--km-tekst); }
.km-dokument:hover .km-dokument__nazwa { color: var(--km-akcent-ciemny); }
.km-dokument:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: 2px; }
.km-dokument__ikona {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--km-akcent-mgla); color: var(--km-akcent);
}
.km-dokument__nazwa { display: block; font-weight: 600; line-height: var(--lh-srednia); }
.km-dokument__meta { display: block; margin-top: 2px; font-size: var(--fs-mala); color: var(--km-tekst-cichy); }
.km-dokument__strzalka { color: var(--km-akcent); display: grid; place-items: center; }

@media (min-width: 780px) {
  .km-dokumenty { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- pytania i odpowiedzi */
.km-faq { display: grid; gap: var(--space-3); }
.km-faq__poz {
  background: var(--km-tlo-cieple);
  /* Cala pozycja jest przyciskiem, wiec obowiazuje prog 3:1 dla kontrolek
     (WCAG 1.4.11), nie 2:1 dla lekkich kart. Zmierzone: --km-linia dawala
     1,30:1 i krawedzi nie bylo widac. */
  border: 1px solid var(--km-linia-pole);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.km-faq__poz.otwarte { border-color: var(--km-akcent); background: var(--km-tlo); }
.km-faq__tytul { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.km-faq__przycisk {
  width: 100%; min-height: 60px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--km-tekst);
  font-family: var(--font-display);
  font-size: inherit; font-weight: inherit;
  line-height: var(--lh-srednia);
}
.km-faq__przycisk:hover { color: var(--km-akcent-ciemny); }
.km-faq__przycisk:focus-visible { outline: 3px solid var(--km-akcent); outline-offset: -3px; }
.km-faq__znak {
  display: grid; place-items: center; width: 28px; height: 28px;
  color: var(--km-akcent);
  transition: transform var(--dur) var(--ease);
}
.km-faq__poz.otwarte .km-faq__znak { transform: rotate(45deg); }
.km-faq__odpowiedz { padding: 0 var(--space-5) var(--space-6); }
.km-faq__odpowiedz p {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-luzna);
  color: var(--km-tekst-cichy);
}
.km-faq__odpowiedz p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- przeciwwskazania, odsyłacz */
.km-pw-odsylacz {
  display: grid; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--km-tlo);
  border: 1px solid var(--km-linia-karta);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-6);
}
.km-pw-odsylacz p { margin: 0; line-height: var(--lh-luzna); }
.km-pw-odsylacz .km-btn { justify-self: start; }

/* ----------------------------------- „Co warto wiedzieć” (klient, 1.10.2026) */
.km-pw-tresc { margin-bottom: var(--space-6); }
.km-pw-tresc > :first-child { margin-top: 0; }
.km-pw-tresc > :last-child { margin-bottom: 0; }

.km-pw-wazne {
  padding: var(--space-6);
  background: var(--km-granat); color: #fff;
  border-radius: var(--r-lg);
}
.km-pw-wazne__tytul {
  display: flex; align-items: start; gap: var(--space-3);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3);
}
.km-pw-wazne__ikona {
  color: var(--km-akcent-jasny); display: grid; place-items: center;
  flex: none; margin-top: 2px;
}
.km-pw-wazne .km-proza p,
.km-pw-wazne .km-proza li { color: rgba(255,255,255,.88); line-height: var(--lh-luzna); }
.km-pw-wazne .km-proza strong { color: #fff; }
.km-pw-wazne .km-proza ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }

/* ------------------------------------------------- domknięcie listy */
.km-domknij h2 { margin: 0 0 var(--space-4); }
.km-domknij p { margin: 0 0 var(--space-4); line-height: var(--lh-luzna); color: var(--km-tekst-cichy); }
.km-domknij__zastrzezenie {
  padding: var(--space-5);
  background: var(--km-tlo-cieple-2);
  border-radius: var(--r-md);
  font-size: var(--fs-mala);
}
.km-domknij__akcje {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ------------------------------------------------- telefon: ciaśniej */
@media (max-width: 520px) {
  .km-baza__tytul { font-size: var(--fs-body); }
  .km-baza__przycisk { padding: var(--space-4); gap: var(--space-3); }
  .km-baza__ikona { width: 40px; height: 40px; }
  .km-baza__tresc { padding: 0 var(--space-4) var(--space-5); }
  .km-zabieg { padding: var(--space-5); }
  .km-zabieg__foto { margin-inline: calc(-1 * var(--space-5)); }
  /* Nazwa grupy klienta jest dluga ("zabiegi z wykorzystaniem pradu i pola
     elektromagnetycznego"). Przy pelnym rozstrzeleniu zajmowala trzy wiersze
     i przykrywala nazwe zabiegu. */
  .km-zabieg__grupa { letter-spacing: .04em; }
  .km-cennik__poz,
  .km-organizacja__poz,
  .km-pw-odsylacz,
  .km-pw-wazne,
  .km-zastrzezenie { padding: var(--space-5); }
  .km-zastrzezenie { grid-template-columns: 1fr; gap: var(--space-4); }
  .km-faq__tytul { font-size: var(--fs-body); }
  .km-faq__przycisk { padding: var(--space-4); }
  .km-faq__odpowiedz { padding: 0 var(--space-4) var(--space-5); }
  /* Kropki między nazwą a ceną nie mieszczą się obok siebie na wąskim
     ekranie: nazwa łamała się na cztery wiersze. Cena idzie pod spód. */
  .km-cennik-lista__poz { grid-template-columns: 1fr auto; }
  .km-cennik-lista__kropki { display: none; }
}


/* Atrybut `hidden` daje `display:none` dopiero z arkusza przegladarki,
   a ten przegrywa z KAZDA nasza regula na klasie. Lista kwalifikacji miala
   `display:grid` i pokazywala sie mimo `hidden`: zmierzone hidden=true,
   display=grid, 17 pozycji widocznych. Ta sama pulapka co przy kazdym
   naszym akordeonie (memory: lekcja-poprawka-css-ktora-nie-weszla). */
.km-kursy[hidden] { display: none; }

/* Przycisk pod skrocona lista kwalifikacji (uwaga klienta z 20.09.2026). */
.km-kursy__wiecej { margin-top: var(--space-6); }
.km-kursy__licznik { opacity: .7; font-weight: 400; }


/* Dojazd i dostepnosc pod mapa (uwaga klienta z 20.09.2026). Ten sam uklad
   co zastrzezenia: ikona z boku, tresc obok, cieple tlo. */
.km-dojazd {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--km-tlo-cieple-2);
  border-radius: var(--r-lg);
}
/* Ze zdjeciem: trzecia kolumna o proporcji 3:4, czyli tej samej co plik. */
.km-dojazd--ze-zdjeciem { align-items: start; }
.km-dojazd__zdjecie {
  margin: 0; grid-column: 2 / -1; max-width: 300px;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-md);
  background: var(--km-linia);
}
.km-dojazd__zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 860px) {
  .km-dojazd--ze-zdjeciem { grid-template-columns: auto 1fr 300px; }
  .km-dojazd__zdjecie { grid-column: 3; grid-row: 1; max-width: none; }
}
.km-dojazd__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pelny);
  background: var(--km-tlo); color: var(--km-akcent);
}
.km-dojazd__tytul {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
}
.km-dojazd .km-proza p { margin: 0 0 var(--space-4); line-height: var(--lh-luzna); }
.km-dojazd .km-proza p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .km-dojazd { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
}




/* ============================================================================
   JAK PRACUJEMY — trzy filary i pięć kroków (punkty 4 i 6, 20.09.2026)

   Klient: „Chciałbym uniknąć sytuacji, w której strona wygląda jak katalog
   urządzeń.” Filary są równorzędne i bez zdjęć, kroki to oś z numerami.
   ========================================================================= */

.km-filary { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
.km-filar {
  overflow: hidden;
  background: var(--km-tlo-cieple);
  border-radius: var(--r-lg);
}
/* Zdjecie gabinetu wchodzi na pelna szerokosc karty. Proporcja 4:3 jest ta
   sama co w docietych plikach, wiec `cover` nie ma czego uciac. */
.km-filar__zdjecie { aspect-ratio: 4 / 3; background: var(--km-linia); }
.km-filar__zdjecie img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.km-filar__tresc { padding: var(--space-6); }

/* Filary na granacie: karta ma WLASNE tlo, wiec ma tez wlasne kolory tekstu.
   Bez tego regula „w ciemnej sekcji naglowki sa jasne” wchodzi do wnetrza
   jasnej karty i tytul ginie na wlasnym tle. */
.km-sekcja--granat .km-filar { background: #fff; color: var(--km-tekst); }
.km-sekcja--granat .km-filar h3 { color: var(--km-granat); }
.km-sekcja--granat .km-filar p { color: var(--km-tekst-cichy); }
.km-sekcja--granat .km-filar__ikona { background: var(--km-tlo-cieple); color: var(--km-akcent-ciemny); }
.km-sekcja--granat .km-filar__zdjecie { background: rgba(255,255,255,.12); }
.km-sekcja--ciepla .km-filar { background: var(--km-tlo); }
/* Odstep ze skali: 20 px wypadalo poza rytm i zglaszal to `odstepy.py`. */
.km-filar__ikona {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-6);
  border-radius: var(--r-md);
  background: var(--km-granat); color: var(--km-akcent-jasny);
}
.km-filar h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.km-filar p { margin: 0; line-height: var(--lh-luzna); color: var(--km-tekst-cichy); }

@media (min-width: 860px) {
  .km-filary { grid-template-columns: repeat(3, 1fr); }
}

/* --- pięć kroków ------------------------------------------------------- */
/* Bez marginesu od gory: blok krokow jest OSOBNA sekcja i ma wlasny
   padding. Razem dawaly 176 px pustego pasa nad naglowkiem
   (zmierzone 21.09.2026 przy 1440 px). */
.km-kroki-blok { margin-top: 0; }
.km-kroki {
  list-style: none;
  counter-reset: krok;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}
.km-krok {
  counter-increment: krok;
  position: relative;
  padding-left: calc(var(--space-12) + var(--space-2));
}
/* Numer z licznika: dopisanie kroku w panelu nie wymaga poprawiania cyfr. */
.km-krok::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pelny);
  background: var(--km-akcent-mgla);
  color: var(--km-akcent-ciemny);
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 700;
}
/* Kreska łącząca kroki w oś. Ostatni jej nie ma, bo nie ma dokąd prowadzić. */
.km-krok::after {
  content: "";
  position: absolute; left: 21px; top: 52px; bottom: calc(-1 * var(--space-6));
  width: 2px;
  background: var(--km-linia);
}
.km-krok:last-child::after { display: none; }
.km-krok__nazwa {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--fs-h3);
}
.km-krok__opis { margin: 0; line-height: var(--lh-luzna); color: var(--km-tekst-cichy); }

.km-filary__akcje { margin-top: var(--section-sm); }

@media (min-width: 900px) {
  /* Kroki w dwóch kolumnach: pięć pozycji w jednej kolumnie robiło pas
     na półtora ekranu, a to jest lista pomocnicza, nie treść główna. */
  .km-kroki { grid-template-columns: 1fr 1fr; column-gap: var(--space-10); }
  .km-krok::after { display: none; }
}

@media (max-width: 520px) {
  .km-filar__tresc { padding: var(--space-5); }
  .km-krok { padding-left: calc(var(--space-10) + var(--space-2)); }
  .km-krok::before { width: 38px; height: 38px; font-size: var(--fs-body); }
  .km-krok::after { left: 18px; top: 46px; }
}