/* Przegladanie na caly ekran, przesuwane w pionie - jak rolki.

   Po co: film w lencie gral w malym prostokacie, a wlasciciel chcial
   stuknac i zobaczyc go na calym ekranie, przesuwajac do nastepnego.

   Przesuwanie robi CSS (scroll-snap), a nie JavaScript liczacy dotkniecia:
   przegladarka umie to lepiej, plynniej i bez jednej linii kodu - a na
   komputerze to samo dziala kolkiem myszy i klawiszami. */

/* 100dvh, a nie samo inset:0. Na Androidzie okno ustawione przez inset
   siega POD zwinieta belke adresu przegladarki - wlasciciel mial przez to
   krzyzyk i glosnik schowane za paskiem z adresem. "dvh" liczy wysokosc
   tego, co czlowiek naprawde widzi. */
.rolki{position:fixed;inset:0;height:100dvh;z-index:9999;background:#000;display:none}
.rolki.otwarte{display:block}

/* Przycemnienie pod guzikami: na jasnym filmie bialy krzyzyk ginie
   zupelnie. Nie lapie dotkniec, wiec nie przeszkadza w przesuwaniu. */
.rolki.otwarte::before{content:"";position:absolute;left:0;right:0;top:0;height:104px;
  z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent)}
/* Strona pod spodem nie moze sie przewijac razem z rolkami. */
body.rolki-otwarte{overflow:hidden}

.rolki-tasma{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.rolki-tasma::-webkit-scrollbar{display:none}

.rolka{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden}
.rolka img,.rolka video{max-width:100%;max-height:100%;width:auto;height:auto;
  display:block}

/* Podpis nad dolna krawedzia, na przycemnieniu - inaczej bialy tekst
   ginie na jasnym zdjeciu. */
.rolka-podpis{position:absolute;left:0;right:0;bottom:0;
  padding:40px 18px calc(22px + env(safe-area-inset-bottom));
  font-size:14.5px;line-height:1.45;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
  text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Strzalka powrotu w LEWYM gornym kacie - tam, gdzie w kazdej aplikacji
   w telefonie. Krzyzyka z prawej nie ma: jedno wyjscie zamiast dwoch. */
.rolki-wstecz{position:absolute;top:calc(18px + env(safe-area-inset-top));left:12px;
  z-index:3;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff}
.rolki-wstecz svg{width:22px;height:22px}
.rolki-wstecz:active{background:rgba(0,0,0,.65)}

.rolki-glos{position:absolute;top:calc(18px + env(safe-area-inset-top));right:12px;
  z-index:3;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff}
.rolki-glos svg{width:21px;height:21px}
/* Wlaczony dzwiek swieci zlotem - tym samym, co cala strona firmy. */
.rolki-glos.wlaczony{background:linear-gradient(135deg,#A6790F,#F2DC96 48%,#A6790F);
  color:#14130F}
/* Przekreslenie slupkow znika, gdy dzwiek jest wlaczony. */
.rolki-glos.wlaczony .cisza{display:none}

/* Podpowiedz przy pierwszym otwarciu - znika po pierwszym przesunieciu. */
.rolki-wskazowka{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:3;text-align:center;font-size:12.5px;color:rgba(255,255,255,.7);
  pointer-events:none;transition:opacity .3s}
.rolki-wskazowka.znika{opacity:0}

@media (prefers-reduced-motion:reduce){
  .rolki-tasma{scroll-behavior:auto}
  .rolki-wskazowka{transition:none}
}

/* ------------------------------------------------- kto to opublikowal */
/* Nad podpisem, na przycemnieniu. Na stronie firmy autor jest jeden, wiec
   stoi raz - nie powtarza sie na kazdym ekranie. */
.rolki-autor{position:absolute;left:14px;bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:3;display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;
  border-radius:24px;background:rgba(0,0,0,.5);color:#fff;max-width:calc(100% - 28px)}
.rolki-autor img,.rolki-autor-litera{width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  object-fit:cover;display:grid;place-items:center;
  font-family:var(--f-display,Archivo,Arial,sans-serif);font-weight:800;font-size:13px;
  color:#14130F;background:linear-gradient(135deg,#A6790F,#F2DC96 48%,#A6790F)}
.rolki-autor b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Podpis schodzi nizej, zeby nie wchodzil na szpalte autora. */
.rolka-podpis{padding-bottom:calc(22px + env(safe-area-inset-bottom))}