/*!
 * Centrum 3C - arkusz zbiorczy.
 * PLIK GENEROWANY. Nie edytuj recznie - zmiany wprowadzaj w assets/css/**
 * i uruchom: node tools/build-css.mjs
 */

/* === base/tokens.css === */
/* ============================================================
   Tokeny projektu - Centrum Rozwojowe Gliwice
   Zrodlo: Claude Design, kierunek 1a "Spokojny i przestronny".
   Kontrasty policzone wg WCAG 2.x - wartosci w komentarzach.

   ZASADA: zero zahardkodowanych hexow poza tym plikiem.
   Cztery kolory marki (#005461, #0C7779, #249E94, #3BC1A8) sa
   zatwierdzone przez klienta i NIE WOLNO ich zmieniac.
   ============================================================ */

:root {
  /* Strona jest jasna. "light dark" mowilo przegladarce, ze mamy natywny
     tryb ciemny - nie mamy (ciemne sa tylko sekcje z data-motyw), wiec
     Chromium/Arc przy ciemnym systemie potrafil odwracac kolory po swojemu
     i np. gasic tekst przyciskow na hoverze. */
  color-scheme: light;

  /* --- Powierzchnie --- */
  --color-bg: #F2F7F6;
  --color-surface: #FBFDFC;
  --color-surface-sunken: #E7F0EE;

  /* --- Tekst --- */
  --color-text: #12333A;          /* 12,44:1 na --color-bg - AAA */
  --color-text-muted: #4A6A6C;    /*  5,44:1 na --color-bg - AA  */
  --color-text-on-brand: #F2F7F6;
  --color-text-on-accent: #F5FAF8;

  /* --- Marka i akcja --- */
  --color-brand: #005461;         /*  7,95:1 na --color-bg - AAA. Naglowki, ikony, hover linkow */
  --color-accent: #0C7779;        /*  CTA. Jasny tekst na nim: 5,07:1 - AA */
  --color-accent-hover: #0A686A;
  --color-accent-active: #084F51;
  --color-accent-soft: #DFF3ED;   /* tlo w hue mienty, pod pastylki terminow */
  --color-accent-text: #0A5F55;   /*  6,98:1 na --color-bg - AA. Tekst w hue mienty */
  --color-ui: #249E94;            /*  3,04:1 - TYLKO elementy UI i tekst >= 24 px */
  --color-mint: #3BC1A8;          /*  NIGDY jako tekst na jasnym tle (2,1:1). Tlo i akcent */

  /* --- Obramowania --- */
  --color-border: #D5E2E0;
  --color-border-strong: #A9C4C1;

  /* --- Stany. Swiadomie odsuniete od teal, zeby nie znikaly w palecie --- */
  --color-success: #4E7635;       /* oliwkowa zielen - zwykla #22C55E jest sasiadem mienty */
  --color-warning: #8A5A0F;
  --color-error: #B23E36;
  --color-info: #3E639E;          /* stalowy blekit, nie turkus */

  /* --- Typografia --- */
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-h1: 44px;   --lh-h1: 1.15;  --ls-h1: -0.01em;
  --text-h2: 32px;   --lh-h2: 1.2;
  --text-h3: 24px;   --lh-h3: 1.3;
  --text-lead: 19px; --lh-lead: 1.6;
  --text-body: 17px; --lh-body: 1.65;
  --text-ui: 15px;   --lh-ui: 1.4;
  --text-caption: 13px; --lh-caption: 1.45; --ls-caption: 0.02em;

  --measure: 66ch;          /* maks. szerokosc kolumny tekstu */
  --measure-display: 15ch;  /* maks. szerokosc naglowka H1 - w znakach, nie px,
                               dzieki czemu lamanie jest stabilne przy kazdej skali */

  /* --- Szerokosci ukladu --- */
  --kontener: 1440px;       /* glowna szerokosc strony */
  --kontener-waski: 880px;  /* widoki czytelnicze: wpis, podstrona, regulaminy */
  --marginesy: var(--space-5);

  /* --- Rytm --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 40px;  --space-8: 48px;  --space-9: 64px;
  --space-10: 80px; --space-11: 96px; --space-12: 128px;

  /* --- Ksztalt --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 84, 97, .08);
  --shadow-md: 0 6px 24px rgba(0, 84, 97, .12);
}

/* ============================================================
   Wariant ciemny.
   W ciemnym to mieta #3BC1A8 przejmuje role CTA - ma tu 7,20:1 (AAA),
   czyli wiecej niz jakikolwiek teal na bieli.
   ============================================================ */

:root[data-theme="dark"],
[data-motyw="dark"] {
  color-scheme: dark;
  --color-bg: #0E2429;
  --color-surface: #143036;
  --color-surface-sunken: #0A1B1F;

  --color-text: #E4EFEC;          /* 13,70:1 - AAA */
  --color-text-muted: #9CB8B4;    /*  7,62:1 - AAA */
  --color-text-on-brand: #0E2429;
  --color-text-on-accent: #0E2429; /* 7,20:1 na miencie - AAA */

  --color-brand: #7FD4C4;
  --color-accent: #3BC1A8;        /* 7,20:1 - AAA */
  --color-accent-hover: #5BD0BA;
  --color-accent-active: #2FA890;
  --color-accent-soft: #16403E;
  --color-accent-text: #3BC1A8;

  --color-border: #24464C;
  --color-border-strong: #3A5F64;

  --color-success: #9CCB7C;
  --color-warning: #E2B368;
  --color-error: #EE9C93;
  --color-info: #9DB8E8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .5);
}

/* === base/fonts.css === */
/* Fonty self-hosted - kierunek 1a "Spokojny i przestronny".
   Pliki zmienne (variable): jeden plik obsluguje caly zakres wag.
   Podzbiory latin + latin-ext. latin-ext jest OBOWIAZKOWY - zawiera
   polskie diakrytyki (a-ogonek, c-kreska, e-ogonek, l-kreska, n-kreska,
   s-kreska, z-kreska, z-kropka). Bez niego "Zazolc gesla jazn" sie rozjedzie.
   Obecnosc wszystkich polskich znakow zweryfikowana przez fontTools.

   UWAGA: sciezki sa wzgledne wobec assets/css/app.css - pliku sklejanego przez
   tools/build-css.mjs, a NIE wobec tego pliku. Nie zmieniaj ich na ../../fonts/. */

/* --- Literata (display) --- */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Source Sans 3 (body) --- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === base/reset.css === */
/* Reset - minimalny, nie normalize. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body,
h1, h2, h3, h4,
p, figure, blockquote,
dl, dd, ol, ul {
  margin: 0;
}

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

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

img { height: auto; }

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

button { cursor: pointer; }

a { color: inherit; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* Element decyzyjny nie moze skakac przy hover - patrz DESIGN-DNA, sekcja Motion. */
@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;
  }
}

/* === base/typography.css === */
/* Skala typograficzna - kierunek 1a. Wszystko przez tokeny z tokens.css. */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ZERO domyslnych marginesow na naglowkach i akapitach.
   Powod: margines elementu przecieka do komponentow flex/grid - pudelko
   robi sie wyzsze niz tekst i align-items: center przesuwa tresc w pionie
   (tak wlasnie godziny w pasku gornym siedzialy 8 px za wysoko).
   Odstepy naleza do ukladow (gap) i do prozy (.proza > * + *). */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-brand);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: 500;
  max-width: var(--measure-display);
}

h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 500; }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 600; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-muted);
}

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-brand); }

/* Focus widoczny na kazdym elemencie interaktywnym - wymog WCAG. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skala na mobile - H1 nie moze rozsadzac ekranu. */
@media (max-width: 640px) {
  :root {
    --text-h1: 32px;
    --text-h2: 26px;
    --text-h3: 21px;
    --text-lead: 17px;
    --text-body: 16px;
  }
}

/* === base/utilities.css === */
/* Uklad, pomocniki, elementy wspolne. */

/* Kontener 1440 px wysrodkowany. Tresc rozciaga sie do pelnej szerokosci,
   ale kolumny tekstu pilnuje --measure - 1440 px ciaglego akapitu jest
   nieczytelne, wiec szerokosc dostaje uklad, a nie proza. */
.kontener {
  width: 100%;
  max-width: var(--kontener);
  margin-inline: auto;
  padding-inline: var(--marginesy);
}

.kontener--waski { max-width: var(--kontener-waski); }

@media (min-width: 768px) {
  :root { --marginesy: var(--space-7); }
}

@media (min-width: 1200px) {
  :root { --marginesy: var(--space-9); }
}

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

@media (min-width: 1024px) {
  .sekcja { padding-block: var(--space-12); }
}

/* Sekcje na ciemnym tle same nosza swoje tlo i kolor tekstu. */
[data-motyw="dark"] {
  background: var(--color-bg);
  color: var(--color-text);
}

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

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-link:focus-visible { transform: translateY(0); }

.nadtytul {
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

/* Wariant ze znacznikiem - krotka kreska przed tekstem. Drobiazg, ale
   porzadkuje start sekcji i nawiazuje do kreski w logo pod slowem CENTRUM. */
.nadtytul--znacznik {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nadtytul--znacznik::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-mint);
  flex: none;
}

.naglowek-sekcji {
  max-width: 44ch;
  margin-bottom: var(--space-8);
}

.naglowek-sekcji--rzad {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  justify-content: space-between;
}

.naglowek-sekcji__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* Tresc redakcyjna z edytora. */
.proza {
  max-width: var(--measure);
}

.proza > * + * { margin-top: var(--space-4); }
.proza h2 { margin-top: var(--space-8); }
.proza h3 { margin-top: var(--space-6); }

.proza ul,
.proza ol {
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.proza li::marker { color: var(--color-ui); }

.proza a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.cytat {
  margin-block: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-mint);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-brand);
}

.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms, color 200ms;
}

.link-strzalka .icon {
  width: 18px;
  height: 18px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-strzalka:hover { border-color: currentColor; }
.link-strzalka:hover .icon { transform: translateX(4px); }

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.plakietka {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

.lista-ptaszki {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.lista-ptaszki li,
.rezerwacja__zalety li,
.sciezka__lista li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.lista-ptaszki .icon,
.rezerwacja__zalety .icon,
.sciezka__lista .icon {
  color: var(--color-ui);
  margin-top: 3px;
}

.tagi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tagi li a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-caption);
  text-decoration: none;
}

/* Stronicowanie */
.pagination {
  margin-top: var(--space-9);
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 200ms, background 200ms;
}

.page-numbers:hover { border-color: var(--color-border-strong); }

.page-numbers.current {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

/* === components/cookies.css === */
/* Baner i panel zgod na pliki cookies. */

/* Oba komponenty maja wlasny `display`, ktory bije regule UA `[hidden]{display:none}`.
   Bez tej pary regul modal stalby otwarty na kazdym wejsciu. */
.cookies[hidden],
.cookies-panel[hidden] { display: none; }

.cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-4);
  /* Pasek u dolu, nie zaslona: dokument prawny ma dac sie przeczytac
     zanim ktos zdecyduje. Zgoda pod przymusem nie jest zgoda. */
  animation: cookies-wjazd 320ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cookies-wjazd {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cookies { animation: none; }
}

.cookies__pasek {
  max-width: var(--kontener);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .cookies__pasek {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-5) var(--space-6);
  }
}

