/* ==========================================================================
 Julita Warcholińska — psycholog dzieci i młodzieży
 Arkusz stylów strony głównej.
 Kolejność sekcji odpowiada kolejności sekcji w index.html.
 ========================================================================== */
/* ============ FONTY (lokalne, bez Google Fonts) ============ */
/* Pliki WOFF2 w assets/fonts/: podzbiór latin + latin-ext (polskie znaki),
   osie zawężone do używanych wag. Fraunces: opsz 9–144, wght 400–600;
   Karla: wght 400–700. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/fraunces.woff2) format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(../fonts/fraunces-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/karla.woff2) format('woff2');
}
/* ============ DESIGN TOKENS ============ */
/* Kolory, fonty i promienie zaokrągleń używane w całym pliku przez var(--nazwa). */
:root{
  --ink:#1C2530;
  --ink-soft:#5C6772;
  --sage:#2C5F8C;
  --sage-deep:#1D4666;
  --sage-light:#EAF2F8;
  --sand:#FFFFFF;
  --coral:#3B6EA5;         /* uwaga: mimo nazwy "coral" to kolor niebieski — tak został pierwotnie nazwany w projekcie */
  --coral-deep:#2A527D;
  --sky:#DCE8F2;
  /* Ciepły akcent — równoważy chłód niebieskiej palety; używany jako tło
     sekcji procesu, karty z cytatem i banerów CTA. */
  --warm:#F8F2EA;
  --cream:#FFFFFF;
  --line:#E3E7EC;

  --font-display:'Fraunces', serif;      /* nagłówki (h1-h4) */
  --font-body:'Karla', sans-serif;       /* tekst akapitów */
  --font-utility:'Karla', sans-serif;    /* przyciski, etykiety, elementy UI — ta sama rodzina co tekst,
                                           w wagach 600/700; wcześniej Manrope, niemal nieodróżnialny od Karli */

  --container:1180px;   /* maksymalna szerokość treści na dużych ekranach */
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;

  /* Jedno źródło prawdy dla rytmu pionowego. Odstęp między sąsiednimi sekcjami
     to zawsze 2 × ta wartość (padding-bottom jednej + padding-top drugiej).
     Wcześniej 64/48 px było wpisane literalnie w trzech miejscach (section,
     media query, margin-top stopki), więc każda zmiana wymagała pamiętania
     o wszystkich. */
  --space-section:64px;

  /* Skala typograficzna — jedno źródło prawdy dla rozmiarów tekstu.
     Wcześniej w pliku było 24 różnych wartości font-size, w tym pięć w przedziale
     15,0-15,7px, czyli różnice nierozróżnialne dla oka, a mnożące przypadki do
     utrzymania. Poniższe stopnie pokrywają wszystkie realne role tekstu na
     stronie; nowy rozmiar dodajemy tylko wtedy, gdy żaden z nich nie pasuje. */
  --text-2xs:.7rem;     /* 11,2px — nadkreślenie w logotypie */
  --text-xs:.82rem;     /* 13,1px — etykiety, drobny druk */
  --text-sm:.9rem;      /* 14,4px — podpisy, tekst pomocniczy */
  --text-base:.95rem;   /* 15,2px — listy, opisy kart, przyciski */
  --text-md:1.05rem;    /* 16,8px — tekst główny */
  --text-lg:1.15rem;    /* 18,4px — lid, nagłówki kroków i kart */
  --text-xl:1.3rem;     /* 20,8px — nagłówki grup (h3) */
  --text-2xl:2.25rem;   /* 36px  — nagłówki sekcji (h2); na telefonie 28px, patrz media query niżej */
  --text-3xl:2.1rem;    /* 33,6px — kwota w cenniku */
}
@media(max-width:768px){
  :root{--space-section:48px;--text-2xl:1.75rem;}
}

/* Reset i domyślne style tekstu/elementów bazowych */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:77px;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
/* h2 opierał się wyłącznie o domyślny rozmiar przeglądarki (1.5em ≈ 25,5 px),
   co dawało zbyt małą różnicę względem nagłówków grup (h3, 1.3rem ≈ 20,8 px)
   stylizowanych na h3 — nagłówki wyglądały niemal na tym samym poziomie. */
h2{font-size:var(--text-2xl);line-height:1.15;text-wrap:balance;}
/* balance — bez tego po poszerzeniu kolumny Podejścia słowo „podejście” zostawało
   samo w drugiej linii; liczba linii się nie zmienia, więc rytm też nie. */
/* Interlinia 1.15 zamiast odziedziczonego 1.6: przy 36px dwuliniowy h2 miał
   ~21px pustego pasa między liniami i rozpadał się na dwa osobne zdania. */

/* Leading-trim: przycina połowiczną interlinię, przez co pudełko nagłówka kończy
   się dokładnie na wersaliku u góry i linii bazowej u dołu. Bez tego h2 (28px przy
   line-height 1.6) niósł ~12px pustego pudełka nad literami i odstęp między
   sekcjami zaczynającymi się nagłówkiem wyglądał na 139-143px zamiast 128px,
   podczas gdy sekcje zaczynające się zdjęciem lub panelem dawały równe 128px.
   Z @supports starsze przeglądarki po prostu zachowują dotychczasowy wygląd. */
@supports (text-box: trim-both cap alphabetic){
  h1,h2,h3,h4{text-box:trim-both cap alphabetic;}
}
/* Wariant zapasowy dla przeglądarek bez text-box-trim (m.in. Firefox): ten sam
   efekt osiągany ujemnymi marginesami liczonymi z metryk kroju. Jednostka cap to
   wysokość wersalika, lh to wysokość wiersza, więc (1cap - 1lh)/2 to dokładnie
   pusty pas nad literami — zmierzone dla tej typografii co do dziesiątej piksela
   (dla h1 błąd 1px). Dolny margines pomniejszony tak samo, żeby odstęp pod
   nagłówkiem pozostał równy .5em. Bez tego nagłówki siadały 11px niżej i odstępy
   przed sekcjami zaczynającymi się nagłówkiem rosły do 139px zamiast 128px.
   Przeglądarka bez jednostek cap/lh zignoruje te deklaracje i zachowa
   dotychczasowy wygląd. */
