/* ============================================================================
   KOMPONENTY — przyciski, karty, listy, kontakt.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Przyciski
   ---------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: #fff;
  --btn-br: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-br);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-fast) var(--e-out);
}

.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
  transform: none;
}

.btn--primary:hover {
  --btn-bg: var(--c-accent-strong);
  box-shadow: var(--sh-md);
}

.btn--ghost {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-ink);
  --btn-br: var(--s-line-strong);
}
.btn--ghost:hover {
  --btn-br: var(--c-accent);
  --btn-fg: var(--c-accent-strong);
  background: var(--c-accent-tint);
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-soft);
  --btn-br: transparent;
}
.btn--quiet:hover {
  --btn-fg: var(--c-accent-strong);
  background: var(--c-accent-tint);
}

.nav .btn--primary {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-dark);
}
.nav .btn--primary:hover {
  --btn-bg: #c9a23f;
  box-shadow: 0 8px 22px -10px rgba(176, 141, 51, 0.7);
}

/* 2.75rem = 44 px. Ten wariant nosi „Umów wizytę" w pasku nawigacji, czyli
   najważniejszy przycisk na stronie — 40 px i pismo 11,6 px było za mało
   zarówno na palec, jak i na czytelność. */
.btn--sm {
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  font-size: var(--t-sm);
}

.btn--block {
  width: 100%;
}

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

/* ----------------------------------------------------------------------------
   Karta
   Biała powierzchnia z cienką linią. Cień jest minimalny — arkusz leży
   na blacie, nie unosi się nad nim.
   ---------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  transition:
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}

.card--interactive:hover {
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   O mnie
   ---------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-7), 5vw, var(--sp-10));
  align-items: start;
}

.principles {
  display: grid;
  gap: var(--sp-4);
}

.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  align-items: start;
}

.principle__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-accent-tint);
  color: var(--c-accent-strong);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
}

.principle h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--t-md);
}
.principle p {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ----------------------------------------------------------------------------
   Obszary pracy
   ---------------------------------------------------------------------------- */
/* Ten sam zabezpieczający wzorzec co w `.courses`. Tu 17rem = 272 px mieści się
   przy 320 px w 280 px pola — z zapasem 8 px. Każde zwiększenie marginesu albo
   obramowania wypchnęłoby karty poza ekran; `min()` zdejmuje to ryzyko. */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-4);
}

/* Wariant dla czterech kart („Metody, którymi leczę"): sztywne 2 × 2 zamiast
   `auto-fit`, który przy szerokim oknie rozkładał je na jeden rząd po cztery,
   a na średnim zostawiał trzy w pierwszym rzędzie i sierotę w drugim.
   `minmax(0, 1fr)` zamiast `1fr`, bo domyślne `min-width: auto` nie pozwala
   kolumnie zejść poniżej najdłuższego słowa. Karty rozciągają się na wysokość
   rzędu (domyślne `stretch`), więc para w rzędzie ma równą wysokość i całość
   czyta się jak jeden moduł. */
.areas--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .areas--pair {
    grid-template-columns: 1fr;
  }
}

.area {
  padding: var(--sp-6);
}
/* Ikony to rysunki anatomiczne (zieleń + złoto), a nie jednobarwne piktogramy,
   więc nie ma tu kremowego kafelka ani `color` - obrazek niesie własne barwy
   i stoi wprost na białej karcie. Pole jest większe niż przy piktogramach:
   przy 44 px żyłki ścięgna i kręgi zlewały się w plamę. */
.area__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--sp-4);
}
.area__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.area h3 {
  margin-bottom: var(--sp-3);
  font-size: var(--t-md);
}
.area p {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   Przebieg wizyty — oś zabiegu
   ---------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 0;
}

/* Numer stoi w osi pionowej całego kroku, nie przy jego pierwszej linijce:
   przy `start` kółko lądowało obok etykiety („WYWIAD"), a reszta opisu
   ciągnęła się kilkadziesiąt pikseli niżej i oś kroków wyglądała na przesuniętą
   w górę. `center` wiąże numer z blokiem tekstu jako całością. */
.step {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  align-items: center;
}
.step + .step {
  border-top: 1px solid var(--s-line);
}

.step__marker {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--c-accent-line);
  border-radius: 50%;
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-accent-strong);
}

.step__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.step h3 {
  margin-bottom: var(--sp-3);
}
.step p {
  font-size: var(--t-sm);
  color: var(--c-muted);
  max-width: 52ch;
}
/* Reset zeruje marginesy akapitów, więc drugi akapit w kroku sklejałby się
   z pierwszym w jeden blok tekstu. */
.step p + p {
  margin-top: var(--sp-3);
}

@media (max-width: 620px) {
  .step {
    grid-template-columns: 2.75rem 1fr;
    gap: var(--sp-4);
  }
  .step__marker {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--t-sm);
  }
}

/* ----------------------------------------------------------------------------
   Metody — etykiety kartoteki

   Lista, nie chmura znaczników. Wcześniej to były obramowane kafelki układane
   `flex-wrap`-em, więc każdy miał szerokość swojego napisu: na telefonie
   dziewięć pudełek schodziło po ekranie schodkami, raz jedno w rzędzie, raz
   dwa, z poszarpaną prawą krawędzią. Siatka o równych kolumnach ustawia je
   w jedną oś — jedna kolumna na telefonie, dwie lub trzy na szerokim ekranie —
   a zamiast ramek zostaje włoskowata linia i złota kropka. Mniej kresek na
   ekranie, a czyta się jak spis, którym to jest.
   ---------------------------------------------------------------------------- */
.tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--sp-6);
}

.tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--s-line);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--c-ink-soft);
  transition: color var(--d-base) var(--e-out);
}

