/* Lenta na stronie firmy.
   Podpieta na koncu listy arkuszy - w tym projekcie wygrywa nizszy plik,
   a lenta ma prawo nadpisac ogolne reguly .fs-sek.

   Kolory sa wpisane wprost (zloto na czerni), tak jak w calej stronie
   firmy: ta strona ma jeden wyglad w obu motywach portalu - to wizytowka,
   a nie kabinet. */

.fl{padding:4px 0 0}

/* ------------------------------------------------------------------ sito */
/* Zwykle odnosniki: bez JavaScriptu przeladowuja strone z ?co=..., z nim
   przelaczaja sie od razu. Kotwice licznikow siedza na chipach. */
.fl-sito{display:flex;gap:7px;overflow-x:auto;padding:14px 14px 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.fl-sito::-webkit-scrollbar{display:none}
.fl-sito a{flex:0 0 auto;padding:8px 14px;border-radius:17px;font-size:12.5px;
  white-space:nowrap;border:1px solid rgba(255,255,255,.1);color:#9E9788}
.fl-sito a.on{background:rgba(242,220,150,.12);border-color:rgba(212,175,55,.55);
  color:#F2DC96;font-weight:600}

/* Guziki gospodarza: osobny rzad pod sitem, zlota przerywana obwodka -
   widac, ze to jego narzedzie, a nie kolejny filtr. */
.fl-narzedzia{display:flex;gap:7px;padding:0 14px 12px}
.fl-dodaj{flex:1 1 0;min-height:40px;padding:0 14px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:600;white-space:nowrap;border-radius:17px;
  background:transparent;border:1px dashed rgba(212,175,55,.55);color:#E3C765}
.fl-dodaj:hover{border-style:solid;color:#F2DC96}

/* ----------------------------------------------------------------- karty */
.fl-lenta{display:grid;gap:12px;padding:0 14px}
.fl-karta{display:block;border:1px solid rgba(212,175,55,.22);border-radius:15px;
  background:#111014;overflow:hidden;color:#EDE7D8}

.fl-obraz{position:relative}
.fl-obraz figure{margin:0}
.fl-obraz img{display:block;width:100%;height:196px;object-fit:cover}

/* Gdy JavaScript pozna prawdziwe proporcje pliku, ramka je przyjmuje
   i nic sie nie obcina. Klasa (a nie sam style) po to, zeby CSS mial na
   czym sie zawiesic - inaczej zostaje sztywna wysokosc i pionowe zdjecie
   traci glowe czlowieka. */
.fl-obraz figure.ma-proporcje,
.fl-mozaika-1 figure.ma-proporcje{max-height:88vh;background:#0B0A0C}
.fl-obraz figure.ma-proporcje img,
.fl-mozaika-1 figure.ma-proporcje img,
.fl-mozaika-1 figure.ma-proporcje video{height:100%;object-fit:contain}
.fl-obraz figcaption{display:none}
.fl-bez{display:block;height:104px;
  background:linear-gradient(155deg,#23262C,#15171B 70%)}
.fl-znak{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:14px;
  font-family:var(--f-cond,"Barlow Condensed",Arial,sans-serif);font-size:10px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#14130F;
  background:rgba(242,220,150,.92)}

.fl-tresc{padding:12px 13px 13px}
.fl-tresc h3{margin:0;font-family:var(--f-display,Archivo,Arial,sans-serif);
  font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  overflow-wrap:anywhere}
.fl-gdzie{margin:3px 0 0;font-size:12.5px;color:#9E9788}
.fl-txt{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#C8C2B4;
  overflow-wrap:anywhere}

.fl-stopka{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:#6E685C}
.fl-zmien{margin-left:auto;padding:0;cursor:pointer;font:inherit;font-size:11.5px;
  background:none;border:0;color:#E3C765}
.fl-zmien:hover{color:#F2DC96}

/* --------------------------------------------------------- mozaika zdjec */
/* Zdjecia z jednego dnia ida jedna paczka: jedno duze z lewej, reszta
   w slupku z prawej. Osiem osobnych kart zasypaloby lente. */
.fl-mozaika{display:grid;gap:3px}
.fl-mozaika figure{margin:0;position:relative;overflow:hidden}
.fl-mozaika img,.fl-mozaika video{display:block;width:100%;height:100%;object-fit:cover}
.fl-mozaika figcaption{display:none}
/* JEDEN PLIK = WYSOKA RAMKA.
   Film z telefonu jest pionowy (9:16). W ramce na 196 px zostawal z niego
   pasek z czolem czlowieka - dokladnie to zglosil wlasciciel. Teraz ramka
   ma proporcje 4:5 (jak na Instagramie), a JavaScript zamienia je na
   PRAWDZIWE proporcje pliku, gdy tylko je pozna (public/js/rolki.js) -
   wtedy nic sie nie obcina ani nie zostaje czarnym pasem.
   max-height pilnuje, zeby pionowy film nie zajal trzech ekranow. */
.fl-mozaika-1 figure{aspect-ratio:4 / 5;height:auto;max-height:88vh;
  background:#0B0A0C}
.fl-mozaika-1 img,.fl-mozaika-1 video{height:100%;object-fit:contain}

/* Znaczek "graj" na miniaturze filmu w mozaice - bez niego film w paczce
   wyglada jak nieruchome zdjecie. */
.fl-graj{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(6,6,8,.55);border:1px solid rgba(242,220,150,.6);color:#F2DC96;
  pointer-events:none}
.fl-graj svg{width:20px;height:20px}
.fl-mozaika figure{cursor:pointer}
/* Przy filmie, ktory gra sam w lencie, znaczek schodzi do kata i maleje -
   w srodku zaslanialby to, co sie wlasnie rusza. */
.fl-mozaika-1 .fl-graj{left:auto;right:10px;top:auto;bottom:10px;transform:none;
  width:34px;height:34px}
.fl-mozaika-1 .fl-graj svg{width:15px;height:15px}
.fl-mozaika-2{grid-template-columns:1fr 1fr}
.fl-mozaika-2 figure{height:150px}
.fl-mozaika-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.fl-mozaika-3 figure:first-child{grid-row:1 / span 2}
.fl-mozaika-3 figure{height:100%;min-height:73px}
.fl-mozaika-3{height:150px}
.fl-reszta{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display,Archivo,Arial,sans-serif);font-weight:800;font-size:17px;
  color:#F2DC96;background:rgba(6,6,8,.62)}

/* ---------------------------------------------------------------- oferta */
.fl-oferta{display:flex;align-items:center;gap:11px;padding:13px}
.fl-stawka{flex:0 0 auto;font-family:var(--f-display,Archivo,Arial,sans-serif);
  font-weight:800;font-size:19px;color:#F2DC96;line-height:1}
.fl-stawka em{display:block;font-style:normal;font-size:10.5px;font-weight:600;
  color:#9E9788;letter-spacing:.04em;margin-top:2px}
.fl-o-tekst{flex:1 1 auto;min-width:0}
.fl-o-tekst b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fl-o-tekst span{display:block;font-size:12px;color:#9E9788;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fl-o-go{flex:0 0 auto;padding:9px 15px;border-radius:20px;font-size:12.5px;
  border:1px solid rgba(212,175,55,.35);color:#E3C765}

/* ------------------------------------------------------------- pusta lenta */
.fl-pusto{padding:22px 16px;text-align:center}
.fl-pusto b{display:block;font-family:var(--f-display,Archivo,Arial,sans-serif);
  font-weight:800;font-size:15px;margin-bottom:5px}
.fl-pusto p{margin:0 0 14px;font-size:13px;line-height:1.5;color:#8C8578}
.fl-go{min-height:44px;padding:0 22px;border:0;border-radius:22px;cursor:pointer;
  font:inherit;font-family:var(--f-display,Archivo,Arial,sans-serif);font-weight:800;
  font-size:13.5px;color:#14130F;
  background:linear-gradient(135deg,#A6790F,#F2DC96 48%,#A6790F)}

/* ----------------------------------------------- zaproszenie wlasciciela */
/* Stoi pod lenta tylko wtedy, gdy firma nie ma ani jednej oferty - wtedy
   na stronie nie bylo by skad wystawic pierwszej. */
.fl-wystaw{display:flex;align-items:center;gap:11px;margin:12px 14px 0;padding:13px 14px;
  border-radius:15px;background:rgba(242,220,150,.07);border:1px solid rgba(212,175,55,.35)}
.fl-wystaw span{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.4;color:#8C8578}
.fl-wystaw span b{display:block;font-family:var(--f-display,Archivo,Arial,sans-serif);
  font-weight:800;font-size:14px;color:#EDE7D8}
.fl-wystaw a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  padding:0 18px;border-radius:22px;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)}

/* -------------------------------------------------------- fakty na gorze */
/* Opis i atuty zostaja nad lenta: to nie zdarzenia, wiec nie maja czego
   szukac w strumieniu od najnowszego. */
.fl-fakty{scroll-margin-top:74px;padding:16px 14px 0}
.fl-fakty h2{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#9E9788}
.fl-fakty .fs-opis{color:#C8C2B4}
/* Chipy sita maja zostac widoczne po skoku z licznika pod nazwa firmy. */
.fl-sito a{scroll-margin-top:74px}
.fl-atuty{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}
.fl-atuty div{display:flex;gap:7px;padding:9px 10px;border-radius:11px;font-size:12px;
  line-height:1.35;color:#C8C2B4;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07)}
.fl-atuty i{flex:0 0 auto;font-style:normal;font-weight:700;color:#E3C765}

/* Szeroki ekran: lenta w jednej kolumnie o ludzkiej szerokosci, a nie na
   cala szerokosc monitora - wiersz na 1200 px sie nie czyta. */
@media (min-width:760px){
  .fl-lenta,.fl-sito,.fl-fakty,.fl-wystaw,.fl-narzedzia{max-width:620px;
    margin-left:auto;margin-right:auto}
  .fl-obraz img{height:300px}
  .fl-mozaika-1 figure{height:300px}
  .fl-mozaika-2 figure{height:220px}
  .fl-mozaika-3{height:220px}
  .fl-atuty{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------- kto to opublikowal */
/* Szpalta nad kazda karta. Film da sie pokazac komus przez link - wtedy
   z ekranu musi byc widac, czyja to robota, bez przewijania do szyldu. */
.fl-autor{display:flex;align-items:center;gap:9px;padding:11px 13px;color:#EDE7D8;
  border-bottom:1px solid rgba(255,255,255,.07)}
.fl-autor-znak{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-family:var(--f-display,Archivo,Arial,sans-serif);
  font-weight:800;font-size:14px;color:#14130F;
  background:linear-gradient(135deg,#A6790F,#F2DC96 48%,#A6790F)}
.fl-autor-znak img{width:100%;height:100%;object-fit:cover;display:block}
.fl-autor-kto{min-width:0}
.fl-autor-kto b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fl-autor-kto span{display:block;font-size:11.5px;color:#8C8578}