@supports not (text-box: trim-both cap alphabetic){
  h1,h2,h3,h4{
    margin-block-start:calc((1cap - 1lh) / 2);
    margin-block-end:calc(.5em + (1cap - 1lh) / 2);
  }
}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* Jeden odstęp pionowy dla WSZYSTKICH sekcji, bez nadpisań per sekcja.
   Między sąsiednimi sekcjami powstaje zawsze ta sama przerwa: 128 px (desktop),
   96 px (telefon). Wcześniej górna część strony miała 192 px, a dolna — przez
   indywidualne nadpisania #rezerwacja/#cennik/#faq/#kontakt — 96 px, co dawało
   dwa różne rytmy i nierówne odstępy wokół panelu rezerwacji. */
section{padding:var(--space-section) 0;position:relative;}

/* Przyciski używane w całej witrynie (hero, nawigacja, rezerwacja) */
.btn{
  font-family:var(--font-utility);
  font-weight:700;
  font-size:var(--text-base);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 24px;
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px -8px rgba(59,110,165,.35);}
.btn-primary:hover{background:var(--coral-deep);box-shadow:0 14px 28px -8px rgba(59,110,165,.42);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--cream);}

/* ============ NAV ============ */
/* Górny pasek z logo, menu i przyciskiem "Umów konsultację". Przyklejony do góry (sticky). */
header.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-xl);
  text-decoration:none;
  color:var(--ink);
  /* min-height 44px — cel dotykowy zgodny z WCAG; sam logotyp ma 40px wysokości. */
  display:flex;align-items:center;gap:12px;min-height:44px;
}
/* Znak marki: dwoje dorosłych i dziecko */
.brand-mark{width:40px;height:40px;flex:none;}
.brand-name{display:flex;flex-direction:column;justify-content:center;line-height:1.1;}
@media(max-width:480px){
  .brand{gap:10px;}
  .brand-mark{width:32px;height:32px;}
}
.brand-name span{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:var(--text-2xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sage-deep);
  margin-top:0px;
}
.nav-links{
  display:flex;align-items:center;gap:32px;
  font-family:var(--font-utility);font-weight:600;font-size:var(--text-base);
  list-style:none;margin:0;padding:0;
}
/* min-height 44px — cel dotykowy zgodny z WCAG (wcześniej 37px na desktopie
   i 40px na telefonie). Podkreślenie na hover pozycjonowane od dołu tekstu,
   więc powiększenie obszaru go nie rozjeżdża. */
.nav-links a{
  text-decoration:none;color:var(--ink-soft);position:relative;
  display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--coral);
  transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:8px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;flex-direction:column;
  gap:5px; /* odstęp między kreskami — jedyny świadomy wyjątek od siatki 8px (proporcje ikony);
             w flexie marginesy się nie łączą, więc gap zamiast margin */
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
/* Otwarte menu: ikona zmienia się w krzyżyk */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Poniżej 1040px menu chowa się w boczny panel (poza ekranem po prawej)
   i wysuwa się po kliknięciu przycisku-hamburgera — klasę .open dodaje
   JavaScript na dole strony, nie ma jej w samym HTML. */
@media(max-width:1040px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;top:0;
    height:100vh;width:min(78vw,320px);
    background:var(--cream);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:96px 32px 32px;
    gap:24px;font-size:var(--text-lg);
    transform:translateX(100%);
    /* Zamknięty panel jest niewidoczny (visibility:hidden), a nie tylko przesunięty:
       inaczej jego linki zostają w kolejności Tab / czytnika ekranu, a cień
       wpadał na prawą krawędź ekranu (szary pas 255 → 229 na każdym widoku).
       visibility przełącza się z opóźnieniem .35s, żeby zamykanie było animowane. */
    visibility:hidden;
    z-index:101;
  }
  .nav-links.open{
    transform:translateX(0);visibility:visible;
    box-shadow:-12px 0 40px -20px rgba(0,0,0,.3);
  }
  /* Animacja tylko podczas otwierania/zamykania (klasę .nav-anim dodaje main.js
     na 0,4 s). Bez tego panel wysuwał się przez ekran przy każdym przejściu przez
     1040 px: przy odświeżeniu na iPhonie (zanim Safari ustali szerokość strony)
     i przy obrocie telefonu. */
  html.nav-anim .nav-links{transition:transform .35s ease, visibility 0s linear .35s;}
  html.nav-anim .nav-links.open{transition:transform .35s ease, visibility 0s;}
  .nav-toggle{display:flex;position:relative;z-index:102;}
  .nav-cta .btn-ghost{display:none;}
  /* Przyciemnienie strony pod otwartym menu; klik w nie zamyka menu (main.js) */
  body::before{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(28,37,48,.4);
    opacity:0;visibility:hidden;
  }
  html.menu-open body::before{opacity:1;visibility:visible;}
  html.nav-anim body::before{transition:opacity .35s ease, visibility 0s linear .35s;}
  html.nav-anim.menu-open body::before{transition:opacity .35s ease, visibility 0s;}
  html.menu-open{overflow:hidden;}
}

/* ============ HERO ============ */
/* Sekcja powitalna: dwie kolumny — tekst wyrównany do lewej + zdjęcie po prawej. */
/* padding-top liczony z tokenu, a nie sztywne 72px — selektor klasowy ma wyższą
   specyficzność niż section, więc poprzednia wartość nigdy nie schodziła na
   telefonie (zostawała 72px, podczas gdy reszta rytmu spadała do 48px).
   +8px względem tokenu: hero startuje tuż pod przyklejonym nagłówkiem. */
