/* gallery.css — Fix for the broken Wix pro-gallery on the home pages (EN + UK).
   The gallery JS was stripped, leaving 10 .gallery-item-container elements that are
   position:absolute with inline top/left/width/height, spilling past the 982px inner
   width. This converts the whole thing into a responsive CSS grid at ALL widths.
   3 columns on desktop, 2 columns on small screens. Nothing overflows. */

/* Let the outer scroll container relax its fixed pixel dimensions. */
[id^="gallery-horizontal-scroll"]{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
[id^="pro-gallery-container"]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  left:auto!important;right:auto!important;
}
.pro-gallery,
.pro-gallery-parent-container,
.gallery-horizontal-scroll{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  left:auto!important;right:auto!important;
}

/* The stable ancestor becomes the grid. */
.gallery-horizontal-scroll-inner{
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  overflow:visible!important;
}

/* Flatten the two intermediate wrapper levels so the 10 items become
   direct grid children of .gallery-horizontal-scroll-inner. */
.gallery-horizontal-scroll-inner [data-hook="group-view"]{display:contents!important;}
.gallery-horizontal-scroll-inner .item-link-wrapper{display:contents!important;}

/* Each item becomes a normal, self-sizing grid cell with a clean square-ish crop. */
.gallery-item-container{
  position:static!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  aspect-ratio:1/1;
  overflow:hidden!important;
}
.gallery-item-wrapper,
.gallery-item-content{
  position:static!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
}
.gallery-item-container picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.gallery-item-container img,
.gallery-item-container source{
  position:static!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
  transform:none!important;
  display:block!important;
}

/* Hover overlays were absolutely positioned to the old fixed sizes; keep them
   covering the cell but never let them create overflow. */
.gallery-item-container .item-hover-flex-container,
.gallery-item-container .gallery-item-hover{
  width:100%!important;
  height:100%!important;
  top:0!important;left:0!important;
  margin:0!important;
}

/* 2 columns on small screens. */
@media (max-width:750px){
  .gallery-horizontal-scroll-inner{
    grid-template-columns:repeat(2,1fr)!important;
    gap:6px!important;
  }
}