/* HVMBAK CYTAT — warsztat przejścia galeria → cytat → zdanie o kursie → strzałka → płyta (05.10.2026).
   landing.css daje wszystko, co na produkcji (nagłówek tezy, galeria, kartka .pdz-papier, szkło .szklo, krawędź szkła, płyta z teczkami).
   Tutaj: (1) wycinek strony, (2) to, co stoi między galerią a płytą, w kilku formatach, (3) obudowa narzędzia.
   Zmienne na .prz: --o odstępy, --cs wielkość cytatu, --ws wielkość dużego ALE (mnożniki, ustawia sekcja.js). */

/* ——— (1) WYCINEK: sekcja zaczyna się pniem klamry tuż nad nagłówkiem tezy ——— */
.cy-szyba{padding-top:0}
.cy-pien{height:clamp(110px,11vw,160px)}
#pdzSvg path.cy-pn{stroke-dasharray:none}
@media(max-width:820px){ .cy-pien{height:92px} }

/* ——— (2) PRZEJŚCIE ——— */
.prz{--o:1;--cs:1;--ws:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.prz-odst{flex:none;width:100%}
/* ODSTĘPY. Bez kreski (n=0): stan z produkcji (7 vw nad cytatem, 6,5 vw pod nim, pas pod zdaniem 5 vw).
   Z kreską (n=1), od 06.10.2026 (Kuba: „kreska nad ale i pod ale równej długości”, „strzałka pod zdaniem równej długości co kreska nad zdaniem”):
   odstępy są policzone z oddechów kresek, żeby odcinki były parami równe. Oddechy (te same liczby co w mierz() w sekcja.js): --odd przy tekście,
   --oc przy cytacie (0, kiedy ma krawędź: szkło, kartka, blok, belki klamry), --k nad krawędzią szkła sekcji płyty; --pb = dolny odstęp sekcji.
   Nad i pod wstępem: A − odd = B − oc. Nad i pod zdaniem: C − oc = D + pb − k, przy czym C + D zostaje takie jak przed wyrównaniem (--g + --d0),
   więc zdanie tylko zjeżdża niżej, a przejście nie rośnie (dopiero na bardzo wysokim oknie pas D kończy się na zerze i rośnie C). */
.cy-szyba{--pb:calc(var(--vh,1svh)*16);--k:28px;--odd:20px;--g:clamp(54px,5.4vw,84px);--d0:clamp(48px,5vw,72px)}
.prz .oA{height:calc(clamp(64px,7vw,110px)*var(--o))}
.prz .oB{height:calc(clamp(30px,3vw,46px)*var(--o))}
.prz .oC{height:calc(clamp(60px,6.5vw,100px)*var(--o))}
.prz .oD{height:var(--d0)}
.prz .oM{height:clamp(12px,1.2vw,18px)}                       /* duże ALE → zdanie pod nim */
.prz.nic{--oc:calc(var(--odd) + 2px);--dr:max(0px,calc(((var(--g) + var(--d0))*var(--o) - var(--pb) + var(--k) - var(--oc))/2))}
.prz.nic.pud{--oc:0px}
.prz.nic .oA{height:calc(var(--g)*var(--o) + (var(--odd) - var(--oc))/2)}
.prz.nic .oB{height:calc(var(--g)*var(--o) - (var(--odd) - var(--oc))/2)}
.prz.nic.w-nic .oA{height:calc(var(--g)*var(--o))}
.prz.nic .oC{height:calc(var(--dr) + var(--pb) - var(--k) + var(--oc))}
.prz.nic .oD{height:var(--dr)}
@media(max-width:820px){
  .cy-szyba{--pb:calc(var(--vh,1svh)*12);--k:22px;--odd:16px;--g:56px;--d0:40px}
  .prz .oA{height:calc(56px*var(--o))} .prz .oB{height:calc(26px*var(--o))} .prz .oC{height:calc(52px*var(--o))}
  .prz .oM{height:12px}
}

/* WSTĘP: łącznik jak „więc / ale / do tego” na ścieżce Updates, duże ALE krojem nagłówków, albo zdanie */
.prz-lacznik{margin:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-indent:.14em;text-transform:uppercase;line-height:1;color:var(--bordo)}
.prz-ale{margin:0;font-family:var(--display);font-weight:900;font-style:italic;font-kerning:normal;text-transform:uppercase;line-height:.86;
  color:var(--bordo);font-size:calc(clamp(24px,3.1vw,44px)*var(--ws))}
@media(max-width:820px){ .prz-lacznik{font-size:11px;letter-spacing:.12em;text-indent:.12em} .prz-ale{font-size:calc((5.9vw - 1px)*var(--ws))} }

/* ZDANIA (nad cytatem i pod nim ten sam krój): S = podpis z produkcji, M = większy, L = krojem nagłówków */
.prz-zd{margin:0 auto;max-width:40ch;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(14px,1.25vw,18px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4;color:rgba(13,13,13,.86);text-wrap:balance}
.prz-zd .ale{color:var(--bordo);font-weight:600}
.prz.zs-s .prz-zd.stare{max-width:34ch;text-wrap:wrap}
.prz.zs-m .prz-zd{font-size:clamp(16.5px,1.6vw,23px);max-width:31ch;line-height:1.32;letter-spacing:.04em}
.prz.zs-l .prz-zd{font-family:var(--display);font-weight:900;font-kerning:normal;font-size:clamp(17px,2vw,29px);letter-spacing:0;line-height:1.14;
  max-width:24em;color:var(--black)}
.prz.zs-l .prz-zd .ale{font-style:italic;font-weight:900}
@media(max-width:820px){
  .prz-zd{font-size:13px;max-width:27ch}
  .prz.zs-s .prz-zd.stare{max-width:26ch}
  .prz.zs-m .prz-zd{font-size:15.5px;max-width:25ch}
  .prz.zs-l .prz-zd{font-size:calc(4.5vw - 1px);max-width:100%}
}

/* CYTAT: wspólne */
.cy{position:relative;margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.cy .akc-b{color:var(--bordo)}
.cy br.tel{display:none}
@media(max-width:820px){ .cy br.tel{display:inline} }
.cy-t{margin:0}
.cy-podpis{display:flex;align-items:center;justify-content:center;gap:10px;margin:clamp(18px,2vw,26px) 0 0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-style:normal;
  font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
.cy-podpis i{flex:none;width:9px;height:2.5px;background:var(--bordo)}
.cy-drugi{margin:clamp(12px,1.3vw,18px) 0 0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-style:italic;font-weight:500;
  font-size:clamp(14.5px,1.25vw,18px);line-height:1.3;color:rgba(13,13,13,.66)}
@media(max-width:820px){ .cy-podpis{font-size:9.5px;letter-spacing:.06em} .cy-drugi{font-size:14px} }

/* pismo markerem z landingu jako maska: tusz można wtedy zabarwić; ALONE to prawa część pierwszej linii (od 66,9 % szerokości, górne 43,5 %) */
.cy-pismo{display:block;aspect-ratio:1400/418;max-width:100%;background:#161618;opacity:.94;
  -webkit-mask:url(img/cytat-2linie-tusz.png) center/100% 100% no-repeat;mask:url(img/cytat-2linie-tusz.png) center/100% 100% no-repeat}
.cy.ak .cy-pismo{background:linear-gradient(var(--bordo),var(--bordo)) 100% 0/33.1% 43.5% no-repeat,#161618}

/* 0 KARTKA (było): .pdz-papier z landingu; przekrzywienie z narzędzia */
.cy-kartka .pdz-papier{margin-top:0;rotate:var(--kat,-1.2deg)}

/* 1 NAGŁÓWEK: ten sam krój i stopień co teza nad galerią; ALONE bordo i pochyłe jak SAMA */
.cy-typo .cy-t{font-size:calc(clamp(24px,3.1vw,44px)*var(--cs))}
@media(max-width:820px){ .cy-typo .cy-t{font-size:calc((5.9vw - 1px)*var(--cs))} }

/* 2 KLAMRA: cytat między dwiema włosowymi belkami, do których dochodzi nić (język klamry z sekcji 2) */
.cy-klamra .ramka{width:min(100%,640px);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);
  padding:clamp(30px,3.4vw,48px) 0 clamp(26px,3vw,42px)}
.cy-klamra .cy-t{font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:calc(clamp(26px,3.4vw,50px)*var(--cs));
  line-height:1.08;letter-spacing:-.005em;color:var(--black);text-wrap:balance}
.cy-klamra .cy-t em{font-style:italic}
@media(max-width:820px){ .cy-klamra .ramka{padding:26px 0 22px} .cy-klamra .cy-t{font-size:calc(7.4vw*var(--cs))} }

/* 3 SZKŁO: prosta tafla z przepisu sekcji 2, cytat markerem na szkle */
.cy-szklo .szklo{width:min(600px,100%)}
.cy-szklo .tresc{padding:clamp(36px,4.4vw,56px) clamp(22px,4vw,44px) clamp(26px,3.4vw,40px)}
.cy-szklo .cy-pismo{width:calc(76%*var(--cs));margin:0 auto}
@media(max-width:820px){ .cy-szklo .szklo{width:min(100%,420px)} .cy-szklo .tresc{padding:30px 18px 22px} .cy-szklo .cy-pismo{width:calc(84%*var(--cs))} }

/* 4 MARKER: to samo pismo prosto na stronie, bez podłoża */
.cy-marker .cy-pismo{width:calc(min(620px,94%)*var(--cs))}

/* 5 BLOK: czarny blok jak KANONY w „Kurs od środka”; 6 TABLICZKA: to samo w obwódce */
.cy-blok .blok,.cy-tabl .blok{width:min(100%,760px);text-align:left;padding:22px 24px 20px}
.cy-blok .blok{background:var(--black);color:#fff}
.cy-tabl .blok{border:1.5px solid var(--black);color:var(--black)}
.cy-blok .cy-t,.cy-tabl .cy-t{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.96;font-size:calc(clamp(30px,4.3vw,62px)*var(--cs))}
.cy-blok .etyk,.cy-tabl .etyk{display:flex;justify-content:space-between;gap:16px;margin:clamp(30px,3.6vw,52px) 0 0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1}
.cy-blok .etyk{color:rgba(255,255,255,.62)} .cy-tabl .etyk{color:rgba(13,13,13,.58)}
.cy-blok .cy-drugi{color:rgba(255,255,255,.7)} .cy-blok .cy-drugi,.cy-tabl .cy-drugi{margin-top:14px}
@media(max-width:820px){
  .cy-blok .blok,.cy-tabl .blok{padding:14px 14px 13px}
  .cy-blok .cy-t,.cy-tabl .cy-t{font-size:calc(9.1vw*var(--cs))}
  .cy-blok .etyk,.cy-tabl .etyk{margin-top:26px;font-size:9.5px}
}

/* 7 SLAJD: czarny kadr 16:9 jak slajd z prezentacji, zdanie na środku */
.cy-slajd .slajd{position:relative;width:min(100%,720px);aspect-ratio:16/9;background:var(--black);color:#fff;display:grid;place-items:center;padding:0 9%;
  box-shadow:0 1px 2px rgba(20,28,36,.16),0 30px 54px -32px rgba(20,28,36,.5)}
.cy-slajd .cy-t{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:500;
  font-size:calc(clamp(19px,2.9vw,40px)*var(--cs));line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.cy-slajd .cy-podpis{position:absolute;left:0;right:0;bottom:8%;margin:0;color:rgba(255,255,255,.56)}
.cy-slajd .cy-podpis i{background:rgba(255,255,255,.56)}
.cy-slajd .cy-drugi{position:absolute;left:0;right:0;top:calc(50% + 2.6em);margin:0;color:rgba(255,255,255,.6);font-size:clamp(12.5px,1.1vw,15px)}
@media(max-width:820px){ .cy-slajd .cy-t{font-size:calc(6vw*var(--cs))} .cy-slajd .cy-drugi{display:none} }

/* groty strzałki: cienki = ta sama włosowa kreska co nić, gruby = stan z produkcji, pełny = mały trójkąt */
#pdzSvg path.cy-grot{opacity:0;transition:opacity .25s;stroke-linecap:square}
#pdzSvg path.cy-grot.wid{opacity:1}
#pdzSvg path.cy-grot.g-cienki{stroke-width:1}
#pdzSvg path.cy-grot.g-gruby{stroke-width:2}
#pdzSvg path.cy-grot.g-pelny{stroke:none;fill:var(--bordo)}
@media(prefers-reduced-motion:reduce){ #pdzSvg path.cy-grot{transition:none} }

/* ——— (3) OBUDOWA NARZĘDZIA ——— */
.nz,.nz-pasek{--f:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-family:var(--f);font-stretch:normal;color:#0d0d0d;
  -webkit-font-smoothing:antialiased}
.nz{position:fixed;right:0;top:0;bottom:0;z-index:200;width:288px;background:#fff;border-left:1px solid rgba(13,13,13,.16);overflow-y:auto;
  overscroll-behavior:contain;padding:16px 14px 28px;font-size:12px;line-height:1.35;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.nz[hidden],.nz-pasek[hidden],.nz-tel[hidden]{display:none}
.nz.schowany{translate:100% 0}
.nz h1{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nz .opis{margin:4px 0 0;color:rgba(13,13,13,.6);font-size:11.5px}
.nz h2{margin:20px 0 8px;padding-top:12px;border-top:1px solid rgba(13,13,13,.14);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(13,13,13,.56)}
.nz .rzad{margin:8px 0 0}
.nz .etyk{display:flex;justify-content:space-between;margin:0 0 5px;font-size:11px;color:rgba(13,13,13,.62)}
.nz .etyk b{font-weight:600;color:#0d0d0d;font-variant-numeric:tabular-nums}
.nz button{font:inherit;color:inherit;background:#fff;border:1px solid rgba(13,13,13,.22);border-radius:0;padding:7px 8px;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent}
.nz button:hover{border-color:#0d0d0d}
.nz button.akt{background:#0d0d0d;border-color:#0d0d0d;color:#fff}
.nz .seg{display:flex;flex-wrap:wrap;gap:4px}
.nz .seg button{flex:1 1 auto;text-align:center;white-space:nowrap}
.nz .war{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nz .war button{display:flex;gap:7px;align-items:baseline;padding:8px}
.nz .war button b{font-weight:600;font-size:10.5px;opacity:.55;font-variant-numeric:tabular-nums}
.nz textarea{display:block;width:100%;font:inherit;font-size:12.5px;line-height:1.35;color:inherit;border:1px solid rgba(13,13,13,.22);border-radius:0;
  padding:7px 8px;resize:vertical;min-height:54px;background:#fff}
.nz textarea:focus{outline:1px solid #0d0d0d;outline-offset:-1px}
.nz .gotowe{display:grid;gap:3px;margin-top:5px}
.nz .gotowe button{border-color:transparent;background:rgba(13,13,13,.045);padding:6px 8px;font-size:11.5px}
.nz .gotowe button:hover{background:rgba(13,13,13,.09)}
.nz .gotowe button.akt{background:#0d0d0d;color:#fff}
.nz input[type=range]{display:block;width:100%;margin:0;accent-color:#0d0d0d}
.nz .dol{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.nz .dol button{text-align:center}
.nz .dol .szer{grid-column:1/-1}
.nz .uw{margin:10px 0 0;font-size:11px;color:rgba(13,13,13,.56)}

/* pasek: na komputerze tylko przy schowanym panelu; na telefonie zawsze, u dołu ekranu */
.nz-pasek{position:fixed;right:16px;bottom:16px;z-index:210;display:none;align-items:stretch;background:#fff;border:1px solid rgba(13,13,13,.22);
  box-shadow:0 10px 30px -14px rgba(13,13,13,.4);font-size:12px}
.nz-pasek.widac{display:flex}
.nz-pasek button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0 14px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nz-pasek button+button,.nz-pasek .nazwa{border-left:1px solid rgba(13,13,13,.14)}
.nz-pasek .nazwa{display:flex;align-items:center;gap:8px;padding:0 14px;min-width:150px;white-space:nowrap;font-weight:600}
.nz-pasek .nazwa b{font-weight:600;font-size:10.5px;opacity:.5;font-variant-numeric:tabular-nums}
.nz-pasek .strz{font-size:17px;line-height:1;padding:0 15px}

/* podgląd telefonu na komputerze: ramka 390 px na neutralnym tle zamiast strony */
.nz-tel{position:fixed;inset:0 288px 0 0;z-index:150;background:#d9dcdf;display:grid;place-items:center}
.nz-tel iframe{width:390px;height:min(844px,calc(100vh - 48px));border:0;background:#eceef0;box-shadow:0 0 0 1px rgba(13,13,13,.2),0 30px 60px -30px rgba(13,13,13,.5)}

@media(max-width:820px){
  .nz{left:0;right:0;top:auto;bottom:calc(48px + env(safe-area-inset-bottom));width:auto;max-height:64vh;border-left:0;border-top:1px solid rgba(13,13,13,.2);
    padding:14px 14px 22px;translate:0 0;box-shadow:0 -20px 40px -24px rgba(13,13,13,.45)}
  .nz.schowany{translate:0 calc(100% + 60px)}
  .nz-pasek{left:0;right:0;bottom:0;border:0;border-top:1px solid rgba(13,13,13,.2);box-shadow:none;padding-bottom:env(safe-area-inset-bottom);display:flex}
  .nz-pasek button{height:48px}
  .nz-pasek .nazwa{flex:1;min-width:0;justify-content:center}
  .nz-tel{display:none}
  .nz .tylko-komp{display:none}
}