.hero{padding-top:calc(var(--space-section) + 8px);overflow:hidden;}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.hero h1{
  font-size:clamp(2.3rem,4.4vw,3.55rem);
  line-height:1.08;
  max-width:12.5ch;
}
.hero h1 em{
  font-style:italic;color:var(--sage-deep);
}
/* H1 w hero przycinany ujemnymi marginesami (jak ścieżka zapasowa dla Firefoksa),
   a nie text-box-trim: w Chromium kursywa w <em> (osobny plik kroju) przy
   text-box-trim losowo rozpychała jedną linię o 7px — odstęp 47 zamiast 39,7px
   na 390px, w 7 z 12 wczytań. Z marginesami cap/lh: 0 z 20. */
@supports (text-box: trim-both cap alphabetic){
  .hero h1{
    text-box:normal;
    margin-block-start:calc((1cap - 1lh) / 2);
    margin-block-end:calc(.5em + (1cap - 1lh) / 2);
  }
}
/* Linijka "kto/co/gdzie" pod H1 — dla użytkownika z wyszukiwarki i dla SEO */
.hero-tagline{
  font-family:var(--font-utility);font-weight:700;font-size:var(--text-sm);
  letter-spacing:.04em;color:var(--sage-deep);margin-bottom:16px;
}
.hero-sub{font-size:var(--text-lg);max-width:46ch;margin-bottom:32px;}
/* Mikrocopy pod przyciskami — obniża próg lęku przed pierwszym kontaktem */
.cta-note{font-size:var(--text-sm);color:var(--ink-soft);margin:0;}
/* Bez margin-bottom: .hero-actions to ostatni element kolumny tekstowej hero,
   więc jego dolny margines doklejał się do odstępu między sekcjami (na telefonie
   dawało to 136px zamiast ~96px). Margines pochodził z czasów, gdy pod
   przyciskami była jeszcze .cta-note. */
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
/* na telefonie oba przyciski na całą szerokość — wcześniej 187 i 214 px, poszarpana krawędź */
@media(max-width:640px){
  .hero-actions .btn{width:100%;justify-content:center;}
}

/* Zdjęcie w owalnej ramce z jasnoniebieską "plamą" (.blob) w tle.
   Otoczka jest realizowana jako padding .hero-art, który wypełnia .blob, a zdjęcie
   siedzi w środku — dzięki temu niebieski pas ma wszędzie tę samą grubość
   (padding procentowy liczy się od szerokości, więc jest równy na wszystkich
   bokach). Blob ma też ten sam promień zaokrąglenia co zdjęcie, więc obie formy
   są współśrodkowe; wcześniej różne promienie dawały pas raz gruby, raz zanikający.
   Pas wchodzi w obrys .hero-art, czyli elementu w układzie — nie wystaje poza
   treść i nie zaburza odstępu do następnej sekcji. */
.hero-art{position:relative;padding:5%;}
/* Ramka w kształcie otoczaka ze znaku marki (#ksztalt-otoczak) */
.hero-art .shape-defs{position:absolute;width:0;height:0;overflow:hidden;}
.hero-art .blob{
  position:absolute;inset:0;
  background:var(--sky);
  clip-path:url(#ksztalt-otoczak-pas);
  z-index:0;
}
.hero-art .portrait{
  position:relative;z-index:1;
  aspect-ratio:4/5;
  padding:6px;
  background:var(--cream);
  clip-path:url(#ksztalt-otoczak);
}
.hero-art .portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 12%;
  clip-path:url(#ksztalt-otoczak);
}
/* Desktop (dwie kolumny): 12.5ch łamało H1 na 6 linii (368px wysokości) w kolumnie
   561px. 16ch daje 5 linii — minimum, bo kursywa „która czeka na zauważenie.”
   i tak zajmuje 2 linie. Telefon zostaje przy 12.5ch (łamanie bez zmian). */
@media(min-width:921px){
  .hero h1{max-width:16ch;}
}
@media(max-width:920px){
  .hero-inner{grid-template-columns:1fr;gap:48px;}
  .hero-art{order:-1;max-width:340px;margin:0 auto;}
  /* tekst na osi zdjęcia */
  .hero-inner > .reveal:first-child{text-align:center;}
  .hero h1,.hero-sub{margin-inline:auto;}
  .hero-actions{justify-content:center;}
}

/* ============ ABOUT ============ */
/* Sekcja "O mnie": zdjęcie z cytatem po lewej, tekst biograficzny po prawej.
   Akapity wyrównane do lewej; cała kolumna tekstu wyśrodkowana w pionie
   względem karty ze zdjęciem (align-items:center). */
.about-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;
}
.about-inner > .reveal:last-child{text-align:left;}
.about-inner > .reveal:last-child p{max-width:none;margin-left:0;margin-right:0;}
/* Ostatni akapit bez dolnego marginesu — inaczej wchodził do wysokości kolumny
   i wyśrodkowanie w pionie przesuwało tekst o ~17px w górę. */
.about-inner > .reveal:last-child > :last-child{margin-bottom:0;}
/* ≥1100px karta jest wyższa od tekstu (o 121–244px), więc tekst jest wyśrodkowany
   względem niej: przycinamy dół ostatniego akapitu do linii bazowej (jak w ścieżce
   zapasowej nagłówków), żeby środek liczył się od wersalika do linii bazowej —
   bez tego tekst wisiał 4,5px za wysoko. Poniżej ~945px to tekst jest wyższy
   i wyznacza dół sekcji — tam przycięcie skróciłoby rytm (120 zamiast 128px),
   stąd próg z zapasem, a nie na granicy. */
@media(min-width:1100px){
  .about-inner > .reveal:last-child > :last-child{margin-bottom:calc((1cap - 1lh) / 2);}
}
@media(max-width:820px){
  .about-inner{grid-template-columns:1fr;gap:32px;}
  .about-figure{max-width:420px;margin:0 auto;}
  .about-inner > .reveal:last-child h2{text-align:center;}
}
/* Karta ze zdjęciem i cytatem — celowo wyśrodkowana (inaczej niż tekst obok) */
.about-figure{
  background:var(--warm);
  border-radius:var(--radius-lg);
  overflow:hidden;
  font-family:var(--font-display);
  text-align:center;
}
.about-figure img{
  width:100%;height:auto;   /* height:auto — inaczej atrybut height z HTML nadpisuje proporcje */
  aspect-ratio:4/5;
  object-fit:cover;
  /* Zdjęcie jest już przycięte do 4:5 w pliku, więc przeglądarka nic nie docina —
     object-position zostaje neutralny (istotny tylko, gdyby podmieniono zdjęcie
     o innych proporcjach). */
  object-position:50% 50%;
}
.about-figure .caption{padding:32px 32px 32px;}
.about-figure p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--text-lg);
  color:var(--ink);
  line-height:1.5;
}
.about-figure footer{
  font-family:var(--font-utility);
  font-style:normal;
  font-weight:700;
  font-size:var(--text-xs);
  color:var(--sage-deep);
}


