/* Main Modal Container Styles (already mostly good) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: #2e0047; /* Black w/ opacity */
}

/* Modal Content Wrapper */
.modalContent {
  background-color: white;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 5px 15px black;
  animation: fadeIn 0.3s ease-out;
  display: flex;
  flex-direction: column; /* Changed to column to stack header above gallery */
  justify-content: center; /* Centers content vertically in column */
  align-items: center; /* Centers content horizontally in column */
  width: 90%;
  height: fit-content;
  padding: 20px; /* Add some padding inside the modal content */
  box-sizing: border-box; /* Include padding in width/height */
}

/* Container for the main image and thumbnails */
.galleryContainer {
  display: flex; /* Arranges main image and thumbnails side-by-side */
  align-items: center; 
  width: 100%; /* Ensure it takes full width of modalContent's padding area */
  height: 100%; /* Ensure it takes full height of modalContent's padding area */
  gap: 20px; /* Space between the main image and thumbnail columns */
  flex-wrap: wrap-reverse; /* Allow wrapping on smaller screens */
}

/* Left side: Main Image Display */
.mainImageDisplay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  flex:1;
}

/* The actual image within the main display */
#mainGalleryImage { /* CORRECTED SELECTOR: Use ID selector for the image */
  max-width: 90%; /* Scales image down if it's wider than its container */
  max-height: 90%; /* Scales image down if it's taller than its container */
  width: auto; /* Preserve aspect ratio */
  height: auto; /* Preserve aspect ratio */
  display: block; /* Remove extra space below image */
  object-fit: contain;
  border-radius: clamp(10px, calc(10px + (10 * ((100vw - 300px) / 250))), 20px);
}

/* The Close Button */
.modalContent .closeModalButton {
  position: absolute; /* Position relative to .modal-content */
  top: 6px;
  right: 6px;
  cursor: pointer;
  width: clamp(20px, calc(10px + (10 * ((100vw - 300px) / 120))), 30px);
  margin: 0;
}

.thumbnailsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  flex: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
.thumbnailsContainer h1 {
  font-size: clamp(35px, calc(35px + (15 * ((100vw - 300px) / 90))), 50px);
  color: #A50cf8;
  -webkit-text-stroke: 1px black; /* Outline width and color */
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  width: 100%;
  margin: 0;
  margin-bottom:  clamp(10px, calc(10px + (10 * ((100vw - 300px) / 250))), 20px);
}

/* Right side: Thumbnails Grid */
.thumbnailsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: clamp(10px, calc(10px + (10 * ((100vw - 300px) / 90))), 20px);
}

.thumbnailsGrid img {
  width: clamp(45px, calc(45px + (15 * ((100vw - 300px) / 90))), 60px);
  height: clamp(45px, calc(45px + (15 * ((100vw - 300px) / 90))), 60px);
  border-style: solid;
  border-color: #A50cf8;
  border-radius: 5px;
}
.thumbnailsGrid img:hover {
  border-color: #1bfc54;
}

/* Simple fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; ; }
}

/* Fade-out animation (for closing, handled by JS by removing class) */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Utility class for JS to apply fade-out */
.modal.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}