@charset "UTF-8";
/* =========================================================================
   Libere, Centrum Terapii i Seksuologii
   Arkusz stylów. Jeden plik dla całej witryny.
   Sekcje: 1. Zmienne  2. Reset  3. Typografia  4. Układ  5. Komponenty
           6. Sekcje strony  7. Blog  8. Stopka  9. Responsywność  10. Druk
   ========================================================================= */

/* ---------- 1. ZMIENNE ---------------------------------------------------
   Zmieniasz kolor marki? Zmieniasz TYLKO --accent poniżej. Reszta się dostroi.
   ------------------------------------------------------------------------ */
:root {
  /* Kolory z księgi znaku Libere (rarytas.studio), nie z obecnej strony.
     Wszystkie pary sprawdzone pod kątem kontrastu WCAG AA.

     Uwaga na dwa kolory: terakota (#be998a) daje na bieli 2.59:1, a szałwia
     jasna (#969785) 2.97:1. Żaden nie nadaje się pod tekst ani jako tło pod
     biel. Służą wyłącznie jako plamy i tła pod ciemny tekst.
     Kolorem roboczym na linki i przyciski jest szałwia ciemna (#646c5f),
     która daje 5.45:1 w obie strony. Obecna strona w ogóle jej nie używa. */
  /* Powierzchnie. Księga znaku nie zna czystej bieli, więc jej tu nie ma.
     Cała skala to jeden kolor, krem #ece4db z księgi, rozbielany i przygaszany.
     Dzięki temu każde tło na stronie jest ciepłe i należy do marki, a nie
     jest domyślną bielą przeglądarki. */
  --paper:        #f6f1ea;   /* tło główne, krem rozbielony */
  --paper-2:      #efe9e0;   /* krem pośredni, sekcje naprzemienne */
  --paper-3:      #ece4db;   /* KREM Z KSIĘGI, sekcje kremowe i nagłówek */
  --line:         #d9cec0;   /* krem przygaszony, wyłącznie kreski i ramki */
  --ink:          #322d37;   /* śliwka z księgi, tekst główny, 13.41:1 */
  --ink-2:        #4f4954;   /* tekst pomocniczy */
  --ink-3:        #635c68;   /* podpisy i meta */
  --accent:       #5d6458;   /* szałwia ciemna, 4.87:1 na kremie, linki i przyciski */
  --accent-dark:  #474d43;   /* stan hover */
  --accent-soft:  #e7e9e3;   /* jasne tło ikonek i plamek */
  --sand:         #be998a;   /* terakota z księgi, tylko dekoracyjnie */
  --sand-light:   #969785;   /* szałwia jasna, tylko dekoracyjnie */
  /* Najjaśniejsza warstwa: karty i tekst na ciemnych tłach. Nazwa została
     historyczna, ale to nie jest biel, tylko ciepła kość słoniowa z tej samej
     rodziny co krem. Na śliwce czyta się spokojniej niż czysta biel, która
     na ciemnym tle drga. */
  --white:        #fbf7f2;

  /* Typografia. Księga znaku przewiduje jeden krój: Poppins, odmiany
     od Light do Bold, z bezpłatnej licencji Google Fonts. */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.53rem, 1.38rem + 0.72vw, 1.98rem);
  --step-3:  clamp(1.86rem, 1.61rem + 1.22vw, 2.55rem);
  --step-4:  clamp(2.24rem, 1.84rem + 2.00vw, 3.30rem);
  --step-5:  clamp(2.70rem, 2.06rem + 3.20vw, 4.25rem);

  /* Przestrzeń */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  1.75rem;
  --space-l:  3rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 7rem);

  /* Kształt */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --container: 1140px;
  --measure:   68ch;

  /* Cienie — subtelne, ciepłe, nigdy czarne */
  --shadow-sm: 0 1px 2px rgba(50, 45, 55, 0.05);
  --shadow-m:  0 4px 18px -6px rgba(50, 45, 55, 0.12);
  --shadow-l:  0 18px 48px -18px rgba(50, 45, 55, 0.20);

  --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* żeby kotwice nie chowały się pod nagłówkiem */
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, nie hidden. Obie wartości ucinają to, co wystaje w bok, ale
     hidden robi z body pojemnik przewijany, przez co przestaje działać
     position: sticky w środku i rozjeżdża się programowe przewijanie do
     zakotwiczeń. clip tylko przycina. Zmierzone: przy 390 px żaden element
     nie wystaje poza ekran, więc to zabezpieczenie, a nie łata. */
  overflow-x: clip;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

/* Szanujemy ustawienie „ogranicz animacje" w systemie użytkownika */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Widoczny focus — wymóg dostępności, nie usuwać */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--accent-dark); }

/* ---------- 3. TYPOGRAFIA ----------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Poppins jest geometryczna i szeroka, więc lekki ujemny tracking
     porządkuje duże nagłówki. Przy małych stopniach nie ma znaczenia. */
  letter-spacing: -0.004em;
  text-wrap: balance;
  color: var(--ink);
}

/* Im mniejszy nagłówek, tym luźniejsza interlinia. Duże stopnie pisma
   wyglądają dobrze ciasno, małe potrzebują powietrza między wierszami. */
h1 { font-size: var(--step-5); line-height: 1.1;  margin-bottom: 0.35em; }
h2 { font-size: var(--step-4); line-height: 1.2;  margin-bottom: 0.5em;  }
h3 { font-size: var(--step-2); line-height: 1.3;  margin-bottom: 0.45em; }
h4 { font-size: var(--step-1); line-height: 1.35; margin-bottom: 0.45em; }

p, li { text-wrap: pretty; }

p { max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-dark); }

strong { font-weight: 600; }

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--sand);
  vertical-align: middle;
  margin-right: 0.7rem;
}

/* Tylko dla czytników ekranu */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. UKŁAD ---------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-xl); }
/* Dwie sąsiadujące sekcje o TYM SAMYM tle dawały 7 rem na dole pierwszej
   plus 7 rem na górze drugiej, czyli do 14 rem jednolitego koloru bez
   niczego w środku. Przy różnych tłach taki oddech wygląda na zamierzony,
   przy jednakowych na dziurę w stronie.

   Dlatego rozdzielamy sekcje kolorem, a nie pustką: gdy tło się zmienia,
   pełny odstęp zostaje, a gdy się nie zmienia, sąsiad dostaje mniej.
   Reguła jest napisana przez :not(), żeby dotyczyła wyłącznie par o tym
   samym tle i żeby dołożenie nowego wariantu tła niczego nie zepsuło.

   `section--ink` dopisany później i to jest dokładnie ten przypadek,
   przed którym miało chronić :not(): wariant tła doszedł, nikt go tu nie
   dopisał, więc ciemna sekcja „Co zyskasz” na stronie pomocy
   seksuologicznej była traktowana jak sekcja o tym samym tle co cennik
   pod nią i dostawała ścięty odstęp. Przy zmianie koloru ze śliwki na
   biel oddech ma zostać pełny. */
.section:not(.section--cream):not(.section--tinted):not(.section--accent):not(.section--ink):not(.karta-sekcja--sliwka)
  + .section:not(.section--cream):not(.section--tinted):not(.section--accent):not(.section--ink):not(.karta-sekcja--sliwka),
.section--cream + .section--cream,
.section--tinted + .section--tinted,
/* Hero jest kremowy, więc kremowa sekcja tuż pod nim daje ten sam efekt
   co dwie kremowe sekcje obok siebie. */
.hero + .section--cream {
  padding-top: var(--space-l);
  margin-top: calc(-1 * var(--space-l));
}
.section--tinted { background: var(--paper-2); }
.section--accent { background: var(--accent); color: var(--accent-soft); }
.section--accent h2, .section--accent h3 { color: var(--white); }
.section--accent .eyebrow { color: var(--sand-light); }

.section__head { max-width: 46rem; margin-bottom: var(--space-l); }
.section__head h2 { margin-bottom: 0.6em; }
.section__head p { color: var(--ink-2); line-height: 1.7; }

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* Siatka trzykolumnowa na elastycznych blokach, a nie na gridzie, żeby
   niepełny ostatni rząd był wyśrodkowany zamiast przyklejony do lewej. */
.grid--3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Odstęp MUSI być zadeklarowany tutaj. Klasa `.grid` ma swój `gap`, ale
     część sekcji używa samego `.grid--3`, bez `.grid`, i tam odstęp wynosił
     zero, przez co kafle stykały się bokami. Wzór na `max-width` niżej i tak
     zakładał, że ten odstęp istnieje. */
  gap: var(--space-m);
}
.grid--3 > * {
  flex: 1 1 17rem;
  max-width: calc((100% - 2 * var(--space-m)) / 3);
}
@media (max-width: 62rem) {
  .grid--3 > * { max-width: calc((100% - var(--space-m)) / 2); }
}
@media (max-width: 40rem) {
  .grid--3 > * { max-width: 100%; }
}

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-m); }

.divider {
  border: 0;
  height: 1px;
  background: var(--paper-3);
  margin-block: var(--space-l);
}

/* ---------- 5. KOMPONENTY ----------------------------------------------- */

/* --- Przycisk --- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--white);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--accent-dark);
}
.btn--light:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* --- Karta --- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--accent-soft);
}

.card h3 { font-size: var(--step-1); margin-bottom: 0.7rem; line-height: 1.3; }
.card p { color: var(--ink-2); font-size: var(--step--1); max-width: none; line-height: 1.65; }

.card__icon {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  margin-bottom: var(--space-s);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }

/* --- Odznaka / chip --- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; list-style: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.chip svg { width: 0.95rem; height: 0.95rem; color: var(--accent); flex: none; }

/* --- Lista faktów (dane w kolumnach) --- */
.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--space-s);
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.facts dt { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.facts dd { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* --- Kroki (przebieg współpracy) --- */
.steps { counter-reset: krok; display: grid; gap: var(--space-m); }

.step {
  position: relative;
  padding-left: 4.2rem;
}
.step::before {
  counter-increment: krok;
  content: counter(krok);
  position: absolute;
  left: 0; top: 0;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.7; }

/* --- FAQ (natywne <details>, zero JS) --- */
.faq { max-width: 52rem; border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  transition: color var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: "";
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.25rem;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');
}
.faq details[open] summary::after { transform: rotate(135deg); }

.faq details > div {
  padding-top: 0.2rem;
  padding-bottom: 1.5rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-size: var(--step--1);
}
.faq details > div > * + * { margin-top: 0.8rem; }

/* --- Cennik --- */
.pricing { display: grid; gap: 0; }

/* Podtytuł grupy usług. Pierwszy nie ma odstępu u góry, kolejne mają. */
.pricing__group {
  font-size: var(--step-1);
  margin-top: var(--space-l);
  margin-bottom: 0.4rem;
}
.pricing__group:first-child { margin-top: 0; }

.pricing__note {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.7;
  margin-bottom: var(--space-s);
  max-width: 46rem;
}

/* Podsumowanie kosztu całej ścieżki diagnostycznej. Wyróżnione, bo to
   najważniejsza liczba w całym cenniku dla osoby rozważającej diagnozę. */
.pricing__summary {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-dark);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 46rem;
}
.pricing__summary strong { color: var(--accent-dark); }

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem var(--space-s);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.price-row:first-child { border-top: 1px solid var(--line); }
.price-row__name { font-weight: 600; font-size: var(--step-0); }
.price-row__meta { color: var(--ink-3); font-size: var(--step--1); }
.price-row__dots { flex: 1 1 2rem; border-bottom: 1px dotted var(--line); transform: translateY(-0.25em); min-width: 1rem; }
.price-row__value {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* --- Cytat --- */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--sand);
  padding-left: var(--space-m);
  max-width: 40rem;
}

/* Style formularza usunięte razem z formularzem. Gdybyś kiedyś chciał
   go przywrócić, wróć do wcześniejszej wersji tego pliku. */

/* ---------- 6. SEKCJE STRONY -------------------------------------------- */

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--accent);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; color: var(--white); }

/* --- Nagłówek --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 251, 252, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.75rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}
.brand__name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; line-height: 1.2; display: block; }
.brand__role { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); display: block; }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a {
  padding: 0.5rem 0.62rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.nav a:hover { color: var(--accent-dark); background: var(--paper-2); }
.nav a[aria-current="true"] { color: var(--accent-dark); font-weight: 600; }

/* Przycisk w nawigacji: reguła .nav a ma wyższą specyficzność niż .btn
   i nadpisywała kolor tekstu na szary. Ta reguła przywraca biel. */
.nav a.btn { color: var(--btn-fg); }
.nav a.btn:hover { color: var(--btn-fg); background: var(--accent-dark); }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle svg { width: 1.35rem; height: 1.35rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* --- Hero --- */
.hero {
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Delikatna poświata w tle — czysto dekoracyjna */
.hero::before {
  content: "";
  position: absolute;
  top: -18rem; right: -14rem;
  width: 42rem; height: 42rem;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 66%);
  opacity: 0.65;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: var(--space-m); }

/* Podtytuł żyje wewnątrz H1, żeby nagłówek zawierał frazę kluczową,
   ale wygląda jak osobny, lżejszy wiersz. */
/* Podtytuł nagłówka. Kiedyś siedział wewnątrz h1 jako span i wyszukiwarka
   czytała jeden zlepiony ciąg zamiast czystej frazy, więc wyszedł na zewnątrz
   jako osobny akapit. Wygląd bez zmian. */
.hero__role {
  display: block;
  max-width: 46rem;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.hero__lead { max-width: 34rem; margin-bottom: var(--space-m); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: var(--space-m); }

.hero__figure { position: relative; }

.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
}

/* Przesunięta ramka za zdjęciem została usunięta na życzenie.
   Gdybyś chciał ją przywrócić, odkomentuj poniższy blok.
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  z-index: -1;
}
*/

/* --- Pasek zaufania --- */
.trustbar {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  padding-block: var(--space-m);
}

.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-m);
  text-align: center;
}
.trustbar__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  line-height: 1.1;
}
.trustbar__label { font-size: var(--step--1); color: var(--ink-2); }

/* --- O mnie --- */
.about__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.about__text > * + * { margin-top: var(--space-s); }
.about__text p { line-height: 1.75; }
.about__text h3 { margin-top: var(--space-m); }
.about__text p { color: var(--ink-2); }

.about__aside {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  position: sticky;
  top: 7rem;
}
.about__aside h3 { font-size: var(--step-1); margin-bottom: var(--space-s); }
.about__aside .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }

/* --- Kontakt -------------------------------------------------------------
   Sekcja bez formularza: wyśrodkowany nagłówek, trzy klikalne karty
   z danymi i przycisk prowadzący do kalendarza rezerwacji.
   ------------------------------------------------------------------------ */
.contact { text-align: center; }

.contact__head { max-width: 42rem; margin: 0 auto var(--space-l); }
.contact__head p { color: var(--accent-soft); margin-inline: auto; }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-m);
  max-width: 58rem;
  margin: 0 auto;
  text-align: left;
}

.contact-card-item {
  display: block;
  padding: var(--space-m);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent-soft);
  text-decoration: none;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition);
}
.contact-card-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.contact-card-item__icon {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: var(--space-s);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.contact-card-item__icon svg { width: 1.2rem; height: 1.2rem; }

/* Etykieta i wartość w karcie kontaktu. Były to <dt> i <dd> wewnątrz <dl>,
   co axe słusznie zgłaszał: lista definicji może zawierać wyłącznie dt, dd
   i div, a u nas między nią a nimi stał <a>, żeby klikalna była cała karta.
   Czytnik ekranu dostawał listę definicji bez ani jednej poprawnej pozycji.
   Teraz to zwykła lista z dwoma wierszami tekstu w środku odnośnika.
   Wygląd bez zmian, semantyka poprawna. */
.contact-card-item__etykieta {
  /* Było 0,74 rem, czyli 11,8 px. Wersaliki z rozstrzeleniem w tym rozmiarze
     są na telefonie na granicy czytelności. */
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.3rem;
}
.contact-card-item__wartosc {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.5;
  overflow-wrap: anywhere;   /* długi adres e-mail nie rozepchnie karty */
}

.contact__cta { margin-top: var(--space-l); }

.contact__kryzys {
  max-width: 46rem;
  margin: var(--space-l) auto 0;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--sand-light);
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-soft);
  font-size: var(--step--1);
  line-height: 1.7;
  text-align: left;
}
.contact__kryzys strong { color: var(--white); }
/* Numery kryzysowe na ciemnym tle. Bez tej reguły łapią domyślny kolor
   linku, czyli szałwię, która na kremie daje 4,9:1, a na śliwce 1,7:1.
   To są najważniejsze odnośniki na całej stronie i nie mogą zniknąć
   z tła akurat dla kogoś, kto ich szuka w gorszym momencie. */
.contact:not(.contact--light) .contact__kryzys a { color: var(--white); }
.contact:not(.contact--light) .contact__kryzys a:hover { color: var(--paper-3); }

/* --- Wyróżniony blok ostrzegawczy (pomoc w kryzysie) --- */
.notice {
  /* Zastrzeżenie stoi zawsze nad treścią, której dotyczy, i ma być od niej
     odsunięte. Bez tego na /testy/ dotykało pierwszego rzędu kart. */
  margin: 0 0 var(--space-m);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sand);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: var(--space-s) var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }

/* ---------- 7. BLOG ----------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-l);
  border-bottom: 1px solid var(--line);
}
.page-head p { color: var(--ink-2); }

.breadcrumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--space-s); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--accent); }

.post-list { display: grid; gap: var(--space-m); }

.post-card {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--space-m);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--accent-soft); }
.post-card__thumb { width: 100%; height: 100%; min-height: 11rem; object-fit: cover; background: var(--paper-2); }
.post-card__body { padding: var(--space-m) var(--space-m) var(--space-m) 0; }
.post-card h2, .post-card h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.post-card h2 a, .post-card h3 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); }
.post-card p { color: var(--ink-2); font-size: var(--step--1); }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  font-size: 0.8rem; color: var(--ink-3);
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}
.post-meta .tag {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Treść wpisu --- */
.article {
  --measure: 66ch;
  width: min(100% - 2.5rem, 44rem);
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-xl);
}
.article > * + * { margin-top: var(--space-s); }
.article h2 { font-size: var(--step-3); margin-top: var(--space-l); margin-bottom: 0.5em; }
.article h3 { font-size: var(--step-1); margin-top: var(--space-m); margin-bottom: 0.45em; }
.article p { color: var(--ink-2); max-width: none; line-height: 1.75; }
.article ul, .article ol { color: var(--ink-2); padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.article figure { margin-block: var(--space-m); }
.article figure img { border-radius: var(--radius); }
.article figcaption { font-size: 0.83rem; color: var(--ink-3); margin-top: 0.6rem; }
.article blockquote {
  border-left: 3px solid var(--sand);
  padding-left: var(--space-m);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink);
  margin-block: var(--space-m);
}

.author-box {
  display: flex; gap: var(--space-s); align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-top: var(--space-l);
}
.author-box img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.author-box p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.author-box strong { display: block; font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 0.15rem; }

