/* Podstrona „Podstawy AI” (/podstawy-ai/): kadr i odtwarzacz po kliknięciu, rozdziały, źródła. Tokeny z css/styl.css.
   Budżet 4000 B (plan 2026-10-15). Ruch tylko transform; prefers-reduced-motion wyłącza go w css/styl.css. */
.film-wstep .sekcja__wnetrze, .tekst-waski { max-width: 60rem; }
/* tekst w szerokości do czytania jak na stronie głównej; kadr i siatka rozdziałów szersze */
.film-wstep p, .tekst-waski p, .zrodla ul { max-width: var(--szer-tekstu); }
.film-wstep h1 { margin-top: 20px; }
.film { margin-top: 32px; }
.film__ekran { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-karta);
  background: var(--noc-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.film__kadr, .film__ramka { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__kadr { object-fit: cover; }
.film__ramka { border: 0; }
/* fokus z klawiatury w ramce: obrys do środka (.film__ekran ucina zewnętrzny) */
.film__ramka:focus-visible { outline: 3px solid var(--wizjer); outline-offset: -3px; }
/* przycisk na całym kadrze (klik w dowolne miejsce), pigułka w pustym rogu kadru, z dala od napisu „Podstawy AI” */
.film__start { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 0 6% 6%; border: 0;
  background: transparent; cursor: pointer; }
.film__start[hidden], .film--gotowy .film__zapas { display: none; }
.film__przycisk { display: inline-flex; align-items: center; gap: 10px; min-height: var(--cel); padding: 0 24px 0 20px;
  border-radius: var(--r-pigulka); background: var(--wizjer); color: var(--bialy); font: 600 17px/1.2 var(--kroj-tekst);
  box-shadow: 0 12px 30px -10px rgba(37, 99, 235, .95); transition: transform .2s ease-out; }
.film__start:hover .film__przycisk { background: var(--wizjer-ciemny); transform: translateY(-1px); }
/* obrys na pigułce, nie na przycisku: przycisk wypełnia kadr z overflow: hidden, więc jego obrys byłby ucięty;
   granat i biała obwódka: jedno z nich zawsze odcina się od zdjęcia */
.film__start:focus-visible { outline: none; }
.film__start:focus-visible .film__przycisk { outline: 3px solid var(--granat); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bialy), 0 12px 30px -10px rgba(37, 99, 235, .95); }
/* wąski telefon (kadr 280–360 px): pigułka mniejsza i bliżej rogu, z dala od kreski pod „Podstawy AI” i od robota;
   cel dotyku to i tak cały kadr */
@media (max-width: 399.98px) {
  .film__start { padding: 0 0 10px 10px; }
  .film__przycisk { min-height: 44px; gap: 8px; padding: 0 16px 0 14px; }
}
/* wymuszone kolory zdejmują niebieskie tło: ramka odcina pigułkę od jasnego kadru */
@media (forced-colors: active) { .film__przycisk { border: 2px solid ButtonText; } }
.film__zapas, .film__uwaga, .film__fakty { margin: 16px 0 0; }
/* bez JavaScriptu jedyna droga do filmu: cel dotyku co najmniej 44 px */
.film__zapas a { display: inline-flex; align-items: center; min-height: var(--cel); }
.film__fakty { color: var(--bialy); font-weight: 600; }
.rozdzialy { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
/* height: 100% wyrównuje karty w rzędzie (dwie kolumny od 768 px), gdy tytuł obok ma dwa wiersze */
.rozdzialy__link { display: flex; align-items: center; gap: 16px; height: 100%; min-height: var(--cel); padding: 10px 18px;
  border-radius: var(--r-pole); background: var(--bialy); color: var(--granat); text-decoration: none; box-shadow: var(--cien); }
.rozdzialy__link:hover { color: var(--wizjer-ciemny); text-decoration: underline; }
.rozdzialy__czas { flex: none; min-width: 3.2em; color: var(--wizjer-ciemny); font-weight: 600; font-variant-numeric: tabular-nums; }
.zrodla ul { margin: 0; padding-left: 1.2em; }
.zrodla li + li { margin-top: 10px; }
/* dwie kolumny czytane w dół, jak Tab (10 rozdziałów, 5 wierszy) */
@media (min-width: 768px) { .rozdzialy { grid: repeat(5, auto) / auto-flow 1fr; column-gap: 24px; } }