/*
 * Mosaïques de photos — Nos produits sur l’accueil
 * Gutenberg gère les colonnes, les positions, les spans et le gap ; ce fichier gère la hauteur des rangées et le recadrage.
 * Chargement : functions.php ; règles conservées dans leur ordre de cascade.
 */
/* 01. Mobile : images carrées et rangées de hauteur automatique. */
.lgr-product-grid { grid-auto-rows: auto; }
.lgr-product-grid > .wp-block-image,
.editor-styles-wrapper .lgr-product-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image {
  margin: 0;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
}
/* 02. Images : remplir les cellules avec object-fit: cover. */
.lgr-product-grid .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 03. Gutenberg : !important compense le height:auto inline ajouté par ImageEdit. */
.editor-styles-wrapper .lgr-product-grid .wp-block-image img {
  height: 100% !important;
}
/* 04. Tablette : rangées de 160 px, y compris pour les images couvrant plusieurs rangées. */
@media (min-width: 600px) {
  .lgr-product-grid,
  .editor-styles-wrapper .lgr-product-grid > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-auto-rows: 160px; }
  .lgr-product-grid > .wp-block-image,
  .editor-styles-wrapper .lgr-product-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image { aspect-ratio: auto; height: 100%; }
}
/* 05. Desktop : rangées de 210 px. */
@media (min-width: 1280px) {
  .lgr-product-grid,
  .editor-styles-wrapper .lgr-product-grid > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-auto-rows: 210px; }
}