/* ===== strona.css — to, czego katalog NIE MA (luki do raportu) + dopasowania strony. Wszystkie wartości z tokenów kitu. ===== */

/* nawigacja na białym hero: logo i linki wjeżdżają (w katalogu te animacje siedzą w bloku HERO ClearPath, którego tu nie ma) */
@keyframes fadeIn{to{opacity:1}} @keyframes wjazdGora{to{opacity:1;transform:translateY(0)}}
.start .logo{animation:wjazdGora .8s var(--ease) .15s forwards}
.start .nav-prawa,.start .nav-burger{animation:fadeIn .8s var(--ease) .6s forwards}
.nav .pigulka{margin-left:0}
/* tor kart bez pasma rozmycia: przypięcie od góry o --tor-pad-gora, nie o --blur-h */
.przypiety{padding-top:var(--tor-pad-gora)}
.tor-naglowek .eyebrow{color:var(--akcent);margin-bottom:16px}
/* manifest: sekcja „tekst" z katalogu — bez ikony postaci ClearPath */
.tekst{padding:160px 0}
.tekst .blok{max-width:1000px}

/* LUKA C6: „o mnie" bez portretów (katalog ma tylko dwa portrety z paralaksą) — tekst + jedno zdjęcie zawodu */
.omnie{background:var(--bg-2);padding:160px 0}
.omnie .uklad{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--st2-gap);align-items:start}
.omnie .eyebrow{color:var(--akcent);margin-bottom:16px}
.omnie h2{text-wrap:balance;max-width:14ch}
.omnie .lead{margin-top:24px;color:var(--ink)}
.omnie .tresc p+p{margin-top:16px}
.omnie .tresc .akapity{margin-top:32px;max-width:560px;color:var(--ink-2)}
.omnie .kadr{aspect-ratio:4/5;border-radius:var(--kontakt-dana-r);overflow:hidden;background:var(--bg-2);position:sticky;top:calc(var(--nav-h) + 24px)} /* portret ze ZnanyLekarz (szczebel 1 drabiny), 3:4 → kadr 4:5 */
.omnie .kadr img{width:100%;height:100%;object-fit:cover}

/* LUKA B13/C7: dwie listy „przed terapią / po terapii" — karty z listą punktowaną */
.przedpo{display:grid;grid-template-columns:1fr 1fr;gap:var(--kontakt-gap);margin-top:64px}
.przedpo .karta-lista{padding:var(--form-pad);border:1px solid var(--linia);border-radius:var(--kontakt-dana-r);background:var(--bg)}
.przedpo .karta-lista .eyebrow{color:var(--akcent);margin-bottom:12px}
.przedpo h3{text-wrap:balance}
.przedpo ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.przedpo li{position:relative;padding-left:22px;color:var(--ink-2)}
.przedpo li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--akcent)}

/* LUKA C12/B10: FAQ — akordeon na <details> */
.faq{background:var(--bg);padding:160px 0}
.faq .glowa{max-width:var(--opinie-pod-w);margin-bottom:48px}
.faq .glowa .eyebrow{color:var(--akcent);margin-bottom:16px}
.faq .lista{border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:500 20px/1.3 var(--f-sans);letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform var(--t) var(--ease);margin-right:6px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .odp{max-width:640px;padding:0 0 28px;color:var(--ink-2)}

/* materiały: rzędy Hayflick z ilustracją zamiast zdjęcia i metą „PDF · A4" */
.aktualnosci .eyebrow{color:var(--akcent)}
.wpis-kadr.ilu-kadr{background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.wpis-kadr.ilu-kadr img{object-fit:cover} /* cover jak u Hayflick: kadr rośnie proporcjonalnie, po najechaniu odsłania więcej (decyzja dyrektora: nie pokazywać całej ikony) */

/* kontakt: dodatkowa karta płatności (dane ze strony) */
.dana .konto{display:block;margin-top:6px;font:400 var(--small)/1.6 var(--f-sans);color:var(--ink);letter-spacing:.02em}

@media (max-width:768px){
  .tekst{padding:96px 0}
  .omnie{padding:96px 0}.omnie .uklad{grid-template-columns:1fr;gap:32px}.omnie .kadr{position:static}.omnie h2{max-width:none}
  .przedpo{grid-template-columns:1fr;margin-top:40px}
  .faq{padding:96px 0}.faq summary{font-size:18px;padding:20px 0}
}

/* hero wariant 1 (ClearPath) na JASNEJ grafice zamiast ciemnego zdjęcia: podkład i tekst w kolorach kitu, bez kresek ClearPath */
.hero-owijka,.hero-foto{background:var(--bg-2)}
.hero-foto img.foto{width:100%;height:100%;object-fit:cover;object-position:left center} /* grafika 7:4 w oknie 16:10: 135 px luzu w poziomie; kadr od lewej odsuwa linię gruntu o ~56 px od końca „się" */
.hero-h1,.hero-kolumna{color:var(--ink)}
.hero-h1{width:980px} /* 15 znaków Crimson 136 ≈ 915 px (ClearPath: 759 dla krótszych linii) */
.hero-h1 em{font-style:italic;color:var(--akcent)}
.hero-kolumna{left:auto;right:var(--margines);width:400px;gap:24px}
.hero-kolumna .eyebrow{color:var(--akcent)}
.hero-kolumna p{color:var(--ink-2)}.hero-kolumna .eyebrow{color:var(--akcent)}
.start .nav-prawa,.start .nav-burger{animation-delay:.6s}
@media (max-width:768px){
  .hero-foto img.foto{object-position:center bottom}
  /* 390: H1 na 4 linie (64 px) nachodził na kolumnę przypiętą do top 360 (reguła kitu) → tekst hero płynie w kolumnie (LUKA: hero 1 na telefonie zakłada 3 linie H1) */
  .hero-tresc{display:flex;flex-direction:column;gap:24px;padding:160px var(--margines) 0}
  .hero-h1,.hero-kolumna{position:static;width:100%;top:auto;left:auto;right:auto;bottom:auto}
}