/* Backend-driven photo mosaic — CSS-columns masonry.
   Photos of any size/aspect ratio tile cleanly without cropping or manual sizing.
   !important overrides are intentional: this neutralizes leftover legacy theme
   rules (float/absolute positioning/fixed heights meant for the old JS-driven
   isotope-style grid) that would otherwise fight with this layout. */
.portfolio-grid.wlp-mosaic-grid {
  display: block !important;
  position: static !important;
  float: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  font-size: inherit !important;
  column-count: 4;
  column-gap: 0;
  width: 100%;
}
@media (max-width: 1100px) { .portfolio-grid.wlp-mosaic-grid { column-count: 3; } }
@media (max-width: 780px)  { .portfolio-grid.wlp-mosaic-grid { column-count: 2; } }
@media (max-width: 480px)  { .portfolio-grid.wlp-mosaic-grid { column-count: 1; } }

.portfolio-grid.wlp-mosaic-grid::before,
.portfolio-grid.wlp-mosaic-grid::after {
  content: none !important;
  display: none !important;
}

.wlp-mosaic-grid .wlp-mosaic-item {
  display: block !important;
  position: static !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  transform: none !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  vertical-align: top;
}
.wlp-mosaic-grid .wlp-mosaic-item a {
  display: block !important;
  position: relative !important;
}
.wlp-mosaic-grid .wlp-mosaic-item img {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.wlp-mosaic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 15, 0);
  color: #fff;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: background .25s ease, opacity .25s ease;
  pointer-events: none;
}
.wlp-mosaic-item:hover .wlp-mosaic-overlay {
  background: rgba(20, 18, 15, .35);
  opacity: 1;
}

.wlp-load-more {
  display: block;
  margin: 30px auto 50px;
  cursor: pointer;
  background: none;
}