/* ---------- 8. STOPKA --------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(250, 251, 252, 0.72);
  padding-block: var(--space-l) var(--space-m);
  font-size: var(--step--1);
}
.site-footer a { color: rgba(250, 251, 252, 0.84); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid rgba(250, 251, 252, 0.14);
}
.site-footer h2, .site-footer h4 {
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-family: var(--font-body);
  margin-bottom: 0.9rem;
}
.site-footer ul { display: grid; gap: 0.5rem; list-style: none; padding: 0; }
.site-footer .brand__name { color: var(--white); }
.site-footer .brand__role { color: rgba(250, 251, 252, 0.6); }
.site-footer p { max-width: 26rem; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  font-size: 0.82rem;
  color: rgba(250, 251, 252, 0.55);
}

/* ---------- 9. RESPONSYWNOŚĆ -------------------------------------------- */
@media (max-width: 62rem) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { max-width: 26rem; margin-inline: auto; order: -1; }
  /* .hero__figure::after wyłączona globalnie, patrz sekcja Hero */
  .about__inner,
    .about__aside { position: static; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-s) 1.25rem var(--space-m);
    box-shadow: var(--shadow-l);
    /* domyślnie schowane */
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.85rem 0.6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { margin-top: var(--space-s); justify-content: center; border-bottom: 0; }

  /* --- Przewijanie otwartego menu ------------------------------------
     Menu jest przyklejone do okna (`position: fixed`), więc jego wysokość
     nie ma nic wspólnego z przewijaniem strony pod spodem. Po rozwinięciu
     „Oferty" treść ma około 1390 px przy oknie 844 px, a nadmiar był
     ustawiony na `visible`, czyli wystawał poza ekran i NIE DAŁO SIĘ do
     niego dojechać. Dolne pozycje, łącznie z „Kontaktem" i przyciskiem
     umawiania, były po prostu nieosiągalne na telefonie.

     `dvh` zamiast `vh`, bo na telefonie pasek adresu chowa się i wysuwa,
     a `vh` liczy się do wersji z ukrytym paskiem, przez co ostatnia
     pozycja i tak chowałaby się pod krawędzią. Zapis podwójny: starsze
     przeglądarki wezmą `vh`, nowsze nadpiszą go `dvh`.

     `overscroll-behavior: contain` zatrzymuje przewijanie na końcu listy,
     zamiast przenosić je na stronę pod spodem. */
  .nav {
    max-height: calc(100vh - 4.75rem);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }


  .post-card { grid-template-columns: 1fr; }
  .post-card__thumb { min-height: 12rem; aspect-ratio: 16 / 9; }
  .post-card__body { padding: 0 var(--space-m) var(--space-m); }

  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .price-row__dots { display: none; }
  .price-row { justify-content: space-between; }
}

/* ---------- 10. DRUK ---------------------------------------------------- */
@media print {
  .site-header, .nav, .hero__figure, .site-footer, .btn, .form { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --- Szkolenia: rok w lewej kolumnie, opis w prawej --- */
.training > div { grid-template-columns: minmax(6rem, 8rem) 1fr; align-items: start; }
.training dt { color: var(--accent); font-family: var(--font-display); font-size: var(--step-0); }
.training dd { font-size: var(--step-0); }
.training dd strong { color: var(--ink); font-weight: 600; }

/* --- Galeria certyfikatów --- */
.certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-m);
}

.cert {
  display: block;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cert:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--accent-soft);
  color: var(--accent-dark);
}
.cert img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain, a nie cover: certyfikaty są raz w pionie, raz w poziomie,
     a ucięty dokument wygląda gorzej niż mniejszy, ale cały. */
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 0.7rem;
}
.cert span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
}
.cert strong { color: var(--ink); font-weight: 600; }
.cert:hover strong { color: var(--accent-dark); }

@media (max-width: 48rem) {
  .training > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Widżet ZnanyLekarz --------------------------------------------------
   Widżet renderuje się w ramce o stałej szerokości. Bez tych reguł potrafi
   wystawać poza ekran na telefonie i powodować poziome przewijanie.
   ------------------------------------------------------------------------ */
.zl-embed {
  max-width: 46rem;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  background: var(--white);
}
.zl-embed iframe,
.zl-embed > div {
  max-width: 100% !important;
  width: 100% !important;
  border: 0;
  display: block;
}
/* Zanim skrypt się załaduje, widoczny jest zwykły odsyłacz. Nadajemy mu
   wygląd przycisku, żeby przez tę chwilę nie wyglądał jak goły link. */
.zl-embed > a.zl-url {
  display: block;
  padding: 1.1rem;
  text-align: center;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

/* =========================================================================
   11. KOLOR MARKI NA DUŻYCH PŁASZCZYZNACH
   -------------------------------------------------------------------------
   Księga znaku operuje pełnymi płaszczyznami koloru, a nie białą kartką
   z drobnymi akcentami. Ta sekcja daje sekcjom strony trzy tła: krem,
   śliwkę i szałwię. Rytm na stronie głównej wygląda tak:

     hero krem, pasek biały, oferta krem, misja śliwka,
     lokalizacje biały, kontakt szałwia, stopka śliwka

   Kolejne dwie sekcje w tym samym kolorze się zlewają, więc przy zmianach
   pilnuj, żeby sąsiadujące bloki różniły się tłem.
   ========================================================================= */

/* --- Sekcja na kremie --- */
.section--cream { background: var(--paper-3); }

/* --- Sekcja na śliwce --- */
.section--ink {
  background: var(--ink);
  color: rgba(236, 228, 219, 0.82);
}
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--paper-3); }
.section--ink .eyebrow { color: var(--sand); }
.section--ink .eyebrow::before { background: var(--sand-light); }
.section--ink .section__head p,
.section--ink p { color: rgba(236, 228, 219, 0.82); }
.section--ink a:not(.btn) { color: var(--paper-3); }
.section--ink .pullquote {
  color: var(--paper-3);
  border-left-color: var(--sand);
}

/* Sekcja na szałwii: reguły .section--accent istnieją wyżej, tu tylko
   uzupełnienia dla akapitów i odnośników. */
.section--accent p { color: rgba(255, 255, 255, 0.86); }
.section--accent .eyebrow::before { background: rgba(255, 255, 255, 0.5); }
.section--accent a:not(.btn) { color: var(--white); }

/* --- Hero na kremie --------------------------------------------------------
   Poświata w tle jest teraz terakotowa, bo na kremie szałwia znikała.
   -------------------------------------------------------------------------- */
.hero { background: var(--paper-3); }
.hero::before {
  background: radial-gradient(circle, var(--sand) 0%, transparent 62%);
  opacity: 0.34;
}
.hero .btn--ghost {
  --btn-fg: var(--ink);
  border-color: rgba(50, 45, 55, 0.22);
}
.hero .btn--ghost:hover { background: var(--paper-2); border-color: var(--accent); }
.hero__note {
  /* Notka stała tuż pod przyciskami, bez własnego marginesu, przez co na
     telefonie skleja się z „Zobacz cennik" w jeden blok. Odstęp jest
     mniejszy niż nad przyciskami, bo to dopisek do nich, a nie osobna
     sekcja. Na dużym ekranie zmiana jest ledwo widoczna i o to chodzi. */
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.hero__note strong { color: var(--accent-dark); }

/* Nagłówek strony dostaje kremowe tło, żeby nie odcinał się białym paskiem
   od hero. Po przewinięciu leży na białych sekcjach i to też wygląda dobrze. */
.site-header { background: rgba(236, 228, 219, 0.88); }
@media (max-width: 48rem) {
  .nav { background: var(--paper-3); }
}

/* --- Pasek zaufania na bieli, z włosowymi liniami --- */
.trustbar { background: var(--paper); border-block-color: var(--line); }
/* Wariant kremowy, gdy pasek stoi pod sekcją o tle papierowym.
   Musi stać ZA regułą wyżej, bo obie mają tę samą specyficzność. */
.trustbar--cream { background: var(--paper-3); }

/* --- Odnośnik ze strzałką, zamyka kartę --------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 1.05em; height: 1.05em;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');
}
.link-arrow:hover { color: var(--accent-dark); text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }
.card:hover .link-arrow::after { transform: translateX(3px); }

/* --- Karta wyższa, dwie w rzędzie --------------------------------------- */
.card--wide { padding: var(--space-l) var(--space-m); }
.card--wide h3 { font-size: var(--step-2); }

/* Karta na kremowym tle nie może być kremowa, więc zostaje biała.
   Na śliwce i szałwii karta robi się przezroczysta. */
.section--ink .card,
.section--accent .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: inherit;
}
.section--ink .card h3,
.section--accent .card h3 { color: var(--paper-3); }
.section--ink .card p,
.section--accent .card p { color: rgba(236, 228, 219, 0.8); }
.section--ink .card:hover,
.section--accent .card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Ikonka w karcie dostaje kolor zależny od pozycji, żeby siatka sześciu
   kart nie była sześć razy tym samym zielonym kółkiem. Kolejność:
   szałwia, terakota, śliwka, i od nowa. */
.grid--3 > .card:nth-child(3n+2) .card__icon { background: #f0e2dc; color: #8d6455; }
.grid--3 > .card:nth-child(3n+3) .card__icon { background: #e4e0e6; color: var(--ink); }

/* --- Adres w karcie lokalizacji --- */
.card__address {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: var(--space-s);
  max-width: none;
}
.section--ink .card__address,
.section--accent .card__address { color: var(--paper-3); }

/* --- Wąska kolumna do czytania --- */
.container.narrow { width: min(100% - 2.5rem, 54rem); }

/* --- Pas z wezwaniem do działania --------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 0.4em; }
.cta-band p { margin-inline: auto; margin-bottom: var(--space-m); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
/* Przyciski w pasie zachęty na środek. Stoją w akapicie z klasą
   `hero__actions`, czyli tą z nagłówka strony, gdzie treść jest do lewej
   i tak ma zostać. Tutaj cały pas jest wyśrodkowany, więc przyciski
   przyklejone do lewej wyglądały jak niedokończona poprawka. `max-width`
   trzeba zdjąć, bo akapit dziedziczy 68ch i środkowanie działałoby
   wewnątrz wąskiego bloku, a nie na szerokości sekcji. */
.cta-band .hero__actions {
  justify-content: center;
  max-width: none;
  margin-inline: auto;
}

/* --- Stopka: logo dostaje oddech --- */
.site-footer .brand { margin-bottom: var(--space-s); }

/* =========================================================================
   12. KOREKTA: BLIŻEJ OBECNEJ STRONY
   -------------------------------------------------------------------------
   Sekcja 11 dawała stronie dwa pełne bloki koloru, śliwkę i szałwię.
   Obecna libere.pl jest jasna na całej długości: biel i krem na zmianę,
   kolor wchodzi przez zdjęcia i drobne akcenty, a ciemna jest tylko stopka.
   Wracamy do tego. Reguły niżej wyłączają ciemne sekcje na stronie głównej,
   ale klasy .section--ink i .section--accent zostają w arkuszu, bo przydadzą
   się na podstronach.
   ========================================================================= */

/* --- Sekcja dwudzielna: tekst i zdjęcie obok siebie --------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split__text > * + * { margin-top: var(--space-s); }
.split__text h2 { margin-bottom: 0.4em; }
.split__text p { color: var(--ink-2); line-height: 1.75; }
.split__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-m);
}
/* Odwrócenie kolejności, żeby zdjęcia szły raz z lewej, raz z prawej */
.split--flip .split__media { order: -1; }

@media (max-width: 62rem) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media { max-width: 26rem; margin-inline: auto; }
}

/* --- Kontakt na jasnym tle ---------------------------------------------
   Kafelki kontaktowe były pisane pod ciemne tło i miały białe przezrocza.
   Na kremie robiły się niewidoczne, więc dostają normalne obramowanie.
   ------------------------------------------------------------------------ */
.contact--light { text-align: center; }
.contact--light .contact__head p { color: var(--ink-2); }
.contact--light .contact-card-item {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.contact--light .contact-card-item:hover {
  background: var(--white);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: var(--shadow-m);
}
.contact--light .contact-card-item__icon {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.contact--light .contact-card-item__etykieta { color: var(--ink-3); opacity: 1; }
.contact--light .contact-card-item__wartosc { color: var(--ink); }
.contact--light .contact__kryzys {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sand);
  color: var(--ink-2);
}
.contact--light .contact__kryzys strong { color: var(--ink); }

/* --- Kontakt na śliwce, strona główna ------------------------------------
   Strona główna to długi ciąg sekcji na kremie i na papierze. Kontakt na
   śliwce z księgi znaku przerywa ten ciąg i zamyka stronę mocnym pasem
   zamiast kolejnej jasnej ściany.

   Ciemny wariant kart kontaktowych już istniał w tym arkuszu i nie był
   nigdzie użyty, więc modyfikator tylko dokłada tło i formularz. Wszystkie
   pary kolorów sprawdzone pod kątem kontrastu WCAG AA, łącznie z polami
   formularza i podpowiedziami pod nimi.
   ------------------------------------------------------------------------ */
.contact--sliwka { background: var(--ink); color: var(--white); }
.contact--sliwka h2 { color: var(--white); }
.contact--sliwka .contact__head p { color: rgba(250, 251, 252, 0.82); }

/* Formularz na ciemnym tle. Pola zostają jasne, bo białe pole na śliwce
   samo mówi „tu się pisze”, a przy odwrotnym układzie trzeba by osobno
   walczyć o kontrast tekstu wpisywanego przez człowieka. */
.contact--sliwka .form-kolumna {
  max-width: 34rem;
  margin: var(--space-l) auto 0;
  text-align: left;
}
.contact--sliwka .form { max-width: none; }
.contact--sliwka .form-pole label { color: var(--white); }
.contact--sliwka .form-podpowiedz { color: rgba(250, 251, 252, 0.78); }
.contact--sliwka .form-podpowiedz strong { color: var(--white); }
.contact--sliwka .form-pole input,
.contact--sliwka .form-pole textarea {
  border-color: rgba(250, 251, 252, 0.28);
}
.contact--sliwka .form-pole input:focus-visible,
.contact--sliwka .form-pole textarea:focus-visible {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(250, 251, 252, 0.35);
}
/* Przycisk odwrócony: jasny na ciemnym. Szałwia na śliwce dawałaby
   3,0:1 i przycisk zlewałby się z tłem. */
.contact--sliwka .form-akcje .btn {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.contact--sliwka .form-akcje .btn:hover {
  background: var(--paper-3);
  border-color: var(--paper-3);
  color: var(--ink);
}
.contact--sliwka .form-nota {
  color: rgba(250, 251, 252, 0.78);
  border-left-color: rgba(250, 251, 252, 0.32);
}
.contact--sliwka .form-nota a { color: var(--white); text-decoration: underline; }

/* Przycisk obrysowany na śliwkowym tle. `.btn--ghost` ma tekst w kolorze
   śliwki, więc na śliwce znikał zupełnie: zostawał sam obrys i pusty środek.
   To ta sama klasa błędu co numery kryzysowe w tej samej sekcji. */
.contact--sliwka .btn--ghost {
  --btn-fg: var(--white);
  border-color: rgba(251, 247, 242, 0.55);
}
.contact--sliwka .btn--ghost:hover {
  background: var(--white);
  --btn-fg: var(--ink);
  border-color: var(--white);
}
.contact--sliwka .form-blad {
  background: rgba(250, 251, 252, 0.1);
  border: 1px solid var(--sand);
  color: var(--white);
}

/* --- Mapa przy lokalizacji --- */
.map-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  display: block;
  background: var(--paper-2);
}
.card--map { padding: 0; overflow: hidden; }
.card--map .card__body { padding: var(--space-m); }
.card--map .card__body h3 { margin-bottom: 0.5rem; }

/* =========================================================================
   13. SEKCJE Z DOŁU STRONY GŁÓWNEJ
   Opinie, zespół, „Dlaczego my", dane do przelewu, tekst rozwijany.
   ========================================================================= */

/* --- Opinie --------------------------------------------------------------
   Bez gwiazdek jako grafiki, ocena jest tekstem, żeby czytnik ekranu
   przeczytał ją sensownie.
   ------------------------------------------------------------------------ */
/* --- Opinie -------------------------------------------------------------
   Przebudowane 10 sierpnia. Co było nie tak w pierwszej wersji:

   1. Cudzysłów siedział w tekście jako ::before z ujemnym line-height,
      więc wchodził na pierwszy wiersz i wyglądał jak usterka składu.
      Teraz jest znakiem ozdobnym w rogu karty, pod tekstem, i nie bierze
      udziału w łamaniu wierszy.
   2. Przy każdej karcie stało „5,0". Sześć razy ta sama liczba to nie
      dowód, tylko szum. Ocena przeniesiona pod sekcję, raz, razem z liczbą
      opinii, bo dopiero „5,0 ze 142" coś znaczy. Przy karcie została data,
      która mówi, że to opinie z tego roku, a nie sprzed pięciu lat.
   3. Pięć kart w siatce po trzy zostawiało dziurę w drugim rzędzie.
      Sześć opinii wypełnia dwa rzędy równo.
   ------------------------------------------------------------------------ */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-m);
}
.quote {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
}
/* Znak cudzysłowu jako osobny wiersz nad tekstem, nie w tekście.
   Wersja z wielkim znakiem w tle została odrzucona: przy szerokości karty
   około 360 px każdy rozmiar, przy którym znak był widoczny, wchodził na
   wiersze tekstu. Znak w osobnym wierszu nic nie zasłania i nadal mówi,
   że to cytat. */
.quote::before {
  content: "„";
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.6;
  color: var(--sand);
  margin-bottom: 0.35rem;
}
.quote__text {
  position: relative;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: none;
  flex: 1;
  margin: 0;
}
.quote__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.quote__author { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.quote__date { font-size: var(--step--2); color: var(--ink-3); }

.quotes__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-3);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: none;
}
/* Jedna liczba, która ma zostać w głowie. Śliwka na kremie daje 10,65:1,
   więc może być duża bez ryzyka, że zrobi się z niej ozdoba. */
.quotes__ocena {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

/* --- Zespół -------------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-m);
}
.team-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition);
}
.team-card:hover { transform: translateY(-3px); color: inherit; }
.team-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-2);
  margin-bottom: 0.85rem;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.team-card:hover .team-card__name { color: var(--accent-dark); }
.team-card__role {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
  max-width: none;
}

/* --- Dane do przelewu --- */
.payment {
  max-width: 46rem;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-2);
}
.payment__account {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-block: 0.3rem;
}

/* --- Długi tekst rozwijany („Czytaj więcej") ---------------------------- */
.readmore { border-top: 1px solid var(--line); padding-top: var(--space-m); }
.readmore > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after {
  content: "";
  width: 1.05em; height: 1.05em;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}
.readmore[open] > summary::after { transform: rotate(180deg); }
.readmore__body { padding-top: var(--space-m); color: var(--ink-2); }
.readmore__body > * + * { margin-top: var(--space-s); }
.readmore__body h3 { font-size: var(--step-2); margin-top: var(--space-l); }
.readmore__body h4 { font-size: var(--step-1); margin-top: var(--space-m); }
.readmore__body p { line-height: 1.75; }

