.fggf-gallery-wrap { width: 100%; }

.fggf-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
}

.fggf-filter {
  appearance: none;
  color: inherit;
  padding: 10px;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #000f0a;
  line-height: 1.2;
  cursor: pointer;
}

.fggf-filter:focus-visible,
.fggf-filter.is-active,
.fggf-filter[aria-selected="true"] {
  font-weight: bold;
}

.fggf-filter:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/*
 * Justified rows rather than columns.
 *
 * JavaScript assigns each image an explicit width and height based on its
 * aspect ratio. There is intentionally no CSS grid/columns layout here:
 * every row is calculated independently, so vertical columns do not line up.
 */
.fggf-gallery-wrap .wp-block-gallery.fggf-masonry {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > *,
.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > li > figure {
  box-sizing: border-box;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > * {
  position: relative;
  flex: none !important;
  margin: 0 !important;
  overflow: hidden;
  break-inside: avoid;
  opacity: 1;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > * img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > * figure,
.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > * > figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > .fggf-hidden {
  display: none !important;
}

@media (max-width: 899px) {
  .fggf-gallery-wrap .wp-block-gallery.fggf-masonry {
    gap: 6px;
  }
}

@media (max-width: 599px) {
  .fggf-gallery-wrap .wp-block-gallery.fggf-masonry {
    gap: 6px;
  }

  .fggf-filters {
    gap:5px;
    margin-bottom:30px;
  }

  .fggf-filter {
    padding: 5px 10px;
    font-size: 15px;
  }
}


/*
 * Filter animation uses JS FLIP transforms. There is deliberately no
 * layout/opacity transition on the gallery itself: the browser calculates
 * the final row positions first, then the individual images ease between
 * their old and new positions.
 */
.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > * {
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}


/* Filter loading overlay */
.fggf-gallery-wrap .wp-block-gallery.fggf-masonry {
  position: relative;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > .fggf-loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
  overflow: hidden;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > .fggf-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}

.fggf-gallery-wrap .wp-block-gallery.fggf-masonry > .fggf-loading-overlay.is-visible.is-fading {
  opacity: 0;
  visibility: visible;
  transition: opacity .35s ease;
}

.fggf-loading-spinner {
  width: 42px;
  height: 42px;
  animation: fggf-spinner-rotate .8s linear infinite;
}

@keyframes fggf-spinner-rotate {
  to { transform: rotate(360deg); }
}