.cookies__tytul {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.cookies__opis {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 68ch;
}

.cookies__opis a { color: var(--color-accent-text); }

.cookies__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Trzecia opcja jest linkiem, nie przyciskiem: "Ustawienia" nie moze wygladac
   rownie zachecajaco jak decyzja, ktora konczy sprawe - ale musi byc widoczna
   i osiagalna z klawiatury tak samo latwo. */
.cookies__link {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--space-2) var(--space-1);
  font: inherit;
  font-size: 15px;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookies__link:hover { color: var(--color-brand); }

/* --- Panel ustawien --- */
.cookies-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.cookies-panel__tlo {
  position: absolute;
  inset: 0;
  background: rgba(0, 34, 39, .55);
}

.cookies-panel__okno {
  position: relative;
  width: min(100%, 620px);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.cookies-panel__naglowek,
.cookies-panel__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
}

.cookies-panel__naglowek {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.cookies-panel__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-brand);
}

.cookies-panel__zamknij {
  appearance: none;
  border: 0;
  background: none;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.cookies-panel__zamknij:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.cookies-panel__tresc {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
}

.cookies-panel__wstep {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.cookies-panel__stopka {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.cookies-kategoria {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cookies-kategoria:last-child { border-bottom: 0; }

.cookies-kategoria__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cookies-kategoria__etykieta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  min-height: 44px;
}

.cookies-kategoria__etykieta input { width: 18px; height: 18px; accent-color: var(--color-accent); }

.cookies-kategoria__etykieta input:disabled { cursor: not-allowed; }

.cookies-kategoria__zawsze {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cookies-kategoria__opis {
  margin-top: var(--space-1);
  font-size: 14.5px;
  color: var(--color-text-muted);
  max-width: 62ch;
}

body.cookies-otwarte { overflow: hidden; }

/* --- Link w stopce --- */
.stopka__cookies {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  color: inherit;
  opacity: .82;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.stopka__cookies:hover { opacity: 1; }

/* Baner i sticky CTA celuja w ten sam rog ekranu. Dopoki trwa pytanie o zgode,
   CTA ustepuje - wraca natychmiast po decyzji. */
body.cookies-pyta .cta-mobilne { display: none; }

.cookies-panel__gpc {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 14.5px;
}

.cookies-panel__gpc[hidden] { display: none; }

/* === components/formularz.css === */
/* Formularz kontaktowy.
   Etykiety nad polami, blad i status przy tresci, pelny cykl stanow. */

.formularz {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.formularz__rzad {
  display: grid;
  gap: var(--space-4);
}

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

.formularz__pole {
  display: grid;
  gap: var(--space-2);
}

.formularz__pole label {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--color-brand);
}

.formularz__wymagane { color: var(--color-accent-text); }

.formularz__opcjonalne {
  font-weight: 400;
  color: var(--color-text-muted);
}

.formularz__pole input[type="text"],
.formularz__pole input[type="email"],
.formularz__pole input[type="tel"],
.formularz__pole textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color 150ms, background-color 150ms;
}

.formularz__pole textarea {
  resize: vertical;
  min-height: 130px;
}

.formularz__pole input:hover,
.formularz__pole textarea:hover { border-color: var(--color-ui); }

.formularz__pole input:focus-visible,
.formularz__pole textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
  background: var(--color-surface);
}

/* Blad walidacji natywnej dopiero PO interakcji z polem - inaczej formularz
   wital czerwienia, zanim ktokolwiek cokolwiek wpisal. */
.formularz.byl-wysylany input:invalid,
.formularz.byl-wysylany textarea:invalid {
  border-color: var(--color-error);
}

.formularz__podpowiedz {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* --- Zgoda --- */
.formularz__pole--zgoda {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.formularz__pole--zgoda input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.formularz__pole--zgoda label {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.formularz__pole--zgoda a {
  color: var(--color-accent-text);
}

/* --- Honeypot: poza ekranem, nie display:none - czesc botow to sprawdza --- */
.formularz__www {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Status --- */
.formularz__status:empty { display: none; }

.formularz__komunikat {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.5;
}

.formularz__komunikat--sukces {
  background: color-mix(in oklab, var(--color-success) 12%, var(--color-surface));
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.formularz__komunikat--blad {
  background: color-mix(in oklab, var(--color-error) 10%, var(--color-surface));
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

/* --- Wysylanie --- */
.formularz.jest-wysylany [data-formularz-przycisk] {
  background: #C9DAD8;
  color: #6E8A8C;
  pointer-events: none;
  box-shadow: none;
}

/* --- Sekcja formularza na stronie glownej i kontaktu --- */
.kontakt-formularz__naglowek { margin-bottom: var(--space-5); }

.kontakt-formularz__naglowek h2,
.kontakt-formularz__naglowek h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.kontakt-formularz__naglowek p {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* --- Select tematu --- */
.formularz__select {
  position: relative;
  display: block;
}

.formularz__select select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  appearance: none;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}

.formularz__select select:hover { border-color: var(--color-ui); }

.formularz__select select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
  background: var(--color-surface);
}

/* Wlasna strzalka - natywna znika przy appearance: none. */
.formularz__select::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  top: calc(50% - 5px);
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* === components/karty.css === */
/* Karty, pastylki, kalendarz, FAQ, puste stany. */

/* --- Efekt spotlight: obwodka rozswietla sie pod kursorem.
   Wspolrzedne podaje JS przez --mx/--my, wiec zero re-renderow. --- */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
  [data-spotlight]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      220px circle at var(--mx, 50%) var(--my, 0%),
      var(--color-mint),
      transparent 65%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 250ms;
    pointer-events: none;
    z-index: 1;
  }

  [data-spotlight]:hover::before { opacity: 1; }
}

/* --- Karta uslugi --- */
.karta-uslugi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms;
}

@media (hover: hover) and (pointer: fine) {
  .karta-uslugi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

 /* Wyroznik niesie kolor i lekkie tlo, nie wieksza powierzchnia -
    dzieki temu grid zostaje rowny, a karta i tak przyciaga wzrok. */
.karta-uslugi--wyrozniona {
  border-color: var(--color-ui);
  background: linear-gradient(168deg, var(--color-accent-soft), var(--color-surface) 58%);
}

.karta-uslugi--wyrozniona .karta-uslugi__tytul { color: var(--color-accent-text); }

.karta-uslugi__tytul {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-brand);
}

.karta-uslugi__tytul a {
  text-decoration: none;
}

/* Cala karta klikalna, ale w DOM zostaje jeden link - dobre dla czytnikow. */
.karta-uslugi__tytul a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.karta-uslugi__lead {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.karta-uslugi__link {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* --- Pastylki --- */
.pastylki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pastylka {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 14px;
  font-weight: 500;
  /* Element decyzyjny - zmienia sie tlo, nie skala. Ma byc stabilny. */
  transition: background-color 200ms, color 200ms;
}

a.pastylka:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.pastylka--wybrana,
.pastylka--wybrany {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-sm);
}

.pastylka--zajety {
  background: transparent;
  color: var(--color-border-strong);
  text-decoration: line-through;
}

/* --- Kalendarz --- */
.kalendarz {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.kalendarz__gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.kalendarz__tytul {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text);
}

.kalendarz__miesiac {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.kalendarz__dni {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.kalendarz__dzien {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  transition: border-color 200ms, background 200ms;
}

.kalendarz__dzien--aktywny {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.kalendarz__nota,
.kalendarz__info-admin {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.kalendarz__info-admin {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  color: var(--color-warning);
}

/* --- FAQ --- */
.faq__lista {
  display: grid;
  gap: var(--space-3);
}

.faq-pozycja {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 200ms;
}

.faq-pozycja[open] { border-color: var(--color-border-strong); }

.faq-pozycja__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-brand);
  cursor: pointer;
  list-style: none;
}

.faq-pozycja__pytanie::-webkit-details-marker { display: none; }

.faq-pozycja__znak {
  color: var(--color-ui);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-pozycja[open] .faq-pozycja__znak { transform: rotate(45deg); }

.faq-pozycja__odpowiedz {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.65;
}

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

/* --- Karta wpisu --- */
.karta-wpis {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms;
}

@media (hover: hover) and (pointer: fine) {
  .karta-wpis:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.karta-wpis__foto {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.karta-wpis__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .karta-wpis:hover .karta-wpis__foto img { scale: 1.04; }
}

.karta-wpis__tresc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.karta-wpis__data {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.karta-wpis__tytul {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-brand);
}

.karta-wpis__tytul a { text-decoration: none; }

.karta-wpis__tytul a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.karta-wpis__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.karta-wpis .link-strzalka {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* --- Pusty stan --- */
.pusty-stan {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 560px;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.pusty-stan__ikona {
  width: 36px;
  height: 36px;
  color: var(--color-ui);
}

.pusty-stan h2,
.pusty-stan h3 {
  font-family: var(--font-display);
  color: var(--color-brand);
}

.pusty-stan p { color: var(--color-text-muted); }

.pusty-stan--404 { margin-inline: auto; justify-items: center; text-align: center; }

.pusty-stan__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- Inicjaly zamiast zdjecia sylwetki, dopoki nie ma portretu z sesji.
   Wypelniaja ramke zdjecia (4:5), wiec siatka kart sie nie rozjezdza. --- */
.inicjaly {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-accent-soft);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: 0.04em;
  user-select: none;
}

.inicjaly--duze { font-size: clamp(56px, 9vw, 96px); }

/* === components/lista-uslug.css === */
/* Numerowany indeks uslug (/uslugi/). Wzorzec: lista z duzym tytulem
   w Literacie i cienka linia miedzy pozycjami - redakcyjnie, bez scian kart.
   Caly wiersz klikalny, w DOM jeden link (::after na tytule). */

.lista-uslug {
  border-top: 1px solid var(--color-border);
}

.wiersz-uslugi {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.wiersz-uslugi__numer {
  padding-top: 6px;
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.wiersz-uslugi__tresc { min-width: 0; }

.wiersz-uslugi__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-brand);
  max-width: 640px;
  transition: color 250ms ease;
}

.wiersz-uslugi__tytul a {
  color: inherit;
  text-decoration: none;
}

.wiersz-uslugi__tytul a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wiersz-uslugi__tytul a:focus-visible { outline: none; }

.wiersz-uslugi:has(a:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.wiersz-uslugi__plakietka {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.wiersz-uslugi__lead {
  margin-top: var(--space-2);
  max-width: var(--measure);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Na mobile pastylki i strzalka schodza pod tresc, w kolumnie tresci. */
.wiersz-uslugi__pastylki { grid-column: 2; }

.wiersz-uslugi__strzalka { display: none; }

.wiersz-uslugi--wyrozniony .wiersz-uslugi__numer { color: var(--color-accent-text); }

@media (min-width: 900px) {
  .wiersz-uslugi {
    grid-template-columns: 48px minmax(0, 1fr) auto 48px;
    column-gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-7);
  }

  .wiersz-uslugi__numer {
    align-self: start;
    padding-top: 10px;
    font-size: 17px;
  }

  .wiersz-uslugi__tytul { font-size: var(--text-h2); }

  .wiersz-uslugi__pastylki {
    grid-column: auto;
    justify-content: flex-end;
  }

  .wiersz-uslugi__strzalka {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    color: var(--color-accent);
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
  }

  .wiersz-uslugi__strzalka .icon {
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Tlo hovera wychodzi po bokach poza kolumne, a tresc i linie zostaja
     w osi naglowka strony - dlatego pseudo-element, nie padding wiersza. */
  .wiersz-uslugi { isolation: isolate; }

  .wiersz-uslugi::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--space-4));
    z-index: -1;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    opacity: 0;
    transition: opacity 250ms ease;
  }

  .wiersz-uslugi:hover::before { opacity: 1; }

  .wiersz-uslugi:hover .wiersz-uslugi__tytul { color: var(--color-accent-text); }

  .wiersz-uslugi:hover .wiersz-uslugi__strzalka {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-on-accent);
  }

  .wiersz-uslugi:hover .wiersz-uslugi__strzalka .icon { transform: translateX(3px); }
}

.wiersz-uslugi:active .wiersz-uslugi__strzalka { scale: 0.97; }

@media (prefers-reduced-motion: reduce) {
  .wiersz-uslugi::before,
  .wiersz-uslugi__tytul,
  .wiersz-uslugi__strzalka,
  .wiersz-uslugi__strzalka .icon { transition: none; }
}

/* === components/naglowek.css === */
/* Naglowek i nawigacja. */

.naglowek {
  position: sticky;
  top: 0;
  /* Kontekst pozycjonowania dla rozwinietego menu mobilnego - dzieki temu
     menu trzyma sie naglowka, a nie krawedzi okna, i nie rozjezdza sie
     przez pasek kontaktowy nad nawigacja. */
  z-index: 50;
  /* Tlo PELNE, bez backdrop-filter. Rozmycie tla pod sticky elementem
     wymusza przeliczanie probki co klatke, gdy naglowek dojezdza do gory
     (pasek kontaktowy nad nim wlasnie sie chowa) - i to wlasnie migotalo.
     Przy tle kryjacym w 88% rozmycia i tak nie bylo widac.
     Transition wylacznie na wlasciwosciach, ktore realnie sie zmieniaja. */
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* Klase dodaje main.js po przewinieciu - naglowek odcina sie od tresci. */
.naglowek.jest-przewiniety {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.naglowek__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  /* 88 px: logo ma 40 px, wiec zostaje po 24 px oddechu z gory i z dolu.
     Wczesniej 72 px dawalo 16 px i naglowek wygladal na scisniety
     wzgledem przestronnej reszty strony. */
  min-height: 88px;
}

/* --- Logo klienta (custom_logo z WordPressa) --- */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* Wysokosc, nie szerokosc: logo jest bardzo poziome (proporcja ok. 5:1),
     wiec sterowanie szerokoscia rozjezdza naglowek na waskich ekranach. */
}

.custom-logo {
  width: auto;
  height: 40px;
  transition: opacity 200ms;
}

.custom-logo-link:hover .custom-logo { opacity: 0.82; }
.custom-logo-link:active { scale: 0.98; }

@media (max-width: 480px) {
  .custom-logo { height: 32px; }
}

/* --- Wordmark (zapas, gdy logo nie jest ustawione) --- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-brand);
}

.wordmark__znak {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  transition: background 250ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wordmark:hover .wordmark__znak {
  background: var(--color-accent);
  transform: rotate(-4deg);
}

.wordmark__nazwa {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wordmark--stopka { color: var(--color-text); }

/* --- Nawigacja ---
   Rytm odleglosci, od lewej: linki co 28 px | kreska | telefon | przycisk.
   Jedna skala zamiast trzech roznych gapow, ktore sprawialy wrazenie
   przypadkowego rozmieszczenia. */
.nawigacja {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nawigacja__lista {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nawigacja__lista a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-ui);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
}

/* Podkreslenie wjezdza od lewej - drobiazg, ale to on odroznia gotowca. */
.nawigacja__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nawigacja__lista a:hover::after,
.nawigacja__lista .current-menu-item > a::after,
.nawigacja__lista .current_page_item > a::after {
  transform: scaleX(1);
}

.nawigacja__akcje {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Kreska oddziela nawigacje od akcji kontaktowych - dwie rozne grupy
   przestaja wygladac jak jeden dlugi rzad linkow. */
@media (min-width: 1024px) {
  .nawigacja__akcje {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
  }
}

/* --- Hamburger --- */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-brand);
}

.hamburger__kreski {
  display: grid;
  gap: 5px;
  width: 18px;
}

.hamburger__kreski span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms;
}

.hamburger[aria-expanded="true"] .hamburger__kreski span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__kreski span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .hamburger { display: inline-flex; }

  .nawigacja {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5) var(--space-8);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms, visibility 250ms;
  }

  .nawigacja.jest-otwarta {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nawigacja__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nawigacja__lista li + li { border-top: 1px solid var(--color-border); }

  .nawigacja__lista a {
    display: block;
    padding-block: var(--space-4);
    min-height: 52px;
    font-size: 17px;
  }

  .nawigacja__lista a::after { display: none; }

  .nawigacja__akcje {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .nawigacja__akcje .przycisk { width: 100%; }
}

/* --- Sticky CTA na mobile --- */
.cta-mobilne {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(140%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-mobilne.jest-widoczne { transform: translateY(0); }

@media (max-width: 767px) {
  .cta-mobilne { display: inline-flex; }
  body { padding-bottom: 0; }
}

/* --- Rozwijane podmenu (Uslugi) ---
   Otwiera sie na hover i na focus-within, wiec dziala tez z klawiatury.
   Na mobile nie ma hovera - podmenu jest rozwinieta lista pod pozycja. */

.nawigacja__lista > li { position: relative; }

/* Strzalka w dol przy pozycji z podmenu. Osobny pseudoelement ::before,
   bo ::after jest zajety przez podkreslenie hovera. */
@media (min-width: 1024px) {
  .nawigacja__lista .menu-item-has-children > a { padding-right: 20px; }
}

.nawigacja__lista .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 2px;
  top: calc(50% - 5px);
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nawigacja__lista .menu-item-has-children:hover > a::before,
.nawigacja__lista .menu-item-has-children:focus-within > a::before {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Przelacznik podmenu - istnieje tylko na mobile (wstrzykiwany przez JS,
   chowany na desktopie, gdzie rozwijaniem rzadzi hover). */
.podmenu-przelacznik { display: none; }

@media (max-width: 1023px) {
  .nawigacja__lista .menu-item-has-children > a::before { display: none; }

  .nawigacja__lista .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr 48px;
    align-items: center;
  }

  .podmenu-przelacznik {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    color: var(--color-brand);
  }

  .podmenu-przelacznik::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .menu-item-has-children.jest-rozwinieta .podmenu-przelacznik::before {
    transform: rotate(225deg);
  }

  /* Podmenu zajmuje caly wiersz siatki pod linkiem i przelacznikiem. */
  .nawigacja__lista .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .nawigacja__lista .sub-menu {
    position: absolute;
    top: 100%;
    left: calc(var(--space-4) * -1);
    z-index: 60;
    min-width: 300px;
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* Stan bazowy = timing ZAMYKANIA. Wyjscie szybsze niz wejscie -
       system odpowiada natychmiast, wchodzi spokojnie. */
    transition: opacity 120ms ease-out, transform 140ms ease-out, visibility 140ms;
  }

  /* Niewidoczny mostek nad panelem - kursor schodzacy z linku do podmenu
     nie moze wypasc w szczeline i zamknac panelu. */
  .nawigacja__lista .sub-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }

  .nawigacja__lista li:hover > .sub-menu,
  .nawigacja__lista li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 220ms;
  }

  .nawigacja__lista .sub-menu a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms, color 150ms;
  }

  /* Podkreslenie z linkow glownych nie obowiazuje w panelu. */
  .nawigacja__lista .sub-menu a::after { display: none; }

  .nawigacja__lista .sub-menu a:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
  }
}

@media (max-width: 1023px) {
  /* Zwiniete domyslnie. Bez animacji wysokosci: trik grid 0fr dziala tylko
     z JEDNYM dzieckiem, a lista ma ich osiem - kazde li dostaloby wlasny
     wiersz i wystawalo. Prosty display jest tu niezawodny; ruch niesie
     strzalka przelacznika. */
  .nawigacja__lista .sub-menu {
    display: none;
    padding-left: var(--space-4);
  }

  .menu-item-has-children.jest-rozwinieta > .sub-menu { display: grid; }

  .nawigacja__lista .sub-menu li { border-top: 1px solid var(--color-border); }

  .nawigacja__lista .sub-menu a {
    display: block;
    padding-block: var(--space-3);
    min-height: 48px;
    font-size: 15.5px;
    color: var(--color-text-muted);
  }
}

/* === components/pasek-gorny.css === */
/* Pasek kontaktowy nad nawigacja.

   Wczesniej byl to flex ze `space-between`, wiec przy kontenerze 1440 px
   godziny i kontakt rozjezdzaly sie na dwa konce ekranu z pustka posrodku,
   a ikony siadaly na innej linii bazowej niz tekst. Teraz: jeden rzad
   o wspolnej wysokosci, elementy rozdzielone kropkami, ikony wyrownane
   do srodka linii. */

.pasek-gorny {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-size: 13.5px;
  line-height: 1;
}

.pasek-gorny__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding-block: var(--space-2);
}

.pasek-gorny__godziny,
.pasek-gorny__adres,
.pasek-gorny__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  line-height: 1;
}

/* Lewa strona: godziny, adres i przycisk dojazdu. */
.pasek-gorny__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.pasek-gorny__godziny,
.pasek-gorny__adres { margin: 0; }

/* Przycisk-pigulka: jedyny element paska z tlem, zeby czytal sie jako akcja,
   a nie kolejna informacja. W adresie pinezka jest zbedna - ma ja przycisk. */
.pasek-gorny__adres .icon { display: none; }

.pasek-gorny__adres::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  margin-right: var(--space-2);
}

.pasek-gorny__dojazd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-mint) 18%, transparent);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease-out;
}

