/* Image Gallery — CSS multi-column masonry (tight packing, no white holes).
   column-count flows tiles top→bottom then into the next column, so short
   and tall photos nest without the empty voids the old grid-of-columns left.

   Breakpoints via [data-cols]:
     1 mobile | 2 tablet | 3 desktop | 4 wide | 5 extra-wide

   NOTE on !important: WP theme forces `.gallery.gallery-columns-3 {display:flex}`
   which breaks column-count — we force block display. */

/* Full-bleed Elementor wrappers so the gallery can center itself */
.elementor-152 .elementor-element-c1cfbc1,
.elementor-152 .elementor-element.elementor-element-c1cfbc1 {
  --content-width: 100%;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-152 .elementor-element-c1cfbc1 > .e-con-inner,
.elementor-152 .elementor-element-8200075,
.elementor-152 .elementor-element.elementor-element-8200075,
.elementor-152 .elementor-image-gallery {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lp-gallery {
  --lpg-gap: 1rem;
  --lpg-radius: 0.75rem;
  --lpg-border: rgba(16, 24, 40, 0.1);
  --lpg-accent: #edfefc;
  /* Kill theme flex — flex ignores column-count and caused the broken layout */
  display: block !important;
  float: none !important;
  width: 100%;
  max-width: min(1480px, calc(100% - 48px));
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem 0 3rem;
  box-sizing: border-box;
  /* True masonry: items pack tightly down each column */
  column-count: 1;
  column-gap: var(--lpg-gap);
}

.lp-gallery[data-cols="1"] { column-count: 1; }
.lp-gallery[data-cols="2"] { column-count: 2; }
.lp-gallery[data-cols="3"] { column-count: 3; }
.lp-gallery[data-cols="4"] { column-count: 4; }
.lp-gallery[data-cols="5"] { column-count: 5; }

/* Each tile stays intact inside one column — never split across columns */
.lp-gallery .gallery-item.lp-gallery__tile,
.lp-gallery .lp-gallery__tile {
  float: none !important;
  display: inline-block !important; /* required for break-inside in some browsers */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--lpg-gap) !important;
  padding: 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.lp-gallery__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--lpg-border);
  border-radius: var(--lpg-radius);
  background: var(--lpg-accent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Mild ratios — heights stay close so columns look dense */
.lp-gallery__tile--portrait .lp-gallery__frame {
  aspect-ratio: 3 / 4;
}

.lp-gallery__tile--square .lp-gallery__frame {
  aspect-ratio: 1 / 1;
}

.lp-gallery__tile--landscape .lp-gallery__frame {
  aspect-ratio: 4 / 3;
}

.lp-gallery__frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}

.lp-gallery__frame a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.lp-gallery__frame a::after {
  display: none !important;
}

.lp-gallery__frame img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--lpg-radius);
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.lp-gallery__frame.is-inview.is-loaded img {
  opacity: 1;
  transform: scale(1);
}

.lp-gallery.lp-gallery--static .lp-gallery__frame img {
  opacity: 1;
  transform: none;
}

.lp-gallery__status {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  color: #4e535e;
  column-span: all;
}

/* CSS-only fallbacks before JS sets data-cols */
@media (min-width: 640px) {
  .lp-gallery:not([data-cols]) { column-count: 2; }
}

@media (min-width: 1024px) {
  .lp-gallery {
    --lpg-gap: 1.125rem;
    padding: 2.5rem 0 3.5rem;
  }
  .lp-gallery:not([data-cols]) { column-count: 3; }
}

@media (min-width: 1280px) {
  .lp-gallery {
    max-width: min(1480px, calc(100% - 64px));
  }
  .lp-gallery:not([data-cols]) { column-count: 4; }
}

@media (min-width: 1536px) {
  .lp-gallery {
    --lpg-gap: 1.25rem;
    max-width: min(1680px, calc(100% - 80px));
  }
  .lp-gallery:not([data-cols]) { column-count: 5; }
}

@media (max-width: 640px) {
  .lp-gallery {
    --lpg-gap: 0.75rem;
    max-width: calc(100% - 24px);
    padding: 1.25rem 0 2rem;
  }
}