/* Prezentacja „Wdrożenie AI w firmie”: slajdy 16:9 w stylu tuKamil (papier, kafel, tusz, rdza, zieleń, pikselowe kroje).
   Rozmiary w jednostkach kontenera (cqw), więc slajd skaluje się jak obraz: 1280 px na ekranie i w PDF, 390 px na telefonie.
   Bez JS widać wszystkie slajdy jeden pod drugim; z JS jeden naraz (prezentacja.js). Druk: jeden slajd na stronę 1280 x 720 px.
   Bez gradientów, rozmyć, pasków z lewej i animacji. */
:root { --papier: #f6f0e4; --kafel: #efe4cf; --tusz: #2b2420; --szary: #6f655b; --rdza: #c4483a; --zielen: #2f7d5a; --linia: #d9cbb2; --temat: #23306e; --biel: #fffdf8; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--tusz); color: var(--tusz); font-family: Inter, system-ui, sans-serif; }
[hidden] { display: none !important; }
.talia { display: grid; gap: 16px; padding: 16px 0 80px; justify-items: center; }
.slajd { container-type: inline-size; position: relative; width: min(100vw - 16px, (100vh - 80px) * 16 / 9); aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--papier); border: 3px solid var(--tusz); }
.js .talia { min-height: 100vh; align-content: center; padding: 8px 0 64px; }
.js .slajd:not(.aktywny) { display: none; }
.slajd-w { position: absolute; inset: 4.5cqw 5.5cqw 6.5cqw; display: flex; flex-direction: column; gap: 1.2cqw; font-size: 2.2cqw; line-height: 1.35; }
.s-nad { margin: 0; font: 2.4cqw/1 VT323, ui-monospace, monospace; color: var(--temat); }
h1, h2, h3 { font-family: "Jersey 10", ui-monospace, monospace; font-weight: 400; margin: 0; font-variant-ligatures: none; }
h1 { font-size: 9cqw; line-height: .9; max-width: 60%; }
h2 { font-size: 5.6cqw; line-height: .95; }
h3 { font-size: 3cqw; line-height: 1; color: var(--rdza); margin-bottom: .6cqw; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 2.6cqw; }
li { margin: 0 0 .5cqw; }
.s-duzy { font: 4cqw/1.05 VT323, ui-monospace, monospace; color: var(--rdza); max-width: 58%; }
.s-tytul .slajd-w > p:not(.s-nad):not(.s-duzy) { max-width: 52%; }
.s-maly { font-size: 1.7cqw; color: var(--szary); }
.s-pies { position: absolute; right: 0; bottom: 0; width: 36cqw; height: auto; image-rendering: pixelated; }
.s-karta { background: var(--kafel); padding: 1.6cqw 1.8cqw; min-width: 0;
  box-shadow: 0 -.25cqw 0 0 var(--tusz), 0 .25cqw 0 0 var(--tusz), -.25cqw 0 0 0 var(--tusz), .25cqw 0 0 0 var(--tusz); }
.s-agent { box-shadow: 0 -.25cqw 0 0 var(--tusz), 0 .25cqw 0 0 var(--tusz), -.25cqw 0 0 0 var(--tusz), .25cqw 0 0 0 var(--tusz), .6cqw .6cqw 0 0 var(--zielen); }
.s-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 1cqw; }
.s-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: .6cqw; font-size: 1.8cqw; }
.s-siatka h3 { font-size: 2.6cqw; }
.s-godziny { list-style: none; padding: 0; display: grid; gap: 1.2cqw; margin-top: 1cqw; }
.s-godziny li { display: grid; grid-template-columns: 14cqw 22cqw 1fr; gap: 1.6cqw; align-items: baseline; padding: 1cqw 0; border-bottom: .15cqw solid var(--linia); margin: 0; }
.s-godziny b { font: 400 2.6cqw/1 VT323, ui-monospace, monospace; color: var(--temat); }
.s-g-t { font: 3.2cqw/1 "Jersey 10", ui-monospace, monospace; color: var(--rdza); }
.s-pliki { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw 3cqw; margin-top: .6cqw; }
.s-pliki code { font: 2.4cqw/1 VT323, ui-monospace, monospace; background: var(--kafel); padding: .1cqw .6cqw; border: .15cqw solid var(--tusz); margin-right: .6cqw; }
.s-narzedzia { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw 3cqw; font-size: 1.65cqw; margin-top: .4cqw; }
.s-narzedzia li { display: grid; grid-template-columns: 3.2cqw 1fr; gap: 0 1.2cqw; margin: 0; padding-bottom: .8cqw; border-bottom: .15cqw solid var(--linia); }
.s-narzedzia img { width: 3.2cqw; height: 3.2cqw; grid-row: span 2; image-rendering: pixelated; }
.s-narzedzia b { font: 400 2.3cqw/1 VT323, ui-monospace, monospace; color: var(--temat); }
.s-ceny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; font-size: 1.7cqw; margin-top: .6cqw; }
.s-ceny h3 { font-size: 2.8cqw; }
.s-kwota { font-weight: 700; margin-bottom: .8cqw; font-size: 1.75cqw; }
.s-stopka { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 2cqw; display: flex; justify-content: space-between; font: 1.8cqw/1 VT323, ui-monospace, monospace; color: var(--szary); border-top: .15cqw dashed var(--linia); padding-top: 1cqw; }