/* Hover: pelna mieta + ciemny tekst (6,01:1 - AA). Globalne a:hover przyciemnialo
   tekst na polprzezroczystym tle i wychodzilo ciemne na ciemnym. */
@media (hover: hover) and (pointer: fine) {
  .pasek-gorny__dojazd:hover {
    background: var(--color-mint);
    color: var(--color-text);
  }

  .pasek-gorny__dojazd:hover .icon { color: var(--color-text); }
}

.pasek-gorny__dojazd-krotki { display: none; }

.pasek-gorny__dojazd:active { transform: scale(0.97); }

.pasek-gorny__dojazd:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 3px;
}

.pasek-gorny .icon {
  width: 16px;
  height: 16px;
  color: var(--color-mint);
  flex: none;
}

.pasek-gorny__kontakt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Kropka miedzy pozycjami kontaktu - tanszy separator niz pionowa kreska
   i nie zaklóca rytmu przy roznych dlugosciach tekstu. */
.pasek-gorny__kontakt > .pasek-gorny__link + .pasek-gorny__link::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  margin-right: var(--space-4);
}

.pasek-gorny__link {
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}

.pasek-gorny__link:hover { color: var(--color-mint); }

.pasek-gorny__link:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Social w pasku - bez ramek, oddzielone wieksza przerwa. */
.social--pasek {
  gap: var(--space-1);
  margin-left: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid color-mix(in oklab, var(--color-text-on-brand) 22%, transparent);
  /* Ikona jest wysrodkowana w polu 30 px, wiec ma 6 px wewnetrznego odstepu.
     Cofamy liste o te 6 px, zeby GLIF ikony licowal z prawa krawedzia
     kontenera tak samo jak przycisk w nawigacji nizej. Pole dotyku zostaje. */
  margin-right: -6px;
}

