/* custom-gallery-block.css */


/* Customize the gallery container to become an image slider */

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.6) 70%,transparent);
  padding: 8px;
}
.wp-block-gallery {
  position: relative;
  overflow: hidden;
  background-color: #E5E4EB;
  padding: 0 0 24px 0;
  visibility: hidden; /*changed with JS after page loads*/
  height: 0; /*changed with JS after page loads*/
}
.wp-block-gallery img{
  max-height: 550px;
  object-fit: contain !important;
}
figcaption.blocks-gallery-caption {
  order: -1;
  max-width: 80%;
  min-height: 52px;
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: #825184;
  text-align: left !important;
  padding:10px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
}

/* Style the arrow navigation */
.wp-block-gallery .slider-arrow {
  position: absolute;
  top: 10px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1;
}

/* Position the previous arrow */
.wp-block-gallery .slider-arrow.prev {
    right: 60px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Position the next arrow */
.wp-block-gallery .slider-arrow.next {
  right: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the thumbnail container */
.wp-block-gallery .slider-thumbnails {
  display: flex;
  justify-content: flex-start; /* Align thumbnails at the start */
  align-items: start;
  margin-top: 10px;
  overflow-x: auto;  /* Enable horizontal scrolling */
  white-space: nowrap;  /* Keep all thumbnails in one line */
  scroll-snap-type: x mandatory;
}

/* Style individual thumbnail images */
.wp-block-gallery .slider-thumbnails img {
  width: 100px;
  height: auto;
  cursor: pointer;
  margin: 0 3px;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s ease-in-out;
  scroll-snap-align: start;
}
/* Highlight the active thumbnail */
.wp-block-gallery .slider-thumbnails img.active {
  border-color: #000;
}

@media (min-width: 600px) {
  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
      width: 100% !important;
  }
  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
      width: 100% !important;
  }
  .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image) {
      width: 100% !important;
  }
}
    
@media only screen and (max-width: 450px) {
  /* For phone: */

  .wp-block-gallery .slider-thumbnails {
    display: none;
  }

  .wp-block-gallery {
    padding: 0 0 60px 0;
  }

  .wp-block-gallery img{
    max-height: 300px;
    object-fit: contain !important;
  }


  figcaption.blocks-gallery-caption {
    max-width: 100%;
  }

  /* Style the arrow navigation */
  .wp-block-gallery .slider-arrow {
    position: absolute;
    top: auto;  /* Remove the top positioning */
    bottom: 10px; /* Bottom positioning */
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
  }

  /* Position the previous arrow */
  .wp-block-gallery .slider-arrow.prev {
    right: auto; /* Remove the right positioning */
    left: 10px; /* Left positioning */
  }

  figcaption {
    opacity: 1;
    transition: opacity 0.3s ease-out; /* adjust duration and easing as needed */
  }

  figcaption.fade-out {
    opacity: 0;
  }


}