/* Karuzela jest pierwszym ekranem wspólnej strony, bez starej nawigacji. */
html,body{background:var(--tlo,#f4f5f3)}
#kb-natural .kn-hero{height:min(740px,calc(100svh - 90px));min-height:540px}
#kb-natural .kn-brand{bottom:110px}
#kb-natural h1{color:inherit}
#kb-natural .kn-integracja-cta{pointer-events:auto;margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
#kb-natural .kn-integracja-cta a{text-shadow:none;font-family:Arimo,Arial,sans-serif;white-space:normal}
/* 28.10.2026: podpis programów pod imieniem mentora (pismo strony, nie odręczne) */
#kb-natural .kn-signature .kn-programy{display:block;margin-top:6px;font-family:Arimo,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;line-height:1.3;transform:rotate(-3deg)}
#kb-natural .kn-signature .kn-programy[hidden]{display:none}
#kb-natural .kn-integracja-cta .cichy{background:#fff;color:#17325e;border-color:#fff}
#kb-natural .kn-caption{top:24px!important;left:6%;right:auto;bottom:auto}
#kb-natural .kn-signature{pointer-events:none}
/* robocze teksty 23.10.2026: hasło pod tytułem i zdanie przy zdjęciach */
#kb-natural .kn-brand .kn-haslo{font-size:24px;line-height:1.3;font-weight:600;margin:0 0 10px}
/* czytelność zdań na zdjęciach: cień należy do liter, nie do warstwy na zdjęciu (jasne sceny — biała poświata, ciemne — czarna) */
#kb-natural .kn-brand p{max-width:520px;font-weight:500;text-shadow:0 0 2px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.6)}
#kb-natural .kn-stage[data-tone=dark] .kn-brand p,#kb-natural .kn-stage[data-layout=forest] .kn-brand p,#kb-natural .kn-stage[data-layout=room] .kn-brand p,#kb-natural .kn-stage[data-layout=couple] .kn-brand p{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8),0 0 28px rgba(0,0,0,.6)}
@media(max-width:700px){
 #kb-natural .kn-hero{min-height:650px;height:calc(100svh - 75px);max-height:850px}
 #kb-natural .kn-brand{bottom:112px;max-width:88%}
 #kb-natural .kn-brand h1{font-size:clamp(28px,7vw,42px);white-space:normal}
 #kb-natural .kn-brand p{font-size:16px}
 #kb-natural .kn-brand .kn-haslo{font-size:19px;margin-bottom:8px}
 #kb-natural .kn-integracja-cta{gap:8px;margin-top:14px}
 #kb-natural .kn-integracja-cta a{font-size:14px;padding:11px 14px;min-height:44px}
 /* 28.10.2026 (Anna, telefon): scena tylko ze zdjęciem (imię u góry, postać do dołu); tytuł, hasło i przyciski POD zdjęciem.
    Wysokość sceny: zdjęcie rodzinne Filipa wypełnia ją całe, a cała rodzina mieści się w szerokości ekranu (125vw − 35px). */
 #kb-natural .kn-hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
 #kb-natural .kn-scenes{position:relative;inset:auto;order:1;flex:none;height:min(calc(125vw - 35px),max(380px,calc(100svh - 330px)))}
 #kb-natural .kn-brand,#kb-natural .kn-stage[data-layout=couple] .kn-brand{order:2;position:static;padding:18px 22px 4px;width:auto;max-width:none;color:var(--kn-ink);text-shadow:none}
 #kb-natural .kn-brand h1,#kb-natural .kn-brand h1 span{color:var(--kn-ink);text-shadow:none}
 #kb-natural .kn-brand h1 span{color:var(--kn-green)}
 #kb-natural .kn-brand p,#kb-natural .kn-stage .kn-brand p{text-shadow:none!important;color:var(--kn-ink)}
}
/* 25.10.2026 (wydajność, wygląd bez zmian): sekcje pod karuzelą przeglądarka rysuje, gdy zbliżają się do ekranu — ich pędzle
   i obwódki nie konkurują wtedy ze zdjęciem pierwszego ekranu. „auto” zapamiętuje prawdziwą wysokość po pierwszym narysowaniu. */
main > .sekcja{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* 30.10.2026: ciemny motyw — pasy POD zdjęciem karuzeli (telefon: tytuł, hasło i przyciski; do 1100 px: odtwarzacz) w kolorach ciemnej
   strony zamiast białego tła. Zdjęcia, napisy na zdjęciach i jasny motyw bez zmian; zieleń „Bliskość” = wariant ciemny zatwierdzony 24.10. */
@media(max-width:1100px){
 html[data-motyw="ciemny"] #kb-natural .kn-stage{background:var(--tlo)}
 html[data-motyw="ciemny"] #kb-natural .kn-player{color:var(--naglowek)}
 html[data-motyw="ciemny"] #kb-natural .kn-player-button{background:var(--karta);border-color:var(--linia-mocna);color:var(--naglowek)}
 html[data-motyw="ciemny"] #kb-natural .kn-player-button:hover{background:var(--pole)}
 html[data-motyw="ciemny"] #kb-natural .kn-scene-progress,html[data-motyw="ciemny"] #kb-natural .kn-scene-progress::-webkit-progress-bar{background:var(--linia-mocna)}
}
@media(max-width:700px){
 html[data-motyw="ciemny"] #kb-natural,html[data-motyw="ciemny"] #kb-natural .kn-hero{background:var(--tlo)}
 html[data-motyw="ciemny"] #kb-natural .kn-brand,html[data-motyw="ciemny"] #kb-natural .kn-brand h1,html[data-motyw="ciemny"] #kb-natural .kn-brand p,html[data-motyw="ciemny"] #kb-natural .kn-stage .kn-brand p{color:var(--naglowek)}
 html[data-motyw="ciemny"] #kb-natural .kn-brand h1 span{color:#3a9a76}
}
/* 30.10.2026 (pakiet dzienny pkt 2): czytelność karuzeli, zdjęcia bez zmian.
   a) podpis „Mentorzy Kierunku Bliskość” był mały (12 px, telefon 11 px): 15 px i 13 px, pogrubiony;
   b) scena Filipa (rodzina w polu, jasne zboże i niebo): ton ciemny (białe napisy jak w scenach studyjnych) i delikatna ciemna
      warstwa tylko pod tekstem: na komputerze z lewej (tytuł, hasło, przyciski) i u góry (podpis, imię), na telefonie tylko u góry. */
#kb-natural .kn-label{font-size:15px;font-weight:700;letter-spacing:.01em}
#kb-natural .kn-stage[data-layout=family] .kn-scenes::after{content:"";position:absolute;z-index:2;pointer-events:none;inset:0;
 background:linear-gradient(to right,rgba(10,16,12,.6) 0%,rgba(10,16,12,.34) 34%,rgba(10,16,12,0) 60%),linear-gradient(to bottom,rgba(10,16,12,.45),rgba(10,16,12,0) 38%)}
@media(max-width:700px){
 #kb-natural .kn-label{font-size:13px}
 #kb-natural .kn-stage[data-layout=family] .kn-scenes::after{inset:0 0 auto 0;height:40%;background:linear-gradient(to bottom,rgba(12,20,16,.5),rgba(12,20,16,0))}
}