/* =========================================================================
   14. ZNAK GRAFICZNY MARKI: PĘTLA
   -------------------------------------------------------------------------
   Na libere.pl przez zdjęcie w nagłówku i przez zieloną sekcję lokalizacji
   przechodzi ciągła pętla, wywiedziona z zawijasa litery „l" w logo.
   Tutaj ten sam element, wstawiony w tych samych dwóch miejscach.

   Linia jest czysto dekoracyjna: aria-hidden w HTML i pointer-events: none
   tutaj, żeby nie przechwytywała kliknięć i nie trafiała do czytnika ekranu.
   Kolor bierze z currentColor, więc steruje nim kolor tekstu rodzica.
   ========================================================================= */
.deco-line {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: 0.9;
}
/* Rysunek jest wklejony wprost w HTML, a nie wciągany jako maska z pliku.
   Maska z osobnego pliku nie działa, gdy stronę otwiera się dwuklikiem
   z dysku: przeglądarka traktuje wtedy każdy plik jako obcy adres
   i cicho ją blokuje. Wklejony rysunek działa wszędzie, a kolor bierze
   z currentColor, czyli z koloru tekstu rodzica. */
.deco-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* --- Pętla na zdjęciu w nagłówku ---------------------------------------- */
.hero__figure { position: relative; }
.hero__figure .deco-line {
  color: var(--sand-light);
  top: -6%;
  left: -18%;
  width: 132%;
  opacity: 0.95;
}

/* Zdjęcie w hero na obecnej stronie schodzi do prawej krawędzi okna
   i nie ma zaokrągleń. Zostawiamy łagodny promień tylko na wąskich
   ekranach, gdzie kadr jest wyśrodkowany. */
.hero__figure img { border-radius: var(--radius-lg); }

/* --- Sekcja lokalizacji na jasnej szałwii -------------------------------
   Obecna strona ma tu biały tekst na szałwii, co daje 2,97:1 i jest poniżej
   progu czytelności. Zostawiamy to samo tło, ale tekst idzie na śliwkę,
   która daje 4,52:1 i próg spełnia. Różnicy nie widać, a czyta się to lepiej.
   ------------------------------------------------------------------------ */
.section--sage {
  background: var(--sand-light);
  position: relative;
  overflow: hidden;
}
.section--sage h2,
.section--sage h3 { color: var(--ink); }
.section--sage .section__head p { color: var(--ink); }
.section--sage .deco-line {
  color: var(--white);
  opacity: 0.55;
  top: -12%;
  right: -8%;
  left: auto;
  width: 34rem;
}
.section--sage .container { position: relative; z-index: 2; }

@media (max-width: 62rem) {
  .section--sage .deco-line { width: 24rem; right: -6rem; }
}

/* --- Pas z ofertą niskopłatną, terakota ---------------------------------
   Na obecnej stronie leży zaraz pod nagłówkiem i jest jedynym miejscem,
   gdzie terakota wchodzi jako pełna płaszczyzna.
   ------------------------------------------------------------------------ */
/* Pasek z terapią niskopłatną. Do 10 sierpnia miał jasny tekst na terakocie,
   czyli 2,43:1, przy wymaganych 4,5:1. Zmierzone w przeglądarce na 23 stronach.
   To ta sama pomyłka, którą naprawiliśmy 9 sierpnia na karcie cennika:
   terakota z księgi jest kolorem plamy, nie tłem pod jasne pismo.
   Śliwka na terakocie daje 5,18:1. */
.pricebar {
  background: var(--sand);
  color: var(--ink);
  padding-block: var(--space-s);
}
.pricebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s) var(--space-m);
  text-align: center;
}
.pricebar p { margin: 0; max-width: none; font-size: var(--step-0); }
.pricebar strong { font-weight: 600; }
/* Przycisk zostaje jasny, bo teraz to on odcina się od paska, a nie tekst.
   Kość słoniowa na terakocie ma 2,06:1 jako pismo, ale jako plama pod
   śliwkowym napisem jest w porządku: liczy się kontrast napisu do plamy,
   czyli 10,4:1, oraz plamy do paska, czyli granica przycisku. */
.pricebar .btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.pricebar .btn:hover {
  background: var(--paper-3);
  border-color: var(--line);
  color: var(--ink);
}

/* --- Zdjęcia w sekcjach dwudzielnych wpisane w koło ----------------------
   Obecna strona kadruje zdjęcia „Specjaliści blisko Ciebie" i „Nasza misja"
   w okrąg, z drugim, przesuniętym kołem w tle.
   ------------------------------------------------------------------------ */
.split__media--circle { position: relative; }
.split__media--circle::before {
  content: "";
  position: absolute;
  inset: 12% -6% -6% 12%;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0.55;
}
.split__media--circle img {
  position: relative;
  border-radius: 50%;
  box-shadow: none;
}

/* =========================================================================
   15. IKONY Z KSIĘGI ZNAKU
   -------------------------------------------------------------------------
   Oryginalne rysunki z identyfikacji, dwa kolory: jasna szałwia #C6C5B7
   i jasna terakota #E2C3B9. Mają własny kolor, więc nie wsadzamy ich
   w kolorowe kółko, tak jak wcześniejszych ikonek liniowych. Reguła niżej
   zdejmuje z nich tło i powiększa je, bo to ilustracje, a nie piktogramy.
   ========================================================================= */
.card__icon--art {
  width: 4.4rem;
  height: 4.4rem;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-s);
}

/* Kolorowanie kółek co trzecią kartę dotyczyło poprzednich ikonek
   i przy tych nie ma zastosowania. */
.grid--3 > .card:nth-child(3n+2) .card__icon--art,
.grid--3 > .card:nth-child(3n+3) .card__icon--art { background: none; }

/* =========================================================================
   16. ORYGINALNE ZDJĘCIA I LINIE Z IDENTYFIKACJI
   -------------------------------------------------------------------------
   Zdjęcia z księgi to wycinanki w PNG i WEBP z przezroczystym tłem, które
   mają dekorację, koła i pętle, już wtopioną w plik. Nie wolno ich więc
   kadrować w koło ani obcinać rogów, bo obcinamy wtedy część rysunku.

   Linie wchodzą jako tło sekcji, w tych samych miejscach co na libere.pl:
   opinie, „Dlaczego my", kontakt i stopka.
   ========================================================================= */

/* --- Wycinanki: bez ramek, bez cieni, bez kół --------------------------- */
.hero__figure img,
.split__media--cutout img {
  border-radius: 0;
  box-shadow: none;
  background: none;
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
}
.split__media--cutout::before { content: none; }

/* --- Sekcje z linią w tle ----------------------------------------------- */
/* `clip` zamiast `hidden`, i to nie jest kosmetyka. `overflow: hidden`
   tworzy kontener przewijania, a wtedy `position: sticky` w środku przykleja
   się do niego, a nie do okna, i wygląda jakby w ogóle nie działało. Na to
   nadział się spis z boku cennika. `overflow: clip` obcina dekorację tak
   samo, ale kontenera przewijania nie tworzy. */
.section--deco { position: relative; overflow: clip; }
.section--deco > .container { position: relative; z-index: 2; }
.section--deco::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
}

/* „Podstawowe informacje" na stronie osoby: ta sama wstęga co na starej
   stronie, ten sam rysunek i ten sam kolor, tylko odbity w poziomie, bo
   tak leżał w oryginale: pętle po prawej u góry, ogon uciekający w lewy
   dolny róg. Wektor, więc przy każdej szerokości jest ostry.

   To jest wyłącznie tło. Układ, odstępy i treść sekcji zostają bez zmian. */
.section--deco-informacje::before {
  background-image: url("img/linie/wstega-informacje.svg");
  /* Kadr robi sekcja, nie ramka obrazu. Przy stałej szerokości i proporcji
     krawędź rysunku wypadała w środku sekcji i wstęga urywała się w połowie
     pętli. `inset: 0` plus `cover` sprawiają, że warstwa jest dokładnie tak
     duża jak sekcja, a rysunek ją wypełnia, więc jedyne cięcie jest na
     krawędziach sekcji i wygląda jak linia biegnąca dalej poza ekran.
     Działa przy każdej wysokości sekcji, a te różnią się między osobami,
     bo różnią się długością wykształcenia. */
  inset: 0;
  background-size: cover;
  background-position: right top;
  opacity: 0.85;
}

/* Opinie i „Dlaczego my": miękka plama w tle, u góry sekcji */
.section--deco-opinie::before {
  background-image: url("img/linie/opinie.webp");
  top: 0; left: 50%;
  width: min(92rem, 130%);
  aspect-ratio: 1470 / 580;
  transform: translateX(-50%);
  opacity: 0.55;
}
.section--deco-dlaczego::before {
  background-image: url("img/linie/dlaczego-my.webp");
  bottom: 0; left: 50%;
  width: min(92rem, 130%);
  aspect-ratio: 1470 / 551;
  transform: translateX(-50%);
  opacity: 0.55;
}

/* Kontakt: terakotowa linia, ta ze zrzutu z biblioteki mediów */
.section--deco-kontakt::before {
  /* Wektor, nie PNG. Plik z biblioteki mediów ma 1057 pikseli szerokości,
     a wstążka rozciąga się tu na całą sekcję i szerzej, więc na krzywych
     było widać schodki. Obrys wektorowy jest ostry przy każdej
     szerokości i waży 18 kB zamiast 27. */
  background-image: url("img/linie/kontakt.svg");
  /* Wstążka ma przechodzić przez całą sekcję, a nie urywać się w połowie.
     Wyśrodkowana i szersza niż sekcja, żeby wchodziła i wychodziła poza
     krawędzie, zamiast zaczynać się i kończyć w kadrze. */
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: min(120rem, 150%);
  aspect-ratio: 1057 / 363;
  /* Po rozciągnięciu na całą szerokość kreska zrobiła się grubsza, więc przy
     dawnej mocy przykrywała kafle kontaktowe i przyciski. */
  opacity: 0.45;
}

/* --- Stopka: dwie linie po bokach --------------------------------------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 2; }
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.14;
}
.site-footer::before {
  background-image: url("img/linie/stopka-lewa.png");
  left: 0; bottom: 0;
  width: 24rem; aspect-ratio: 766 / 325;
}
.site-footer::after {
  background-image: url("img/linie/stopka-prawa.png");
  right: 0; top: 0;
  width: 7rem; aspect-ratio: 173 / 411;
}

@media (max-width: 48rem) {
  .section--deco::before { opacity: 0.35; }
  .site-footer::before, .site-footer::after { display: none; }
}

/* --- Zdjęcia zespołu: koło, tak jak na libere.pl -------------------------
   Zdjęcia są kwadratowe i mają linię wrysowaną w plik, tak jak u Was.
   CSS dokłada tylko obcięcie do koła.
   ------------------------------------------------------------------------ */
.team-card img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: #e0e0de;
}

/* =========================================================================
   17. ZDJĘCIE W NAGŁÓWKU WYCHODZI POZA KADR STRONY
   -------------------------------------------------------------------------
   Wcześniej stało jako prostokąt wewnątrz kolumny i było widać, gdzie kończy
   się plik. Na libere.pl to zdjęcie dobija do prawej krawędzi okna i schodzi
   pod dolną krawędź sekcji, więc żadne cięcie nie rzuca się w oczy.
   Tutaj to samo: obraz przykleja się do prawego dolnego rogu sekcji hero,
   a wszystko, co wystaje, przycina overflow tej sekcji.
   ========================================================================= */
@media (min-width: 62rem) {
  .hero { position: relative; }

  /* Kolumna z tekstem zwęża się, a miejsce po zdjęciu zostaje puste,
     bo samo zdjęcie jest teraz wyjęte z układu i pozycjonowane osobno. */
  /* Zdjęcia nie ma już w siatce, więc zostaje jedna kolumna z tekstem.
     Szerokość pilnuje, żeby wiersze nie robiły się za długie. */
  .hero__inner { grid-template-columns: minmax(0, 34rem); }

  .hero__figure {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(46vw, 48rem);
    margin: 0;
    pointer-events: none;
  }
  .hero__figure img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Wcześniej była tu reguła odsuwająca zdjęcie od krawędzi na bardzo szerokich
   oknach. Robiła dokładnie to, czego mieliśmy uniknąć: wracał pionowy szew
   w połowie ekranu. Zdjęcie ma zawsze dobijać do prawej krawędzi okna. */
@media (min-width: 100rem) {
  .hero__figure { width: min(44vw, 52rem); }
}

/* =========================================================================
   18. „JAK WSPIERAMY" zostaje w ramce, świadomie
   -------------------------------------------------------------------------
   Ten plik nie jest wycinanką i nie da się z niego zrobić dobrej. Para jest
   ucięta prostą linią w środku kadru, więc ani wypuszczenie do krawędzi
   sekcji, ani wycinanie tła modelem nie dały dobrego efektu. Ramka
   z zaokrągleniem i cieniem jest tu właściwa, bo każe czytać zdjęcie jako
   kartę, a nie jako wyciętą postać. Nie zdejmować jej bez nowego pliku.
   ========================================================================= */

/* =========================================================================
   19. STRONY OSÓB
   -------------------------------------------------------------------------
   Nagłówek profilu jest niższy od tego na stronie głównej, bo nie ma w nim
   akapitu wprowadzającego, tylko imię, rola i dwa przyciski. Zdjęcie jest
   kwadratowe i obcięte do koła, tak jak w siatce zespołu.
   ========================================================================= */
.hero--osoba { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--space-l); }
.hero--osoba h1 { font-size: var(--step-4); margin-bottom: var(--space-s); }
.hero--osoba .hero__role { font-size: var(--step-0); color: var(--ink-2); margin-top: 0.6rem; }
.hero--osoba .hero__actions { margin-bottom: 0; }

/* Zdjęcie osoby jest zwykłą drugą kolumną siatki, bez pozycjonowania
   bezwzględnego. Nagłówek strony głównej wymagał wypuszczenia zdjęcia poza
   kadr, tutaj nie ma czego wypuszczać, bo portret jest obcięty do koła. */
.hero--osoba .hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: center;
}
.hero__portret img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: #e0e0de;
}
@media (max-width: 62rem) {
  .hero--osoba .hero__inner { grid-template-columns: 1fr; }
  .hero__portret { max-width: 15rem; }
}

/* --- Lista obszarów pomocy, dwie kolumny z ptaszkami ---------------------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 0.85rem var(--space-l);
}
.ticks li {
  position: relative;
  padding-left: 2.2rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 0.42rem; top: 0.62em;
  width: 0.5rem; height: 0.28rem;
  border-left: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: rotate(-45deg);
}

/* =========================================================================
   20. STRONA ZESPOŁU: KARTY OSÓB
   -------------------------------------------------------------------------
   Odwzorowanie układu z libere.pl: stos szerokich kart na zieleni, zdjęcie
   po lewej, opis po prawej, przycisk i odnośnik do pełnego profilu.

   Jedna zmiana wobec oryginału. Wasze karty mają biały tekst na jasnej
   szałwii #969785, co daje kontrast 2,97 do 1, czyli poniżej progu
   czytelności. Tutaj tłem jest szałwia ciemna #646c5f, która z bielą daje
   5,45 do 1 i próg spełnia. Różnica w odbiorze jest niewielka, a tekst
   przestaje się rozmywać.
   ========================================================================= */
.osoby { display: grid; gap: var(--space-m); }

.osoba-karta {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-m) var(--space-l);
  align-items: start;
  background: var(--accent);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-m);
}
.osoba-karta__foto { display: grid; justify-items: center; gap: var(--space-m); }
.osoba-karta__foto img {
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: #e0e0de;
}
.osoba-karta h2 { color: var(--white); font-size: var(--step-2); margin-bottom: 0.35em; }
.osoba-karta__rola {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-s);
  max-width: none;
}
.osoba-karta__tresc p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: none;
}
.osoba-karta__tresc p + p { margin-top: 0.8rem; }
.osoba-karta .link-arrow { color: var(--white); margin-top: var(--space-m); }
.osoba-karta .link-arrow:hover { color: var(--paper-3); }

@media (max-width: 48rem) {
  .osoba-karta { grid-template-columns: 1fr; padding: var(--space-m); }
  .osoba-karta__foto img { max-width: 11rem; }
}

/* --- Rozwijanie „Pokaż więcej informacji" na karcie osoby ----------------
   Natywny details, bez JavaScriptu. Działa z dysku i jest obsługiwany
   przez czytniki ekranu bez dodatkowych atrybutów.
   ------------------------------------------------------------------------ */
.wiecej { margin-top: var(--space-m); }
.wiecej > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--white);
}
.wiecej > summary::-webkit-details-marker { display: none; }
.wiecej > summary::after {
  content: "";
  width: 1.05em; height: 1.05em;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}
.wiecej[open] > summary::after { transform: rotate(180deg); }
.wiecej > summary:hover { color: var(--paper-3); }
.wiecej > *:not(summary) { margin-top: 0.9rem; }
.wiecej h3 {
  color: var(--white);
  font-size: var(--step-0);
  margin-top: var(--space-m);
  margin-bottom: 0.6rem;
}

/* listy i tabelki wewnątrz karty są na ciemnym tle, więc odwracamy kolory */
.ticks--zwarte { gap: 0.5rem var(--space-m); font-size: var(--step--1); }
.osoba-karta .ticks li { color: rgba(255, 255, 255, 0.88); padding-left: 1.9rem; }
.osoba-karta .ticks li::before { background: rgba(255, 255, 255, 0.22); width: 1.15rem; height: 1.15rem; }
.osoba-karta .ticks li::after { border-color: var(--white); left: 0.34rem; }

.facts--zwarte { border-top-color: rgba(255, 255, 255, 0.25); }
.osoba-karta .facts > div { border-bottom-color: rgba(255, 255, 255, 0.25); padding-block: 0.7rem; }
.osoba-karta .facts dt { color: var(--white); }
.osoba-karta .facts dd { color: rgba(255, 255, 255, 0.85); }

/* --- Osadzony kalendarz ZnanyLekarz ---------------------------------------
   Widżet wstrzykuje własny wygląd, więc ograniczamy się do dania mu miejsca
   i sensownej szerokości. Minimalna wysokość trzyma układ, zanim skrypt
   się wczyta, dzięki czemu strona nie podskakuje.
   ------------------------------------------------------------------------ */
