/* LLB Elementor Gallery Fix (v3)
   Goals:
   1) Ensure the gallery container actually lays out as a multi-column grid using Elementor's own CSS variables.
   2) Ensure each tile has a paintable height (ratio box) even when Elementor's masonry math fails.
   3) Prevent background tiling and keep images centered/cropped.
*/

/* Restore grid layout (Elementor usually sets --columns and --gap inline on container) */
.e-gallery-container{
  display: grid !important;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)) !important;
  gap: var(--gap, 20px) !important;
}

/* Make each item participate correctly in the grid */
.e-gallery-item{
  display: block !important;
  width: 100% !important;
}

/* The "image" is a DIV background; force a ratio box.
   Prefer Elementor's inherited --percent-height if present (from widget settings),
   else fall back to 66.6667% (3:2). */
.e-gallery-image{
  display: block !important;
  height: 0 !important;
  padding-bottom: var(--percent-height, 66.6667%) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* If there's an overlay, don't let it hide the image */
.e-gallery-item_overlay{
  background: transparent !important;
}

/* Responsive fallback: if columns var isn't set for some reason, avoid giant tiles */
@media (max-width: 1024px){
  .e-gallery-container{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px){
  .e-gallery-container{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}