/* ============ OBSZARY WSPARCIA ============ */
/* .section-head to wspólny nagłówek sekcji (używany też w Cenniku i FAQ) —
   zawsze wyśrodkowany, ograniczony do 640px szerokości. */
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
/* Obszary wsparcia: dwie grupy (rodzice / dzieci) jako listy tytuł + opis,
   wyrównane do lewej. Zastępują 12 kart z ikonami — lista skanuje się szybciej,
   a na telefonie sekcja zajmowała ponad 4 ekrany. Grupy to <details>: na
   telefonie rozwijane (druga zwinięta, patrz main.js), od 641px zawsze otwarte. */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.area-group > summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 0 16px;border-bottom:2px solid var(--sage-deep);cursor:default;
}
.area-group > summary::-webkit-details-marker{display:none;}
.area-group h3{font-size:var(--text-xl);color:var(--sage-deep);margin:0;}
/* od 641px (grupy zawsze otwarte) nagłówki grup wyśrodkowane nad listami */
@media(min-width:641px){
  .area-group > summary{justify-content:center;}
  .area-group h3{text-align:center;}
}
.area-list{list-style:none;margin:0;padding:0;}
.area-list li{padding:24px 0;border-bottom:1px solid var(--line);}
.area-list h4{font-size:var(--text-lg);line-height:1.3;margin:0 0 8px;}
.area-list p{font-size:var(--text-base);margin:0;}
@media(max-width:640px){
  .areas{grid-template-columns:1fr;gap:16px;}
  .area-group{border:1px solid var(--line);border-radius:var(--radius-md);padding:0 24px;}
  .area-group > summary{padding:24px 0;border-bottom:0;cursor:pointer;}
  /* strzałka rozwijania — obrót 180° po otwarciu */
  .area-group > summary::after{
    content:"";flex:none;width:8px;height:8px;margin-right:4px;
    border-right:2px solid var(--sage-deep);border-bottom:2px solid var(--sage-deep);
    transform:translateY(-3px) rotate(45deg);transition:transform .25s ease;
  }
  .area-group[open] > summary::after{transform:translateY(3px) rotate(-135deg);}
  .area-list li:first-child{padding-top:0;}
  .area-list li:last-child{border-bottom:0;}
}

/* Banery CTA w środku strony — wypełniają lukę między przyciskiem w hero
   a panelem rezerwacji (wcześniej ok. 5 ekranów bez żadnego punktu akcji). */
.cta-band{
  text-align:center;margin-top:48px;
  padding:32px 24px;border-radius:var(--radius-md);
  background:var(--warm);
}
.cta-band-text{
  font-family:var(--font-display);font-size:var(--text-xl);color:var(--ink);
  max-width:46ch;margin:0 auto 24px;
}
.cta-band .cta-note{margin-top:16px;}

/* ============ APPROACH ============ */
/* Sekcja "Moje podejście": zdjęcie po lewej, tekst wyrównany do lewej po prawej. */
.approach{background:var(--cream);}
.approach-inner{
  display:grid;
  /* te same proporcje i odstęp co .about-inner — przy 1fr 1fr zdjęcie miało 534 px
     szerokości, więcej niż portret w hero, i wystawało 271 px ponad tekst */
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:center; /* tekst jest krótszy niż zdjęcie — wyśrodkowanie równoważy kolumny */
}
.approach-inner > .reveal:last-child{text-align:left;}
.approach-inner > .reveal:last-child p{max-width:none;margin-left:0;margin-right:0;}
.approach-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(28,37,48,.28);
}
.approach-photo img{
  width:100%;height:auto;   /* height:auto — atrybut height z HTML nie może nadpisać proporcji */
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 18%;
}
@media(max-width:920px){
  .approach-inner{grid-template-columns:1fr;gap:32px;}
  /* width:100% — bez tego margin:auto w siatce każe kontenerowi skurczyć się do
     zawartości; przed wczytaniem zdjęcia to 0 px, więc treść poniżej przeskakiwała. */
  .approach-photo{order:-1;max-width:380px;margin:0 auto;width:100%;}
  .approach-inner > .reveal:last-child h2{text-align:center;}
}

/* ============ JAK WYGLĄDA WSPÓŁPRACA ============ */
/* Sekcja "Jak wygląda współpraca": nagłówek wyśrodkowany u góry, poniżej
   (do 920px) wyśrodkowana kolumna z 4 krokami — kroki WEWNĄTRZ tej kolumny zostają
   wyrównane do lewej, bo są połączone przerywaną linią (.step::before)
   i wyśrodkowanie tekstu w każdym kroku rozjechałoby się względem tej
   linii i numerków. */
