/* /grily: název a cena pod každým grilem.

   Roman 15. 9. 2026 se snímkem mřížky: „text byl u každého grilu pod
   obrázkem, stačí jen název a cena, ne tak slabým fontem."

   Dřív popisek visel absolutně 34 a 54 px pod buňkou, byl průhledný
   a ukázal se jen po najetí — a když se ukázal, ležel přes fotku grilu
   o řádek níž, protože řádek mřížky s ním nepočítal. Teď stojí v dlaždici
   pod fotkou, je vidět vždycky a řádek mu nechává místo (POPISEK_GRILU
   v grily.js — výška popisku tady a to číslo musí sedět).

   Vlastní soubor; mřížku, velikosti grilů i jízdu drží dál grily.css
   a grily-pohyb.css. Pravidla mají stejnou váhu jako ta v grily.css
   (:nth-child(n)) a přebíjejí je pořadím, bez !important. */

.gf-plocha.je-mrizka .gf-gril:nth-child(n) {
  height: auto;
  justify-content: flex-start;
  gap: 0;
}

.gf-plocha.je-mrizka .gf-gril:nth-child(n) img {
  flex: none;
  height: var(--gf-strana, 200px);
}

.gf-plocha.je-mrizka .gf-gril b,
.gf-plocha.je-mrizka .gf-gril span {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  opacity: 1;
}

/* Název: nejvýš dva řádky, delší se zkrátí třemi tečkami — jinak by
   dlouhý název („Chytrý gril na dřevěné uhlí Performer Premium Smart
   57 cm") vytlačil cenu do dalšího řádku mřížky. */
.gf-plocha.je-mrizka .gf-gril b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: min(var(--gf-sloupec, 200px), calc(var(--gf-strana, 200px) * 1.25));
  height: 36px;
  margin-top: 8px;
  color: var(--gf-text, #16161a);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.gf-plocha.je-mrizka .gf-gril span {
  margin-top: 2px;
  color: var(--gf-text, #16161a);
  font-size: 15px;
  font-weight: 800;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}