/* GAllery Adapted */

/* Remove bullet points, default list margins, and padding */
ul.fields-container {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Ensure individual list items don't display bullets */
.field-entry.gallery {
  list-style: none;
}

/* Container layout: flex wrap with 1rem spacing between items */
.gallery-items.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 1rem spacing between rows and columns */
}

/* Desktop layout: Always 3 images per row, forced square crop */
.gallery-items.grid img.imagegallery {
  width: calc((100% - 2rem) / 3); /* Width for 3 columns accounting for two 1rem gaps */
  aspect-ratio: 1 / 1;             /* Keeps the element perfectly square */
  object-fit: cover;              /* Crops image while maintaining aspect ratio */
  object-position: center;         /* Keeps the crop centrally aligned */
  border: 1px solid #000;          /* 1px solid black border */
  box-sizing: border-box;          /* Includes border in width calculations */
  cursor: pointer;                 /* Visual indicator that images are clickable */
}

/* Mobile View: Render images to full viewport width */
@media screen and (max-width: 768px) {
  .field-entry.gallery img.imagegallery {
    width: 100%;
    height: auto;                  /* Adjusts height automatically on small screens */
    aspect-ratio: auto;            /* Resets forced aspect ratio for mobile view */
  }
}

/* Modal / Pop-up Styling */
.img-modal {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.85); 
  justify-content: center; 
  align-items: center; 
}

.img-modal img {
  max-width: 90%; 
  max-height: 90%; 
  object-fit: contain; 
  border: 2px solid #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}