/* ------------------------------------------------------------------

   property-gallery.css - Example "Resort" Layout

   This snippet is purely an example. Adjust as needed.

------------------------------------------------------------------ */



/* The main container for your entire gallery */

.emls-gallery__container {

  width: 100%;

  margin: 0 auto;

  padding-bottom: 15px;

  position: relative;

}



/* The shared grid styles (if 'grid' or default layout) */

.emls-gallery-grid {

  display: grid;

  grid-template-columns: repeat(var(--emls-columns, 4), 1fr);

  gap: var(--emls-hgap, 10px);

}



/* The .emls-gallery-item as an aspect-ratio container */

.emls-gallery-item {

  position: relative;

  width: 100%;

  padding-top: var(--emls-aspect-ratio, 75%); /* fallback 4:3 ratio */

  overflow: hidden;

  cursor: pointer;

  border: var(--emls-image-border-width, 0px) solid var(--emls-image-border-color, transparent);

  border-radius: var(--emls-image-border-radius, 0px);

  transition: transform 0.3s ease;

}



.emls-gallery-item:hover {

  transform: scale(1.01);

}



/* The absolutely positioned background image filling the container */

.emls-gallery-item .emls-gallery-image {

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transition: opacity var(--emls-image-transition-duration, 800ms) ease-in-out;

}



/* The overlay (hidden until hover) */

.emls-gallery-item__overlay {

  position: absolute;

  inset: 0;

  background-color: rgba(0, 0, 0, 0.3);

  mix-blend-mode: var(--emls-overlay-mix-blend-mode, normal);

  opacity: 0;

  transition: opacity var(--emls-overlay-transition-duration, 800ms) ease-in-out;

}



.emls-gallery-item:hover .emls-gallery-item__overlay {

  opacity: 1;

}



/* "Resort" Layout example (flex-based) */

.emls-gallery-resort {

  display: flex;

  flex-wrap: wrap;

  gap: var(--emls-hgap, 15px);

}



/* For the .emls-gallery-resort items, we override ratio to be panoramic. */

.emls-gallery-resort .emls-gallery-item {

  flex: 1 1 calc(33.333% - var(--emls-hgap, 15px));

  padding-top: 60%; /* more cinematic look */

}



@media (max-width: 1024px) {

  .emls-gallery-resort .emls-gallery-item {

    flex: 1 1 calc(50% - var(--emls-hgap, 10px));

    padding-top: 55%;

  }

}

@media (max-width: 768px) {

  .emls-gallery-resort .emls-gallery-item {

    flex: 1 1 calc(100% - var(--emls-hgap, 10px));

    padding-top: 50%;

  }

}



.emls-gallery-resort .emls-gallery-item:hover {

  transform: scale(1.02);

}



/* "More Images" Button */

.emls-more-images-btn {

  display: inline-block;

  margin-top: 15px;

  padding: 8px 16px;

  border: none;

  background-color: #f4b200; /* or pick a color from your theme */

  color: #fff;

  border-radius: 4px;

  font-size: 16px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.emls-more-images-btn:hover {

  background-color: #dca000;

}



/* If you want a fadeIn or slideDown for extra images,

   handle it in property-gallery.js with jQuery .slideDown or .fadeIn, etc. */