/* korkizmatmy.online: przycisk filmu „Zobacz filmik, jak zrobić pierwsze kroki” w stylu YouTube (seria ytprzycisk 29.10.2026,
   inc/Siec/Glowna/FilmPierwszeKroki.php). Wczytywany tylko wtedy, gdy film jest ustawiony (opcja sieci n2s_siec_film_pierwsze_kroki).
   Dokłada się do glowna.css (zmienne --font, pigułka jak .przycisk, kółko z ikoną 3 px od krawędzi). Bez stylów w linii (CSP).
   Kolory (WCAG 2.1 AA): tło #E00000 i biały napis 16 px = 5,0:1 (#FF0000 dałby 4,0:1, za mało dla zwykłego tekstu); logo YouTube
   w pełnych kolorach (#FF0000 i biały, wg zasad marki) na białym kółku: czerwień do bieli 4,0:1 (grafika: wymagane 3:1).
   Hover jak przyciski strony (design.md 4.1): tło bez zmian, reaguje tylko ikona (lekkie powiększenie logo zamiast obrotu). */

.film-pk{margin:.75rem 0 0}
.film-pk__przycisk{--p-wys:52px;display:inline-flex;align-items:center;gap:.75rem;min-height:var(--p-wys);padding:3px 1.45rem 3px 3px;
  border-radius:999px;background:#E00000;color:#fff;font:600 1rem/1.25 var(--font);text-align:left;text-decoration:none;cursor:pointer}
.film-pk__przycisk:is(:hover,:focus-visible,:active){color:#fff}
.film-pk__kolko{flex:none;display:grid;place-items:center;width:calc(var(--p-wys) - 6px);height:calc(var(--p-wys) - 6px);border-radius:50%;background:#fff}
.film-pk__logo{display:block;width:31px;height:22px;transition:transform .45s ease-in-out}
.film-pk__przycisk:is(:hover,:focus-visible) .film-pk__logo{transform:scale(1.14)}
@media (prefers-reduced-motion:reduce){.film-pk__logo{transition:none}}
/* telefon: na całą szerokość jak pozostałe przyciski w treści (glowna.css, Karolina 22.10.2026): napis na środku wolnego miejsca
   obok kółka (niewidoczny odpowiednik kółka po prawej = 55% jego szerokości), dłuższy napis łamie się na dwie równe linie */
@media (max-width:599.98px){
  .film-pk__przycisk{display:flex;width:100%;justify-content:space-between;padding-right:3px;text-align:center}
  .film-pk__przycisk::after{content:"";flex:none;width:calc((var(--p-wys) - 6px) * .55)}
  .film-pk__napis{text-wrap:balance}
}
/* tryb wysokiego kontrastu (Windows): przycisk dostaje ramkę systemową, bo tło znika */
@media (forced-colors:active){.film-pk__przycisk{border:2px solid ButtonText}}