/* Kropka zamiast lewej krawędzi kafelka: ten sam złoty akcent, ale niesie go
   znacznik pozycji, a nie ramka wokół napisu. */
.tag::before {
  content: '';
  flex: none;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--c-accent);
}

/* Tylko tam, gdzie kursor naprawdę istnieje. Na ekranie dotykowym `:hover`
   zostaje na ostatnio dotkniętym elemencie i wygląda jak zaznaczenie —
   na zrzucie z telefonu jedna etykieta świeciła się bez powodu. */
@media (hover: hover) {
  .tag:hover {
    color: var(--c-ink);
  }
}

/* ----------------------------------------------------------------------------
   Kwalifikacje
   ---------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  margin-block: var(--sp-8);
  background: var(--s-line);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stat {
  padding: var(--sp-6);
  background: var(--c-surface);
}
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-accent-strong);
}
.stat__l {
  margin-top: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* `min(23rem, 100%)` zamiast gołego `23rem`.
   `minmax(23rem, 1fr)` to twarde 368 px, którego ścieżka nie potrafi zejść
   poniżej szerokości kontenera — przy 320 px wiersz miał 368 px w polu 280 px,
   a `overflow-x: clip` na `body` NIE przewijał nadmiaru, tylko go ucinał.
   Znikała prawa kolumna z godzinami kursów.
   `min()` pozwala ścieżce zwinąć się do kontenera i wtedy układ przechodzi
   na jedną kolumnę, tak jak powinien. */
.courses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  gap: 0 var(--sp-9);
}

.course {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--s-line);
  font-size: var(--t-sm);
}
.course__h {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-accent-strong);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Cennik — cztery karty usług

   Siatka jest twardo dwukolumnowa, a nie `auto-fit`: przy czterech kartach
   `auto-fit` rozkładał je na trzy kolumny i jedną sierotę w drugim rzędzie.
   `minmax(0, 1fr)` zamiast `1fr` dlatego, że domyślne `min-width: auto`
   nie pozwala kolumnie zejść poniżej najdłuższego słowa i przy wąskim oknie
   wypycha kartę poza kontener.
   ---------------------------------------------------------------------------- */
.prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.price {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.price__name {
  font-size: var(--t-md);
}

/* Cena i czas w jednej linii bazowej: kwota jest tym, czego szuka oko,
   czas trwania stoi obok jako uzupełnienie, nie jako druga równorzędna dana. */
.price__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.price__amount {
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-accent-strong);
}
.price__time {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.price__desc {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

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

/* ----------------------------------------------------------------------------
   Przygotowanie do wizyty
   ---------------------------------------------------------------------------- */
.checklist {
  padding: var(--sp-7);
}
.checklist li {
  position: relative;
  padding-left: var(--sp-8);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}
.checklist li + li {
  margin-top: var(--sp-5);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--c-vital-tint);
}
.checklist li::after {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.42em;
  width: 0.42rem;
  height: 0.7rem;
  border: solid var(--c-vital);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

/* ----------------------------------------------------------------------------
   Kontakt
   ---------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--s-line);
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.contact__main {
  padding: clamp(var(--sp-7), 4vw, var(--sp-9));
  background: var(--c-surface);
}

.contact__aside {
  padding: clamp(var(--sp-7), 4vw, var(--sp-9));
  background: var(--c-accent-tint);
}

/* Numer z kierunkowym („+48 782 520 612") ma o cztery znaki więcej niż sam
   numer krajowy, a poprzedni wzór skalował się w niemal dokładnie tym samym
   tempie co szerokość kolumny — na części szerokości ekranu (ok. 800–950 px,
   gdzie `.contact` ma już dwie kolumny, ale są jeszcze wąskie) tekst i
   kontener miały dosłownie tę samą szerokość co do piksela, więc drobna
   różnica w renderowaniu fontu między urządzeniami przechylała to na
   „za ciasno" i numer łamał się w połowie. Niższy pułap i wolniejszy
   przyrost zostawiają realny zapas, nie tylko na papierze w DevTools. */
.contact__phone {
  display: inline-block;
  margin-block: var(--sp-4) var(--sp-6);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  color: var(--c-accent-strong);
  transition: color var(--d-base) var(--e-out);
}
.contact__phone:hover {
  color: var(--c-accent);
}

.contact__row + .contact__row {
  margin-top: var(--sp-5);
}
.contact__label {
  margin-bottom: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact__value {
  font-size: var(--t-sm);
  color: var(--c-ink);
}
.contact__value a:hover {
  color: var(--c-accent);
}

/* Adres e-mail to jedno długie słowo bez miejsc na złamanie. Przy 320 px
   wypychał `.contact__main` o 15 px poza ekran, a przy powiększonej czcionce
   systemowej o ponad 100 px — i `.contact` z `overflow: hidden` po prostu go
   przycinał. `anywhere` pozwala złamać go w dowolnym miejscu, ale dopiero
   gdy nie ma innego wyjścia. */
.contact__value a[href^='mailto:'],
.footer__col a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

/* Cel dotykowy linków kontaktowych. Sam tekst dawał 17 px wysokości — dotyczyło
   to też numeru telefonu w stopce. Wyściółka w pionie nie zmienia wyglądu
   napisu, a podwaja obszar kliknięcia. */
.contact__value a,
.footer__col li a {
  display: inline-block;
  padding-block: 0.85rem;
}

@media (max-width: 800px) {
  .contact {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------------
   Komunikaty
   ---------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--s-line-strong);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--t-sm);
  animation: toast-in var(--d-slow) var(--e-out);
}
.toast--error {
  border-left-color: var(--c-error);
}
.toast--ok {
  border-left-color: var(--c-vital);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}