/* Krotkie filmy z sesji.
   Pionowe, 9:16, bo tak zostaly nakrecone. Nie przycinamy ich do
   poziomu: przyciety kadr obcialby glowe albo kieszen, czyli dokladnie
   to, po co ten film na stronie jest. */

.fr-film{position:relative;margin:0;max-width:300px}
.fr-film__plik{display:block;width:100%;height:auto;aspect-ratio:9 / 16;
  object-fit:cover;background:var(--stone)}
.fr-film__podpis{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}

/* Przycisk zatrzymania.
   Ruch, ktory chodzi w kolko dluzej niz piec sekund, musi dac sie
   zatrzymac. Przycisk stoi NA filmie, bo tam go ktos szuka, i ma
   wlasne, nieprzezroczyste tlo: nad jasnym kadrem przezroczysty
   przycisk bywa nieczytelny, a to nie jest ozdoba. */
.fr-film__sterowanie{position:absolute;top:10px;right:10px;
  padding:7px 12px;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--ivory);border:1px solid var(--line);
  cursor:pointer}
.fr-film__sterowanie:hover{background:var(--stone)}
.fr-film__sterowanie:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Karta produktu i strona nadrukow: film z boku tekstu. */
.fr-film-sekcja__inner{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.fr-film-sekcja__tekst p{margin:0 0 16px;font-size:18px;line-height:1.7;color:var(--muted)}
.fr-film-sekcja__tekst p:last-child{margin-bottom:0}
.fr-film-sekcja__tekst strong{color:var(--ink)}
.fr-band--ciemny .fr-film-sekcja__tekst strong{color:var(--ivory)}

@media (max-width:900px){
  /* Film zostaje waski takze na telefonie. Pionowy kadr rozciagniety
     na cala szerokosc ekranu ma ponad szescset pikseli wysokosci
     i spycha tekst pod nastepny przewijak. */
  .fr-film{max-width:260px}
  .fr-film-sekcja__inner{grid-template-columns:1fr;gap:22px}
}