/* sterowanie: przyciski kwadratowe, ramka 2 px, min. 44 px, najechanie = przesunięcie i twardy cień */
.ster { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; background: var(--papier); border-top: 2px solid var(--tusz); font: 22px VT323, ui-monospace, monospace; }
.ster button { min-width: 48px; min-height: 44px; border: 2px solid var(--tusz); background: var(--biel); color: var(--tusz); font: 26px VT323, ui-monospace, monospace; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ster button:hover, .ster button:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rdza); outline: none; }
.ster button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.ster a { color: var(--temat); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ster button { transition: none; } .ster button:hover { transform: none; } }

/* telefon w pionie: slajd na całą szerokość, wysoki jak ekran, treść w jednej kolumnie (16:9 byłoby tu nieczytelne) */
@media screen and (orientation: portrait) and (max-width: 820px) {
  .slajd { width: calc(100vw - 16px); aspect-ratio: auto; min-height: calc(100dvh - 92px); display: flex; flex-direction: column; }
  .slajd-w { position: static; flex: 1; padding: 6cqw 6cqw 2cqw; font-size: 4.2cqw; gap: 2.6cqw; justify-content: center; }
  .s-nad { font-size: 4.6cqw; }
  h1 { font-size: 14cqw; max-width: none; }
  h2 { font-size: 10cqw; }
  h3 { font-size: 6cqw; }
  .s-duzy { font-size: 7.4cqw; max-width: none; }
  .s-tytul .slajd-w > p:not(.s-nad):not(.s-duzy) { max-width: none; }
  .s-maly { font-size: 3.6cqw; }
  .s-pies { position: static; width: 62cqw; align-self: center; }
  .s-dwie, .s-siatka, .s-ceny, .s-pliki, .s-narzedzia { grid-template-columns: 1fr; gap: 3cqw; }
  .s-siatka, .s-ceny, .s-narzedzia { font-size: 3.9cqw; }
  .s-siatka h3, .s-ceny h3 { font-size: 5.6cqw; }
  .s-karta { padding: 3cqw 3.4cqw; }
  .s-kwota { font-size: 4cqw; }
  .s-godziny li { grid-template-columns: 1fr; gap: 1cqw; padding: 2cqw 0; }
  .s-godziny b { font-size: 4.6cqw; }
  .s-g-t { font-size: 6.4cqw; }
  .s-pliki code { font-size: 4.6cqw; }
  .s-narzedzia li { grid-template-columns: 7cqw 1fr; gap: 0 3cqw; }
  .s-narzedzia img { width: 7cqw; height: 7cqw; }
  .s-narzedzia b { font-size: 5cqw; }
  .s-stopka { position: static; margin: 0 6cqw 4cqw; font-size: 3.8cqw; padding-top: 2cqw; }
}

@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body { background: var(--papier); }
  .ster { display: none !important; }
  .talia, .js .talia { display: block; padding: 0; min-height: 0; }
  .slajd, .js .slajd:not(.aktywny) { display: block; width: 1280px; height: 720px; border: 0; break-after: page; page-break-after: always; }
  .slajd:last-child { break-after: auto; page-break-after: auto; }
}