/*
Rozmer gridu na ruzne velkych breakpointech 360, 1280, 1366, 1536 a 1920
*/

.podkategorie {
  margin: 0.5em;
}

.snippet {
  padding: 0.5em;
  text-align: justify;
}

.polozka {
  margin: 0;
  padding: 0.5em 0;
  border-bottom: 1px solid #f0f0f0;
}

.polozka:last-child { border-bottom: 0; }

.polozka p {
  margin-bottom: 0.5em;
}

.polozka p:last-child {
  margin-bottom: 0;
}

.polozka img,
.polozka .img--cuth,
.polozka .img--cutw {
  width: 100%;
  height: auto;
}

.polozka a {
  text-decoration: none;
  color: #000000;
}

.polozka .detail {
  background-color: #f0f0f0;
  background-image: url("/images/grafika/kategorie-pozadi.png");
  height: 44px;
  width: 88px;
  margin:0.5em;
  float: right;
  border-radius: 22px;
  border: 0;
}

.polozka .popis {
  font-size: 0.9em;
  padding: 0 0.5em;
}

.strankovani {
  text-align: center;
  margin:1em;
}

.strankovani ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

.strankovani li {
  margin: 0 0.5em 0.5em 0;
}

.strankovani a {
  display: block;
  min-width: 44px;
  padding: 0.5em;
  border-radius: 8px;
  box-shadow: 1px 1px 3px #888888;
}

.nastaveni {
  margin:0.5em;
}

.nastaveni ul {
  display: flex;
  flex-wrap: wrap;
}

.nastaveni li {
  border-radius: 8px;
  box-shadow: 1px 1px 3px #888888;
  margin: 0.5em 0.5em 0 0;
}

.nastaveni .bezramu {
  border-radius: 0px;
  box-shadow: none;
  display: block;
  min-width: 44px;
  padding: 0.5em;
}

.nastaveni a {
  display: block;
  min-width: 44px;
  padding: 0.5em;
}

.nastaveni a:hover {
 text-decoration: none;
}

.nastaveni .aktivni {
  background-color: #f0f0f0;
}

.gopay { text-align: center; }

.priznak-vypis {
  position: absolute;
  top: 0;
  right: 0;
}

.relative {
  position: relative;
}

/* ************************************************************** */

.drobecky { grid-area: Drobecky;}
.nadpis { grid-area: Nadpis; }
.snippet { grid-area: Snippet; }
.menu { grid-area: Menu; }
.nastaveni { grid-area: Nastaveni; }
.vypis { grid-area: Vypis; }
.strankovani { grid-area: Strankovani; }
.podkategorie { grid-area: Podkategorie; }

.teloidk {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "Drobecky"
    "Nadpis"
    "Snippet"
    "Podkategorie"
    "Menu"
    "Nastaveni"
    "Vypis"
    "Strankovani";
}

.vypis {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.gopay-flex {
  display: flex;
  align-items: center;
}

.gopay-flex div {
  flex: 1 1 auto;
}

/* ************************************************************** */

@media only screen and (min-width: 600px) {
  .polozka { padding: 0.5em; }
  .polozka .popis { padding: 0; }
  .vypis { grid-template-columns: 1fr 1fr; }
  .polozka { border-right: 1px solid #f0f0f0; }
  .polozka:nth-child(2n) { border-right: 0; }
  .polozka:nth-last-child(-n+2) { border-bottom: 0; }
  .polozka .img--cuth {
    max-width:calc(45vw);
    max-height:calc(45vw/4*3);
    width: auto;
    height: auto;
  }
  .polozka .obrazek--cut { min-height: calc(45vw/4*3 + 5px); }
  .polozka:hover {
    border-radius: 8px;
    box-shadow: inset 0 0 3px #888888;
    background-color: #f8f8f8;
  }
}

@media only screen and (min-width: 900px) {
  .teloidk {
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto auto auto auto auto auto auto 1fr;
    grid-template-areas:
      "Menu Drobecky"
      "Menu Nadpis"
      "Menu Snippet"
      "Menu Podkategorie"
      "Menu Nastaveni"
      "Menu Vypis"
      "Menu Strankovani"
      "Menu .";
  }
  .drobecky { border-radius: 8px 0 0 8px; }
  .gopay { display: block; }
  .nastaveni { display: block; }
  .polozka .img--cuth {
    max-width:calc(30vw);
    max-height:calc(30vw/4*3);
  }
  .polozka .obrazek--cut { min-height: calc(30vw/4*3 + 5px); }
}

@media only screen and (min-width: 1000px) {
  .nactizbozi {
    width: 200px;
    margin-left: 3em;
  }
  .vypis { grid-template-columns: 1fr 1fr; }
}

@media only screen and (min-width: 1250px) {
  .vypis { grid-template-columns: 1fr 1fr 1fr; }
  .polozka:nth-child(2n) { border-right: 1px solid #f0f0f0; }
  .polozka { border-right: 1px solid #f0f0f0; }
  .polozka:nth-child(3n) { border-right: 0; }
  .polozka:nth-last-child(-n+3) { border-bottom: 0; }
  .polozka .img--cuth {
    max-width:calc(23vw);
    max-height:calc(23vw/4*3);
  }
  .polozka .obrazek--cut { min-height: calc(23vw/4*3 + 5px); }
}

@media only screen and (min-width: 1500px) {
  .vypis { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .polozka:nth-child(3n) { border-right: 1px solid #f0f0f0; }
  .polozka { border-right: 1px solid #f0f0f0; }
  .polozka:nth-child(4n) { border-right: 0; }
  .polozka:nth-last-child(-n+4) { border-bottom: 0; }
  .polozka .img--cuth {
    max-width:calc(18vw);
    max-height:calc(18vw/4*3);
  }
  .polozka .obrazek--cut { min-height: calc(18vw/4*3 + 5px); }
}

@media only screen and (min-width: 1640px) {
  .drobecky { border-radius: 8px; }
  .polozka .img--cuth {
    max-width:300px;
    max-height:225px;
  }
  .polozka .obrazek--cut { min-height: 230px; }
}