/* Masonry gallery (non-invasive) */
.gallery.masonry {
  /* keep column-gap and base behavior */
  column-count: 3;
  column-gap: 3em;
  /* use more of the available width but keep small gutters */
  width: 100%;
  margin: 0 auto 2em auto; /* center the gallery */
  padding: 0 0.5em; /* much smaller side padding */
  box-sizing: border-box;

  -webkit-column-break-inside: avoid;
  column-fill: balance;
  display: block !important; /* override default .gallery flex rules so columns work */
}

.gallery.masonry.style {
  margin-bottom: 0;
  position: relative;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gallery.masonry.style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.gallery.masonry.style.open::before {
  opacity: 0;
}

.gallery.masonry article {
  display: inline-block; /* required for column flow */
  width: 100%; /* fill the column width */
  box-sizing: border-box;
  padding-bottom: 2em; /* keep images unshrunk by padding */
  
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}


.gallery.masonry article .image,
.gallery.masonry article .image img {
  display: block;
  width: 100%; /* ensure image fills article */
  height: auto;
  margin: 0;
  padding: 0;
}

/* Increase visual size and add rounded corners for masonry images */
.gallery.masonry {
  /* slightly tighter gutters so images occupy more width */
  column-gap: 2em;
  max-width: calc(100% - 2em);
  padding: 0 0.25em;
}

/* On very large screens use 2 columns so images appear larger */
@media screen and (min-width: 1600px) {
  .gallery.masonry { column-count: 2; }
}

.gallery.masonry article {
  padding-bottom: 1em; /* reduce vertical padding so images appear bigger */
}

/* remove the overlay used site-wide so rounded corners look clean */
.gallery.masonry .image:before { display: none !important; }

.gallery.masonry article .image {
  overflow: hidden; /* clip image to rounded corners */
  border-radius: 10px;
}

.gallery.masonry article .image img {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Responsive column counts */
@media screen and (min-width: 1200px) {
  .gallery.masonry { column-count: 3; column-gap: 3em; }
}

@media screen and (min-width: 800px) and (max-width: 1199px) {
  .gallery.masonry { column-count: 2; column-gap: 2em; }
}

@media screen and (max-width: 799px) {
  .gallery.masonry { column-count: 1; column-gap: 0; padding: 0; }
}

/* responsive: single column on small screens */
@media screen and (max-width: 480px) {
  .gallery.masonry { column-count: 1; column-gap: 0; }
  .gallery.masonry article { margin-bottom: 1em; }
}

#more {display: none;}
#nomore {display: none;}
#fnomore {display: none;}