.process-inner > .reveal:first-child{text-align:center;margin-bottom:56px;} /* 56 = jak .section-head */
.process-steps{position:relative;max-width:640px;margin:0 auto;}
/* Przerywana linia rysowana jako osobny odcinek od środka kółka danego kroku
   do środka kółka następnego (kółka ją przykrywają). Wcześniej była to jedna
   linia na cały kontener — gdy opis ostatniego kroku zawijał się na telefonie
   do kilku linijek, linia wychodziła poniżej kółka nr 4. */
.step:not(:last-child)::before{
  content:"";position:absolute;left:23px;top:22px;bottom:-70px;width:2px; /* -70 = margin-bottom 48 + środek kółka 22 */
  background:repeating-linear-gradient(to bottom, var(--sage) 0 8px, transparent 8px 16px);
}
.step{
  position:relative;padding-left:64px;margin-bottom:48px;
}
.step:last-child{margin-bottom:0;}
.step .num{
  position:absolute;left:0;top:-2px;
  width:48px;height:48px;border-radius:50%;
  background:var(--cream);border:2px solid var(--sage);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--sage-deep);
  z-index:1;
}
.step h3{font-size:var(--text-lg);margin-bottom:8px;}
/* Ograniczenie długości wiersza — bez tego tekst kroku rozciągał się do ok. 79 znaków,
   przy komfortowej normie 45-75. Reszta strony też jest ograniczona (FAQ 70ch, Kontakt 640px). */
.step p{margin:0;font-size:var(--text-base);max-width:62ch;}
/* Desktop: 4 kroki w jednym rzędzie, numery nad tytułami, przerywana linia
   poziomo od środka kółka do środka następnego (szerokość kolumny + odstęp 32px).
   Kółka i tekst wyśrodkowane w kolumnie.
   Poniżej 921px zostaje układ pionowy powyżej. */
@media(min-width:921px){
  .process-steps{max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
  .step{padding-left:0;padding-top:72px;margin-bottom:0;} /* 72 = kółko 48 + 24 */
  /* numer nad środkiem kolumny, tytuł i opis wyśrodkowane pod nim */
  .step{text-align:center;}
  .step .num{top:0;left:calc(50% - 24px);}
  .step:not(:last-child)::before{
    left:50%;top:23px;bottom:auto;width:calc(100% + 32px);height:2px;
    background:repeating-linear-gradient(to right, var(--sage) 0 8px, transparent 8px 16px);
  }
}


/* ============ BOOKING ============ */
/* Jasny panel "Umów konsultację" ze sposobami kontaktu. Wcześniej ciemny (--ink),
   w tym samym kolorze co stopka 176 px niżej — czytał się jak jej pierwsza część. */
.booking-panel{
  background:var(--sage-light);
  border-radius:var(--radius-lg);
  padding:48px 48px; /* było 64px — nagłówek zaczynał się niżej niż w pozostałych
    "boxowanych" elementach (.cta-band ma 32px, wersja mobilna tego panelu
    już używała 48px) */
  color:var(--ink);
  position:relative;overflow:hidden;
}
.booking-panel::before{
  content:"";position:absolute;top:-30%;right:-10%;width:340px;height:340px;
  background:var(--sky);opacity:.6;border-radius:50%;
  z-index:0;
}
/* Treść nad dekoracyjnym kołem. Bez tego absolutnie pozycjonowane ::before
   malowało się NAD nagłówkiem i opisem (nie mają pozycjonowania) i je przygaszało. */
.booking-panel > div{position:relative;z-index:1;}
/* Koło mieści się obok treści dopiero przy szerokim panelu: przy 1100 px zachodziło
   na przycisk „Zadzwoń” o 7 px, na telefonie na nagłówek o 170 px. Poniżej 1200 px
   panel jest bez dekoracji. */
@media(max-width:1199px){
  .booking-panel::before{display:none;}
}
.booking-panel h2{text-align:center;}
.booking-panel > div > p:first-of-type{color:var(--ink-soft);text-align:center;max-width:600px;margin-left:auto;margin-right:auto;}
/* max-width — bez tego przyciski rozciągały się na całą szerokość panelu (1036 px),
   przez co strzałka "→" była oddalona od tekstu o kilkaset pikseli. 640 px daje
   tekstowi (zwłaszcza adresowi e-mail) zapas, żeby się nie zawijał. */
.booking-options{display:flex;flex-direction:column;gap:16px;margin:24px auto 0;max-width:640px;position:relative;z-index:1;}
.booking-option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 24px;
  text-decoration:none;
  transition:background .25s ease;
}
.booking-option:hover{border-color:var(--sage);}
.booking-option strong{font-family:var(--font-utility);color:var(--ink);font-size:var(--text-base);display:block;}
.booking-option span{font-size:var(--text-sm);color:var(--ink-soft);}
/* etykieta i dane jako kolumna flex — bez tego wewnętrzny span tworzył linię o wysokości
   rodzica i dół przycisku był o 4 px większy niż góra */