.kalendarz { min-height: 22rem; }
.kalendarz iframe { max-width: 100%; border: 0; }
.kalendarz__uwaga {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --- Plakietka: całościowe szkolenie psychoterapeutyczne -----------------
   Osobny, wyróżniony element przy nazwisku. To kwalifikacja, której pacjenci
   szukają wprost, więc nie ma sensu topić jej w akapicie.
   ------------------------------------------------------------------------ */
.znacznik {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: var(--space-s) 0 var(--space-m);
  padding: 0.65rem 1rem;
  /* Nie 999px. Na desktopie plakietka mieści się w jednej linii i pigułka
     wygląda dobrze, ale na telefonie tekst zawija się na trzy linie i wtedy
     999px robi z niej stadion: boczne łuki wchodzą w tekst, a pierwsze
     litery siedzą na krzywiźnie. 1.6rem to kompromis, który działa w obie
     strony. Przy jednej linii, wysokiej na jakieś 34 px, przeglądarka i tak
     przycina promień do połowy wysokości, więc pigułka zostaje pigułką.
     Przy zawinięciu wychodzi spokojny zaokrąglony prostokąt. */
  border-radius: 1.6rem;
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  /* Kończy się na treści, zamiast rozciągać się na całą kolumnę. */
  width: fit-content;
  align-self: flex-start;
  max-width: min(100%, 34rem);
}
.znacznik span {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  /* Wersalikami, z rozstrzeleniem, na telefonie schodziło do 10,8 px.
     Dolna granica pilnuje, żeby nie zeszło poniżej 12 px. */
  font-size: max(0.75rem, 0.78em);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.znacznik--jasny {
  /* Tło było biel na 14 procentach, tekst biel na 88. Na szałwiowej karcie
     zespołu dawało to 3,83:1, czyli poniżej progu WCAG AA. Zmierzone axe,
     nie na oko. Rozjaśnione tło samo sobie szkodziło: podnosiło jasność
     podkładu, a tekst i tak był przygaszony. Teraz tło jest ledwie
     zaznaczone, a tekst pełny, co daje 5,33:1 i wygląda czyściej. */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
  margin-bottom: var(--space-s);
}
.znacznik--jasny span { background: var(--white); color: var(--accent-dark); }

/* W nagłówku osoby plakietka i przyciski miały każde swój odstęp, dolny
   plakietki i górny przycisków. Dodawały się do siebie i na telefonie
   robiła się między nimi dziura na 76 px, czyli tyle co pusty akapit.
   Odstęp ma być jeden, ten od przycisków. */
.hero .znacznik { margin-bottom: 0; }

/* Mała plakietka do kafli i list. Duża, z pełnym zdaniem, zostaje na
   profilach i na /zespol/. Tutaj liczy się to, żeby nie przykryła nazwiska
   ani roli, więc jest jednolinijkowa i cichsza kolorystycznie. */
.znacznik--maly {
  display: inline-block;
  /* Oddech nad plakietką. Przy 0.35rem siedziała tuż pod rolą i czytało się
     to jak dalszy ciąg tego samego zdania, a to jest osobna informacja. */
  margin: 0.8rem 0 0;
  padding: 0.15rem 0.6rem;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent-dark);
  background: var(--white);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  /* Bez `nowrap`. „w szkoleniu: seksuologia” jest szersze niż kafel
     specjalisty, więc przy zakazie zawijania plakietka wychodziła poza
     ramkę karty. Teraz zawija się w drugą linijkę i zostaje w środku. */
  max-width: 100%;
  margin-inline: auto;
}
/* Dwie plakietki jedna pod drugą potrzebują odstępu, inaczej sklejają się
   w jeden ciemniejszy pas. */
.znacznik--maly + .znacznik--maly { margin-top: 0.3rem; }
.legenda-szkolenie {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-3);
  /* Wyśrodkowana pod listą, bo cała lista jest wyśrodkowana, a legenda
     przyklejona do lewej wyglądała jak przypis, który się urwał. */
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
/* Ta sama kreseczka co przy nadtytułach sekcji. Wiąże legendę wizualnie
   z resztą strony zamiast zostawiać ją jako luźny akapit. */
.legenda-szkolenie::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--sand);
  vertical-align: middle;
  margin-right: 0.7rem;
}

/* Karta zespołu zeruje max-width wszystkim akapitom w środku, a plakietka
   jest akapitem. Bez tej reguły ramka rozciągała się na całą kolumnę
   i po prawej zostawało pół pustego pola. */
.osoba-karta__tresc p.znacznik,
.hero p.znacznik { max-width: min(100%, 34rem); }

/* --- Zastrzeżenie pod tabelą podstawowych informacji ----------------------
   Wypisanie nurtu nie jest deklaracją ukończonego szkolenia. W tej branży
   różnica jest istotna i lepiej powiedzieć to wprost, przy samej tabeli,
   niż liczyć na to, że nikt nie zapyta.
   ------------------------------------------------------------------------ */
.facts__uwaga {
  margin-top: var(--space-s);
  padding-left: var(--space-s);
  border-left: 2px solid var(--sand);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 46rem;
}

/* =========================================================================
   21. RAMKA Z NURTAMI
   -------------------------------------------------------------------------
   Nurty wyszły z tabeli do własnego bloku, bo przy sześciu pozycjach robił
   się z nich długi ciąg tekstu w jednej komórce. Jako pastylki czyta się je
   od jednego rzutu oka. Tło w kolorze stopki, więc blok wyraźnie odcina się
   od reszty i zastrzeżenie pod spodem nie ginie.
   ========================================================================= */
.nurty {
  background: var(--ink);
  color: var(--paper-3);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-m);
}
.nurty h2 { color: var(--paper-3); font-size: var(--step-2); margin-bottom: var(--space-m); }

.nurty__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nurty__lista li {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--step--1);
  line-height: 1.4;
}

.nurty__uwaga {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--step--1);
  line-height: 1.65;
  color: rgba(236, 228, 219, 0.72);
  max-width: 46rem;
}

@media (max-width: 48rem) {
  .nurty { padding: var(--space-m); }
}

/* --- Nurty na karcie zespołu i wspólne zastrzeżenie -----------------------
   Na stronie zespołu zastrzeżenie jest JEDNO, pod całą listą, a nie przy
   każdej z dwunastu osób. Powtórzone dwanaście razy przestaje być
   informacją, a zaczyna być szumem, który się pomija.
   ------------------------------------------------------------------------ */
.nurty__lista--karta li {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}
.uwaga-ogolna {
  margin: var(--space-l) auto 0;
  padding-left: var(--space-s);
  border-left: 2px solid var(--sand);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 52rem;
}

/* =========================================================================
   22. CENNIK
   -------------------------------------------------------------------------
   Układ z libere.pl: siatka kolorowych kart, w każdej rozwijane pozycje.
   Kolory kart z księgi znaku, po jednym na kategorię, żeby dało się je
   rozróżnić z odległości. Rozwijanie na natywnym details, bez JavaScriptu.
   ========================================================================= */
.cennik-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-m);
  align-items: start;
}
.cennik-karta {
  border-radius: var(--radius-lg);
  padding: var(--space-l) clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}
.cennik-karta h2 { font-size: var(--step-2); margin-bottom: var(--space-s); }

.cennik-karta--szalwia  { background: var(--accent);      color: var(--white); }
.cennik-karta--sliwka   { background: var(--ink);         color: var(--paper-3); }
.cennik-karta--krem     { background: var(--paper);       color: var(--ink-2); border: 1px solid var(--line); }
.cennik-karta--terakota { background: var(--sand);        color: var(--ink); }

.cennik-karta--szalwia h2, .cennik-karta--sliwka h2 { color: var(--white); }
.cennik-karta--krem h2, .cennik-karta--terakota h2 { color: var(--ink); }

/* Odnośnik wewnątrz kolorowej karty cennika.

   Bez tego link do regulaminu niskopłatnego brał domyślny kolor odnośnika,
   czyli szałwię, i lądował na szałwiowej karcie: kontrast 1,00:1, czyli
   tekst dosłownie niewidoczny. Zmierzone w przeglądarce.

   Rozwiązanie: link dziedziczy kolor tekstu karty, który jest już
   sprawdzony pod kątem kontrastu, a że kolor przestaje go odróżniać,
   nośnikiem informacji „to jest odnośnik” zostaje podkreślenie. */
.cennik-karta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.cennik-karta a:hover,
.cennik-karta a:focus-visible { text-decoration-thickness: 2px; }

/* --- pojedyncza pozycja, rozwijana --- */
/* --- Wiersze cen wewnątrz kolorowej karty ------------------------------
   Układ wiersza jest ten sam co na mmschmidt.pl: nazwa, dopisek pod nią,
   wykropkowanie i kwota przy prawej krawędzi. Tutaj tylko dostrajamy kolory,
   bo karta bywa szałwiowa, terakotowa albo kremowa. */
.cennik-karta .pricing__group {
  font-size: var(--step-0);
  margin: var(--space-l) 0 var(--space-s);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.95;
}
.cennik-karta .pricing__group:first-of-type { margin-top: var(--space-m); }
.cennik-karta .pricing__note,
.cennik-karta .pricing__summary {
  color: inherit;
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: none;
  margin: var(--space-s) 0;
}
.cennik-karta .pricing__note { opacity: 0.92; }
.cennik-karta .pricing__summary {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid currentColor;
}

.cennik-opis {
  font-size: var(--step--1);
  line-height: 1.65;
  opacity: 0.82;
  margin-bottom: 0.9rem;
  max-width: none;
}

/* wiersze z cenami dziedziczą wygląd z cennika mmschmidt.pl, tu tylko
   dostrajamy kolory do ciemnych i kolorowych kart */
/* Nazwy usług w Libere są długie („Terapia PTSD metodą przedłużonej
   ekspozycji"), więc wiersz w jednej linii, jak na mmschmidt.pl, tu się łamie
   i kwota ucieka pod nazwę. Dlatego w kartach cennika wiersz jest siatką:
   nazwa i dopisek w kolumnie po lewej, kwota trzyma prawą krawędź niezależnie
   od tego, na ile wierszy rozejdzie się nazwa. Wykropkowanie przy zawijanym
   tekście i tak nie ma czego łączyć, więc znika. */
.cennik-karta .price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nazwa kwota" "dopisek kwota";
  column-gap: var(--space-m);
  align-items: center;
  border-color: currentColor;
  padding: 0.85rem 0;
}
.cennik-karta .price-row__name  { grid-area: nazwa; }
.cennik-karta .price-row__meta  { grid-area: dopisek; }
.cennik-karta .price-row__value { grid-area: kwota; white-space: nowrap; }
/* Ostatni wiersz cen nie potrzebuje własnej kreski: blok pod nim, pastylki
   albo lista stawek, ma swoją. Bez tego wychodziły dwie linie z pustką
   pomiędzy. */
/* Ostatni wiersz cen nie potrzebuje własnej kreski, bo blok pod nim ma swoją.
   Uwaga na :last-of-type: liczy ostatni element typu DIV wśród rodzeństwa,
   a .cennik-stawki i .cennik-metody to też DIV-y. W kartach, które je mają,
   ostatni wiersz ceny nie był więc „last-of-type" i zostawiał kreskę.
   Razem z kreską górną bloku pod spodem dawało to dwie linie i pustą
   przerwę między nimi, wyglądającą jak wiersz, z którego zniknęła treść.
   Widoczne na /cennik/ i na pięciu stronach ofertowych. Selektor :has
   patrzy na to, co faktycznie stoi za wierszem, a nie na typ znacznika. */
.cennik-karta .price-row:last-of-type { border-bottom: 0; }
.cennik-karta .price-row:not(:has(+ .price-row)) { border-bottom: 0; }
.cennik-karta .price-row__dots  { display: none; }
.cennik-karta .price-row:first-of-type { border-top: 0; }
.cennik-karta .price-row__name { font-size: var(--step-0); font-weight: 500; line-height: 1.45; }
/* Przezroczystość podniesiona z 0,75 do 0,85 po pomiarze axe. Na szałwii
   0,75 dawało 4,05:1, a na kremie 4,11:1, czyli tuż pod progiem WCAG AA,
   który wynosi 4,5:1 dla tekstu tej wielkości. 0,85 daje odpowiednio
   4,68:1 i 5,27:1. Różnicy w wyglądzie prawie nie widać, a napis
   „cykl 8 spotkań, tylko indywidualnie" przestaje być trudny do odczytania
   przy słabszym wzroku albo w słońcu na telefonie. */
.cennik-karta .price-row__meta { font-size: var(--step--1); color: inherit; opacity: 0.85; }
.cennik-karta .price-row__value { font-size: var(--step-0); font-weight: 600; color: inherit; }

.cennik-przypis {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  opacity: 0.8;
  max-width: none;
}

/* Odmiana kremu dla drugiej sekcji kremowej pod rząd, żeby sąsiadujące
   bloki nie zlewały się w jedną płaszczyznę. */
.section--cream-alt { background: var(--paper-2); }

/* Źródło liczb w pasku zaufania. Twierdzenia o skuteczności i ocenach muszą
   mieć podane źródło przy sobie, inaczej brzmią jak marketing. */
.trustbar__zrodlo {
  margin-top: var(--space-m);
  text-align: center;
  font-size: var(--step--1);
  opacity: 0.7;
  max-width: none;
}

/* =========================================================================
   23. STRONY OFERTOWE
   -------------------------------------------------------------------------
   Trzy bloki, które istnieją tylko na stronach oferty: siatka specjalistów
   prowadzących daną formę pomocy, kafelki „Co zyskasz" i rozwijane FAQ.
   ========================================================================= */

/* --- Siatka specjalistów -------------------------------------------------
   Karta minimalna: zdjęcie, imię, rola i dwa wyjścia. Pełne opisy są na
   /zespol/ i na kartach osób, więc tutaj świadomie nie powtarzamy treści.
   Zdjęcie w kwadracie, żeby rząd trzymał wspólną linię niezależnie od tego,
   jak wysokie jest źródło. */
.osoby-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-m);
}
.osoba-mini {
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-m) var(--space-l);
  text-align: center;
}
.osoba-mini img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-m);
}
.osoba-mini h3 { font-size: var(--step-0); margin-bottom: 0.25rem; }
.osoba-mini__rola {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 0;
}
/* Dla kogo konkretnie ta osoba przyjmuje. Widoczne tylko na stronach,
   gdzie to rozróżnienie ma znaczenie, czyli przy dzieciach. */
.osoba-mini__wiek {
  margin: 0.15rem 0 0;
  font-size: var(--step--2, 0.8rem);
  color: var(--accent-dark);
  font-weight: 600;
}

/* margin-top: auto zjada nierówność wysokości opisów, więc rząd kart ma
   przyciski w jednej linii. To robi robotę, której nie zrobi min-height. */
.osoba-mini__akcje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  /* auto zjada nierówność wysokości opisów, a padding-top daje stały,
     niezależny od nich oddech nad przyciskiem. Sam margines roli tego nie
     załatwiał: przy roli na trzy wiersze zostawało 28 px i przycisk niemal
     dotykał tekstu. */
  margin: auto 0 0;
  padding-top: var(--space-l);
}
.btn--maly { padding: 0.55rem 1.1rem; font-size: var(--step--2); }

/* --- Kafelki „Co zyskasz" ----------------------------------------------- */
.korzysci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-m);
}
.korzysc {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-m);
}
/* Ikona siedzi na krążku w jasnej szałwii, zamiast wisieć samotnie na tle.
   To ten sam zabieg, co przy ikonach kontaktu, więc strona jest spójna. */
.korzysc__ikona {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0.9rem;
  margin-bottom: var(--space-m);
  border-radius: 999px;
  background: var(--accent-soft);
}
.korzysc h3 { font-size: var(--step-0); margin-bottom: 0.5rem; text-wrap: balance; }
.korzysc p { font-size: var(--step--1); line-height: 1.65; margin: 0; }

/* --- FAQ -----------------------------------------------------------------
   Ten sam mechanizm co w cenniku, natywne details, bez JavaScriptu. */
.faq-pozycja {
  border-bottom: 1px solid var(--line);
  padding: var(--space-s) 0;
}
.faq-pozycja > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  cursor: pointer;
  list-style: none;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}
.faq-pozycja > summary::-webkit-details-marker { display: none; }
.faq-pozycja > summary::after { content: "+"; font-weight: 400; flex: none; }
.faq-pozycja[open] > summary::after { content: "−"; }
.faq-pozycja > div { padding-top: 0.6rem; }
.faq-pozycja p { margin: 0; }

/* --- Artykuł pozycjonujący ----------------------------------------------
   Długi tekst pod „Czytaj więcej". Jest w DOM od razu, tylko zwinięty,
   więc wyszukiwarki widzą go tak samo jak resztę strony. */
.artykul > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--accent-dark);
  border-bottom: 1px solid currentColor;
  margin-top: var(--space-s);
}
.artykul > summary::-webkit-details-marker { display: none; }
.artykul[open] > summary { margin-bottom: var(--space-m); }
.artykul__tresc h3 { font-size: var(--step-1); margin-top: var(--space-l); }
.artykul__tresc h4 { font-size: var(--step-0); margin-top: var(--space-m); }

/* --- Mapa stawek indywidualnych w karcie cennika ------------------------
   Zastępuje akapit w rodzaju „stawka 250 zł dotyczy X i Y, a 320 zł za parę
   X, u pozostałych obowiązują stawki dolne". Ta sama informacja, ale czyta
   się ją wzrokiem, a nie zdaniem złożonym: nazwisko po lewej, co i za ile
   po prawej. Nagłówek listy mówi, czego dotyczy, więc zdanie o pozostałych
   osobach jest zbędne. */
.cennik-stawki {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid currentColor;
}
.cennik-stawki__tytul {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.cennik-stawki dl { margin: 0; }
.cennik-stawki dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.35rem 0;
}
.cennik-stawki dt { font-weight: 600; font-size: var(--step--1); }
.cennik-stawki dd { margin: 0; font-size: var(--step--1); opacity: 0.85; }

/* --- Metody terapii w karcie cennika ------------------------------------
   Protokoły PE, ImRs i ERP kosztują tyle samo co zwykła sesja. Wiersz z ceną
   przy każdym z nich sugerował osobną, droższą usługę, a to nieprawda.
   Tutaj są tym, czym są naprawdę: listą tego, co potrafimy, wpiętą pod ceny.
   Ten sam kształt pastylki co przy nurtach na kartach osób, więc oko już go zna. */
.cennik-metody { margin-top: var(--space-m); }
.cennik-metody__tytul {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.7rem;
}
.cennik-metody ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cennik-metody li {
  padding: 0.45rem 0.95rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--step--1);
  line-height: 1.4;
  opacity: 0.92;
}

/* --- Skład poszczególnych diagnoz ---------------------------------------
   Stawki są wspólne dla wszystkich diagnoz i stoją wyżej, jako zwykłe wiersze.
   Tutaj jest tylko to, czym diagnozy różnią się między sobą: co obejmują
   i ile w sumie kosztują. Dzięki temu żaden test nie wisi pod nagłówkiem
   diagnozy, w której się go nie używa, a stawki nie powtarzają się cztery razy. */
.cennik-diagnozy { margin-top: var(--space-m); }
.cennik-diagnoza {
  padding: 0.7rem 0;
  border-bottom: 1px solid currentColor;
}
.cennik-diagnoza:last-child { border-bottom: 0; }
.cennik-diagnoza__nazwa   { font-weight: 600; font-size: var(--step--1); margin: 0; }
.cennik-diagnoza__zawiera { font-size: var(--step--1); opacity: 0.85; margin: 0.15rem 0 0; line-height: 1.55; }

/* Kafelki „Co zyskasz" na ciemnych tłach sekcji. Karta bierze wtedy
   przezroczystą biel zamiast kości słoniowej, żeby nie robić jasnej płyty
   na śliwce, a krążek pod ikoną jaśnieje razem z nią. */
.section--ink .korzysc,
.section--accent .korzysc {
  background: rgba(251, 247, 242, 0.08);
  border-color: rgba(251, 247, 242, 0.22);
}
.section--ink .korzysc h3,
.section--accent .korzysc h3 { color: var(--white); }
.section--ink .korzysc p,
.section--accent .korzysc p { color: var(--paper-3); }
.section--ink .korzysc__ikona,
.section--accent .korzysc__ikona { background: rgba(251, 247, 242, 0.14); }

