/* Dlaždice produktů ve výpisu v jedné rovině (bs222, 6. 11. 2026, majitel: cena, množství a tlačítko mají být u všech dlaždic v řadě ve stejné výšce).
   Příčina rozjetí: popis produktu (.listingDescription) se vykreslí jen u produktů, které ho mají; obrázky mají různou výšku a nadpisy se zalamují na různý počet řádků.
   Řešení bez zásahu do PHP: řada dlaždic (.row > .col > .centerBoxContentsListing) je mřížka, ve které sekce dlaždic (obrázek, název, popis, koupit, vlastnosti, rozměry, akce)
   sdílejí řádky přes CSS subgrid, takže řádek je tak vysoký jako nejvyšší sekce v řadě a chybějící popis nechá prázdné místo jen tehdy, když ho má aspoň jedna dlaždice v řadě.
   Počet sloupců se bere z Bootstrap tříd row-cols-* (stejné zlomy jako dosud). Prohlížeče bez subgridu nebo :has() zůstávají u dosavadního vzhledu (@supports). */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  .row[class*="row-cols-"]:has(> .col > .centerBoxContentsListing) {
    display: grid;
    grid-template-columns: repeat(var(--bs-dlazdic-sl, 1), minmax(0, 1fr));   /* počet sloupců dosazují třídy row-cols-* níže (výchozí 1) */
    align-items: stretch;
  }
  .row[class*="row-cols-"]:has(> .col > .centerBoxContentsListing) > .col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    width: auto;
    max-width: none;
    flex: none;
    min-width: 0;
  }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 7;
    grid-column: 1;
    align-content: start;
    min-width: 0;
  }
  /* zalomení řádku <br> mezi sekcemi do mřížky nepatří */
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > br { display: none; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .list-image { grid-row: 1; }
  /* odstup, který dřív dělaly zalomení <br> mezi sekcemi */
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .itemTitle { grid-row: 2; margin-top: 1.5rem; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .listingDescription { grid-row: 3; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .cm-dlazdice-koupit { grid-row: 4; margin-top: 1.5rem; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .tt-filter-badges { grid-row: 5; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .rozmery-dropdown { grid-row: 6; }
  .row[class*="row-cols-"] > .col > .centerBoxContentsListing > .cm-dlazdice-akce { grid-row: 7; }
}

/* počet sloupců = Bootstrap row-cols-* na stejných zlomech (každý zlom přepisuje nižší; jen uvnitř bloku výše se používá) */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  .row.row-cols-1 { --bs-dlazdic-sl: 1; }
  .row.row-cols-2 { --bs-dlazdic-sl: 2; }
  .row.row-cols-3 { --bs-dlazdic-sl: 3; }
  .row.row-cols-4 { --bs-dlazdic-sl: 4; }
  .row.row-cols-5 { --bs-dlazdic-sl: 5; }
  .row.row-cols-6 { --bs-dlazdic-sl: 6; }
  @media (min-width: 576px) {
    .row.row-cols-sm-1 { --bs-dlazdic-sl: 1; } .row.row-cols-sm-2 { --bs-dlazdic-sl: 2; } .row.row-cols-sm-3 { --bs-dlazdic-sl: 3; }
    .row.row-cols-sm-4 { --bs-dlazdic-sl: 4; } .row.row-cols-sm-5 { --bs-dlazdic-sl: 5; } .row.row-cols-sm-6 { --bs-dlazdic-sl: 6; }
  }
  @media (min-width: 768px) {
    .row.row-cols-md-1 { --bs-dlazdic-sl: 1; } .row.row-cols-md-2 { --bs-dlazdic-sl: 2; } .row.row-cols-md-3 { --bs-dlazdic-sl: 3; }
    .row.row-cols-md-4 { --bs-dlazdic-sl: 4; } .row.row-cols-md-5 { --bs-dlazdic-sl: 5; } .row.row-cols-md-6 { --bs-dlazdic-sl: 6; }
  }
  @media (min-width: 992px) {
    .row.row-cols-lg-1 { --bs-dlazdic-sl: 1; } .row.row-cols-lg-2 { --bs-dlazdic-sl: 2; } .row.row-cols-lg-3 { --bs-dlazdic-sl: 3; }
    .row.row-cols-lg-4 { --bs-dlazdic-sl: 4; } .row.row-cols-lg-5 { --bs-dlazdic-sl: 5; } .row.row-cols-lg-6 { --bs-dlazdic-sl: 6; }
  }
  @media (min-width: 1200px) {
    .row.row-cols-xl-1 { --bs-dlazdic-sl: 1; } .row.row-cols-xl-2 { --bs-dlazdic-sl: 2; } .row.row-cols-xl-3 { --bs-dlazdic-sl: 3; }
    .row.row-cols-xl-4 { --bs-dlazdic-sl: 4; } .row.row-cols-xl-5 { --bs-dlazdic-sl: 5; } .row.row-cols-xl-6 { --bs-dlazdic-sl: 6; }
  }
}