/*
 * GALLERY SECTION STYLES
 * This file styles the image gallery, including the masonry grid layout.
*/

.section-gallery {
  padding: 9.6rem 0; /* Standard section padding */
  background-color: var(--background-color); /* Matches body background */
}

.collage {
  display: grid;
  /* Define 3 columns with equal flexible width for desktop */
  grid-template-columns: repeat(3, 1fr);
  /* Define grid rows to auto-adjust based on content */
  grid-auto-rows: minmax(
    20rem,
    auto
  ); /* Minimum row height of 200px, auto-adjusts */
  gap: 1.6rem; /* 16px gap between grid items */
  max-width: 130rem; /* Same max-width as your main container */
  margin: 0 auto; /* Center the collage */
  padding: 0 3.2rem; /* Consistent padding with other sections */
}

.collage img {
  width: 100%; /* Images fill their grid area */
  height: 100%; /* Images fill their grid area */
  object-fit: cover; /* IMPORTANT: Ensures images cover the area, cropping if aspect ratio doesn't match */
  display: block; /* Removes any extra space below images */
  border-radius: 8px; /* Rounded corners for images */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); /* Subtle shadow for images */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.collage img:hover {
  transform: scale(1.02); /* Slightly enlarge on hover */
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
}

/* Adjustments for specific images to span rows/columns on desktop */
/* These targets apply to desktop (3-column layout) to create the collage effect */
.collage img:nth-of-type(6n + 1), /* Targets 1st, 7th, 13th, 19th images etc. */
.collage img:nth-of-type(6n + 5) {
  /* Targets 5th, 11th, 17th images etc. */
  grid-row: span 2; /* Make these images span 2 rows */
  grid-column: span 2; /* Make these images span 2 columns */
}

/* ------------------------ */
/* RESPONSIVENESS FOR GALLERY */
/* ------------------------ */

/* For tablets (e.g., 960px or less) */
@media (max-width: 60em) {
  /* 960px / 16px = 60em */
  .collage {
    grid-template-columns: repeat(2, 1fr); /* Change to 2 columns */
    grid-auto-rows: minmax(18rem, auto); /* Slightly smaller min row height */
    gap: 1.2rem; /* Slightly smaller gap */
    padding: 0 2.4rem; /* Adjust padding */
  }

  /* Reset spanning for tablets to make all images 1x1 */
  .collage img:nth-of-type(6n + 1),
  .collage img:nth-of-type(6n + 5) {
    grid-row: span 1; /* Reset to span 1 row */
    grid-column: span 1; /* Reset to span 1 column */
  }
}

/* For larger phones (e.g., 480px or less) */
@media (max-width: 30em) {
  /* 480px / 16px = 30em */
  .collage {
    grid-template-columns: 1fr; /* Change to 1 column */
    grid-auto-rows: minmax(
      25rem,
      auto
    ); /* Maintain a decent height for single column */
    gap: 0.8rem; /* Smaller gap */
    padding: 0 1.6rem; /* Adjust padding */
  }

  /* Ensure all images are 1x1 on mobile as well */
  .collage img {
    grid-row: span 1 !important; /* Ensure no residual spanning for single column */
    grid-column: span 1 !important; /* Ensure no residual spanning for single column */
  }
}