/* Pętla w tle jest jasnym rysunkiem, więc na śliwce świeci jak halo i zabiera
   uwagę kartom. Na ciemnych sekcjach przygaszamy ją do roli tła. */
.section--deco.section--ink::before,
.section--deco.section--accent::before { opacity: 0.18; }

/* Lokalizacje: ta sama wstęga co na starej stronie, ten sam plik.
   `stopka-lewa.png` to jest dokładnie `left-footer.png` z biblioteki mediów
   WordPressa, 766 na 325, kremowa linia z pętlami. Na szałwii wygląda tak
   jak wyglądała, więc nie ma po co rysować nowej.

   Reguła stoi ZA ogólnym przygaszeniem sekcji akcentowych do 0.18, bo tam
   chodziło o miękką plamę, która świeciła jak halo. Tu jest cienka kreska,
   więc przy 0.18 znika zupełnie i zostaje sam kolor, o co właśnie była
   pretensja. */
.section--deco-lokalizacje::before,
.section--deco.section--accent.section--deco-lokalizacje::before {
  /* Wektor, nie PNG. Plik z biblioteki mediów ma 766 pikseli
     szerokości, a tutaj rozciąga się na ponad półtora tysiąca,
     więc widać było schodki na krzywych. Obrys wektorowy jest
     ostry przy każdej szerokości i waży 15 kB zamiast 13. */
  background-image: url("img/linie/wstega.svg");
  top: 12%; left: -12%;
  width: min(104rem, 132%);
  aspect-ratio: 766 / 325;
  opacity: 0.5;
}
@media (max-width: 48rem) {
  .section--deco.section--accent.section--deco-lokalizacje::before { opacity: 0.3; }
}

/* Odstęp nad przyciskami w nagłówku. Podtytuł nie miał dolnego marginesu,
   bo dopóki siedział w h1 jako span, nikt go nie potrzebował. Po wyjęciu go
   na zewnątrz przyciski przykleiły się do tekstu, zero pikseli przerwy.
   Margines siedzi na przyciskach, a nie na podtytule, bo wtedy działa
   w każdym nagłówku niezależnie od tego, co stoi nad nimi. */
.hero__actions { margin-top: var(--space-l); }

/* Dół nagłówka miał 48 px do paska cenowego przy 72 px u góry, przez co
   cały blok wyglądał, jakby zsuwał się w dół. Teraz jest symetrycznie. */
.hero--osoba { padding-bottom: var(--space-xl); }

/* =========================================================================
   24. ROZWIJANA POZYCJA W MENU
   -------------------------------------------------------------------------
   Bez niej terapia par, seksuolog dziecięcy i psycholog LGBTQ+ istniały
   wyłącznie w stopce, czyli dla kogoś, kto wszedł na stronę główną, były
   praktycznie nieosiągalne. Zbudowane na natywnym details: działa dotykiem,
   klawiaturą i czytnikiem ekranu, bez linijki JavaScriptu.
   ========================================================================= */
.nav-grupa { position: relative; }
/* Napis „Oferta" musi wyglądać dokładnie jak sąsiednie pozycje menu.
   Reguła .nav a nie łapie znacznika summary, więc bez tego dziedziczył
   podstawowy stopień pisma i odstawał od reszty. */
.nav-grupa > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.62rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition), background var(--transition);
}
.nav-grupa > summary:hover { color: var(--accent-dark); background: var(--paper-2); }
.nav-grupa > summary::-webkit-details-marker { display: none; }
.nav-grupa > summary::after {
  content: "";
  width: 0.7em; height: 0.7em;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}
.nav-grupa[open] > summary::after { transform: rotate(180deg); }

/* Na szerokim ekranie lista wypada pod pozycją, jako osobna płyta. */
@media (min-width: 62em) {
  /* Grupy stoją obok siebie, nie jedna pod drugą. Przy trzech grupach
     (dojdzie diagnostyka) auto-fit doda trzecią kolumnę sam, bez ruszania
     CSS-a, a płyta rozszerzy się w obie strony, bo jest wyśrodkowana. */
  .nav-grupa__lista {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
    align-items: start;
    gap: var(--space-m);
    padding: 0.9rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-l);
    z-index: 20;
  }
  .nav-grupa__kolumna { display: flex; flex-direction: column; gap: 0.25rem; }
  .nav-grupa__lista a { padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; }
  .nav-grupa__naglowek { white-space: nowrap; }
  .nav-grupa__lista a:hover { background: var(--paper-3); }
}

/* Napis „Oferta" to znacznik summary, a nie odnośnik, więc reguła
   `.nav a` w bloku mobilnym go nie łapie i zostawał na 0,86 rem, wyraźnie
   drobniejszy od sąsiednich pozycji. Ta reguła MUSI stać poniżej reguły
   podstawowej `.nav-grupa > summary`, bo ma tę samą specyficzność i o tym,
   która wygrywa, decyduje kolejność w pliku. Pierwsza próba siedziała
   wyżej i przegrywała.

   Na dużym ekranie zostaje bez zmian: tam menu jest poziome i wszystkie
   pozycje są celowo drobne. */