.social--pasek .social__link {
  width: 30px;
  height: 30px;
  border: 0;
  color: inherit;
}

.social--pasek .social__link:hover {
  color: var(--color-mint);
  transform: none;
}

.social--pasek .icon { width: 16px; height: 16px; color: inherit; }

/* "Umow wizyte" w pasku istnieje tylko do 1023 px - na wezszych ekranach
   glowne CTA naglowka chowa sie w hamburgerze i pasek jest jedynym miejscem
   z akcja rezerwacji widoczna od wejscia. Na desktopie by dublowal przycisk. */
.pasek-gorny__umow {
  display: none;
  font-weight: 600;
}

.pasek-gorny__umow .icon { color: var(--color-mint); }

/* Specyficznosc jest tu celowa: bazowe .social z sections/podstrony.css jest
   sklejane PO tym pliku, wiec samo .social--pasek by nie wygralo. */
/* Ponizej 1280 px adres tekstem sie nie miesci obok e-maila - zostaje przycisk. */
@media (max-width: 1279px) {
  .pasek-gorny__adres { display: none; }
}

@media (max-width: 1023px) {
  .pasek-gorny__kontakt .pasek-gorny__link[href^="mailto"] { display: none; }
  .pasek-gorny .social--pasek { display: none; }
  .pasek-gorny__umow { display: inline-flex; }
}

@media (max-width: 640px) {
  .pasek-gorny { font-size: 13px; }

  /* Telefon z lewej, rezerwacja z prawej - dwie akcje na dwoch koncach. */
  .pasek-gorny__wnetrze {
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* Godziny nie zmieszcza sie obok dwoch akcji. Sa w kontakcie i w stopce. */
  .pasek-gorny__godziny { display: none; }

  /* Trzy akcje w rzedzie: telefon, dojazd, rezerwacja. Przycisk dojazdu
     przechodzi na srodek (order), bez tla, zeby nie wygrywal z rezerwacja. */
  .pasek-gorny__info { order: 2; }
  .pasek-gorny__kontakt { display: contents; }
  .pasek-gorny__kontakt > .pasek-gorny__link[href^="tel"] { order: 1; }
  .pasek-gorny__umow { order: 3; }

  .pasek-gorny__dojazd {
    min-height: 44px; /* obszar dotyku jak telefon i rezerwacja */
    padding: 0;
    background: none;
    font-weight: 400;
  }

  .pasek-gorny__dojazd-pelny { display: none; }
  .pasek-gorny__dojazd-krotki { display: inline; }

  .pasek-gorny__kontakt > .pasek-gorny__link + .pasek-gorny__link::before { display: none; }
}

/* === components/przyciski.css === */
/* Przyciski - pelny cykl stanow wg kierunku 1a.
   Hover ciemnieje (kontrast rosnie), focus to obrys marki z odsadzeniem 3 px,
   disabled jest neutralny - nigdy polprzezroczysta mieta. */

.przycisk {
  --tlo: var(--color-accent);
  --tlo-hover: var(--color-accent-hover);
  --tlo-active: var(--color-accent-active);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms,
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 120ms ease-out;
}

.przycisk .icon {
  width: 18px;
  height: 18px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.przycisk--duzy {
  min-height: 52px;
  padding: var(--space-4) var(--space-6);
  font-size: 16px;
}

.przycisk--pelny { width: 100%; }

/* --- Glowny ---
   Hover skacze na kolor marki (#005461), nie na odcien o wlos ciemniejszy -
   roznica accent -> accent-hover byla niezauwazalna i przyciski "sie zlewaly".
   Jasny tekst na marce: 7,95:1, wiec kontrast tylko rosnie. */
.przycisk--glowny {
  background: var(--tlo);
  color: var(--color-text-on-accent);
}

.przycisk--glowny:hover {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-md);
}

.przycisk--glowny:active {
  background: var(--tlo-active);
  color: var(--color-text-on-accent);
  scale: 0.97;
  box-shadow: none;
}

.przycisk--glowny:hover .icon { transform: translateX(3px); }

/* --- Obrys ---
   Hover dostaje wypelnienie, nie tylko zmiane koloru obrysu - sama ramka
   na duzym przycisku byla za slabym sygnalem. */
.przycisk--obrys {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-brand);
}

.przycisk--obrys:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.przycisk--obrys:active { scale: 0.97; }

/* --- Cichy, na ciemnym tle --- */
.przycisk--cichy {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.przycisk--cichy:hover {
  background: color-mix(in oklab, var(--color-mint) 14%, transparent);
  border-color: var(--color-mint);
  color: var(--color-mint);
}

.przycisk--cichy:active { scale: 0.97; }

/* --- Stany wspolne --- */
.przycisk:disabled,
.przycisk[aria-disabled="true"] {
  background: #C9DAD8;
  border-color: transparent;
  color: #6E8A8C;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Magnetyczne CTA - tylko przy prawdziwym kursorze. */
@media (hover: hover) and (pointer: fine) {
  [data-magnetyczny] { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .przycisk:hover .icon,
  .link-strzalka:hover .icon { transform: none; }
  .przycisk:active { scale: 1; }
}

/* Telefon w naglowku */
.link-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--color-brand);
  text-decoration: none;
  white-space: nowrap;
}

.link-tel .icon { color: var(--color-ui); }
.link-tel:hover { color: var(--color-accent); }

/* === components/zespol-kolaz.css === */
/* Kolaz portretow zespolu. Mobile: pasek przewijany w poziomie (scroll-snap,
   bez przewijania calej strony). Desktop: wszystkie portrety w jednym rzedzie,
   co drugi obnizony, zeby rzad nie wygladal jak tabela zdjec legitymacyjnych. */
.zespol-kolaz {
  margin: 0 0 var(--space-8);
}

.zespol-kolaz__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 40%);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-3);
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
}

.zespol-kolaz__osoba {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-sunken);
}

.zespol-kolaz__obraz {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zespol-kolaz__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Nazwisko na dole portretu - tylko gdy portret ma sylwetke. */
.zespol-kolaz__imie {
  position: absolute;
  inset: auto var(--space-2) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.zespol-kolaz__link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.zespol-kolaz__link:active .zespol-kolaz__obraz { scale: 0.99; }

@media (hover: hover) and (pointer: fine) {
  .zespol-kolaz__link:hover .zespol-kolaz__obraz { scale: 1.04; }
}

.zespol-kolaz__podpis {
  margin-top: var(--space-3);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .zespol-kolaz__lista {
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }

  /* translate nie zajmuje miejsca w ukladzie - odstep podpisu go nadrabia. */
  .zespol-kolaz__osoba:nth-child(even) { translate: 0 var(--space-6); }

  .zespol-kolaz__podpis { margin-top: calc(var(--space-6) + var(--space-3)); }
}

@media (prefers-reduced-motion: reduce) {
  .zespol-kolaz__obraz { transition: none; }
}

/* === components/zespol-zdjecie.css === */
/* Zdjecie grupowe zespolu. Zawsze w naturalnych proporcjach - kazdy kadr
   (np. 4:3 na mobile) ucina skrajne osoby, a na zdjeciu zespolu nikt nie
   moze wypasc poza ramke. */
.zespol-zdjecie {
  margin: 0 0 var(--space-8);
}

.zespol-zdjecie__obraz {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.zespol-zdjecie__podpis {
  margin-top: var(--space-3);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* === sections/dokument.css === */
/* Strony prawne: polityka prywatnosci, regulamin, polityka cookies. */

.dokument { display: grid; gap: var(--space-8); align-items: start; }

@media (min-width: 1000px) {
  .dokument {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-10);
  }

  /* Dokumenty czyta sie wyrywkowo - ktos szuka jednego punktu, a nie czyta
     calosci od gory. Spis jedzie razem z trescia. */
  .dokument__spis {
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

.dokument__spis {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.dokument__spis-tytul {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.dokument__spis-lista {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
  font-size: 15px;
}

.dokument__spis-lista li { color: var(--color-text-muted); }

.dokument__spis-lista a {
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  padding-block: 4px;
}

.dokument__spis-lista a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dokument__tresc { max-width: var(--measure); }

.dokument__data {
  font-size: 14px;
  color: var(--color-text-muted);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

/* Kotwica ze spisu nie moze wjezdzac pod przyklejony naglowek. */
.dokument__tresc h2 { scroll-margin-top: 110px; }

.dokument__tresc table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-5);
  font-size: 15px;
}

.dokument__tresc th,
.dokument__tresc td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.dokument__tresc th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-brand);
  background: var(--color-surface-sunken);
}

/* Tabela cookies ma cztery kolumny i na telefonie nie ma prawa sie zmiescic -
   przewija sie sama, zamiast rozpychac cala strone w poziomie. */
.dokument__tresc .tabela-przewijana {
  overflow-x: auto;
  margin-block: var(--space-5);
}

.dokument__stopka {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 15px;
}

.dokument__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-3);
}

.dokument__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}

.dokument__kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* === sections/hero-kafle.css === */
/* Hero - wariant "kafle".
   Naglowek w dwoch kolumnach (H1 z lewej, lead i akcje z prawej), pod nim rzad
   kafli o schodkowych wysokosciach. Kafle w jednym hue marki, rozne jasnosci.
   Mobile: pasek przewijany w poziomie z kropkami i strzalkami, bez schodkow. */

.hero--kafle { padding-block: var(--space-7) var(--space-8); }

.hero-kafle__naglowek {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.hero-kafle__tytul {
  max-width: 21ch;
  margin-bottom: 0;
}

.hero-kafle__bok .hero__lead { margin-bottom: var(--space-6); }
.hero-kafle__bok .hero__akcje { margin-bottom: 0; }

@media (min-width: 1024px) {
  .hero-kafle__naglowek {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-9);
    align-items: end;
  }
}

/* --- Rzad kafli ---
   Mobile i tablet: pasek przewijany w poziomie (scroll-snap). Kafle duze, bo
   to twarze sprzedaja - siatka 2x2 odpadla, bo przy 390 px robila z portretow
   miniatury (v0.14.3). Zeby bylo wiadomo, ze pasek sie przesuwa: nastepny
   kafel wyraznie wystaje, pod paskiem kropki ze stanem i strzalki, a przy
   pierwszym wyswietleniu pasek raz lekko "odjezdza" w bok (main.js).
   Siatka 2-kolumnowa z trzema kaflami tez odpadla wczesniej: pusta komorka. */
/* Podwojna klasa: reset ul[role="list"] zerowal padding paska. */
.hero--kafle .hero-kafle__rzad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-3);
  margin: 0 calc(var(--marginesy) * -1);
  padding: 0 var(--marginesy) var(--space-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marginesy);
  scrollbar-width: none;
}

