/* Czytnik „Zajrzyj do środka” — przeniesiony 25.09.2026 z Biblioteki Zero (Akademia, makieta 24.09).
   Zmiany wobec oryginału: prefiks #ebooki zamiast #biblioteka, miniatury na półce to prawdziwe okładki
   (obrazek zamiast rysowanej atrapy). Tokeny (--amber, --line, --card…) KNL ma te same, więc kolory grają. */
/* ═══ MAKIETA · Biblioteka Zero, wersja 2 — czytnik z przewracaniem stron ═══
   Komputer: rozkładówka, kartka obraca się w 3D (przód/tył).
   Telefon (≤ 760 px): jedna strona, przesunięcie palcem.
   prefers-reduced-motion: strony zmieniają się bez animacji. */
#ebooki .czyt{margin-top:28px;display:grid;gap:16px}
#ebooki .czyt-polka{display:flex;gap:14px;overflow-x:auto;padding:10px 4px 8px;scrollbar-width:thin}
#ebooki .czyt-tab{flex:0 0 auto;width:84px;background:none;border:0;padding:0;cursor:pointer;display:grid;gap:7px;text-align:left;
  color:var(--ink-2);font:600 12px/1.25 "Space Grotesk",sans-serif}
#ebooki .czyt-tab .mini{position:relative;aspect-ratio:2/3;border-radius:2px 5px 5px 2px;overflow:hidden;
  background:linear-gradient(160deg,#1B2129,#11151B);box-shadow:0 10px 16px -10px rgba(0,0,0,.6);transition:transform .3s ease,box-shadow .3s ease}
#ebooki .czyt-tab .mini i{position:absolute;left:0;right:0;top:0;height:4px;background:var(--kolor)}
#ebooki .czyt-tab .mini b{position:absolute;left:9px;top:10px;font:700 13px/1 "Space Grotesk",sans-serif;color:var(--kolor)}
#ebooki .czyt-tab .mini em{position:absolute;left:9px;right:6px;top:30px;font:700 11px/1.05 "Space Grotesk",sans-serif;font-style:normal;color:#EDE9E1}
#ebooki .czyt-tab[aria-selected="true"]{color:var(--ink)}
#ebooki .czyt-tab[aria-selected="true"] .mini{transform:translateY(-6px);box-shadow:0 0 0 2px var(--kolor),0 16px 22px -12px rgba(0,0,0,.7)}
@media (hover:hover){#ebooki .czyt-tab:hover .mini{transform:translateY(-4px)}}
#ebooki .czyt-okno{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#ebooki .czyt-pasek{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:11px 16px;border-bottom:1px solid var(--line);
  font:700 10.5px/1.35 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
#ebooki .czyt-pasek b{color:var(--amber)}
#ebooki .czyt-pasek .cp-p{color:var(--ink-2)}
#ebooki .czyt-scena{position:relative;display:flex;justify-content:center;padding:28px clamp(10px,4vw,64px);perspective:2400px;touch-action:pan-y pinch-zoom;outline:none;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.05),transparent 65%)}
#ebooki .czyt-scena:focus-visible{box-shadow:inset 0 0 0 2px var(--amber)}
#ebooki .rozkl{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,calc(min(64vh,620px) / 1.4142 * 2));aspect-ratio:2 / 1.4142;
  transform-style:preserve-3d}
#ebooki .str{position:relative;background:#fff;overflow:hidden;box-shadow:0 24px 40px -24px rgba(0,0,0,.55)}
#ebooki .str img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#ebooki .str.L{border-radius:4px 0 0 4px}
#ebooki .str.P{border-radius:0 4px 4px 0}
#ebooki .str.L::after,#ebooki .str.P::after,#ebooki .kartka .str::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}
#ebooki .str.L::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16))}
#ebooki .str.P::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.16))}
#ebooki .str.pusta{background:transparent;box-shadow:none}
#ebooki .str.pusta::after{display:none}
/* okładka jako strona — typografia skalowana szerokością strony */
#ebooki .str.okladka{background:linear-gradient(160deg,#1B2129 0%,#11151B 70%);container-type:inline-size}
#ebooki .str.okladka .okl{position:absolute;inset:0;padding:13% 12% 10% 13%;display:flex;flex-direction:column;color:#EDE9E1}
#ebooki .str.okladka .pas{position:absolute;left:0;right:0;top:0;height:2.2cqw;background:var(--kolor)}
#ebooki .str.okladka .o{font:700 9cqw/1 "Space Grotesk",sans-serif;color:var(--kolor)}
#ebooki .str.okladka .tom{font:700 3cqw/1.3 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#9AA3AF;margin-top:10%}
#ebooki .str.okladka .tyt{font:700 10cqw/1.02 "Space Grotesk",sans-serif;letter-spacing:-.02em;margin-top:2cqw}
#ebooki .str.okladka svg{width:100%;height:auto;margin-top:auto;margin-bottom:9%}
#ebooki .str.okladka .dol{font:700 2.8cqw/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#8C95A1;border-top:1px solid rgba(255,255,255,.12);padding-top:3cqw}
#ebooki .str.okladka .polysk,#ebooki .str.okladka .blask{display:none}
/* karta końcowa */
#ebooki .str.koncowa{background:linear-gradient(160deg,#1B2129 0%,#11151B 70%);color:#EDE9E1;container-type:inline-size}
#ebooki .czyt-cta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4cqw;padding:12%}
#ebooki .czyt-cta[hidden]{display:none}
#ebooki .czyt-cta .cz-eb{font:700 3cqw/1.3 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#F0A63C;margin:0}
#ebooki .czyt-cta .cz-t{font:700 8.4cqw/1.05 "Space Grotesk",sans-serif;letter-spacing:-.02em;margin:0}
#ebooki .czyt-cta .cz-p{font:400 4.2cqw/1.5 Inter,sans-serif;color:#B8C0CA;margin:0}
#ebooki .czyt-cta .cta{justify-self:start;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 6cqw;border:0;border-radius:999px;
  background:#F0A63C;color:#0E1116;font:700 max(13px,3.6cqw)/1 "Space Grotesk",sans-serif;cursor:pointer}
#ebooki .czyt-cta .cz-m{font:500 2.9cqw/1.4 "JetBrains Mono",monospace;color:#8C95A1;margin:0}
/* kartka w locie */
#ebooki .kartka{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:3;display:none}
#ebooki .kartka.do-przodu{left:50%;transform-origin:0 50%}
#ebooki .kartka.do-tylu{left:0;transform-origin:100% 50%}
#ebooki .kartka > .str{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#ebooki .kartka > .tyl{transform:rotateY(180deg)}
#ebooki .kartka.do-przodu > .przod{border-radius:0 4px 4px 0}
#ebooki .kartka.do-przodu > .tyl{border-radius:4px 0 0 4px}
#ebooki .kartka.do-tylu > .przod{border-radius:4px 0 0 4px}
#ebooki .kartka.do-tylu > .tyl{border-radius:0 4px 4px 0}
#ebooki .kartka.leci{display:block}
#ebooki .kartka.do-przodu.leci{animation:czKartkaP .75s cubic-bezier(.45,.05,.3,1) forwards}
#ebooki .kartka.do-tylu.leci{animation:czKartkaL .75s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes czKartkaP{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes czKartkaL{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
/* nawigacja */
#ebooki .czyt-nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:600 18px/1 "Space Grotesk",sans-serif;cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
#ebooki .czyt-nav.wstecz{left:10px}
#ebooki .czyt-nav.dalej{right:10px}
#ebooki .czyt-nav:disabled{opacity:.3;cursor:default}
#ebooki .czyt-etyk{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 16px;border-top:1px solid var(--line)}
#ebooki .czyt-etyk button{min-height:36px;padding:0 11px;border-radius:6px;border:1px solid var(--line-2);background:none;cursor:pointer;
  color:var(--ink-2);font:700 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
#ebooki .czyt-etyk button[aria-current="true"]{background:var(--amber);border-color:transparent;color:var(--on-amber)}
/* telefon: jedna strona */
@media (max-width:760px){
  #ebooki .rozkl{grid-template-columns:1fr;width:min(100%,430px);aspect-ratio:1 / 1.4142}
  #ebooki .str.L{display:none}
  #ebooki .str.P{border-radius:4px}
  #ebooki .str.P::after{display:none}
  #ebooki .czyt-scena{padding:18px 6px 22px}
  #ebooki .czyt-nav{top:auto;bottom:-8px;transform:none;width:44px;height:44px}
  #ebooki .czyt-nav.wstecz{left:calc(50% - 56px)}
  #ebooki .czyt-nav.dalej{right:calc(50% - 56px)}
  #ebooki .czyt-scena{padding-bottom:58px}
}
@media (prefers-reduced-motion:no-preference){
  #ebooki .str.P.wjazd-dalej{animation:czWjazdD .45s cubic-bezier(.2,.8,.2,1)}
  #ebooki .str.P.wjazd-wstecz{animation:czWjazdW .45s cubic-bezier(.2,.8,.2,1)}
}
@keyframes czWjazdD{from{transform:translateX(34px) rotateY(-14deg);opacity:0}to{transform:none;opacity:1}}
@keyframes czWjazdW{from{transform:translateX(-34px) rotateY(14deg);opacity:0}to{transform:none;opacity:1}}

/* KNL: miniatura zakładki = okładka z pliku */
#ebooki .czyt-tab .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* KNL: przycisk na karcie końcowej jest linkiem do kasy, nie <button> — zdejmujemy podkreślenie.
   ⛔ Nie ustawiać tu `display` — `inline-block` zabija centrowanie w pionie z reguły wyżej
   (`inline-flex` + `align-items:center` + `min-height:44px`) i napis wyjeżdża na górę przycisku (27.09). */
#ebooki .czyt-cta .cta{text-decoration:none;justify-content:center}
/* Półka z miniaturami tylko na telefonie — na komputerze okładki stoją tuż nad czytnikiem, więc byłaby drugim
   takim samym rzędem (tak samo robi Akademia: `@media (min-width:761px){.czyt-polka{display:none}}`). */
@media (min-width:761px){#ebooki .czyt-polka{display:none}}

/* LUPA (27.09, przeniesione z Akademii `56e3bd5`): koło pod kursorem, 1,8× — podgląd ma ograniczoną rozdzielczość,
   większe powiększenie rozmywa. Koło nie łapie kliknięć, więc klik w stronę dalej ją przewraca.
   Na telefonie zamiast lupy działa szczypanie dwoma palcami (`touch-action: pinch-zoom` w scenie). */
#ebooki .czyt-lupa{position:absolute;z-index:6;width:190px;height:190px;border-radius:50%;pointer-events:none;
  border:2px solid var(--amber);box-shadow:0 14px 34px -10px rgba(0,0,0,.7);background-color:#fff;background-repeat:no-repeat;display:none}
@media (hover:hover){#ebooki .str img{cursor:zoom-in}}
#ebooki .czyt-podp{margin:6px 0 0;text-align:center;font:500 12.5px/1.4 "JetBrains Mono","JetBrains Mono Fallback",monospace;color:var(--ink-3)}
#ebooki .czyt-kup{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:14px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
#ebooki .czyt-kup p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:62ch}
#ebooki .czyt-kup p b{color:var(--ink)}
@media (max-width:600px){#ebooki .czyt-kup .btn{width:100%;text-align:center}}