@media (max-width: 48rem) {
  .nav-grupa > summary {
    /* `flex` zamiast `inline-flex` z reguły podstawowej: inaczej pozycja
       jest szeroka na tyle, ile ma napisu, i kreska pod nią kończy się
       w połowie ekranu, podczas gdy pod pozostałymi pozycjami idzie przez
       całą szerokość. */
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 0.6rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
}

/* Na wąskim menu jest już rozwinięte w pionie, więc lista po prostu
   wcina się pod nagłówkiem grupy. */
@media (max-width: 61.99em) {
  .nav-grupa__lista {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.6rem 0 0.2rem 1rem;
    border-left: 1px solid var(--line);
    margin-top: 0.6rem;
  }
  .nav-grupa__kolumna { display: flex; flex-direction: column; gap: 0.5rem; }
}

/* Podnagłówki w rozwijanej „Ofercie". Lista rośnie i będzie rosła dalej,
   więc dzielimy ją na to, po co ktoś przychodzi (forma pomocy) i z czym
   przychodzi (temat). Bez tego przy dziesięciu pozycjach zostaje ściana
   linków, po której oko się ślizga. */
.nav-grupa__naglowek {
  margin: 0.6rem 0 0.2rem;
  padding: 0.45rem 0.6rem 0.2rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-grupa__kolumna .nav-grupa__naglowek:first-child { margin-top: 0; }

/* --- Kolorowe ramki kart lokalizacji ------------------------------------
   Każdy gabinet dostaje własny kolor z księgi znaku. To nie jest ozdobnik:
   dzięki temu ta sama lokalizacja jest rozpoznawalna z rzutu oka na stronie
   głównej, w kontakcie i we współpracy, nawet zanim ktoś przeczyta nazwę.
   Ramka jest cienka i ciągnie się także pod mapą, więc kolor obejmuje całą
   kartę, a nie tylko jej dolną, tekstową część. */
.card--ramka {
  border: 2px solid var(--kolor-ramki, var(--line));
  overflow: hidden;
}
.card--ramka .map-frame { border-bottom: 2px solid var(--kolor-ramki, var(--line)); }
/* Nagłówek zostaje śliwkowy. Próba pokolorowania go kolorem ramki dawała
   przy terakocie 2,8:1, czyli tekst na granicy czytelności. Kolor niesie
   ramka, nie treść. Terakota z księgi jest kolorem plamy, nie pisma. */
.card--ramka .card__body h3 { color: var(--ink); }
/* Sam kolor zaznaczamy jeszcze paskiem nad tekstem, żeby ramka nie była
   jedynym nośnikiem informacji przy słabym kontraście monitora. */
.card--ramka .card__body { border-top: 3px solid var(--kolor-ramki, var(--line)); }

.card--ramka-szalwia  { --kolor-ramki: var(--accent); }
.card--ramka-terakota { --kolor-ramki: var(--sand); }
.card--ramka-sliwka   { --kolor-ramki: var(--ink); }

/* =========================================================================
   25. STRONY PRAWNE
   -------------------------------------------------------------------------
   Regulaminy czyta się inaczej niż resztę strony: nie przebiega się ich
   wzrokiem, tylko szuka konkretnego punktu. Stąd wyraźne numerowane sekcje,
   węższa kolumna i wyróżnienie tego fragmentu, który generuje najwięcej
   nieporozumień, czyli zasad odwoływania wizyt.
   ========================================================================= */
.prawne-data {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: var(--space-l);
}
.prawne-wstep {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  background: var(--paper-3);
  border-radius: var(--radius);
}
.prawne-wstep p:last-child { margin-bottom: 0; }

.prawne-sekcja { margin-bottom: var(--space-l); }
.prawne-sekcja h2 {
  font-size: var(--step-1);
  margin-bottom: var(--space-s);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.prawne-sekcja p, .prawne-sekcja li { max-width: none; }

/* Punkt o odwoływaniu wizyt dostaje ramkę w terakocie. To jedyne miejsce
   w regulaminie, o którym Maciej prosi wprost, żeby je przeczytać. */
.prawne-sekcja--wyrozniona {
  padding: var(--space-m);
  border: 2px solid var(--sand);
  border-radius: var(--radius);
  background: var(--white);
}
.prawne-sekcja--wyrozniona h2 { border-bottom-color: var(--sand); }

.prawne-punkty { margin: var(--space-s) 0 0; }
.prawne-punkty > div { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.prawne-punkty dt { font-weight: 600; margin-bottom: 0.2rem; }
.prawne-punkty dd { margin: 0; }

/* =========================================================================
   26. TELEFON
   -------------------------------------------------------------------------
   Większość wejść na libere.pl to telefony, więc ten blok nie jest
   poprawką na koniec, tylko główną wersją strony. Reguły są zebrane w
   jednym miejscu, żeby dało się je przeczytać naraz i żeby nie rozłaziły
   się po arkuszu przy kolejnych zmianach.

   Wszystkie liczby poniżej są zmierzone w przeglądarce przy szerokości
   390 px, a nie oszacowane.
   ========================================================================= */

@media (max-width: 48rem) {

  /* --- Siatki portretów: dwie kolumny, nie jedna ------------------------
     Siatka miała minmax(13rem), co przy 372 px dostępnej szerokości dawało
     jedną kolumnę i portret o średnicy 332 px. Dwanaście takich kół pod
     sobą to około pięciu ekranów samych zdjęć: nikt nie dojedzie do końca
     zespołu, a strona pobiera zdjęcia w rozmiarze, którego nikt nie
     potrzebuje. Dwie kolumny mieszczą sześć osób na ekran. */
  .team { grid-template-columns: repeat(2, 1fr); gap: var(--space-m) var(--space-s); }
  .osoby-siatka { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
  .osoba-mini { padding: var(--space-s) var(--space-s) var(--space-m); }
  .osoba-mini h3 { font-size: var(--step--1); }

  /* Przy bardzo wąskich ekranach, poniżej 340 px, dwie kolumny łamią
     imiona w pół. Wtedy wracamy do jednej. */
  @media (max-width: 21.25rem) {
    .team, .osoby-siatka { grid-template-columns: 1fr; }
  }

  /* --- Pola dotyku -----------------------------------------------------
     Palec trafia w około 44 px. Wszystko, w co się klika, musi mieć tyle
     wysokości, nawet jeśli napis jest niski. */
  .btn { min-height: 2.75rem; }
  .btn--maly { min-height: 2.5rem; }
  .link-arrow { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .nav-toggle { min-width: 2.75rem; min-height: 2.75rem; }
  .site-footer a { display: inline-block; padding-block: 0.35rem; }

  /* --- Przyciski w kolumnie -------------------------------------------
     Dwa przyciski obok siebie mają na telefonie po 150 px, więc „Umów się
     na wizytę" łamie się na trzy linijki i wygląda jak błąd. W pionie
     każdy dostaje pełną szerokość i jest wyraźnym celem. */
  .hero__actions,
  .cta-band__actions,
  .osoba-mini__akcje { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .cta-band__actions .btn,
  .osoba-mini__akcje .btn { justify-content: center; }
  .osoba-mini__akcje .link-arrow { justify-content: center; }

  /* --- Typografia ------------------------------------------------------
     Nagłówki skalowane pod monitor są na telefonie za ciasne, a długie
     polskie słowa („psychoterapeutka", „seksuologicznej") wychodzą poza
     kolumnę. Dzielenie wyrazów włączamy tylko w nagłówkach, bo w tekście
     ciągłym rozbija rytm czytania. */
  h1, h2 { hyphens: auto; overflow-wrap: break-word; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .lead { font-size: var(--step-0); }

  /* --- Elementy, które nie mieszczą się w kolumnie ----------------------
     Numer konta i adresy e-mail są jednym długim ciągiem bez spacji.
     Bez tego rozpychają stronę i pojawia się przewijanie w bok. */
  .payment__account,
  a[href^="mailto:"] { overflow-wrap: anywhere; }

  /* --- Widżet rezerwacji ------------------------------------------------
     Docplanner wstawia własny układ o stałej szerokości. Zamykamy go w
     ramce z przewijaniem w poziomie, żeby nie rozciągał całej strony. */
  .kalendarz { max-width: 100%; overflow-x: auto; }
}

/* --- Nie odbieramy powiększania -----------------------------------------
   Osoby, które słabiej widzą, muszą móc powiększyć stronę palcami.
   Znacznik viewport nie ma i nie może mieć user-scalable=no. Tu tylko
   pilnujemy, żeby pisma nie skalowały się dziwnie po obróceniu telefonu. */
html { -webkit-text-size-adjust: 100%; }

/* Kontener stron prawnych. Regulamin czyta się inaczej niż stronę ofertową:
   szuka się w nim jednego punktu, a nie czyta od góry do dołu. Stąd luźniejszy
   interlinia i wyraźniejsze odstępy między punktami niż w zwykłej treści. */
.prawne { line-height: 1.75; }
.prawne li { margin-bottom: 0.45rem; }

/* =========================================================================
   27. WPIS NA BLOGU
   -------------------------------------------------------------------------
   Wpis to tekst do czytania, a nie strona sprzedażowa, więc rządzi nim
   jedna zasada: nic nie ma odciągać oka od kolumny tekstu. Szerokość
   kolumny wynika z długości wiersza, przy której czyta się najwygodniej,
   czyli mniej więcej 70 znaków.
   ========================================================================= */
.wpis-meta {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: var(--space-s);
}
.wpis > h2 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}
.wpis > h3 {
  font-size: var(--step-1);
  margin-top: var(--space-m);
  margin-bottom: 0.4rem;
}
.wpis > h2:first-child,
.wpis > h3:first-child { margin-top: 0; }
.wpis > p {
  margin-bottom: var(--space-s);
  line-height: 1.75;
  max-width: none;
}
.wpis > ul { margin-bottom: var(--space-m); }
/* Odnośniki w tekście muszą być widoczne bez najeżdżania myszą, bo na
   telefonie najechać się nie da. Podkreślenie jest tu jedynym pewnym
   znakiem, że coś jest odnośnikiem. */
.wpis p a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.wpis p a:hover { text-decoration-thickness: 2px; }

/* --- Pola dotyku, których nie da się poprawić samą wysokością wiersza ----
   Zalecenie mówi o 44 px. Nie dotyczy odnośników wewnątrz zdania, bo tam
   powiększanie pola rozbiłoby akapit, i tak stanowi wyjątek w wytycznych.
   Dotyczy natomiast wszystkiego, co stoi samodzielnie i jest przyciskiem
   w praktyce: pozycji stopki, logo, przełączników i numerów alarmowych.
   Te ostatnie są tu najważniejsze: klika w nie ktoś zdenerwowany, często
   jedną ręką. */
.site-footer ul a,
.brand,
.readmore > summary,
.wiecej > summary,
.faq-pozycja > summary,
.eyebrow a,
.zl-url {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.site-footer ul a { padding-block: 0; }
/* Pytanie w FAQ bywa dwuwierszowe, więc zamiast wyśrodkowania w pionie
   zostawiamy wyrównanie do góry i dokładamy dopełnienie. Inaczej przy
   dłuższym pytaniu znak plus odjeżdżałby na środek bloku. */
.faq-pozycja > summary { align-items: flex-start; padding-block: 0.8rem; }
/* „Czytaj więcej" to podkreślony napis, więc min-height musi iść razem z
   dopełnieniem po bokach, żeby podkreślenie nie odkleiło się od tekstu. */
.artykul > summary { padding-block: 0.7rem; }

/* Numery telefonu i adresy e-mail w środku zdania. Powiększenie pola dotyku zwykłym
   dopełnieniem rozepchnęłoby akapit, więc dokładamy je i zaraz odbieramy
   ujemnym marginesem: palec ma w co trafić, a wiersze zostają na miejscu.
   Dotyczy to zwłaszcza numerów kryzysowych, w które klika ktoś zdenerwowany.

   :not([class]) jest tu konieczne, nie ozdobne. Bez tego reguła łapała
   każdy odnośnik tel: i mailto:, także taki, który jest przyciskiem albo
   kartą, i kasowała im własne dopełnienie: „Zadzwoń do recepcji” miało
   2,4 px odstępu od krawędzi zamiast 25,6 px, a karty kontaktowe
   przyklejały tekst do ramki. Odnośnik w zdaniu nie ma klasy, przycisk
   i karta zawsze ją mają, więc to jest granica między jednym a drugim. */
a[href^="tel:"]:not([class]),
a[href^="mailto:"]:not([class]) {
  padding-block: 0.7rem;
  margin-block: -0.7rem;
  padding-inline: 0.15rem;
}
/* Karty kontaktowe i pozycje stopki to pola dotyku same w sobie, więc
   wysokość zapewniamy im osobno, nie kosztem dopełnienia. */
.contact-card-item { min-height: 2.75rem; }

/* Galeria zdjęć z gabinetów, /kontakt/ i /wspolpraca/.
   Wszystkie pięć zdjęć jest pionowych, bo powstały telefonem trzymanym
   w pionie. Cztery z nich leżały do 10 sierpnia na boku: konwersja do webp
   zjadła znacznik obrotu z EXIF. Kafle mają wspólne 3:4, żeby jedno zdjęcie
   o innych proporcjach nie robiło schodków w rzędzie.
   Na dużym ekranie pięć w jednym rzędzie, jak pasek klatek. Na telefonie
   dwie kolumny, bo pięć zdjęć na pełną szerokość to trzy ekrany przewijania
   w miejscu, które jest tylko dopowiedzeniem do map. */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
}
.galeria__kafel {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius, 12px);
  background: var(--paper-2);
}
.galeria__kafel img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Piąty kafel zostaje sam w ostatnim rzędzie. Rozciągamy go na obie kolumny
   i spłaszczamy, bo pionowy kafel na pełną szerokość telefonu to pół ekranu
   jednego zdjęcia. */
.galeria__kafel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.galeria__kafel:last-child:nth-child(odd) img { aspect-ratio: 3 / 2; }

@media (min-width: 700px) {
  .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
  .galeria__kafel:last-child:nth-child(odd) img { aspect-ratio: 3 / 4; }
}
@media (min-width: 1000px) {
  .galeria { grid-template-columns: repeat(5, 1fr); }
  .galeria__kafel:last-child:nth-child(odd) { grid-column: auto; }
}

/* Zgoda na mapę Google. Stoi w miejscu mapy i ma dokładnie te same proporcje,
   żeby po kliknięciu nic nie podskoczyło. Kolor tła jak karta, bo to nadal
   część karty lokalizacji, a nie ostrzeżenie. */
.map-zgoda {
  /* Te same proporcje co mapa, żeby po kliknięciu karta nie zmieniła
     wysokości i sąsiednie karty nie podskoczyły. Treść musi się w tym
     zmieścić, stąd skrócony tekst i mniejsze odstępy. */
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--space-s);
  text-align: center;
  background: var(--paper-2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid var(--kolor-ramki, var(--line));
}
.map-zgoda__tekst {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 30ch;
}
.map-zgoda__akcje {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
/* Przycisk wtórny: ta sama wielkość pola dotyku co zwykły, ale bez śliwkowej
   plamy, bo prawdziwym wezwaniem na tej stronie jest umówienie wizyty,
   nie pokazanie mapy. */
.btn--wtorny {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn--wtorny:hover,
.btn--wtorny:focus-visible { border-color: var(--szalwia, currentColor); }

/* Zwykła lista wypunktowana. Używamy jej tam, gdzie punkty nie są
   korzyściami, tylko drogą dalej, na przykład na stronie błędu 404.
   Klasa .ticks stawia przy każdym punkcie ptaszka, co przy nawigacji
   czyta się jak obietnica, a nie jak spis odnośników. */
.lista-prosta {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 0.45rem;
}

/* Osoba z kilkoma kalendarzami, po jednym na gabinet. Podpis nad każdym,
   żeby nikt nie umówił się na drugi koniec miasta.

   Obok siebie od 62rem w górę, czyli mniej więcej od tabletu w poziomie.
   Niżej pod sobą, bo kalendarz ZnanyLekarz w połowie szerokości telefonu
   byłby nie do trafienia palcem. Próg jest wysoki celowo: przy dwóch
   kolumnach każda musi mieć swoje kilkaset pikseli, inaczej widżet zaczyna
   zwijać dni tygodnia. */
.kalendarze {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 62rem) {
  .kalendarze:not(.kalendarze--jeden) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}
/* Jeden kalendarz zajmuje tyle, ile potrzebuje, i stoi na środku sekcji. */
.kalendarze--jeden { justify-items: center; }
.kalendarze--jeden .kalendarz { width: 100%; }
.kalendarze--jeden .kalendarz iframe,
.kalendarze--jeden .kalendarz > a { display: block; margin-inline: auto; }
.kalendarz__gabinet {
  margin: 0 0 var(--space-s);
  font-weight: 600;
  color: var(--ink);
}

/* Karta wpisu bez miniatury, lista pod /blog/ oraz „Przeczytaj też”.

   .post-card jest siatką dwukolumnową, 15rem na zdjęcie i reszta na treść.
   Wpisy nie mają zdjęć, więc bez tego modyfikatora dzieci karty lądowały
   w kolejnych komórkach siatki na przemian: data w lewej kolumnie, tytuł
   w prawej, zajawka znowu w lewej. Tytuły wychodziły poza kartę i były
   ucięte. Widać to było tylko okiem, bo nic nie wystawało poza ekran,
   a tego pilnował skrypt. */
.post-card--tekst {
  grid-template-columns: 1fr;
  padding: var(--space-m);
  align-items: start;
}
.post-card--tekst > * { grid-column: 1; }

/* --- Karta bez miniatury: równanie do dołu ------------------------------

   Kolumna elastyczna, nie siatka. W siatce domyślne align-content działa
   jak stretch, więc nadmiar wysokości karty rozkładał się równo między
   metryczkę, tytuł, zajawkę i odnośnik, zamiast zebrać się na dole. Przy
   dwóch kartach obok siebie o różnej długości tekstu wyglądało to tak,
   jakby wszystko w krótszej karcie stało nierówno.

   `margin-top: auto` przy odnośniku zbiera całą wolną przestrzeń w jedno
   miejsce, tuż nad „Wypełnij”, dzięki czemu odnośniki w jednym wierszu
   stoją na tej samej wysokości. */
.post-card--tekst {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.post-card--tekst > .link-arrow { margin-top: auto; padding-top: var(--space-s); }

/* Wyrównanie przycisków w pasie zachęty, wcześniej robione atrybutem `style`
   w treści strony. Przeniesione do arkusza, żeby polityka bezpieczeństwa
   treści mogła zabronić stylów w treści bez żadnych wyjątków. */
.cta-band__actions--lewo { justify-content: flex-start; }
.cta-band__actions--odstep { margin-top: var(--space-l); }

/* =========================================================================
   POPRAWKI ZE STRONY GŁÓWNEJ, 13 sierpnia
   ========================================================================= */

/* 1. Dwa przyciski w pasie z ofertą niskopłatną. */
.pricebar__akcje {
  display: flex;
  flex-wrap: wrap;
  /* Na telefonie przyciski łamią się do dwóch wierszy i bez tego stoją
     przyklejone do lewej, choć napis nad nimi jest wyśrodkowany. Na dużym
     ekranie oba mieszczą się w jednym wierszu, więc wyśrodkowanie nie ma
     tam czego przesuwać i wygląd zostaje bez zmian. */
  justify-content: center;
  gap: var(--space-s);
  margin: 0;
}

/* 2. „Sprawdź dostępność" na tej samej wysokości w obu kartach.
   Karty stoją obok siebie i rozciągają się do równej wysokości, ale tekst
   w nich ma różną długość, więc odnośnik lądował raz wyżej, raz niżej.
   Kolumna elastyczna z odstępem zebranym nad odnośnikiem to wyrównuje. */
.card--wide {
  display: flex;
  flex-direction: column;
}
.card--wide > .link-arrow { margin-top: auto; padding-top: var(--space-s); }

/* 5. i 7c. Więcej powietrza między kartami w siatkach na stronie głównej
   oraz zielone odnośniki wyrównane do dołu karty. Ta sama mechanika co
   przy kartach wpisów: bez tego odnośnik szedł tuż pod tekstem, więc
   w rzędzie trzech kart stał na trzech różnych wysokościach. */
#formy .grid, #dla-pacjenta .grid, #oferta .grid--3 {
  gap: var(--space-l);
}
/* Przy większym odstępie kafle muszą być odpowiednio węższe, inaczej trzy
   sztuki nie zmieszczą się w rzędzie i ostatnia spadnie niżej. */
#oferta .grid--3 > * { max-width: calc((100% - 2 * var(--space-l)) / 3); }
@media (max-width: 62rem) {
  #oferta .grid--3 > * { max-width: calc((100% - var(--space-l)) / 2); }
}
@media (max-width: 40rem) {
  #oferta .grid--3 > * { max-width: 100%; }
}
/* „Dlaczego my" ma cztery karty w rzędzie, więc odstęp musi być mniejszy,
   inaczej kolumny robią się tak wąskie, że „psycholodzy i seksuolodzy"
   łamie się na trzy wiersze. */
#dlaczego-my .grid { gap: var(--space-m); }
#dlaczego-my .card { padding: var(--space-s); }
#dlaczego-my .card h3 { font-size: var(--step-0); }
#dlaczego-my .card__icon { margin-bottom: 0.6rem; }
#oferta .grid--3 > .card, #dla-pacjenta .card, #dlaczego-my .card {
  display: flex;
  flex-direction: column;
}
#oferta .grid--3 > .card > .link-arrow,
#dla-pacjenta .card > .link-arrow { margin-top: auto; padding-top: var(--space-s); }

/* 14. „Dlaczego my?" to cztery karty, więc mają stać w rzędzie po cztery,
   a nie w siatce dwa na dwa, w której trzecia karta z najdłuższym tytułem
   rozpychała cały rząd. Poniżej 62 rem wracają do dwóch, poniżej 40 rem
   do jednej. */
#dlaczego-my .grid--2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 62rem) {
  #dlaczego-my .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  #dlaczego-my .grid--2 { grid-template-columns: 1fr; }
}

/* 8. Ramki kontaktowe równej wielkości. Kafelki z telefonem, rejestracją
   i sprawami ogólnymi miały różną wysokość, bo różnie długie były wartości
   w środku. */
.contact-cards > li { display: flex; }
.contact-card-item { width: 100%; }
.contact__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  text-align: center;
  /* Sam blok też musi być na środku. Akapity mają narzuconą maksymalną
     szerokość mierzoną w znakach, więc `justify-content: center` środkowało
     przyciski w tym wąskim akapicie, a akapit nadal stał przy lewej krawędzi
     kontenera. Widać było wyśrodkowanie względem niczego. */
  margin-inline: auto;
  max-width: none;
}
/* Formularz zostaje wyrównany do lewej, bo przy polach do wypełniania
   środkowanie utrudnia czytanie. Dotyczy to także przycisku wysyłki. */
.contact .form-akcje { justify-content: flex-start; text-align: left; }

/* 9. Nagłówek „Opinie" zlewał się ze śliwkową sekcją kontaktu, bo obie
   sekcje mają swój odstęp, ale między nimi nie było żadnej granicy poza
   zmianą tła. */
#opinie { padding-top: calc(var(--space-xl) + var(--space-m)); }

/* 10. Znak cudzysłowu stał zbyt blisko pierwszego wiersza cytatu. */
.quote::before { line-height: 0.42; margin-top: -0.45rem; margin-bottom: 0.95rem; }

/* 12. Przypis o średniej ocen wyśrodkowany, z tą samą kreską co pozostałe
   przypisy na stronie. Klasa .uwaga-ogolna daje kreskę, tutaj dokładamy
   wyśrodkowanie treści, bo tamta klasa służy też akapitom z lewej. */
.quotes__note.uwaga-ogolna {
  justify-content: center;
  text-align: center;
  margin-inline: auto;
}

/* 13. Opisy pod portretami w delikatnych ramkach, przyklejone do zdjęcia. */
/* `min-width: 0` nie jest ozdobą. Element siatki domyślnie nie zmniejsza się
   poniżej swojej najmniejszej możliwej szerokości, a tę wyznacza najdłuższe
   niepodzielne słowo. Bez tego przy 390 px „psychoterapeutycznego" nie mieści
   się w kolumnie, siatka robi dwie kolumny zamiast jednej i strona wyjeżdża
   poza ekran. */
.team-card { min-width: 0; }
.team-card__role { overflow-wrap: break-word; }

/* 19. Dane do przelewu w jednej ramce zamiast pustego bloku na całą
   szerokość sekcji. */
.payment {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.payment p { max-width: none; }

/* 20. Stopka węższa. Trzy kolumny rozjeżdżały się na całą szerokość okna,
   przez co adresy i menu stały daleko od siebie i stopka wyglądała na
   większą niż treść nad nią. */
.site-footer__grid {
  max-width: 66rem;
  margin-inline: auto;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--space-m) var(--space-l);
}
.site-footer__kontakt { margin-top: var(--space-m); }
@media (max-width: 62rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__bottom { max-width: 62rem; margin-inline: auto; }

/* Sekcja na szałwii nie farbuje kart, które w niej stoją.
   `.card` nie deklaruje własnego tła w każdym wariancie, więc po zmianie
   tła sekcji szałwia weszła do środka kart, a reguła kolorująca odnośniki
   na biało zrobiła z „Otwórz w Google Maps" biały tekst na kremie.
   Kolor sekcji ma dotyczyć sekcji, nie jej zawartości. */
.section--accent .card {
  background: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.section--accent .card h3,
.section--accent .card .card__address { color: var(--ink); }
.section--accent .card p { color: var(--ink-2); }
.section--accent .card a:not(.btn) { color: var(--accent); }
.section--accent .card a:not(.btn):hover { color: var(--accent-dark); }
.section--accent .map-zgoda__tekst { color: var(--ink-3); }
.section--accent .card .btn--wtorny {
  background: var(--white);
  color: var(--accent-dark);
  border-color: var(--accent);
}

/* Przypis źródłowy bywa adresem licencji, którego nie ma gdzie złamać.
   Bez tego wychodził poza ekran na telefonie. */
.test__zrodlo { overflow-wrap: break-word; }
.post-card--tekst h2,
.post-card--tekst h3 { font-size: var(--step-1); }

/* =========================================================================
   Testy przesiewowe
   -------------------------------------------------------------------------
   Formularz ma być możliwy do wypełnienia kciukiem, w autobusie, przez kogoś
   kto ma gorszy tydzień. Stąd decyzje poniżej:

   1. Opcje odpowiedzi to pełnej szerokości pola, jedno pod drugim, a nie
      tabela z kropkami do trafienia. Tabela z czterema kolumnami przy 390 px
      daje pola po 80 px i zaznaczanie na chybił trafił.
   2. Całe pole jest klikalne, nie sam kółeczko. Minimalna wysokość 44 px.
   3. Zaznaczona odpowiedź zmienia tło, nie tylko kropkę, żeby po przewinięciu
      w dół było widać, na co się odpowiedziało.
   ========================================================================= */
.test { margin-top: var(--space-l); }
.test__polecenie {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-m);
}
.pytanie {
  border: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-m) 0 var(--space-s);
  margin: 0;
}
.pytanie legend {
  padding: 0;
  margin-bottom: var(--space-s);
  font-size: var(--step-0);
  color: var(--ink);
  display: block;
  width: 100%;
}
.pytanie__numer {
  display: inline-block;
  min-width: 1.6em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.skala { display: grid; gap: 0.4rem; }
.skala__opcja {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.skala__opcja:hover { border-color: var(--accent); }
.skala__opcja input { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; flex: none; }
/* :has jest tu wygodą, nie warunkiem działania. Gdzie go nie ma, zostaje
   sama kropka i formularz nadal jest w pełni używalny. */
.skala__opcja:has(input:checked) { background: var(--paper-3); border-color: var(--accent); }
.skala__opcja:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.test__akcje {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  margin-top: var(--space-l);
}
.test__brak {
  margin-top: var(--space-s);
  color: var(--ink);
  background: var(--paper-3);
  border-left: 3px solid var(--sand);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
}
.test__prywatnosc, .test__zrodlo {
  margin-top: var(--space-m);
  font-size: var(--step--2);
  color: var(--ink-3);
}
.test-fakty {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-3);
}
/* Separator wisi po prawej stronie poprzedniego elementu, a nie przed
   następnym. Inaczej przy zawinięciu wiersz zaczyna się od kropki. */
.test-fakty span::after { content: " ·"; color: var(--sand); }
.test-fakty span:last-child::after { content: none; }

/* Zastrzeżenie „to nie diagnoza”. Ma być widoczne, ale nie ma straszyć,
   więc krem i szałwiowa kreska zamiast czerwieni i wykrzyknika. */
.notice--spokojny {
  background: var(--paper-3);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}

/* --- Wynik --------------------------------------------------------------- */
.wynik { margin-top: var(--space-l); scroll-margin-top: 5rem; }
.wynik:focus { outline: none; }
.wynik__karta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-l) clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}
.wynik__etykieta {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); margin: 0;
}
.wynik__liczba {
  font-family: var(--font-display);
  font-size: var(--step-3); line-height: 1.1; margin: 0.2rem 0 var(--space-s);
  color: var(--ink);
}
.wynik__liczba strong { font-weight: 600; }
/* Pasek jest ilustracją proporcji, nie nośnikiem informacji: liczba i nazwa
   progu stoją obok, więc kto go nie zobaczy, nic nie traci. */
.wynik__pasek {
  height: 8px; border-radius: 999px; background: var(--paper-3);
  overflow: hidden; margin-bottom: var(--space-m);
}
.wynik__pasek span { display: block; height: 100%; background: var(--accent); }
.wynik__nazwa { font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.wynik__akcje { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
.wynik__zastrzezenie { font-size: var(--step--2); color: var(--ink-3); margin-top: var(--space-m); }

/* Blok kryzysowy. Jedyne miejsce w całym serwisie, gdzie świadomie krzyczymy:
   stoi nad wynikiem, ma śliwkowe tło i pojawia się niezależnie od sumy
   punktów. Ktoś, kto zaznaczył myśli o śmierci przy niskiej sumie, nie może
   dostać samego „wynik w granicach typowych”. */
.wynik__alarm {
  background: var(--ink);
  color: var(--paper-3);
  border-radius: var(--radius-lg);
  padding: var(--space-m) clamp(1.25rem, 0.6rem + 2vw, 2rem);
  margin-bottom: var(--space-m);
}
.wynik__alarm h3 { color: var(--white); margin-bottom: 0.5rem; font-size: var(--step-0); }
.wynik__alarm p { color: var(--paper-3); margin: 0; }
.wynik__alarm a { color: var(--white); text-decoration: underline; text-underline-offset: 0.18em; }

/* --- Materiały dla pacjentów --------------------------------------------- */
.materialy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
/* Nagłówek grupy kart na liście materiałów. Pierwszy nie dostaje odstępu
   u góry, bo siedzi tuż pod wstępem sekcji. */
.materialy__grupa {
  margin: var(--space-xl) 0 var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.materialy__grupa:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* Sekcja „Zobacz też" na karcie pracy. Na papierze nie ma po co być,
   więc w bloku @media print jest ukryta razem z resztą nawigacji. */
.powiazane { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.powiazane li {
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
}
.powiazane li:last-child { border-bottom: 1px solid var(--line); }
.powiazane a { font-weight: 600; }
.powiazane span { display: block; color: var(--ink-2); font-size: var(--step--1); margin-top: 0.15rem; }
.material {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.material__nazwa {
  display: block;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: 0.35rem;
}
a.material__nazwa { text-decoration: underline; text-underline-offset: 0.18em; }
.material__opis { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.material__meta { margin: 0.6rem 0 0; font-size: var(--step--2); color: var(--ink-3); }
.material audio { width: 100%; margin-top: var(--space-s); }
.materialy__spis {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* Pasek odsyłający ze strony ofertowej do testu przesiewowego.
   Na szerokim ekranie tekst i przycisk obok siebie, na telefonie pod sobą,
   bo przycisk obok czterowierszowego akapitu przy 390 px robi się węższy
   niż własny napis. */
.pasek-testu {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  /* Pas stoi w sekcji kremowej, a nad nim zwykle też jest sekcja kremowa,
     więc reguła skracająca odstęp między sąsiadami o tym samym tle sprawiała,
     że zlewał się z treścią powyżej. Zamiast dokładać pustki, dajemy mu
     własne tło: jaśniejszy panel odcina się od kremu, a wolnego miejsca
     dokładamy tylko tyle, żeby panel nie dotykał sąsiadów. */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-m) clamp(1.1rem, 0.6rem + 1.6vw, 1.9rem);
}
.sekcja-testu { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.pasek-testu h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }
/* Kiedyś stało tu `p { margin: 0 }` i to zerowało także odstęp pod nadtytułem,
   przez co „Zanim umówisz wizytę”, nagłówek i akapit siedziały na sobie.
   Zerujemy więc tylko ostatni akapit, a nie wszystkie. */
.pasek-testu p { margin: 0 0 0.35rem; }
.pasek-testu p:last-child { margin-bottom: 0; }
.pasek-testu .eyebrow { margin-bottom: 0.7rem; }
.pasek-testu .test__prywatnosc { margin-top: 0.85rem; margin-bottom: 0; }
@media (min-width: 48rem) {
  .pasek-testu { grid-template-columns: 1fr auto; gap: var(--space-l); }
}

/* Wyjaśnienie, dlaczego pytania testu brzmią inaczej niż reszta serwisu.
   Kwestionariusz cytujemy dosłownie, więc pada w nim „Pan(i)”, choć wszędzie
   indziej mówimy „Ty”. Bez tego zdania wygląda to na niedbałość, a jest
   dokładnie odwrotnie: przepisanie pytań po swojemu zmieniłoby narzędzie. */
.test__brzmienie {
  margin: 0 0 var(--space-m);
  font-size: var(--step--2);
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  padding-left: 0.9rem;
}

/* Okres rozliczeniowy pod kwotą w cenniku wynajmu. Sama kwota bez tego czyta
   się jak cena za jedno wejście, a to stawka miesięczna za stały dzień
   w tygodniu. Osobna linia, bo doklejone „miesięcznie” rozpycha wiersz
   i na telefonie ucieka kwocie pod spód. */
.cennik-karta .price-row__okres {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 400;
  /* Było 0,7, czyli 3,67:1 na kremie. Poniżej progu, a to jedyne miejsce,
     które mówi, że stawka jest miesięczna, więc akurat tego nie może być
     trudno przeczytać. 0,85 daje 5,27:1. */
  opacity: 0.85;
  text-align: right;
  line-height: 1.3;
}

/* Odnośniki do stron prawnych w stopce miały 34 px wysokości, czyli mniej
   niż palec. Sąsiadują ze sobą w jednej linii, więc łatwo trafić w sąsiada.
   Powiększenie idzie pionowym marginesem wewnętrznym, bez zmiany wyglądu:
   linia tekstu zostaje tam, gdzie była, rośnie tylko obszar do kliknięcia. */
.site-footer__bottom a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* =========================================================================
   Formularz kontaktowy
   -------------------------------------------------------------------------
   Trzy pola, jeden przycisk. Pola są celowo duże: na telefonie mały input
   z małą czcionką powoduje, że Safari sam przybliża stronę przy dotknięciu
   i użytkownik traci kontekst. Dolna granica 16 px na czcionce w polu to
   jedyny sposób, żeby tego uniknąć.
   ========================================================================= */
.form { max-width: 34rem; }

.form-pole {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 var(--space-m);
}
.form-pole label {
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
}
.form-pole input,
.form-pole textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: max(1rem, var(--step-0));
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-pole textarea { resize: vertical; min-height: 8rem; }
.form-pole input:focus-visible,
.form-pole textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(93, 100, 88, 0.18);
}
/* Czerwona ramka dopiero po próbie wysłania, nie przy pierwszym kliknięciu
   w puste pole. :user-invalid właśnie tym różni się od :invalid. */
.form-pole input:user-invalid,
.form-pole textarea:user-invalid {
  border-color: #9c4a3c;
}
.form-podpowiedz {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}
.form-akcje { margin: 0 0 var(--space-s); }
.form-akcje .btn { width: 100%; text-align: center; }
@media (min-width: 30rem) {
  .form-akcje .btn { width: auto; }
}
.form-nota {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
  border-left: 2px solid var(--line);
  padding-left: 0.9rem;
  margin: 0;
}

/* Pułapka na boty. Musi zostać w drzewie dokumentu i być normalnie
   wypełnialna, bo cała sztuczka polega na tym, że bot ją wypełni.
   Dlatego nie display:none, tylko wyprowadzenie poza ekran, plus
   aria-hidden i tabindex -1 w kodzie, żeby czytnik ekranu i klawiatura
   jej nie zobaczyły. */
.form-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-blad {
  margin: 0 0 var(--space-m);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: #f4e3df;
  border-left: 3px solid #9c4a3c;
  color: #6d3227;
  font-size: var(--step-0);
  line-height: 1.55;
}

/* =========================================================================
   Nawigator: do kogo się umówić
   -------------------------------------------------------------------------
   Jedno pytanie na ekran, odpowiedzi jako duże przyciski. Nie radio buttony:
   przy wyborze jednej odpowiedzi z listy przycisk, który od razu przechodzi
   dalej, oszczędza jedno kliknięcie na każdym kroku, a na telefonie to jest
   różnica między trzema a sześcioma dotknięciami.
   ========================================================================= */
.nawigator {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
}
.nawigator:focus { outline: none; }
@media (min-width: 40rem) {
  .nawigator { padding: var(--space-l); }
}
.nawigator__krok {
  margin: 0 0 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nawigator__pytanie {
  margin: 0 0 0.5rem;
  font-size: var(--step-1);
  line-height: 1.3;
}
.nawigator__opis {
  margin: 0 0 var(--space-m);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.6;
}
.nawigator__opcje {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.nawigator__opcja {
  /* Cel dotykowy przez wysokość, nie przez sam tekst: te przyciski są
     jedynym, w co się tu klika. */
  min-height: 3.25rem;
  padding: 0.9rem 1.1rem;
  text-align: left;
  font-size: max(1rem, var(--step-0));
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.nawigator__opcja:hover { background: var(--accent-soft); border-color: var(--accent); }
.nawigator__opcja:active { transform: translateY(1px); }
.nawigator__opcja:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(93, 100, 88, 0.18);
}
.nawigator__wstecz {
  /* Dwa takie odnośniki obok siebie sklejały się w „Zmień odpowiedziZacznij
     od nowa". Odstęp z prawej, żeby przy zawinięciu na wąskim ekranie
     nadal się nie stykały. */
  margin-top: var(--space-m);
  margin-right: 1.4rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  text-decoration: underline;
  cursor: pointer;
}
.nawigator__wstecz:hover { color: var(--ink); }

.nawigator__wyniki {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
@media (min-width: 48rem) {
  .nawigator__wyniki { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.nawigator__karta {
  padding: var(--space-s);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nawigator__karta h3 { margin: 0; font-size: var(--step-0); }
.nawigator__karta h3 a { color: var(--ink); text-decoration: none; }
.nawigator__karta h3 a:hover { text-decoration: underline; }
.nawigator__rola { margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.nawigator__powod { margin: 0; font-size: var(--step--1); line-height: 1.55; }
/* Przycisk dociśnięty do dołu karty, żeby w trzech kartach obok siebie
   stały w jednej linii mimo różnej długości opisów. */
.nawigator__akcje { margin: auto 0 0; padding-top: 0.4rem; }
.nawigator__akcje .btn { width: 100%; text-align: center; }
.nawigator__nota {
  margin: var(--space-m) 0 0;
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
  border-left: 2px solid var(--line);
  padding-left: 0.9rem;
}
.nawigator__kryzys {
  border-left: 3px solid #9c4a3c;
  background: #f4e3df;
  color: #52251c;
  border-radius: var(--radius-sm);
  padding: var(--space-s) var(--space-m);
}
.nawigator__kryzys h2 { margin: 0 0 0.5rem; font-size: var(--step-1); color: inherit; }
.nawigator__kryzys p { margin: 0 0 0.7rem; line-height: 1.6; }
.nawigator__kryzys a { color: inherit; font-weight: 600; }
.nawigator__prywatnosc {
  margin: var(--space-s) auto 0;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-align: center;
}
/* Ta sama kreseczka co przy nadtytułach, legendzie plakietek i adnotacji
   pod nurtami. Wiąże przypis z resztą strony zamiast zostawiać go jako
   luźny akapit pod kartą. */
.nawigator__prywatnosc::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--sand);
  vertical-align: middle;
  margin-right: 0.7rem;
}
.lista-obszary li { margin-bottom: 0.7rem; line-height: 1.6; }

/* --- Nawigator: wielokrotny wybór trudności ------------------------------
   Dziewięć ogólnych obszarów wymuszało wybór jednej rzeczy, a ludzie nie
   przychodzą z jedną rzeczą. Teraz jest ich ponad czterdzieści i można
   zaznaczyć, ile trzeba, więc rządzi czytelność listy. Grupy z legendą,
   duże pola do trafienia palcem, licznik zaznaczeń nad przyciskiem.
   ------------------------------------------------------------------------ */
.nawigator__grupa {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: var(--space-s) 0 0;
}
.nawigator__grupa:first-of-type { border-top: 0; padding-top: 0; }
.nawigator__grupa::after { content: ""; display: table; clear: both; }
.nawigator__grupa-tytul {
  /* Legenda w fieldsecie ma własne, dziwne miejsce w układzie: przeglądarka
     przerywa nią górną ramkę i zostaje kreska biegnąca w bok od nagłówka,
     jakby ktoś się pomylił. Float z pełną szerokością wyjmuje legendę z tego
     trybu, więc kreska nad grupą rysuje się w całości, a nagłówek zachowuje
     się jak zwykły blok. */
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
}
.nawigator__ptaszek {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  /* Wysokość celu dotykowego bierze się stąd, a nie z samego pola wyboru,
     które ma 18 px. Klikalna jest cała etykieta. */
  min-height: 2.75rem;
  padding: 0.45rem 0.5rem 0.45rem 0.3rem;
  border-radius: var(--radius-sm);
  line-height: 1.45;
  cursor: pointer;
}
.nawigator__ptaszek:hover { background: var(--accent-soft); }
.nawigator__ptaszek input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--accent);
}
.nawigator__ptaszek:has(input:checked) {
  background: var(--accent-soft);
  font-weight: 500;
}
.nawigator__ptaszek:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(93, 100, 88, 0.18);
}
.nawigator__licznik {
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.nawigator__akcje-krok { margin: var(--space-m) 0 0; }
.nawigator__akcje-krok .btn { width: 100%; text-align: center; }
.nawigator__akcje-krok .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (min-width: 30rem) {
  .nawigator__akcje-krok .btn { width: auto; min-width: 12rem; }
}

/* Które z zaznaczonych rzeczy dana osoba faktycznie robi. To jest cała
   różnica między „zaufaj nam" a „dlatego właśnie ta osoba". */
.nawigator__pasuje {
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.nawigator__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
/* Pastylka z nazwiskiem jest odnośnikiem, więc klikalne ma być całe pole,
   a nie sam napis. Bez tego cel dotyku miał 23 piksele wysokości przy
   pastylce wysokiej na 35, czyli połowę tego, co widać. Wyszło w audycie
   pól dotykowych. */
.nawigator__chipy li:has(a) { padding: 0; }
.nawigator__chipy li > a {
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: inherit;
}
.nawigator__chipy li {
  padding: 0.45rem 0.85rem;
  border-radius: 1.1rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  font-size: max(0.75rem, var(--step--2));
  line-height: 1.5;
}
.nawigator__chipy .nawigator__chip--reszta {
  background: none;
  border-style: dashed;
  color: var(--ink-3);
}
.nawigator__uwaga {
  margin: 0 0 var(--space-s);
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--sand);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.55;
}
.lista-obszary--grupy > li { margin-bottom: var(--space-s); }
.lista-obszary--grupy h3 { margin: 0 0 0.4rem; font-size: var(--step-0); }


/* Obszary pracy na profilu.
   Nazwy grup, nie pojedyncze pozycje. Rozpisane pozycja po pozycji dawały
   u jednej osoby czterdzieści dziewięć wierszy, czyli ekran przewijania,
   który spychał resztę profilu w dół. Szczegóły dalej siedzą w danych
   i pracują w wyszukiwarce specjalisty. */
.obszary__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.obszary__lista li {
  padding: 0.4rem 0.9rem;
  border-radius: 1.6rem;
  background: var(--paper-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--linia, rgba(0, 0, 0, 0.1));
  font-size: var(--step--1);
  line-height: 1.4;
}
/* Pod listą „w czym mogę pomóc”, więc potrzebuje własnego odstępu:
   bez niego pierwsza plakietka kleiła się do ostatniego punktu. */
#pomoc .obszary__lista { margin-top: var(--space-m); }

/* --- Skala od 1 do 5 w narzędziu doboru nurtu ----------------------------
   Pięć przycisków w rzędzie, nie suwak. Suwak na telefonie wymaga
   precyzyjnego przeciągnięcia kciukiem i nie mówi, ile jest stopni,
   a przycisk to jedno dotknięcie i widać wybór. */
.skala { margin: var(--space-m) 0 var(--space-l); }
.skala__konce {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--tekst3, var(--ink-2));
  font-size: var(--step--1);
  margin-bottom: 0.6rem;
}
.skala__konce span:last-child { text-align: right; }
.skala__rzad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.skala__stopien {
  padding: 0.9rem 0;
  border-radius: 10px;
  border: 1px solid var(--linia, rgba(0, 0, 0, 0.14));
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 3rem;
}
.skala__stopien:hover { border-color: var(--accent); }
.skala__stopien--wybrany {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* Opisy nurtów pod kwestionariuszem. Są też treścią dla wyszukiwarek,
   więc stoją w HTML-u, a nie w skrypcie. */
.nurt-karty {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 52rem) {
  .nurt-karty { grid-template-columns: repeat(2, 1fr); }
}
/* Spis nurtów jako lista, na wzór cennika: jedna kolumna, pozycje oddzielone
   kreską, bez ramek wokół każdej. Piętnaście kafli w siatce robiło ścianę
   pudełek, w której nic nie było ważniejsze od reszty. */
.nurt-karty { display: block; }
.nurt-karta {
  padding: var(--space-m) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.nurt-karta:first-child { border-top: 0; padding-top: 0; }
.nurt-karta h3 { margin-top: 0; font-size: var(--step-1); }
/* Karta wyniku w nawigatorze zostaje kartą: tam stoi pojedynczo albo
   w parze i ma się odcinać od tła kwestionariusza. */
.nurt-wynik {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
/* Spis nurtów z boku, ten sam układ co w cenniku: wąska treść, a wolne
   miejsce po lewej zajmuje spis, który jedzie razem ze stroną. */
.nurt-uklad {
  display: grid;
  grid-template-columns: 16rem minmax(0, 46rem);
  gap: var(--space-l);
  justify-content: center;
}
.nurt-karta { scroll-margin-top: 6rem; }
@media (max-width: 62rem) {
  .nurt-uklad { grid-template-columns: 1fr; }
  .nurt-uklad .cennik-spis { display: none; }
}
.nurt-adnotacja {
  margin: var(--space-l) auto 0;
  max-width: 62rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-3);
}
/* Ta sama kreseczka co przy nadtytułach i przy legendzie plakietek. */
.nurt-adnotacja::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--sand);
  vertical-align: middle;
  margin-right: 0.7rem;
}
/* Oddech między nagłówkiem sekcji a pierwszym opisem. Nagłówek ma własny
   margines, ale przy karcie bez ramki wyglądało to, jakby tekst zaczynał
   się tuż pod tytułem. */
#opisy .section__head { margin-bottom: var(--space-l); }
.nurt-wynik h3 { margin-top: 0; }

/* Karta wyniku nurtu. Wcześniej wszystko stało w niej z odstępem 0.4 rema,
   przez co opis, zdanie „Pasuje, gdy”, nazwiska i adnotacja zlewały się
   w jeden blok tekstu. Karta jest tu treścią, a nie kafelkiem w siatce,
   więc dostaje własne, większe odstępy. */
.nurt-wynik {
  gap: 0;
  padding: var(--space-m) clamp(1rem, 0.6rem + 1.2vw, 1.6rem) var(--space-m);
  background: var(--paper);
}
.nurt-wynik h3 { font-size: var(--step-1); line-height: 1.25; }
.nurt-karta__opis {
  margin: var(--space-s) 0 0;
  line-height: 1.7;
  color: var(--ink-2);
}
/* Dymek w dymku: jedyne zdanie mówiące o czytelniku, a nie o nurcie. */
.nurt-pasuje {
  margin-top: var(--space-m);
  padding: 0.85rem 1rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
}
.nurt-pasuje__etykieta {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.nurt-pasuje__tekst {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink);
}
.nurt-karta__kto-etykieta {
  margin: var(--space-m) 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nurt-wynik .nawigator__chipy { margin-top: 0.6rem; gap: 0.45rem; }
.nurt-wynik .nawigator__chipy li { padding: 0.3rem 0.75rem; }

/* Rozbicie wyniku na podskale. Używa tego ITQ, w którym nie ma jednej
   sumy, tylko dwa niezależne nasilenia i osobno spełnienie kryteriów. */
.wynik__sumy {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-m);
  display: grid;
  gap: 0.4rem;
  font-size: var(--step--1);
}

/* --- Karty pracy: arkusz do wypełnienia ----------------------------------
   Pola bez formularza. Nie ma <form>, nie ma action, nie ma przycisku
   wysyłania, więc nie ma czego przechwycić. Wypełniony zapis myśli
   automatycznych to dane o zdrowiu, dokładnie tak samo jak wynik PHQ-9.
   ------------------------------------------------------------------------ */
.arkusz__wstep { color: var(--ink-2); margin-bottom: var(--space-m); }
.arkusz__blok,
.arkusz__kolumna {
  border: 1px solid var(--linia, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  padding: var(--space-m);
  margin: 0 0 var(--space-m);
  min-width: 0;
}
.arkusz__blok legend,
.arkusz__kolumna legend {
  /* Legenda przerywała ramkę i wychodziła poza nią. Ten sam problem
     rozwiązywaliśmy już w ankiecie dla zespołu. */
  float: left;
  width: 100%;
  font-weight: 600;
  font-size: var(--step-0);
  margin-bottom: var(--space-s);
}
.arkusz__blok::after,
.arkusz__kolumna::after { content: ""; display: table; clear: both; }
.arkusz__kolumny { display: grid; gap: var(--space-m); }
/* Blok z samymi krótkimi polami. Bez tego dzienniczek na tydzień
   zajmował pięć kartek. */
@media (min-width: 34rem) {
  .arkusz__blok--zwarty { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-m); }
  .arkusz__blok--zwarty legend { grid-column: 1 / -1; }
}
@media (min-width: 46rem) {
  .arkusz__kolumny { grid-template-columns: 1fr 1fr; }
}
.arkusz__opis { color: var(--ink-2); font-size: var(--step--1); margin: 0 0 var(--space-s); }
.arkusz__pole { margin-bottom: 0.9rem; }
.arkusz__pole label { display: block; font-weight: 600; font-size: var(--step--1); }
.arkusz__pod {
  display: block;
  color: var(--tekst3, var(--ink-2));
  font-size: var(--step--2, 0.85rem);
  margin-bottom: 0.25rem;
}
.arkusz__pole input[type="text"],
.arkusz__pole textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linia, rgba(0, 0, 0, 0.18));
  border-radius: 8px;
  background: var(--white, #fff);
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.5;
  resize: vertical;
}
.arkusz__pole input:focus-visible,
.arkusz__pole textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arkusz__skala { max-width: 12rem; }
/* W kolumnach etykieta każdego wiersza jest tylko dla czytnika ekranu:
   „Co mnie hamuje, wiersz 3” osiem razy pod rząd byłoby na ekranie
   szumem, ale bez tego pole nie ma nazwy i axe słusznie protestuje. */
.arkusz__kolumna .arkusz__pole label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.arkusz__kolumna .arkusz__pole { margin-bottom: 0.5rem; }
.arkusz__akcje { margin-top: var(--space-m); }
.arkusz__uwaga {
  margin-top: var(--space-s);
  color: var(--tekst3, var(--ink-2));
  font-size: var(--step--1);
  line-height: 1.6;
}
.kroki { padding-left: 1.2rem; }
.kroki li { margin-bottom: var(--space-m); }
.kroki h3 { margin: 0 0 0.3rem; font-size: var(--step-0); }
.kroki p { margin: 0; }

/* --- Kolory na kartach pracy ---------------------------------------------
   Karta to cztery sekcje pod sobą i na kremie wszystkie wyglądały tak samo,
   przez co strona czytała się jak jedna długa ściana. Kolor rozdziela je
   na role.

   „Zanim zaczniesz” dostaje terakotowy pasek z boku, bo tam siedzą
   przeciwwskazania i to jest jedyne miejsce na karcie, które może komuś
   zaoszczędzić kłopotu.

   „Jak to zrobić” idzie na śliwkę. To sekcja do czytania, nie do
   wypełniania, więc ciemne tło niczego nie utrudnia, a wyraźnie oddziela
   instrukcję od arkusza.

   Arkusz zostaje jasny i spokojny, bo to w nim się pisze. Tego nie
   ruszamy i nie ma się co bawić kolorem w miejscu, gdzie ktoś ma
   wpisywać myśli automatyczne.

   NA WYDRUKU wszystko wraca do bieli. Ciemne tło na papierze to zjedzony
   toner i gorsza czytelność, a część kart drukuje właśnie sekcję „Jak to
   zrobić”.
   ------------------------------------------------------------------------ */
#uwagi.karta-sekcja--ostrzezenie {
  border-left: 4px solid var(--sand);
}

#jak.karta-sekcja--sliwka {
  background: var(--ink);
  color: rgba(250, 251, 252, 0.86);
}
#jak.karta-sekcja--sliwka h2,
#jak.karta-sekcja--sliwka h3 { color: var(--white); }
#jak.karta-sekcja--sliwka strong { color: var(--white); }
#jak.karta-sekcja--sliwka a { color: var(--white); text-decoration: underline; }
/* Numery kroków. Na śliwce szałwia byłaby nieczytelna, więc terakota,
   która na tym tle daje 5,4:1 i jest jedynym ciepłym akcentem na karcie. */
#jak.karta-sekcja--sliwka .kroki li::marker {
  color: var(--sand);
  font-weight: 600;
}

@media print {
  #jak.karta-sekcja--sliwka {
    background: #fff !important;
    color: #000 !important;
  }
  #jak.karta-sekcja--sliwka h2,
  #jak.karta-sekcja--sliwka h3,
  #jak.karta-sekcja--sliwka strong { color: #000 !important; }
  #jak.karta-sekcja--sliwka .kroki li::marker { color: #000 !important; }
  #uwagi.karta-sekcja--ostrzezenie { border-left: 2px solid #999; }
}

/* Oznaczenie karty pracy na wydruku. Na ekranie logo jest w nagłówku
   strony, więc te bloki są schowane i pokazują się dopiero przy druku. */
.karta-druk__naglowek,
.karta-druk__stopka { display: none; }

/* --- Druk ----------------------------------------------------------------
   Ctrl+P ma dać czystą kartkę A4: sam arkusz, bez menu, stopki, przycisków
   i sekcji z opisem techniki. Kto chce mieć instrukcję na papierze, ma ją
   na ekranie obok. Kto drukuje, chce pustych rubryk.
   ------------------------------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .arkusz__akcje,
  .arkusz__uwaga,
  .cta-band,
  .pricebar,
  .okruszki,
  .hero__actions { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .section { padding: 0 !important; background: #fff !important; }
  .container { max-width: none; padding: 0; }
  .section--cream, .section--deco { background: #fff !important; }
  .section--deco::before, .section--deco::after { display: none !important; }

  /* Sekcje opisowe nie idą na papier. Na kartce ma być arkusz. */
  /* Domyślnie na papier idzie sam arkusz. Karta może to nadpisać
     polem `druk` w danych, i przy TIPP tak właśnie jest: bez opisu
     czterech technik i bez przeciwwskazań ten wydruk byłby bezużyteczny,
     a w drugim przypadku wręcz ryzykowny. */
  #uwagi, #kiedy, #jak, #powiazane, .zrodlo-testu { display: none; }
  #uwagi.do-druku, #kiedy.do-druku, #jak.do-druku { display: block; }
  .do-druku .kroki li { break-inside: avoid; margin-bottom: 0.3cm; }
  .do-druku h2 { margin: 0 0 0.25cm; }

  .hero { padding: 0 0 0.2cm !important; background: #fff !important; }
  .hero h1 { font-size: 16pt; margin: 0; }
  .hero__role, .eyebrow, .hero__portret { display: none; }

  .arkusz__blok, .arkusz__kolumna {
    border: 1px solid #999;
    border-radius: 0;
    padding: 0.35cm;
    margin-bottom: 0.35cm;
    break-inside: avoid;
  }
  .arkusz__kolumny { grid-template-columns: 1fr 1fr; gap: 0.35cm; }
  .arkusz__blok--zwarty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.5cm;
    padding: 0.25cm 0.35cm;
  }
  .arkusz__blok--zwarty legend { grid-column: 1 / -1; margin-bottom: 0.1cm; }
  .arkusz__blok--zwarty .arkusz__pod { display: none; }
  .arkusz__blok--zwarty .arkusz__pole { margin-bottom: 0.15cm; }
  .arkusz__blok--zwarty label { font-size: 9pt; }
  .arkusz__pole input[type="text"],
  .arkusz__pole textarea {
    border: 0;
    border-bottom: 1px solid #bbb;
    border-radius: 0;
    padding: 0 0 0.1cm;
    background: transparent;
  }
  .arkusz__pole textarea {
    border: 1px solid #ddd;
    padding: 0.1cm;
    /* Wysokość ustawiona wprost, bo atrybut rows daje na papierze
       więcej, niż potrzeba, i wypycha blok na kolejną kartkę. */
    height: 1.4cm;
  }
  .arkusz__pole { margin-bottom: 0.28cm; }
  .arkusz .container h2 { margin: 0 0 0.15cm; }
  .arkusz__wstep { margin-bottom: 0.3cm; }
  /* Odręczne pismo potrzebuje około trzech czwartych centymetra na wiersz.
     Domyślna wysokość pola dawała linijki, w które nikt się nie zmieści. */
  .arkusz__kolumna .arkusz__pole input[type="text"] { padding-bottom: 0.5cm; }
  .arkusz__kolumna .arkusz__pole { margin-bottom: 0.15cm; }
  .arkusz__pod { font-size: 8pt; }
  h2 { font-size: 12pt; }
  /* Karta wychodzi z drukarki i zaczyna żyć własnym życiem: leży na
     biurku, trafia do teczki, ktoś ją komuś podaje. Ma być podpisana. */
  .karta-druk__naglowek {
    display: flex;
    align-items: center;
    gap: 0.5cm;
    margin-bottom: 0.35cm;
    padding-bottom: 0.2cm;
    border-bottom: 1px solid #ccc;
  }
  .karta-druk__naglowek img { width: 3.4cm; height: auto; }
  .karta-druk__naglowek p { margin: 0; font-size: 8.5pt; color: #555; }

  /* Fixed, bo przy druku Chrome powtarza takie elementy na każdej
     stronie. Zapis myśli drukuje się na trzech kartkach i każda ma być
     podpisana, nie tylko pierwsza. */
  .karta-druk__stopka {
    display: flex;
    justify-content: space-between;
    gap: 0.5cm;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0.15cm;
    border-top: 1px solid #ddd;
    font-size: 7.5pt;
    color: #666;
  }

  /* Miejsce na powtarzaną stopkę, żeby nie weszła w treść. */
  @page { size: A4; margin: 1.2cm 1.2cm 1.6cm; }
}



/* =========================================================================
   21. KARTY ZESPOŁU W UKŁADZIE KART SPECJALISTÓW
   -------------------------------------------------------------------------
   Portrety w kołach, z podpisem do lewej, wyglądały dobrze dopóki pod
   nazwiskiem stał sam opis. Po dołożeniu plakietek „w szkoleniu” siatka
   rozjechała się: plakietki pływały na różnych wysokościach, bo opisy mają
   różną długość, a przy dwóch plakietkach karta wyglądała jak zlepek.

   Strony ofertowe rozwiązały to samo zadanie wcześniej i dobrze: kafel
   z ramką, kwadratowe zdjęcie, wszystko wyśrodkowane. Przenosimy ten układ
   na stronę główną, zamiast wymyślać drugi.
   ------------------------------------------------------------------------- */
.team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-m) var(--space-l);
  text-align: center;
}
.team-card:hover { border-color: var(--accent-soft); }
.team-card img {
  aspect-ratio: 1;
  object-fit: cover;
  /* Kwadrat z zaokrągleniem, nie koło. Koło zjadało ramiona i przy zdjęciach
     kadrowanych ciaśniej ucinało czubek głowy. */
  border-radius: var(--radius);
  margin-bottom: var(--space-m);
}
.team-card__role {
  color: var(--ink-2);
  margin-bottom: 0;
}
/* Plakietka idzie tuż pod rolą, a nie na dno karty. Wersja z `margin-top:
   auto` wyrównywała plakietki w rzędzie, ale przy krótkiej roli zostawiała
   między nią a plakietką pustkę na pół karty i wyglądało to na błąd. */
.team-card .znacznik--maly { margin-top: 0.9rem; }
.team-card { padding-bottom: var(--space-m); }


/* =========================================================================
   22. CENNIK: SPIS Z BOKU, TREŚĆ W JEDNEJ KOLUMNIE
   -------------------------------------------------------------------------
   Poprzednio karty stały w siatce, która sama dobierała liczbę kolumn.
   Karty mają skrajnie różną wysokość, więc obok krótkiej seksuologii
   zostawała dziura na pół ekranu, a całość rozłaziła się na szerokość okna.

   Teraz treść ma stałą szerokość, a wolne miejsce po lewej zajmuje spis,
   który jedzie razem ze stroną. Szeroki ekran jest wykorzystany, ale nic
   nie jest rozciągnięte.
   ------------------------------------------------------------------------- */
.cennik-uklad {
  display: grid;
  grid-template-columns: 16rem minmax(0, 46rem);
  gap: var(--space-l);
  justify-content: center;
  /* Bez `align-items: start`. Kolumna ze spisem musi być wysoka na całą
     siatkę, inaczej `position: sticky` nie ma po czym jechać: element
     przykleja się tylko w obrębie swojego rodzica, a rodzic wyrównany
     do góry jest wysoki dokładnie tyle, co sam spis. */
}
.cennik-tresc > .cennik-karta + .cennik-karta { margin-top: var(--space-m); }
/* Nagłówek strony jest przyklejony, więc kotwica bez zapasu chowałaby
   początek karty pod nim. */
.cennik-karta, .price-row--diagnoza { scroll-margin-top: 6rem; }

.cennik-spis { font-size: var(--step--1); }
.cennik-spis__srodek { position: sticky; top: 5.5rem; }
.cennik-spis__tytul {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}
.cennik-spis ul { list-style: none; margin: 0; padding: 0; }
.cennik-spis a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
}
.cennik-spis a:hover, .cennik-spis a:focus-visible {
  border-left-color: var(--accent);
  color: var(--accent-dark);
  background: var(--white);
}
.cennik-spis ul ul a {
  padding-left: 1.6rem;
  font-size: var(--step--2);
  color: var(--ink-3);
}
@media (max-width: 62rem) {
  .cennik-uklad { grid-template-columns: 1fr; }
  /* Na telefonie spis nad treścią byłby ekranem do przewinięcia, zanim
     zobaczy się pierwszą cenę. Zostaje sama treść. */
  .cennik-spis { display: none; }
}

/* Zwijane wyjaśnienia w karcie. Działają bez JavaScriptu, a przy druku
   otwierają się wszystkie, żeby wydruk cennika był kompletny. */
.cennik-zwin {
  margin-top: var(--space-m);
  border-top: 1px solid currentColor;
}
.cennik-zwin > summary {
  cursor: pointer;
  padding: 0.85rem 0 0.35rem;
  font-weight: 600;
  font-size: var(--step--1);
  list-style: none;
}
.cennik-zwin > summary::-webkit-details-marker { display: none; }
.cennik-zwin > summary::before { content: "▸"; display: inline-block; width: 1.3em; }
.cennik-zwin[open] > summary::before { content: "▾"; }
.cennik-zwin[open] { padding-bottom: var(--space-s); }
@media print { .cennik-zwin > div, .cennik-zwin > p { display: block !important; } }

/* Diagnoza to wiersz cennika, tylko z mocniejszą nazwą, bo to ona jest
   tym, czego człowiek szuka na tej stronie. */
.price-row--diagnoza .price-row__name { font-weight: 600; }


/* Metody pogrupowane po trudności. Każda grupa to jedna kolorowa płyta,
   a w środku same metody, na własnym jasnym tle. Ta sama zasada co przy
   sekcjach: kolor dotyczy płyty, nie tego, co w niej stoi. */
.metody-siatka { display: grid; gap: var(--space-m); }
.metody-grupa {
  padding: var(--space-l) clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
  border-radius: var(--radius-lg);
}
.metody-grupa--szalwia { background: var(--accent); }
.metody-grupa--sliwka { background: var(--ink); }
.metody-grupa__tytul {
  font-size: var(--step-1);
  color: var(--white);
  margin-bottom: var(--space-m);
}
.metoda {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.metoda + .metoda { margin-top: var(--space-s); }
.metoda h3 { font-size: var(--step-0); margin-bottom: 0.4rem; color: var(--ink); }
.metoda p { color: var(--ink-2); margin: 0; max-width: 62ch; }
.metoda__kto {
  margin-top: var(--space-s) !important;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

/* Pastylki metod w cenniku są odnośnikami. Na ciemnych kartach dziedziczą
   kolor karty, więc nie trzeba ich malować osobno. */
.cennik-metody a { color: inherit; text-decoration: none; }
.cennik-metody a:hover { text-decoration: underline; }


/* Pas z numerami kryzysowymi pod nagłówkiem strony. Ma być widoczny od razu
   i wyraźnie inny od reszty, ale bez krzyku: to nie jest ostrzeżenie
   o błędzie, tylko informacja dla kogoś, kto może jej właśnie potrzebować.
   Sekcja ma minimalne odstępy, żeby nie odsuwała treści strony. */
.sekcja-kryzys { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.pas-kryzys {
  margin: 0;
  padding: var(--space-m) clamp(1.1rem, 0.6rem + 1.6vw, 1.8rem);
  /* Śliwka, nie biel. Ten pas ma być widoczny od razu, a jasna ramka na
     kremowym tle wtapiała się w stronę. */
  background: var(--ink);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--paper-3);
  max-width: none;
}
.pas-kryzys strong { color: var(--white); }
/* Numery muszą być widoczne na ciemnym tle. To ta sama pułapka co przy
   przyciskach na śliwce: domyślny kolor odnośnika jest liczony pod jasne
   tło i na ciemnym prawie znika. */
.pas-kryzys a {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
  text-decoration-color: rgba(251, 247, 242, 0.5);
}
.pas-kryzys a:hover { text-decoration-color: var(--white); }


/* Wybór obszaru w nawigatorze nurtów. Pierwsze pytanie nie jest skalą, tylko
   trzema możliwościami, więc dostaje przyciski na całą szerokość, jeden pod
   drugim. Na telefonie to jest jedno dotknięcie bez celowania. */
.nawigator__wybory {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--space-m);
}
.nawigator__wybor {
  font: inherit;
  text-align: left;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
  transition: border-color var(--transition), background var(--transition);
}
.nawigator__wybor:hover, .nawigator__wybor:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.nawigator__wybor--wybrany {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}


/* Przypisy źródłowe pod artykułem pozycjonującym.
   Odnośnik w tekście jest indeksem górnym, więc sam w sobie miałby
   mikroskopijny cel dotyku. Wypełnienie i ujemny margines dokładają mu
   pola do klikania, nie ruszając wysokości wiersza. */
.odnosnik-zrodla {
  padding: 0.35rem 0.3rem;
  margin: -0.35rem -0.1rem;
  text-decoration: none;
  color: var(--accent-dark);
  font-weight: 600;
}
.odnosnik-zrodla:hover { text-decoration: underline; }
.artykul-zrodla__tytul {
  margin-top: var(--space-l);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.artykul-zrodla {
  margin-top: var(--space-s);
  padding-left: 1.2rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.artykul-zrodla li + li { margin-top: 0.6rem; }
.artykul-zrodla a { word-break: break-word; }
.zrodlo-wroc { text-decoration: none; padding: 0 0.3rem; }


/* Odnośnik do opinii jest na końcu przypisu, więc działa jak przycisk.
   Sam napis miał 23 piksele wysokości, co na telefonie jest za mało. */
.quotes__note a {
  display: inline-block;
  padding: 0.5rem 0;
  margin: -0.5rem 0;
}


/* Komunikat nad wynikiem nawigatorów. Kierunkowskaz dla osoby, która ma już
   postawione rozpoznanie: przy niej wybór nurtu jest mniej ważny niż
   trafienie do kogoś, kto prowadzi protokół. Śliwka, bo ma być widoczny od
   razu, tak samo jak pas z numerami kryzysowymi. */
.nawigator__alert {
  margin: 0 0 var(--space-l);
  padding: clamp(1.3rem, 0.8rem + 1.8vw, 2rem);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: var(--paper-3);
  font-size: var(--step--1);
  line-height: 1.7;
}
.nawigator__alert-tytul {
  margin: 0 0 0.6rem;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--white);
  max-width: none;
}
.nawigator__alert-tekst { margin: 0; max-width: none; }

/* Nazwisko w osobnej linii, metody pod spodem. Przy dwóch metodach jedna
   linia robiła się ciągiem przecinków i nie dało się odczytać, gdzie
   kończy się nazwisko. */
.nawigator__alert-osoby {
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}
.nawigator__alert-osoby li {
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.nawigator__alert-osoby li:last-child { padding-bottom: 0; }
.nawigator__alert-imie {
  display: block;
  color: var(--white);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.nawigator__alert-imie:hover { color: var(--paper-3); }
.nawigator__alert-metody {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  opacity: 0.82;
}
.nawigator__alert-stopka {
  margin: var(--space-m) 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--step--2);
  opacity: 0.8;
  max-width: none;
}


/* Wyrównanie rzędów w kartach wyniku doboru specjalisty.
   Rola jednej osoby ma trzy linie, drugiej jedną, więc plakietka „w szkoleniu",
   etykieta i dymki lądowały na trzech różnych wysokościach. Rzędy definiuje
   siatka, karta je dziedziczy przez subgrid. Karta ma zawsze pięć dzieci:
   nazwisko, rola, plakietki, treść, przycisk, także gdy plakietek nie ma.
   Bez obsługi subgrida karta zostaje flexem i wygląda jak wcześniej. */
.nawigator__karta-znaczniki,
.nawigator__karta-tresc {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48rem) {
    .nawigator__wyniki--osoby { grid-template-rows: auto auto auto 1fr auto; }
    .nawigator__wyniki--osoby .nawigator__karta {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
    /* W subgridzie wysokość rzędu ustala siatka, więc dociskanie przyciskiem
       przestaje być potrzebne i tylko psuje odstęp. */
    .nawigator__wyniki--osoby .nawigator__akcje { margin: 0; align-self: end; }
  }
}