.hero-kafle__rzad::-webkit-scrollbar { display: none; }

.hero-kafel { scroll-snap-align: start; }

.hero-kafel--zespol { grid-column: auto; }

@media (min-width: 640px) and (max-width: 1023px) {
  .hero--kafle .hero-kafle__rzad { grid-auto-columns: 44%; }
}

/* Podpowiedz przesuwania: jednorazowy odjazd w lewo i powrot. `translate`,
   nie `transform` - transform na kaflu trzyma wejscie GSAP. */
.hero-kafle__rzad.jest-podpowiedz .hero-kafel {
  animation: hero-kafle-podpowiedz 1100ms cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes hero-kafle-podpowiedz {
  0%, 100% { translate: 0 0; }
  40%, 55% { translate: -18% 0; }
}

/* Nawigacja paska: kropki (ktory kafel) i strzalki. Renderowana z `hidden`,
   JS ja odslania - bez JS zostaje sam pasek z wystajacym kaflem. */
.hero-kafle__nawigacja {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.hero-kafle__nawigacja[hidden] { display: none; }

.hero-kafle__kropki {
  display: flex;
  align-items: center;
}

/* Cel dotyku 24x24 (WCAG 2.2), widoczna kropka mniejsza. */
.hero-kafle__kropka {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-kafle__kropka::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-brand) 25%, transparent);
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease;
}

.hero-kafle__kropka[aria-current="true"]::before {
  width: 22px;
  background: var(--color-brand);
}

.hero-kafle__kropka:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 0;
  border-radius: var(--radius-sm);
}

.hero-kafle__strzalki {
  display: flex;
  gap: var(--space-2);
}

.hero-kafle__strzalka-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--color-brand) 30%, transparent);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.hero-kafle__strzalka-btn .icon { width: 18px; height: 18px; }
.hero-kafle__strzalka-btn[data-kafle-wstecz] .icon { rotate: 180deg; }

.hero-kafle__strzalka-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.hero-kafle__strzalka-btn:not(:disabled):active {
  background: var(--color-brand);
  color: var(--color-surface);
}

.hero-kafle__strzalka-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .hero-kafle__strzalka-btn:not(:disabled):hover {
    background: var(--color-brand);
    color: var(--color-surface);
  }
}

/* Tony kafli. Wyciete portrety maja na krawedzi resztke jasnego tla
   studyjnego: na ciemnym i nasyconym kaflu widac ja jako obwodke. Dlatego
   za GLOWA zawsze jest jasno, a kolor pracuje tam, gdzie krawedz go znosi. */
.hero-kafel--a { --kafel-ton: color-mix(in oklab, var(--color-mint) 42%, var(--color-surface)); }
.hero-kafel--b { --kafel-ton: color-mix(in oklab, var(--color-accent) 30%, var(--color-surface)); }
.hero-kafel--c { --kafel-ton: color-mix(in oklab, var(--color-mint) 64%, var(--color-surface)); }
.hero-kafel--zespol { --kafel-ton: var(--color-surface-sunken); }

.hero-kafel { --kafel-jasny: color-mix(in oklab, var(--color-mint) 9%, var(--color-surface)); }

/* Studio: jasny kafel + miekkie swiatlo za postacia, ton tylko jako delikatna
   winieta przy dolnej krawedzi. Warianty "poswiata" (gradient koloru od dolu)
   i "oryginal" (bez wycinania) odpadly - wybor Pawla 2026-09-21. */
.hero-kafel {
  --kafel-tlo:
    radial-gradient(ellipse 70% 55% at 50% 62%, var(--color-surface) 0%, transparent 70%),
    linear-gradient(to top, color-mix(in oklab, var(--kafel-ton) 55%, var(--kafel-jasny)) 0%, var(--kafel-jasny) 45%);
}

/* Osoba bez wycietego portretu: tlo studyjne mnozone z bardzo jasnym kaflem
   (mocniejszy ton zazielenial skore). */
.hero-kafel--bez-wyciecia {
  --kafel-tlo: color-mix(in oklab, var(--kafel-ton) 22%, var(--color-surface));
}

/* data-motyw="dark" maluje tlo na elemencie - tu tlo ma tylko link, inaczej
   spod zaokraglonego kafla wystaja kwadratowe rogi. */
.hero-kafel { min-width: 0; background: none; }

.hero-kafel__link {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--kafel-tlo);
  color: var(--color-text);
  text-decoration: none;
  isolation: isolate;
}

/* Wlosowa krawedz: jasna gora kafla zlewala sie z tlem strony. Pseudo-element
   nad zdjeciem, bo inset box-shadow na linku chowa sie pod obrazem. */
.hero-kafel__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-brand) 10%, transparent);
  pointer-events: none;
}

/* Portret wyciety z tla: stoi na dolnej krawedzi kafla, caly w kadrze
   (contain), bez maski i bez mieszania kolorow. */
.hero-kafel__foto {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  /* 70%: glowa zostaje pod dwuliniowym tytulem, takze przy bujnej fryzurze. */
  height: 70%;
  object-fit: cover;
  object-position: 50% 0%;
  transform-origin: 50% 100%;
  transition: scale 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zespol: kadr poziomy, wiec contain od dolu - nikt nie wypada z bokow. */
.hero-kafel--zespol .hero-kafel__foto {
  height: 74%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* Zespol bez zdjecia grupowego: wyciete portrety obok siebie, stoja na dolnej
   krawedzi i lekko na siebie zachodza, zeby czytaly sie jako jedna grupa. */
.hero-kafel__grupa {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 72%;
  padding-inline: var(--space-4);
  transform-origin: 50% 100%;
  transition: scale 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-kafel__grupa-foto {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

.hero-kafel__grupa-foto + .hero-kafel__grupa-foto { margin-left: -4%; }

/* Fallback bez wyciecia: zdjecie studyjne wtapiane w jasny kafel. */
.hero-kafel--bez-wyciecia .hero-kafel__foto {
  height: 84%;
  object-fit: cover;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}

.hero-kafel__tresc {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: calc(var(--space-4) + 44px);
  display: grid;
  gap: 2px;
}

.hero-kafel__obszar {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.hero-kafel__tytul {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}

.hero-kafel__strzalka {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-surface) 70%, transparent);
  color: var(--color-brand);
  transition: background-color 200ms ease, color 200ms ease;
}

.hero-kafel__strzalka .icon {
  width: 16px;
  height: 16px;
  rotate: -45deg;
}

.hero-kafel__stopka {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.hero-kafel__kto {
  display: grid;
  min-width: 0;
  color: var(--color-text);
}

.hero-kafel__rola {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .hero-kafel__link:hover .hero-kafel__foto,
  .hero-kafel__link:hover .hero-kafel__grupa { scale: 1.04; }

  .hero-kafel__link:hover .hero-kafel__strzalka {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
  }
}

.hero-kafel__link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.hero-kafel__link:active { scale: 0.99; }

/* --- Desktop: 5 kolumn, zespol na dwie, schodki co drugi kafel --- */
@media (min-width: 1024px) {
  .hero--kafle .hero-kafle__rzad {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: end;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .hero-kafle__nawigacja { display: none; }

  .hero-kafel__link { aspect-ratio: auto; height: clamp(320px, 27vw, 400px); }

  .hero-kafel--b .hero-kafel__link { height: clamp(280px, 23vw, 340px); }

  .hero-kafel--zespol { grid-column: span 2; }
  .hero-kafel--zespol .hero-kafel__link { aspect-ratio: auto; height: clamp(280px, 23vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kafel__foto,
  .hero-kafel__grupa,
  .hero-kafel__strzalka,
  .hero-kafle__kropka::before,
  .hero-kafle__strzalka-btn { transition: none; }

  .hero-kafle__rzad.jest-podpowiedz .hero-kafel { animation: none; }
}

/* === sections/hero.css === */
/* Hero - uklad asymetryczny, zdjecie wychodzi do prawej krawedzi okna.

   Kluczowa zmiana wobec 0.3.x: zadnego gradientu pod tekstem. Naglowek stoi
   na czystym tle strony i ma pelny kontrast (12,44:1). Kolor pojawia sie
   wylacznie za zdjeciem, czyli tam, gdzie nie konkuruje z tekstem. */

.hero {
  position: relative;
  /* clip, nie hidden: pozwala zdjeciu wyjsc poza kontener, a jednoczesnie
     nie tworzy kontekstu przewijania i nie psuje position: sticky wyzej. */
  overflow-x: clip;
  padding-block: var(--space-8) var(--space-9);
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9) var(--space-10); }
}

/* Jedna miekka luna po prawej. Statyczna - nic nie miga pod trescia.
   Rozmyta i schowana za zdjeciem, zeby nie tworzyla widocznego luku
   przycietego przez overflow sekcji. */
.hero__luna {
  position: absolute;
  top: 8%;
  right: -14%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 45% 45%,
    color-mix(in oklab, var(--color-mint) 30%, transparent),
    transparent 66%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hero__siatka {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__siatka {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-9);
  }
}

/* --- Kolumna tekstu --- */
.hero__tytul {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--color-text);
  max-width: 19ch;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--space-7);
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* --- Dowody: bez kart i bez zadnych borderow.
   Kreski sciskaly tresc; kolumny rozdziela samo swiatlo (48 px). --- */
.hero__dowody {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-7);
  max-width: 46ch;
}

@media (min-width: 560px) {
  .hero__dowody {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: var(--space-8);
    max-width: none;
  }
}

.hero__dowod {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero__dowod .icon {
  width: 18px;
  height: 18px;
  color: var(--color-ui);
  margin-top: 3px;
}

.hero__dowod-tresc { display: grid; gap: 2px; }

.hero__dowod strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-brand);
  line-height: 1.3;
}

.hero__dowod-tresc > span {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* --- Media: kolaz dwoch gabinetow ---
   A (gabinet psychologiczny, poziomy) siedzi u gory po prawej, B (gabinet
   fizjoterapii, pionowy) nachodzi na niego od dolu z lewej. Panel terminow
   dokuje przy dolnej prawej krawedzi A. Trzy obiekty czytaja sie jako jeden,
   bo B i panel wchodza na A, a nie stoja obok. */
.hero__media { position: relative; }

.hero__kolaz {
  position: relative;
  aspect-ratio: 4 / 3;
}

.hero__foto {
  position: absolute;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-md);
}

.hero__foto--a {
  top: 0;
  right: 0;
  width: 82%;
  height: 78%;
}

/* Jasna obwodka oddziela B od A tam, gdzie zdjecia sie nakladaja. */
.hero__foto--b {
  left: 0;
  bottom: 0;
  width: 40%;
  height: 62%;
  border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}

.hero__obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadr od dolu: zdjecia z telefonu maja duzo sufitu, a tresc (fotel, stol)
     jest w dolnej polowie. */
  object-position: 50% 78%;
}

/* Wysokosc, nie proporcja: proporcja rozdmuchiwala kolaz na dwa ekrany
   i spychala naglowek pod zagiecie. */
@media (min-width: 1024px) {
  .hero__kolaz {
    aspect-ratio: auto;
    height: min(62vh, 580px);
  }
}

/* Panel terminow. Mobile: pod kolazem z ujemnym marginesem, zeby wchodzil
   na zdjecie B. Desktop: absolutnie, przy prawej dolnej krawedzi kolazu. */
.hero__terminy {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--space-8) * -1);
  margin-inline: var(--space-4) var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.hero__terminy-tytul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}

.kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-mint);
  flex: none;
}

.hero__terminy-nota {
  margin-top: var(--space-3);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hero__terminy-nota--pusty {
  margin-top: 0;
  font-size: 14px;
}

/* Najblizszy termin zawsze z nazwiskiem - kazda osoba ma wlasny grafik.
   Caly wiersz prowadzi do kalendarza tej osoby. */
.termin-osoby {
  display: grid;
  margin-inline: calc(var(--space-2) * -1);
}

.termin-osoba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease;
}

.termin-osoby li + li .termin-osoba {
  border-top: 1px solid var(--color-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.termin-osoba__kto {
  display: grid;
  min-width: 0;
}

.termin-osoba__nazwa {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.termin-osoba__rola {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.termin-osoba__czas {
  flex: none;
  min-height: 30px;
  transition: background-color 200ms ease, color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .termin-osoba:hover { background: var(--color-accent-soft); }

  .termin-osoba:hover .termin-osoba__czas {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
  }
}

.termin-osoba:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.termin-osoba:active { scale: 0.99; }

@media (prefers-reduced-motion: reduce) {
  .termin-osoba,
  .termin-osoba__czas { transition: none; }
}

.hero__terminy-link {
  margin-top: var(--space-4);
  font-size: 14px;
}

/* Zdjecie zostaje W KONTENERZE. Wersja full-bleed (do krawedzi okna) odpadla:
   sekcja byla jedynym miejscem lamiacym siatke strony i gryzla sie z reszta.
   Panel terminow dokowany na zdjeciu przy dolnej krawedzi. */
@media (min-width: 1024px) {
  .hero__terminy {
    position: absolute;
    left: auto;
    right: var(--space-5);
    bottom: 0;
    width: min(340px, 52%);
    margin: 0;
  }
}

@media (max-width: 1023px) {
  .hero__media { max-width: 560px; }

  /* Bez nakladania: zdjecie B stoi przy dolnej krawedzi kolazu i panel
     zaslanial na nim stol terapeutyczny. */
  .hero__terminy {
    margin-top: var(--space-4);
    margin-inline: 0;
  }
}

/* === sections/miejsce.css === */
/* Galeria wnetrza "Tu sie spotkamy".
   Mobile: dwie kolumny, gabinet i detal na pelna szerokosc.
   Desktop: gabinet 2x2, korytarz na dwa rzedy (to pionowe ujecie), aneks
   i detal jeden nad drugim - asymetria zamiast rownej siatki kafli.
   Trzeci rzad: dwie panoramy (sala cwiczen, sala grupowa) po pol szerokosci. */
.miejsce { padding-block: var(--space-10); }

.miejsce__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.miejsce__kafel {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  aspect-ratio: 3 / 4;
}

.miejsce__kafel--duzy {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

.miejsce__kafel--szeroki,
.miejsce__kafel--panorama {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.miejsce__obraz {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.miejsce__kafel--duzy .miejsce__obraz { object-position: 50% 60%; }

@media (hover: hover) and (pointer: fine) {
  .miejsce__kafel:hover .miejsce__obraz { scale: 1.03; }
}

@media (min-width: 768px) {
  .miejsce__siatka { gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .miejsce__siatka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(220px, 19vw, 300px));
    grid-auto-rows: clamp(260px, 22vw, 340px);
  }

  .miejsce__kafel,
  .miejsce__kafel--duzy,
  .miejsce__kafel--szeroki,
  .miejsce__kafel--panorama { aspect-ratio: auto; }

  .miejsce__kafel--duzy { grid-column: 1 / 3; grid-row: 1 / 3; }
  .miejsce__kafel--wysoki { grid-column: 3; grid-row: 1 / 3; }
  .miejsce__kafel--zwykly { grid-column: 4; grid-row: 1; }
  .miejsce__kafel--szeroki { grid-column: 4; grid-row: 2; }
  .miejsce__kafel--panorama { grid-column: span 2; grid-row: auto; }
}

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

/* === sections/o-nas-strona.css === */
/* Podstrona "O nas": tresc z metryczka, zasady, granice kompetencji. */

.o-nas-strona { display: grid; gap: var(--space-8); align-items: start; }

@media (min-width: 1000px) {
  .o-nas-strona {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--space-10);
  }

  .o-nas-strona__bok { position: sticky; top: 120px; }
}

.o-nas-strona__tresc { max-width: var(--measure); }

.o-nas-strona__bok { display: grid; gap: var(--space-4); }

.o-nas-strona__foto {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-md);
}

.o-nas-strona__foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- Zasady --- */
.zasady { padding-block: var(--space-10); background: var(--color-surface-sunken); }

.zasady__lista {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 760px) {
  .zasady__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
}

.zasada { display: flex; gap: var(--space-4); align-items: flex-start; }

.zasada__ikona {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.zasada__ikona .icon { width: 22px; height: 22px; }

.zasada__tytul {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.zasada__opis { color: var(--color-text-muted); max-width: 46ch; }

/* --- Dla kogo / granice --- */
.dla-kogo { padding-block: var(--space-10); }

.dla-kogo__siatka { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .dla-kogo__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
}

.dla-kogo__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-5);
}

.dla-kogo__kolumna--granice {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.lista-minusy { display: grid; gap: var(--space-3); }

.lista-minusy li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-text-muted);
}

/* Kreska zamiast ikony X: to nie jest odmowa, tylko granica kompetencji.
   Czerwony krzyzyk czytalby sie jak zarzut wobec czytajacego. */
.lista-minusy__znak {
  flex: none;
  width: 14px;
  height: 2px;
  margin-top: 11px;
  border-radius: 2px;
  background: var(--color-border-strong);
}

.alarm {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
}

.alarm__tytul {
  font-weight: 700;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.alarm p { color: var(--color-text); font-size: 15.5px; }

.alarm a { color: var(--color-accent-text); text-underline-offset: 3px; }

/* === sections/opinie-dojazd.css === */
/* Opinie i dojazd. */

/* ============================== Opinie ============================== */

.opinie {
  padding-block: var(--space-10);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.opinie__srednia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.opinie__srednia-liczba {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-brand);
}

/* Dwie klasy, bo srednia w naglowku i ocena w karcie to osobne konteksty
   o roznej wielkosci - ale styl gwiazdek musi byc jeden. */
.opinie__gwiazdki,
.opinia__gwiazdki {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-warning);
}

.opinie__gwiazdki .icon,
.opinia__gwiazdki .icon { width: 18px; height: 18px; }

.opinie__srednia-opis {
  font-size: 14px;
  color: var(--color-text-muted);
}

.opinie__lista {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) { .opinie__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .opinie__lista { grid-template-columns: repeat(3, 1fr); } }

.opinia {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.opinia .opinia__gwiazdki .icon { width: 16px; height: 16px; }

.opinia__tresc {
  margin: 0;
  color: var(--color-text);
  line-height: 1.65;
  font-size: 15.5px;
}

.opinia__tresc p { margin: 0; }
.opinia__tresc p + p { margin-top: var(--space-3); }

.opinia__stopka {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.opinia__autor {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-brand);
}

.opinia__meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

.opinie__ostrzezenie {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-warning);
  max-width: var(--measure);
}

.opinie__ostrzezenie .icon { flex: none; margin-top: 2px; }

/* ============================== Dojazd ============================== */

.dojazd { padding-block: var(--space-10); }

.dojazd__uklad {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .dojazd__uklad {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}

/* --- Mapa --- */
.dojazd__mapa {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background:
    radial-gradient(520px circle at 30% 20%, var(--color-accent-soft), transparent 70%),
    var(--color-surface);
}

@media (min-width: 900px) { .dojazd__mapa { min-height: 100%; } }

.dojazd__zgoda {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  max-width: 42ch;
}

.dojazd__pinezka {
  width: 34px;
  height: 34px;
  color: var(--color-accent);
}

.dojazd__adres {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-brand);
}

.dojazd__nota {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.dojazd__mapa.jest-wczytana { display: block; background: var(--color-surface-sunken); }

.dojazd__ramka {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

/* --- Sposoby dojazdu --- */
.dojazd__sposoby {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.dojazd__sposob {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dojazd__ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.dojazd__tytul {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.dojazd__opis {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.dojazd__wizytowka { margin-top: var(--space-6); }

/* ============================== Kadra ============================== */

.kadra { padding-block: var(--space-10); }

.kadra__siatka {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) { .kadra__siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kadra__siatka { grid-template-columns: repeat(3, 1fr); } }

.karta-specjalisty {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms;
}

@media (hover: hover) and (pointer: fine) {
  .karta-specjalisty:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.karta-specjalisty__foto {
  display: block;
  text-decoration: none; /* podkreslenie linku przechodzi na inicjaly */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.karta-specjalisty__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .karta-specjalisty:hover .karta-specjalisty__foto img { scale: 1.04; }
}

.karta-specjalisty__tresc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.karta-specjalisty__imie {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-brand);
}

.karta-specjalisty__imie a { text-decoration: none; }

/* Cala karta klikalna - jeden link w DOM. */
.karta-specjalisty__imie a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.karta-specjalisty__rola {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.karta-specjalisty__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.karta-specjalisty__obszary { margin-top: var(--space-2); }

.karta-specjalisty .link-strzalka {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Sylwetka specjalisty: sections/specjalista.css */

/* === sections/podstrony.css === */
/* Podstrony, wpis, usluga, wyniki, stopka. */

/* --- Naglowek podstrony --- */
.naglowek-strony {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-9);
  border-bottom: 1px solid var(--color-border);
}

.naglowek-strony__tlo {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Kolor wylacznie po prawej, poza kolumna tekstu - naglowek ma stac
     na czystym tle, tak samo jak H1 w hero. */
  background: radial-gradient(
    620px circle at 88% -10%,
    color-mix(in oklab, var(--color-mint) 26%, transparent),
    transparent 64%
  );
  pointer-events: none;
}

.naglowek-strony > .kontener { position: relative; z-index: 1; }

.naglowek-strony__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: 500;
  color: var(--color-text);
  max-width: var(--measure-display);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.naglowek-strony__miasto { color: var(--color-accent-text); }

.naglowek-strony__lead { margin-bottom: 0; }

/* --- Okruszki --- */
.okruszki { margin-bottom: var(--space-5); }

.okruszki__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.okruszki__element { display: flex; align-items: center; gap: var(--space-2); }
.okruszki a { text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }
.okruszki__separator { color: var(--color-border-strong); }

/* --- Usluga --- */
.naglowek-strony--usluga { padding-bottom: var(--space-8); }

.usluga__gora { display: grid; gap: var(--space-7); }

@media (min-width: 900px) {
  .usluga__gora { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-8); align-items: start; }
}

.usluga__karta {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.usluga__cena {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--color-brand);
  line-height: 1;
}

.usluga__czas { font-size: 14.5px; color: var(--color-text-muted); }

.usluga__tel { justify-self: center; }

.usluga__opis { padding-block: var(--space-9) var(--space-6); }

/* --- Rezerwacja jako podstrona --- */
.rezerwacja-strona { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .rezerwacja-strona { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-9); align-items: start; }
}

.rezerwacja-strona__bok h2 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--color-brand);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.rezerwacja-strona__bok p { color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* --- Panele Amelii: Moje wizyty i Panel specjalisty --- */
.panel-strona { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .panel-strona { grid-template-columns: 1.4fr 0.6fr; gap: var(--space-9); align-items: start; }
  /* Panel pracownika to kalendarz i tabela wizyt - potrzebuje calej szerokosci. */
  .panel-strona--pelna { grid-template-columns: 1fr; }
}

.panel-strona__panel { min-width: 0; }

.panel-strona__brak {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.panel-strona__bok h2 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--color-brand);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.panel-strona__bok p { color: var(--color-text-muted); margin-block: var(--space-4); }

.panel-strona__uwaga {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 72ch;
  font-size: 15px;
  color: var(--color-text-muted);
}

.panel-strona__ikona { flex: none; margin-top: 3px; color: var(--color-ui); }

/* --- Kontakt jako podstrona --- */
.kontakt-strona { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .kontakt-strona { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); align-items: start; }
}

.kontakt-strona__dojazd { margin-top: var(--space-5); }

.kontakt-strona__bok .kontakt-strona__obraz { margin-top: var(--space-6); }

/* --- Cennik --- */
.cennik-lista--pelna { margin-bottom: var(--space-8); }

/* --- Wpis --- */
.wpis__foto {
  margin-block: var(--space-8) 0;
}

.wpis__foto img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wpis__stopka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.wpis__autor { display: grid; gap: 2px; }

.wpis__autor-etykieta {
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wpis__autor-nazwa { font-family: var(--font-display); font-size: 17px; color: var(--color-brand); }

.wpis__nawigacja {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-10);
}

@media (min-width: 700px) { .wpis__nawigacja { grid-template-columns: repeat(2, 1fr); } }

.wpis__sasiad {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-surface);
  transition: border-color 200ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wpis__sasiad:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.wpis__sasiad--nastepny { text-align: right; }

.wpis__sasiad-etykieta { font-size: var(--text-caption); color: var(--color-text-muted); }
.wpis__sasiad-tytul { font-family: var(--font-display); font-size: 17px; color: var(--color-brand); }

/* --- Wyniki wyszukiwania --- */
.szukajka { display: grid; gap: var(--space-2); max-width: 560px; margin-bottom: var(--space-8); }

.szukajka__etykieta { font-weight: 500; font-size: var(--text-ui); }

.szukajka__pole { display: flex; gap: var(--space-2); }

.szukajka input[type="search"] {
  flex: 1;
  min-height: 48px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 200ms;
}

.szukajka input[type="search"]:focus-visible { border-color: var(--color-accent); }

.wyniki { display: grid; gap: var(--space-5); }

.wynik { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }

.wynik__typ {
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.wynik__tytul { font-family: var(--font-display); font-size: 21px; color: var(--color-brand); margin-bottom: var(--space-2); }
.wynik__tytul a { text-decoration: none; }
.wynik__tytul a:hover { text-decoration: underline; }
.wynik__lead { color: var(--color-text-muted); }

/* --- Stopka --- */
.stopka {
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-9);
}

.stopka__siatka { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }

@media (min-width: 768px) { .stopka__siatka { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.8fr); gap: var(--space-8); } }
@media (min-width: 1200px) { .stopka__siatka { grid-template-columns: minmax(0, 420px) 1fr 1fr; gap: var(--space-10); } }

.stopka__logo {
  width: auto;
  height: 44px;
  margin-bottom: var(--space-2);
}

.stopka__opis {
  margin-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 46ch;
}

.stopka__tytul {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-4);
}

.stopka__lista { display: grid; gap: var(--space-3); }
.stopka__lista a,
.stopka__adres a { text-decoration: none; font-size: 15px; }
.stopka__lista a:hover,
.stopka__adres a:hover { text-decoration: underline; color: var(--color-accent); }

.stopka__adres { font-style: normal; line-height: 1.8; font-size: 15px; }
.stopka__godziny { margin-top: var(--space-3); font-size: 14px; color: var(--color-text-muted); }
.stopka__wizyty { margin-top: var(--space-3); font-size: 15px; }
.stopka__wizyty a { text-decoration: none; font-weight: 500; }
.stopka__wizyty a:hover { text-decoration: underline; color: var(--color-accent); }

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.stopka__prawne { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.stopka__prawne a { text-decoration: none; }
.stopka__prawne a:hover { text-decoration: underline; }

.stopka__autor a { color: var(--color-accent-text); font-weight: 500; }

@media (max-width: 767px) {
  /* Miejsce na sticky CTA, zeby nie zaslanialo stopki. */
  .stopka__dol { padding-bottom: calc(var(--space-9) + var(--space-5)); }
}

/* --- Social --- */
.social { display: flex; gap: var(--space-2); }

.social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-brand);
  transition: border-color 200ms, color 200ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.social__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.social__link:active { scale: 0.95; }

/* === sections/specjalista.css === */
/* Podstrona specjalisty: sylwetka, metryczka, wlasny kalendarz Amelii. */

/* --- Sylwetka --- */
.specjalista__uklad { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .specjalista__uklad {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .specjalista__bok { position: sticky; top: 120px; }
}

.specjalista__bok { display: grid; gap: var(--space-4); }

.specjalista__foto {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-md);
}

.specjalista__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.specjalista__naglowek {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-brand);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

/* --- Pastylki w naglowku sylwetki --- */
.naglowek-strony__pastylki { margin-top: var(--space-5); }

.pastylka--akcent {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* --- Metryczka: fakty, ktore decyduja o wyborze osoby --- */
.metryczka {
  display: grid;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.metryczka__wiersz {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.metryczka__wiersz:last-child { border-bottom: 0; }

.metryczka__etykieta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.metryczka__ikona {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-ui);
}

.metryczka__wartosc {
  margin: 0;
  font-size: 16px;
  color: var(--color-text);
}

/* --- Sekcja rezerwacji przypieta do osoby --- */
.rezerwacja--specjalista { scroll-margin-top: 96px; }

.rezerwacja__etykieta-terminow {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-mint);
}

.rezerwacja__terminy .pastylka--termin {
  background: transparent;
  border: 1px solid var(--color-mint);
  color: var(--color-mint);
  font-variant-numeric: tabular-nums;
}

.rezerwacja__telefon {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: 15px;
}

/* --- Karta specjalisty: akcje --- */
.karta-specjalisty__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: auto;
  padding-top: var(--space-3);
}

.karta-specjalisty__akcje .link-strzalka {
  margin-top: 0;
  padding-top: 0;
}

.karta-specjalisty__rezerwacja {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}

.karta-specjalisty__rezerwacja:hover { border-bottom-color: currentColor; }

/* === sections/strona-glowna.css === */
/* Sekcje strony glownej. */

/* --- Pasek zaufania --- */
.zaufanie {
  padding-block: var(--space-8);
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
}

.zaufanie__lista {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) { .zaufanie__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zaufanie__lista { grid-template-columns: repeat(4, 1fr); } }

.zaufanie__ikona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.zaufanie__tytul {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.zaufanie__opis {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Dwie sciezki --- */
.sciezki { padding-block: var(--space-10); }

@media (min-width: 1024px) { .sciezki { padding-block: var(--space-12); } }

.sciezki__siatka {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .sciezki__siatka { grid-template-columns: repeat(2, 1fr); }
}

.sciezka {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms;
}

@media (hover: hover) and (pointer: fine) {
  .sciezka:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* Sciezka kryzysowa jest spokojniejsza, rozwojowa mocniejsza - te same tokeny,
   inne natezenie. */
.sciezka--wsparcie { background: var(--color-surface); }

.sciezka--rozwoj {
  background: linear-gradient(155deg, var(--color-accent-soft), var(--color-surface) 62%);
  border-color: var(--color-border-strong);
}

.sciezka__ikona {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}

.sciezka--rozwoj .sciezka__ikona { background: var(--color-accent); }

.sciezka__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-brand);
}

.sciezka__lead { color: var(--color-text-muted); line-height: 1.65; }

.sciezka__lista {
  display: grid;
  gap: var(--space-3);
  font-size: 15px;
}

.sciezka .link-strzalka { margin-top: auto; padding-top: var(--space-3); }

/* --- Uslugi --- */
.uslugi { padding-block: var(--space-10); }

.uslugi__siatka {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1440px) { .uslugi__siatka { gap: var(--space-6); } }

/* Wczesniej pierwsza karta zajmowala dwie kolumny. Przy kontenerze 1440 px
   zostawialo to w niej pol metra pustki, bo tresc karty jest krotka.
   Rowny grid czyta sie lepiej, a wyroznik robi kolor, nie rozmiar. */
@media (min-width: 700px) {
  .uslugi__siatka { grid-template-columns: repeat(2, 1fr); }
}

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

@media (min-width: 700px) {
  .uslugi__siatka--rowna { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .uslugi__siatka--rowna { grid-template-columns: repeat(3, 1fr); }
}

/* --- Kroki --- */
.kroki {
  padding-block: var(--space-10);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.kroki__uklad { display: grid; gap: var(--space-8); }

@media (min-width: 1024px) {
  .kroki__uklad {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-10);
    align-items: start;
  }

  .kroki__intro { position: sticky; top: 112px; }
}

.kroki__intro .przycisk { margin-top: var(--space-6); }

/* Kroki jako os: znacznik z numerem, linia do nastepnego kroku, wypelnienie
   linii sterowane przewijaniem (animations.js). Bez JS i przy reduced-motion
   klasa .kroki--os nie jest dodawana, wiec wszystkie kroki wygladaja na
   ukonczone, a linie sa pelne - nic nie zostaje "wygaszone". */
.kroki__lista {
  --krok-znacznik: 44px;
  --krok-odstep: var(--space-7);
  display: grid;
  gap: var(--krok-odstep);
}

.krok {
  position: relative;
  display: grid;
  grid-template-columns: var(--krok-znacznik) 1fr;
  gap: var(--space-5);
}

.kroki__lista--waska { max-width: var(--measure); }

.krok__znacznik {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--krok-znacznik);
  height: var(--krok-znacznik);
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  transition: background-color 400ms ease, border-color 400ms ease;
}

.krok__numer {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-on-accent);
  transition: color 400ms ease;
}

.krok__linia {
  position: absolute;
  left: calc(var(--krok-znacznik) / 2 - 1px);
  top: calc(var(--krok-znacznik) + var(--space-2));
  bottom: calc(-1 * var(--krok-odstep) + var(--space-2));
  width: 2px;
  border-radius: 2px;
  background: var(--color-border);
  overflow: hidden;
}

.krok__linia-postep {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: top center;
}

/* Stan przed dojechaniem do kroku - tylko gdy os jest sterowana z JS. */
.kroki--os .krok:not(.krok--aktywny) .krok__znacznik {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.kroki--os .krok:not(.krok--aktywny) .krok__numer { color: var(--color-text-muted); }

.krok__tresc { padding-top: var(--space-2); }

.krok__tytul {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

@media (min-width: 1024px) {
  .kroki__lista { --krok-znacznik: 52px; --krok-odstep: var(--space-8); }
  .krok__numer { font-size: 17px; }
  .krok__tytul { font-size: var(--text-h3); }
}

.krok__opis { color: var(--color-text-muted); line-height: 1.65; }

/* --- O nas --- */
.o-nas { padding-block: var(--space-10); }

.o-nas__siatka { display: grid; gap: var(--space-7); }

@media (min-width: 900px) {
  .o-nas__siatka {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-9);
    align-items: center;
  }
}

.o-nas__foto { position: relative; margin: 0; }

.o-nas__obraz {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: var(--shadow-md);
}

.o-nas__podpis {
  display: grid;
  gap: 2px;
  margin-top: calc(var(--space-5) * -1);
  margin-left: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  width: fit-content;
}

.o-nas__podpis strong {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-brand);
}

.o-nas__podpis a {
  color: inherit;
  text-decoration: none;
}

.o-nas__podpis a:hover { text-decoration: underline; text-underline-offset: 3px; }

.o-nas__podpis a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.o-nas__podpis span { font-size: 13.5px; color: var(--color-text-muted); }

.o-nas__tresc > p { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }

/* --- Rezerwacja --- */
.rezerwacja { padding-block: var(--space-10); }

@media (min-width: 1024px) { .rezerwacja { padding-block: var(--space-12); } }

.rezerwacja__siatka { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .rezerwacja__siatka {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: center;
  }
}

.rezerwacja__zalety {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.rezerwacja__moje-wizyty {
  margin-top: var(--space-5);
  font-size: 15px;
  color: var(--color-text-muted);
}

.rezerwacja__moje-wizyty a { font-weight: 500; }

.rezerwacja .rezerwacja__moje-wizyty a { color: var(--color-mint); }

.rezerwacja .naglowek-sekcji__tytul,
.cta-pas__tytul { color: var(--color-text); }

.rezerwacja .nadtytul { color: var(--color-mint); }

/* --- Cennik skrocony --- */
.cennik-skrot { padding-block: var(--space-10); }

.cennik-lista {
  display: grid;
  border-top: 1px solid var(--color-border);
  /* Bez ograniczenia cena odjezdzalaby o metr od nazwy uslugi
     i wiersz przestalby sie czytac jako jedna calosc. */
  max-width: 1040px;
}

.cennik-lista__pozycja {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.cennik-lista__opis h2,
.cennik-lista__opis h3 {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.cennik-lista__opis a { text-decoration: none; }
.cennik-lista__opis a:hover { text-decoration: underline; }

.cennik-lista__czas,
.cennik-lista__dla-kogo {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.cennik-lista__dla-kogo { margin-bottom: var(--space-1); }

.cennik-lista__cena {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.cennik-skrot__nota,
.cennik__uwagi {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: 14.5px;
}

/* --- FAQ --- */
.faq { padding-block: var(--space-10); background: var(--color-surface); border-block: 1px solid var(--color-border); }

.faq__uklad { display: grid; gap: var(--space-7); }

@media (min-width: 1024px) {
  .faq__uklad { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-9); align-items: start; }
  .faq__intro { position: sticky; top: 112px; }
}

/* --- Blog --- */
.blog-sekcja { padding-block: var(--space-10); }

.blog-siatka { display: grid; gap: var(--space-5); }

@media (min-width: 700px) { .blog-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-siatka { grid-template-columns: repeat(3, 1fr); } }

/* --- Kontakt --- */
.kontakt-sekcja { padding-block: var(--space-10); background: var(--color-surface); border-top: 1px solid var(--color-border); }

.kontakt-sekcja__siatka { display: grid; gap: var(--space-8); }

@media (min-width: 900px) {
  .kontakt-sekcja__siatka { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); align-items: start; }
}

.kontakt-dane { display: grid; gap: var(--space-4); font-style: normal; margin-block: var(--space-5); }

.kontakt-dane p { display: flex; gap: var(--space-3); align-items: flex-start; }
.kontakt-dane .icon { color: var(--color-ui); margin-top: 2px; }
.kontakt-dane a { text-decoration: none; }
.kontakt-dane a:hover { text-decoration: underline; }

.kontakt-dane--duze { font-size: 17px; }

.kontakt-sekcja__formularz { display: grid; align-content: start; }

.kontakt-sekcja__obraz,
.kontakt-strona__obraz {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Kadr od gory: na zdjeciu wejscia tabliczka z logo jest u gory drzwi. */
  object-position: 50% 0;
  box-shadow: var(--shadow-sm);
}

.kontakt-sekcja__nota {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* --- Pas CTA --- */
.cta-pas { padding-block: var(--space-9); }

.cta-pas__wnetrze {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-pas__wnetrze { grid-template-columns: 1.3fr 0.7fr; }
}

.cta-pas__tytul {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.cta-pas__lead { color: var(--color-text-muted); max-width: 56ch; }

.cta-pas__akcje { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* === overrides/amelia.css === */
/* Brand na widgetach Amelii (formularz v3 - Vue, <step-form-wrapper>).

   Vue ustawia kolory zmiennymi CSS w RUNTIME na elementach wewnetrznych,
   dlatego nadpisanie musi:
   1. celowac w kontener ORAZ kazdego potomka (zmienna ustawiona blizej
      elementu wygrywa z dziedziczona - wiec dziedziczenie nie wystarczy),
   2. miec !important (deklaracja !important z arkusza wygrywa ze zwyklym
      stylem inline ustawianym przez JS).
   Jedyne miejsce w motywie z !important - i scisle ograniczone do widgetu.

   CELOWO literalne hexy zamiast var(): widget stoi w ciemnej sekcji
   (data-motyw="dark"), gdzie tokeny sie odwracaja (accent = mieta),
   a wnetrze widgetu jest jasne. Widget to wyspa przypieta do jasnej palety. */

.amelia-v2-booking,
.amelia-v2-booking #amelia-container,
.amelia-v2-booking #amelia-container * {
  /* Kolor wiodacy i przyciski */
  --am-c-primary: #0C7779 !important;
  --am-c-btn-bgr: #0C7779 !important;
  --am-c-btn-border: #0C7779 !important;
  --am-c-btn-text: #F5FAF8 !important;
  --am-c-btn-first: #0C7779 !important;
  --am-c-btn-first-op20: rgba(12, 119, 121, 0.2) !important;

  /* Tresc formularza */
  --am-c-main-text: #12333A !important;
  --am-c-main-bgr: #FBFDFC !important;
  --am-c-inp-border: #A9C4C1 !important;
  --am-c-input-border: #A9C4C1 !important;
  --am-c-inp-text: #12333A !important;

  /* Kalendarz (komorki dni) - domyslnie indygo */
  --am-c-dpf-bgr: #FBFDFC !important;
  --am-c-dpf-border: #D5E2E0 !important;
  --am-c-dpf-text: #12333A !important;
  --am-c-dpf-text-op60: #4A6A6C !important;
  --am-c-dpf-text-op10: #E7F0EE !important;
  --am-c-dpf-cell-bgr: #DFF3ED !important;
  --am-c-dpf-cell-border: #A9C4C1 !important;
  --am-c-dpf-cell-text: #0A5F55 !important;
  --am-c-dpicker-bgr: #FBFDFC !important;
  --am-c-dpicker-border: #A9C4C1 !important;

  /* Pasek bocznych krokow: ciemny teal marki zamiast granatu */
  --am-c-sb-bgr: #0E2429 !important;
  --am-c-sb-bgr-atc: #143036 !important;
  --am-c-sb-text: #E4EFEC !important;
  --am-c-sb-text-op60: rgba(228, 239, 236, 0.6) !important;
  --am-c-sb-text-op10: rgba(228, 239, 236, 0.1) !important;
  --am-c-sb-text-op5: rgba(228, 239, 236, 0.05) !important;
  --am-c-sb-checker-border: #3BC1A8 !important;

  /* Stany */
  --am-c-error: #B23E36 !important;
  --am-c-success: #4E7635 !important;

  /* Typografia */
  --am-font-family: 'Source Sans 3', system-ui, sans-serif !important;
}

.amelia-v2-booking { font-family: 'Source Sans 3', system-ui, sans-serif; }

/* ZADNEGO wlasnego tla, cienia ani overflow na kontenerze - kontener bywa
   wyzszy niz widoczny formularz i w ciemnej sekcji nasz cien robil wokol
   niego szara plyte (zgloszone przez klienta jako "jakies cienie"). */

/* === overrides/dotyk.css === */
/* Nadpisania ladowane na samym koncu arkusza.
   Ten katalog istnieje po to, zeby reguly przekrojowe (jak minimalne pola
   dotyku) nie przegrywaly z bardziej szczegolowymi stylami komponentow
   tylko dlatego, ze te sa sklejane pozniej. */

/* ============================================================
   Pola dotyku na mobile.
   Wytyczna: minimum 44x44 px na kazdym elemencie dotykalnym.
   Linki tekstowe z ikona strzalki same z siebie maja ok. 26-37 px,
   wiec dobijamy je paddingiem zamiast powiekszac czcionke.
   ============================================================ */
@media (max-width: 767px) {
  .link-strzalka,
  .pasek-gorny .pasek-gorny__link,
  .link-tel,
  .wordmark,
  .custom-logo-link,
  .stopka__lista a,
  .stopka__prawne a,
  .okruszki a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Telefon i e-mail sa najczesciej dotykanymi linkami na mobile -
     musza byc najlatwiejsze do trafienia. */
  .kontakt-dane a,
  .stopka__adres a,
  .stopka__autor a,
  .proza a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .cennik-lista__opis a,
  .karta-uslugi__tytul a,
  .karta-wpis__tytul a {
    display: inline-block;
    min-height: 44px;
    padding-block: var(--space-2);
  }

  /* Odstep miedzy sasiadujacymi celami dotyku - inaczej latwo trafic w zly. */
  .stopka__prawne { gap: var(--space-2) var(--space-5); }
}