.booking-option > span:first-child{display:flex;flex-direction:column;}
.booking-option .arrow{font-size:var(--text-xl);color:var(--ink-soft);flex:none;}
/* Wariant "primary" — przycisk "Zadzwoń" w tym samym kolorze co główne CTA w hero */
.booking-option.primary{
  background:var(--coral);border-color:var(--coral);
  box-shadow:0 10px 24px -8px rgba(59,110,165,.35);
  transition:background .25s ease, box-shadow .25s ease;
}
.booking-option.primary:hover{background:var(--coral-deep);box-shadow:0 14px 28px -8px rgba(59,110,165,.42);}
.booking-option.primary strong{color:#fff;}
.booking-option.primary span{color:rgba(255,255,255,.9);}
.booking-option.primary .arrow{color:#fff;}

/* Odnośnik do profilu ZnanyLekarz pod przyciskami — obecnie zakomentowany w HTML,
   styl na wypadek przywrócenia */
.booking-note{margin:24px 0 0;text-align:center;font-size:var(--text-sm);color:var(--ink-soft);position:relative;z-index:1;}
.booking-note a{color:var(--sage-deep);}

@media(max-width:920px){
  .booking-panel{padding:48px 24px;}
}

/* ---- Wolne terminy (assets/js/terminy.js) ----
   Biała karta w kolumnie przycisku „Zadzwoń” (640 px). Każdy dzień to wiersz:
   po lewej dzień i data, po prawej godziny albo „Brak wolnych terminów”.
   Wysokość bloku z datą i tekstu = wysokość kafelka (48 px, cel dotykowy WCAG),
   dzięki czemu data i treść wiersza są wyśrodkowane względem pierwszego rzędu
   godzin, a wszystkie wiersze mają ten sam rytm. */
.slots{
  max-width:640px;margin:32px auto 0;padding:32px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  text-align:left;position:relative;z-index:1;
}
.slots[hidden],.booking-alt[hidden]{display:none;}
.slots h3{font-size:var(--text-xl);margin:0 0 8px;}
.slots-lead{margin:0;color:var(--ink-soft);font-size:var(--text-base);}

.week{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:24px;padding:6px;background:var(--sage-light);border-radius:100px;
}
.week-label{
  margin:0;text-align:center;
  font-family:var(--font-utility);font-weight:700;font-size:var(--text-base);color:var(--ink);
}
.week-label .ws,.week-label .wn{display:none;}
.week-btn{
  flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--sage-deep);cursor:pointer;
  box-shadow:0 1px 2px rgba(28,37,48,.08);
  transition:background .2s ease;
}
.week-btn svg{width:18px;height:18px;}
/* bez prostokątnego podświetlenia przy dotknięciu (Android/Chrome); stan zaznaczenia i fokus pokazują własne style */
.week-btn,.slot{-webkit-tap-highlight-color:transparent;}
@media(hover:hover){.week-btn:hover:not(:disabled){background:var(--sky);}}
.week-btn:disabled{background:transparent;box-shadow:none;color:#A9B3BD;cursor:default;}

.days{list-style:none;margin:16px 0 0;padding:0;}
.day{
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line);
}
.day:first-child{border-top:0;}
.day:last-child{padding-bottom:0;}
.day-name,.day-none{margin:0;min-height:48px;display:flex;flex-direction:column;justify-content:center;}
.day-name{font-family:var(--font-utility);font-weight:700;font-size:var(--text-base);line-height:1.3;color:var(--ink);}
.day-name > span{font-weight:400;font-size:var(--text-sm);color:var(--ink-soft);}
.day-name .ds{display:none;}
.day.empty .day-name,.day-none{color:var(--ink-soft);}
.day-none{font-size:var(--text-base);}

/* Kolumny godzin liczone w em: przy powiększonym tekście (ustawienia telefonu,
   powiększenie przeglądarki) jest ich mniej zamiast wystawania poza kartę.
   Przy zwykłej wielkości: 6 w rzędzie na komputerze, 4 na telefonie, 3 przy 320 px. */
.day-slots{
  list-style:none;margin:0;padding:0;font-size:var(--text-base);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(3.6em,1fr));gap:8px;
}
.slot{
  width:100%;min-height:48px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid #C9DAEA;border-radius:var(--radius-sm);
  font-family:var(--font-utility);font-weight:700;font-size:var(--text-base);
  font-variant-numeric:tabular-nums; /* równa szerokość cyfr — godziny nie „tańczą” względem siebie */
  color:var(--sage-deep);text-decoration:none;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
@media(hover:hover){.slot:hover{background:var(--sage-light);border-color:var(--sage);}}
.slot:active{background:var(--sky);border-color:var(--sage);} /* natychmiastowa reakcja na dotyk */
.slot[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#fff;}
/* Po wybraniu godziny: wybrany termin i przycisk z numerem */
.slot-confirm{
  margin-top:12px;padding:16px 20px;border-radius:var(--radius-sm);background:var(--sage-light);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;
}
.slot-confirm strong{font-family:var(--font-utility);font-size:var(--text-md);color:var(--ink);}
.slot-confirm .btn{padding:12px 20px;}
.slot-confirm .btn{flex-wrap:wrap;justify-content:center;column-gap:.35em;row-gap:0;text-align:center;}
.slot-confirm .nowrap{white-space:nowrap;}
.slot-confirm .ds{display:none;}
/* Zarys na czas wczytywania terminów (bez animacji — spokojnie) */
.sk{display:block;background:#EEF1F4;border-radius:6px;}
.sk-name{width:92px;height:14px;margin-bottom:6px;}
.sk-date{width:70px;height:11px;}
.sk-none{width:150px;max-width:100%;height:13px;}
.sk-label{width:150px;height:14px;margin:0 auto;background:#DCE5EE;}
.sk-slot{height:48px;border-radius:var(--radius-sm);}
.days.loading .day-none{align-items:flex-start;}
.day-body{min-width:0;} /* kolumna nie rozpycha karty ponad jej szerokość */
.slot-confirm .nowrap-group{text-align:center;}

/* Pod widgetem: przyciski „Zadzwoń” i „Napisz e-mail” bez zmian względem produkcji. */
.booking-alt{margin:40px auto 0;max-width:640px;text-align:center;color:var(--ink-soft);font-size:var(--text-base);position:relative;z-index:1;}
/* tylko gdy widget jest widoczny — bez niego odstęp zostaje taki jak przed zmianą (24 px) */
.booking-alt:not([hidden]) + .booking-options{margin-top:16px;}

@media(max-width:640px){
  .slots{padding:24px 16px;}
  .week-label .wl{display:none;}
  .week-label .ws{display:inline;}
  .day{padding:10px 0;}
  /* Dzień bez terminów: dzień i data (pod spodem) po lewej, komunikat przy prawej
     krawędzi. Gdy razem się nie mieszczą (320 px, powiększony tekst), komunikat
     przechodzi do następnej linii zamiast zawijać się w środku lub wystawać. */
  .day.empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;min-height:68px;}
  .day.empty .day-name,.day.empty .day-none{min-height:0;}
  .day-none{margin-left:auto;text-align:right;white-space:nowrap;}
  .day-name .dl{display:none;}
  .day-name .ds{display:block;}
  .day-none{font-size:var(--text-sm);}
  /* Dzień z terminami: dzień i data w jednej linii, godziny pod spodem na całą szerokość —
     w prawej kolumnie kafelki miałyby ok. 50 px i byłyby za ciasne dla palca */
  .day:not(.empty){grid-template-columns:1fr;gap:8px;}
  .day:not(.empty) .day-name{min-height:0;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:6px;}
  .day:not(.empty) .day-name .ds{display:inline;}
  .slot-confirm{flex-direction:column;align-items:stretch;text-align:center;}
  /* telefon: krótka data („Czwartek 8.10, 17:00”) i mniejszy tekst przycisku —
     termin i numer mieszczą się w jednej linii zamiast łamać się na dwie */
  .sk-name{width:80px;}
  .sk-none{width:130px;}
  .sk-label{width:100px;}
  .days.loading .day-none{align-items:flex-end;}
  .days.loading .day:not(.empty) .day-name{min-height:1.3em;align-items:center;} /* jak linia „Czwartek 1.10” */
  .slot-confirm .dl{display:none;}
  .slot-confirm .ds{display:inline;}
  .slot-confirm{padding:14px 12px;}
  .slot-confirm .btn{font-size:var(--text-sm);padding:12px 14px;}
}
/* Najwęższe telefony (320–380 px): mniejsze odstępy i tekst w wierszach dni oraz w pasku tygodnia */
@media(max-width:380px){
  .slots{padding:24px 12px;}
  .day.empty{column-gap:8px;}
  .day-name{font-size:var(--text-sm);}
  .day-none{font-size:var(--text-xs);}
  /* etykieta tygodnia między strzałkami 44 px mieści się w jednej linii także przy 320 px */
  .week{padding:4px;gap:4px;}
  .week-label{font-size:var(--text-sm);}
  .slot-confirm{padding:12px;}
  .slot-confirm .btn{padding:12px;font-size:var(--text-xs);}
}
/* 320 px (także przy większej domyślnej czcionce — dlatego em): etykieta liczbowa „28.09 – 4.10” */
@media(max-width:22.49em){
  .week-label .ws{display:none;}
  .week-label .wn{display:inline;}
}

/* ============ PRICING ============ */
/* Jedna karta zamiast trzech identycznych (każda miała 50 min i 200 PLN):
   po lewej cena i przycisk (czas spotkania podaje podtytuł sekcji), po prawej trzy formy spotkania.
   Poniżej 981px cena nad formami, poniżej 641px formy w jednej kolumnie. */
.price-card{
  display:grid;grid-template-columns:280px 1fr;
  border:1.5px solid var(--line);border-radius:var(--radius-lg);
  background:var(--cream);overflow:hidden;
}
.price-main{
  background:var(--sage-light);padding:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center; /* cena i przycisk wyśrodkowane w panelu — przy flex-start zostawało
    puste pole po prawej, najbardziej widoczne na telefonie (panel na całą szerokość) */
}
.price-main .amount{
  font-family:var(--font-display);font-size:var(--text-3xl);color:var(--ink);margin-bottom:24px;line-height:1.2;
}
.price-forms{padding:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.price-form h3{font-size:var(--text-md);margin-bottom:16px;}
.price-form ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.price-form li{font-size:var(--text-sm);color:var(--ink-soft);padding-left:24px;position:relative;}
.price-form li::before{content:"✓";position:absolute;left:0;color:var(--sage-deep);font-weight:700;}

@media(max-width:980px){
  .price-card{grid-template-columns:1fr;}
  .price-main{padding:32px 40px;}
}
@media(max-width:640px){
  .price-main{padding:32px 24px;}
  .price-forms{grid-template-columns:1fr;gap:24px;padding:32px 24px;}
}

/* ============ FAQ ============ */
/* Cały blok pytań i odpowiedzi jest wyśrodkowany na stronie (margin:auto),
   tak samo jak nagłówek sekcji (.section-head) nad nim — ale treść pytań
   i odpowiedzi WEWNĄTRZ tego wyśrodkowanego bloku zostaje wyrównana do lewej,
   bo tak czyta się listę pytań najwygodniej. */
.faq-list{max-width:820px;margin-left:auto;margin-right:auto;}
/* pierwsze pytanie bez górnego paddingu — inaczej odstęp nagłówek → treść wynosił
   56 + 24 = 80 px zamiast 56 jak w pozostałych sekcjach */
.faq-list details:first-child{padding-top:0;}
.faq-list details{
  border-bottom:1px solid var(--line);
}
/* Padding przeniesiony z details na summary: dzięki temu klikalny jest cały
   wiersz, a jego wysokość sięga 44px zalecanych przez WCAG dla celu dotykowego
   (wcześniej sam tekst summary miał 26px, a padding leżał na rodzicu, więc nie
   powiększał obszaru kliknięcia). */
.faq-list summary{
  cursor:pointer;list-style:none;padding:24px 0;min-height:44px;box-sizing:content-box;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--font-utility);font-weight:700;font-size:var(--text-md);color:var(--ink);
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .plus{
  flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--sage);
  display:flex;align-items:center;justify-content:center;color:var(--sage-deep);font-size:var(--text-lg);
  transition:transform .3s ease;
}
.faq-list details[open] summary .plus{transform:rotate(45deg);}
/* Po przeniesieniu paddingu na summary odstępy wokół odpowiedzi odtworzone tak,
   żeby układ pozostał bez zmian: 16px pod nagłówkiem pytania, 24px pod treścią. */
.faq-list details[open] summary{padding-bottom:16px;}
.faq-list details p{margin:0 0 24px;font-size:var(--text-base);max-width:70ch;}

/* ============ FOOTER ============ */
/* Stopka: marka + awatar po lewej, dwie kolumny linków po prawej,
   na dole prawa/regulamin i copyright. Do 640px jedna wyśrodkowana kolumna
   bez bloku marki (nazwisko i podpis są w przyklejonym nagłówku). */
/* margin-top = padding sekcji — stopka nie jest sekcją, więc bez tego odstęp nad nią
   byłby o połowę mniejszy niż między sekcjami (64 zamiast 128 px). */
footer.site-footer{
  background:var(--ink);color:#C7D0D9;padding:56px 0 24px;margin-top:var(--space-section);
  font-family:var(--font-utility);
}
.footer-inner{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{font-family:var(--font-display);color:#fff;font-size:var(--text-xl);max-width:320px;display:flex;gap:16px;align-items:flex-start;}
.footer-brand img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 15%;
  flex:none;border:2px solid rgba(255,255,255,.2);
}
.footer-brand p{color:#AEB9C4;font-family:var(--font-body);font-size:var(--text-sm);margin-top:8px;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h3{color:#fff;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
/* min-height 44px i padding pionowy — cel dotykowy zgodny z WCAG (wcześniej
   linki miały 24px wysokości). margin-bottom zdjęty do zera i nagłówek kolumny
   podciągnięty o 8px, żeby mimo powiększonego obszaru klikania odstępy
   wizualne między pozycjami pozostały takie jak wcześniej. */
.footer-col a{
  display:flex;align-items:center;min-height:44px;
  text-decoration:none;color:#AEB9C4;font-size:var(--text-sm);
}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:var(--text-xs);color:#8C97A3;
}
/* min-height 44px — cel dotykowy (sam tekst linku ma 18px wysokości).
   Ujemny margines pionowy, żeby powiększony obszar klikania nie rozepchnął
   dolnego paska stopki. */
.footer-bottom a{
  color:#AEB9C4;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;margin-block:-13px;
}
.footer-bottom a:hover{color:#fff;text-decoration:underline;}
@media(max-width:640px){
  .footer-brand{display:none;}
  .footer-cols{flex-direction:column;align-items:center;width:100%;text-align:center;gap:40px;}
  .footer-col a{justify-content:center;}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;}
}

/* ============ PRZYCISK SZYBKIEGO KONTAKTU (telefon) ============ */
/* Pojawia się po przewinięciu przycisków hero, chowa przy panelu rezerwacji
   i stopce (main.js). Schowany ma visibility:hidden (poza kolejnością Tab). */
.call-bar{display:none;}
@media(max-width:768px){
  .call-bar{
    display:flex;position:fixed;z-index:90;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    opacity:0;transform:translateY(16px) scale(.96);visibility:hidden;
    transition:opacity .6s var(--ease-cb), transform .6s var(--ease-cb), visibility 0s linear .6s;
  }
  .call-bar.show{
    opacity:1;transform:none;visibility:visible;
    transition:opacity .6s var(--ease-cb), transform .6s var(--ease-cb), visibility 0s;
  }
  .call-bar-tel{
    display:flex;align-items:center;gap:8px;min-height:52px;padding:0 22px 0 18px;
    border-radius:100px;background:var(--coral);color:#fff;text-decoration:none;
    font-family:var(--font-utility);font-weight:700;font-size:var(--text-base);
    box-shadow:0 12px 28px -8px rgba(28,37,48,.45);
  }
  .call-bar-tel::before{
    content:"";width:18px;height:18px;flex:none;background:currentColor;
    -webkit-mask:var(--ikona-tel) center/contain no-repeat;mask:var(--ikona-tel) center/contain no-repeat;
  }
  .call-bar-tel:hover{background:var(--coral-deep);}
}
:root{--ease-cb:cubic-bezier(.4,0,.2,1);--ikona-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion: reduce){
  .call-bar,.call-bar.show{transform:none;}
}

/* ============ REVEAL ANIM ============ */
/* Elementy z klasą .reveal są niewidoczne i lekko przesunięte w dół,
   dopóki JS (na końcu pliku) nie doda klasy .in przy przewijaniu do nich —
   wtedy płynnie "wjeżdżają" na swoje miejsce. Wyłączone, gdy użytkownik
   ma w systemie włączone "ogranicz animacje" (prefers-reduced-motion). */
/* Klasę .js dodaje skrypt w <head>; bez JavaScriptu treść jest widoczna od razu. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .nav-links,.nav-links.open,.nav-toggle span,body::before,html.menu-open body::before,
  html.nav-anim .nav-links,html.nav-anim .nav-links.open,
  html.nav-anim body::before,html.nav-anim.menu-open body::before{transition:none;}
}

/* Widoczna obwódka przy nawigacji klawiaturą (Tab) — dostępność */
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

/* ============ WYDRUK ============ */
/* Cała treść widoczna, bez elementów nawigacji; przyciski i stopka
   w kolorze tekstu, bo przeglądarki domyślnie nie drukują teł. */
@media print{
  .reveal{opacity:1!important;transform:none!important;}
  header.nav{position:static;backdrop-filter:none;}
  .nav-toggle,.nav-links,.call-bar,.slots,.booking-alt{display:none!important;}
  .btn-primary,.booking-option.primary{background:none;color:var(--ink);border:2px solid var(--ink);box-shadow:none;}
  .booking-option.primary strong,.booking-option.primary span,.booking-option.primary .arrow{color:var(--ink);}
  footer.site-footer,footer.site-footer *{color:var(--ink)!important;}
}