/* Pliki RFG: wyglad jak DropFiles na lesnaradosc.pl / jurajskaprzystan.pl (kafelki "lr"/"jp" i tabela).
   clear: lista zawsze pod oplywanymi zdjeciami (rfgsa.pl: zdjecia z float: left nad plikami). DropFiles trafial pod
   nie przez min-width kafelkow 350 px; siatka i tabela z overflow mieszcza sie obok i sciskaja do kilku liter. */
.rfg-pliki {
  --rfg-pliki-kolor: #006dcc;
  clear: both;
  margin: 20px 0;
}

/* Odstepy jak kontenery DropFiles: kafelek 45 px ponizej krawedzi, 20 px od bokow, 15 px + 10 px pod spodem. */
.rfg-pliki--karty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 10px;
  padding: 45px 20px 15px;
}

@media (max-width: 900px) {
  .rfg-pliki--karty {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kategoria DropFiles z jedna kolumna (rfgsa.pl "Sygnalisci"): kafelek na cala szerokosc. */
.rfg-pliki--jedna-kolumna {
  grid-template-columns: minmax(0, 1fr);
}

/* Kafelek jak w DropFiles (motywy "lr", "jp" i domyslny wygladaja tak samo): wszystko od gory, ikona 50x70
   w polu 80 px (+15 px), opis wciety o 25 px, tytul 16 px #808080, przycisk w kolumnie 38% szerokosci (205 px na
   szerokim kafelku, ok. 137 px na waskiej stronie aktualnosci), 23 px od gory. */
.rfg-plik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 38%;
  align-items: start;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.rfg-plik__opis {
  padding-left: 25px;
  text-align: center;
}

.rfg-plik__tytul {
  display: block;
  color: #808080;
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.rfg-plik__meta {
  margin-top: 13px;
  color: #999;
  font-size: 13px;
  line-height: 19px;
  text-align: left;
}

.rfg-plik__meta span {
  display: inline-block;
  min-width: 90px;
}

/* Opis pliku z DropFiles (rfgsa.pl: "Biuro"), nad rozmiarem i data jak .file-desc. */
.rfg-plik__dopisek {
  margin-bottom: 15px;
}

/* Ikona dokumentu z zagietym rogiem i rozszerzeniem (kolor wg typu pliku). */
.rfg-plik__ikona {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  width: 50px;
  height: 70px;
  margin: 0 15px 10px 0;
  padding-bottom: 12px;
  background: var(--rfg-ikona, #8a8a8a);
  color: #fff;
  font: bold 14px/1 sans-serif;
  text-transform: uppercase;
  clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
}

.rfg-plik__ikona::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 24%;
  background: rgba(255, 255, 255, 0.45);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  content: "";
}

.rfg-plik__pobierz {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 23px 0 0 5px;
  padding: 7px 15px;
  border-radius: 8px;
  background: var(--rfg-pliki-kolor);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.rfg-plik__pobierz:hover,
.rfg-plik__pobierz:focus-visible {
  color: #fff;
  filter: brightness(1.12);
  text-decoration: none;
}

@media (max-width: 480px) {
  .rfg-plik {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rfg-plik__opis {
    padding-left: 0;
  }

  .rfg-plik .rfg-plik__pobierz {
    grid-column: 1 / -1;
    margin: 5px 0 0;
  }
}

/* Motyw "table" jak w DropFiles: tabela 48 px ponizej krawedzi, naglowek 60 px bez tla, wiersze 76 px z kreska
   #ccc u gory, szare teksty, ikona 30x45, przycisk na cala szerokosc kolumny. Style szablonu dla tabel wylaczone.
   Szerokosci kolumn jak w DropFiles (style_ver5.4.css): automatyczne wg tresci, rozmiar bez lamania, "Pobierz"
   155 px, tytul min. 132 px; na ekranach do 850 px bez kolumny rozmiaru. */
.rfg-pliki--tabela {
  margin-bottom: 10px;
  padding: 48px 5px 5px;
  overflow-x: auto;
}

.rfg-pliki--tabela table {
  width: 100%;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: #999;
  font-size: 13px;
}

.rfg-pliki--tabela th,
.rfg-pliki--tabela td {
  padding: 15px 0 15px 10px;
  border: 0;
  background: #fff;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

.rfg-pliki--tabela th {
  color: #666;
  line-height: 30px;
}

.rfg-pliki--tabela td {
  border-top: 1px solid #ccc;
  color: #999;
  line-height: 32px;
}

.rfg-pliki--tabela td:nth-child(2) {
  white-space: nowrap;
}

.rfg-pliki--tabela th:last-child,
.rfg-pliki--tabela td:last-child {
  width: 155px;
  min-width: 150px;
  max-width: 155px;
}

.rfg-pliki--tabela td:last-child {
  padding: 5px 10px 5px 5px;
}

@media (min-width: 768px) {
  .rfg-pliki--tabela th:first-child,
  .rfg-pliki--tabela td:first-child {
    min-width: 132px;
  }
}

@media (max-width: 850px) {
  .rfg-pliki--tabela th:nth-child(2),
  .rfg-pliki--tabela td:nth-child(2) {
    display: none;
  }
}

/* 8 px do tytulu = 5 px marginesu + spacja miedzy ikona a tytulem w HTML DropFiles. */
.rfg-pliki--tabela .rfg-plik__ikona {
  width: 30px;
  height: 45px;
  margin: 0 8px 0 0;
  padding-bottom: 7px;
  font-size: 9px;
  vertical-align: middle;
}

.rfg-pliki--tabela .rfg-plik__tytul {
  display: inline;
  color: #999;
  font-size: 13px;
  font-weight: normal;
  line-height: inherit;
  vertical-align: middle;
}

.rfg-pliki--tabela .rfg-plik__pobierz {
  display: flex;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0 0 5px;
  padding: 5px 15px;
  font-size: 13px;
  line-height: 22px;
}

/* Przycisk "Otworz" (parametr "podglad", jak DropFiles z podgladem na rfgsa.pl): w kafelku pod "Pobierz",
   ta sama kolumna; jasne tlo #fafafa, szary tekst, 10 px nad nim, zaokraglenie 8 px. */
.rfg-plik__przyciski {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 23px 0 0 5px;
}

.rfg-plik__przyciski .rfg-plik__pobierz {
  margin: 0 0 5px;
}

.rfg-plik__otworz {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 5px 15px;
  border-radius: 8px;
  background: #fafafa;
  color: #8f8f8f;
  font-size: 13px;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
}

.rfg-plik__otworz:hover,
.rfg-plik__otworz:focus-visible {
  color: #666;
  text-decoration: none;
}

/* 10 px pod "Pobierz" (marginesy sie nie sumuja: 5 px "Pobierz" i 10 px tutaj daja 10), bez marginesu na dole -
   wiersz 85 px jak w DropFiles. */
.rfg-pliki--tabela .rfg-plik__otworz {
  display: flex;
  width: 100%;
  margin: 10px 0 0;
}

@media (max-width: 480px) {
  .rfg-plik .rfg-plik__przyciski {
    grid-column: 1 / -1;
    margin: 5px 0 0;
  }
}

/* Motyw "default" DropFiles do 720 px (rfgsa.pl): kafelek w slupku - ikona, pod nia tytul wciety o 25 px, dane bez
   wciecia, przyciski na cala szerokosc 25 px nizej (15 + 10 px dopelnien DropFiles) i 10 px nad dolna krawedzia
   (jak .file { display: block }). */
@media (max-width: 720px) {
  .rfg-pliki--default .rfg-plik {
    display: block;
  }

  .rfg-pliki--default .rfg-plik .rfg-plik__ikona {
    display: flex;
    margin: 0 0 10px;
  }

  .rfg-pliki--default .rfg-plik .rfg-plik__opis {
    padding-left: 0;
    text-align: left;
  }

  .rfg-pliki--default .rfg-plik .rfg-plik__tytul {
    padding-left: 25px;
  }

  .rfg-pliki--default .rfg-plik .rfg-plik__przyciski {
    margin: 25px 0 0;
    padding-bottom: 10px;
  }
}