/* HVMBAK PODZIAŁ — warianty sekcji 2 (10.10.2026). Wszystko tutaj jest NAKŁADKĄ na style landingu (index.html = kopia z tools/baza.sh):
   reguły włączają się atrybutami na <html>, które ustawia warsztat/strona.js ze stanu (warsztat/stan.js). Przy stanie domyślnym („Było”)
   żadna reguła nie zmienia wyglądu: mnożniki mają wartość 1, a przełączniki stoją jak na produkcji.
   Liczby w nawiasach clamp() przy nagłówkach są przepisane z landingu (index.html: .pdz-glowny, .pdz-teza; src/oferta.css: .kn-zd). */

/* ——— odstęp między hero a nagłówkiem ——— */
.szyba{padding-top:calc(var(--vh,1svh)*16*var(--og,1))}
@media(max-width:820px){ .szyba{padding-top:calc(var(--vh,1svh)*12*var(--og,1))} }

/* ——— akcent sekcji: zmienna --bordo niesie kreski klamry, strzałki, „ale”, słowa w nagłówkach, strzałki galerii ——— */
html[data-ak="czarny"] .szyba{--bordo:#0d0d0d}
html[data-ak="baby"] .szyba{--bordo:#8CC7EE}
html[data-ku="0"] .pdz-h .it{font-style:normal}
html[data-n1a="0"] .pdz-glowny .akc,html[data-n2a="0"] .pdz-teza .akc{color:inherit}

/* ——— NAGŁÓWEK 1 „Ten sam zakres kompetencji” ——— */
.pdz-glowny{font-size:calc(clamp(30px,4.4vw,62px)*var(--n1w,1)*var(--n1f,1))}
@media(max-width:820px){ .pdz-glowny{font-size:calc((7.9vw - 3.4px)*var(--n1w,1)*var(--n1f,1))} }
/* krój z CTA („Zdobywasz ponadczasową wiedzę…”, .kn-zd): Archivo 75 %, waga 400, zwykłe litery; 100 % = dokładnie wielkość z CTA */
html[data-n1="zdanie"] .pdz-glowny,html[data-n2="zdanie"] .pdz-teza,html[data-n2="mix"] .pdz-teza .zd{
  font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;text-transform:none;letter-spacing:-.004em;line-height:1.17}
html[data-n1="zdanie"] .pdz-glowny{font-size:calc(clamp(25px,2.9vw,42px)*var(--n1w,1)*var(--n1f,1))}
@media(max-width:820px){ html[data-n1="zdanie"] .pdz-glowny{font-size:calc(26px*var(--n1w,1)*var(--n1f,1));line-height:1.18} }
/* etykieta: ten sam zapis co „Zapis kursu” przy płycie i „Steve Jobs, 2011” (Inter 600, wersaliki, kreska w kolorze akcentu) */
html[data-n1="etykieta"] .pdz-glowny{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;
  font-size:calc(10.5px*var(--n1w,1));letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
html[data-n1="etykieta"] .pdz-glowny::before{content:'';display:inline-block;vertical-align:middle;width:9px;height:2.5px;margin:-.1em 10px 0 0;background:var(--bordo)}
html[data-n1="etykieta"][data-n1k="0"] .pdz-glowny::before{display:none}
html[data-n1="etykieta"] .pdz-glowny .it{font-style:normal}
html[data-n1="etykieta"] .pdz-glowny .akc{color:inherit}
@media(max-width:820px){ html[data-n1="etykieta"] .pdz-glowny{font-size:calc(9.5px*var(--n1w,1));letter-spacing:.06em} }

/* ——— NAGŁÓWEK TEZY „AI zmieniło to, ile jedna osoba może zrobić sama” ——— */
.pdz-teza{font-size:calc(clamp(24px,3.1vw,44px)*var(--n2w,1)*var(--n2f,1))}
@media(max-width:820px){ .pdz-teza{font-size:calc((5.9vw - 1px)*var(--n2w,1)*var(--n2f,1))} }
html[data-n2="zdanie"] .pdz-teza{font-size:calc(clamp(25px,2.9vw,42px)*var(--n2w,1));max-width:17em;margin-inline:auto;text-wrap:balance}
@media(max-width:820px){ html[data-n2="zdanie"] .pdz-teza{font-size:calc(26px*var(--n2w,1));line-height:1.18;max-width:13em} }
/* zdanie + SAMA: zdanie krojem z CTA, pod nim jedno słowo własnym krojem na całą siłę */
html[data-n2="mix"] .pdz-teza{font-size:calc(clamp(52px,8.2vw,118px)*var(--n2w,1));line-height:.92}
html[data-n2="mix"] .pdz-teza .zd{display:block;margin:0 auto .55em;max-width:22em;font-size:calc(clamp(20px,1.95vw,28px)*var(--n2w,1));line-height:1.25;color:var(--black)}
html[data-n2="mix"] .pdz-teza .akc{display:block}
@media(max-width:820px){
  html[data-n2="mix"] .pdz-teza{font-size:calc(17.5vw*var(--n2w,1))}
  html[data-n2="mix"] .pdz-teza .zd{font-size:calc(20px*var(--n2w,1));max-width:15em;margin-bottom:.5em}
}

/* ——— KAFELKI ——— */
/* tafla: klasę „tafla” (przepis z src/tafla.css, ten sam co tafle ścieżki, cytat i kanon) dokłada strona.js; tu tylko rozmycie tego, co pod szkłem */
html[data-kf="tafla"] .pdz-kol .optyka{-webkit-backdrop-filter:blur(var(--tb,2.5px)) saturate(1.06);backdrop-filter:blur(var(--tb,2.5px)) saturate(1.06)}
/* biała karta: nieprzejrzysta, cienka krawędź, ten sam miękki cień co tafle */
html[data-kf="karta"] .pdz-kol.szklo{background:#fbfcfc;border-color:rgba(13,13,13,.07);
  box-shadow:0 1px 2px rgba(20,28,36,.06),0 18px 36px -24px rgba(20,28,36,.18),0 50px 80px -48px rgba(20,28,36,.24)}
/* bez tła: sama treść i kreski klamry */
html[data-kf="linie"] .pdz-kol.szklo{background:none;border-color:transparent;box-shadow:none}
html:is([data-kf="karta"],[data-kf="linie"]) .pdz-kol.szklo>i{display:none}
html:is([data-kf="karta"],[data-kf="linie"]) .pdz-kol :is(.pdz-h,ul,.pdz-dop p){text-shadow:none}
html[data-km="0"] #pdzSvg path.szyna{display:none}
html[data-dp="0"] .pdz-dop{display:none}
html[data-gp="0"] .gal-pod{display:none}

/* ——— CYTAT ——— */
.pdz-cytat{width:min(var(--cz,600px),100%)}
@media(max-width:820px){ .pdz-cytat{width:min(100%,var(--cz,420px))} }
#pdzCytat .optyka{-webkit-backdrop-filter:blur(var(--cb,2.5px)) saturate(1.06);backdrop-filter:blur(var(--cb,2.5px)) saturate(1.06)}
/* bez tafli: samo pismo na papierze */
html[data-cy="goly"] #pdzCytat{background:none;border-color:transparent;box-shadow:none}
html:is([data-cy="goly"],[data-cy="czarna"]) #pdzCytat>i,html:is([data-cy="goly"],[data-cy="czarna"]) #pdzCytat::before,html:is([data-cy="goly"],[data-cy="czarna"]) #pdzCytat::after{display:none}
html[data-cy="goly"] #pdzCytat .tresc{padding-inline:0}
html[data-cy="goly"] #pdzCytat .cyt{width:100%;opacity:1}
/* czarna tabliczka: jedyna czerń w tej części strony, pismo białe (ten sam obraz odwrócony) */
html[data-cy="czarna"] #pdzCytat{background:#0d0d0d;border-color:#0d0d0d;box-shadow:0 1px 2px rgba(20,28,36,.2),0 22px 40px -24px rgba(20,28,36,.5),0 54px 84px -50px rgba(20,28,36,.5)}
html[data-cy="czarna"] #pdzCytat .cyt{opacity:1}
html[data-cy="czarna"] #pdzCytat .cyt img{filter:invert(1)}
html[data-cy="czarna"] #pdzCytat cite{color:rgba(255,255,255,.62)}
html[data-cy="czarna"][data-ak="czarny"] #pdzCytat cite i{background:#fff}
/* strzałki: pas na całą szerokość okna POD taflą (jak tor galerii), rysuje je strona.js; grot wchodzi pod szkło i tam się rozmywa */
.cy-strz{position:absolute;left:50%;width:100vw;translate:-50% 0;z-index:0;pointer-events:none;display:none;overflow:hidden;opacity:0;transition:opacity .6s ease .1s}
html[data-cy="strzalki"] .cy-strz{display:block}
.pdz-cytat.wid+.cy-strz,html:not(.pdz-js) .cy-strz{opacity:1}
.cy-strz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cy-strz path{fill:var(--cy-k);stroke:none}
html[data-cs="kontur"] .cy-strz path{fill:none;stroke:var(--cy-k);stroke-width:1.5;stroke-linejoin:miter}
html[data-cs="szewrony"] .cy-strz path{fill:none;stroke:var(--cy-k);stroke-linecap:butt;stroke-linejoin:miter}
html[data-ck="akcent"] .cy-strz{--cy-k:var(--bordo)}
html[data-ck="czarny"] .cy-strz{--cy-k:#0d0d0d}
html[data-ck="szary"] .cy-strz{--cy-k:rgba(13,13,13,.15)}
html[data-ck="bialy"] .cy-strz{--cy-k:#fff}
@media(prefers-reduced-motion:reduce){ .cy-strz{transition-duration:.01s;transition-delay:0s} }

/* ——— przełączniki ——— */
html[data-kh="0"] #szyba>.krawedz{display:none}
html[data-do="0"] .dolacz-kotwica{display:none}
/* bez szronu i bez kursorów płótno nie ma czego rysować */
html[data-plotno="0"] #szron{display:none}

/* pudełko na płótno kursorów w .podzial (czysty papier): nad kreskami klamry, pod kafelkami; położenie ustawia strona.js */
.wz-pudlo{position:absolute;height:0;z-index:0;pointer-events:none}

/* JEDNA TAFLA (podłoże „tafla”): płyta z przepisu src/tafla.css pod oboma kafelkami; kreski klamry idą po szkle (nad płytą, pod kafelkami) */
.wz-tafla{position:absolute;display:none;pointer-events:none;--tf-mleko:var(--pj,.09);--tf-ziarno:var(--pz,.16)}
html[data-tl="tafla"] .wz-tafla{display:block}
html[data-tl="tafla"] #pdzSvg{z-index:1}
.wz-tafla .optyka{-webkit-backdrop-filter:blur(var(--pb,10px)) saturate(1.06);backdrop-filter:blur(var(--pb,10px)) saturate(1.06)}
/* ZIARNO SZKŁA, PRZEZ KTÓRE COŚ WIDAĆ. Przepis tafli kładzie ziarno w ::after z mix-blend-mode:soft-light. W Chrome element z takim dzieckiem
   staje się osobną grupą i jego backdrop-filter przestaje widzieć to, co leży pod nim (zmierzone 10.10.2026: kursor pod taflą był ostry, po zdjęciu
   mieszania rozmywał się). Dlatego tam, gdzie pod szkłem coś leży (duża tafla, kafelki-tafle nad kursorami i kreskami, cytat nad strzałkami),
   ziarno miesza się zwyczajnie, z kryciem × 0,66: ta sama średnia jasność i ten sam rozrzut co soft-light 16 % (242,4 / 1,8 kontra 242,5 / 1,7). */
.wz-tafla::after,html[data-kf="tafla"] .pdz-kol.szklo.tafla::after,html[data-cy="strzalki"] #pdzCytat::after{mix-blend-mode:normal;opacity:calc(var(--tf-ziarno)*.66)}
/* pień zamiast klamry: przy dużej tafli i wyłączonej klamrze zostają dwie pionowe kreski (nagłówek → tafla, tafla → nagłówek tezy) */
.wz-pien{position:absolute;left:calc(50% - .5px);width:1px;background:var(--bordo);display:none;pointer-events:none;z-index:0}
html[data-tl="tafla"][data-km="0"] .wz-pien{display:block}
.pdz-js .wz-tafla{opacity:0;transition:opacity .5s ease}
.pdz-js .wz-tafla.wid{opacity:1}
@media(prefers-reduced-motion:reduce){ .pdz-js .wz-tafla{transition-duration:.01s} }

/* ——— koniec kopii ——— */
.wz-koniec{position:relative;z-index:2;padding:56px 5vw 150px;text-align:center}
.wz-koniec p{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.5;color:rgba(13,13,13,.42)}
.stopka.wz-stopka{display:block;height:0;min-height:0;padding:0;margin:0;border:0;background:none;overflow:hidden}