/* 
This CSS file is for the photo gallery section of the website.
It includes styles for the photo grid, lightbox, and other elements.
*/   

/* Main section styling for the photo gallery */
main#photos {
  text-align: center; /* Center-align the content in the photos section */
}

/* Photo grid setup */
.photos-grid {
  display: grid; /* Use CSS grid layout */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Responsive grid columns */
  gap: 1.5rem; /* Space between the grid items */
  margin-top: 2rem; /* Add margin to the top */
}

/* Styling for individual photo items */
.photo-item {
  position: relative; /* Enable positioning for overlay effects */
  overflow: hidden; /* Hide overflowed content */
  cursor: pointer; /* Change cursor to pointer on hover */
  border-radius: 8px; /* Rounded corners */
}

/* Image styling within each photo item */
.photo-item img {
  width: 100%; /* Make image take up the full width */
  height: 305px; /* Fixed height for images */
  object-fit: cover; /* Ensure image covers the container without distortion */
  transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for scale and filter effects */
}

/* Overlay effect on photo items */
.photo-item::before {
  content: "+"; /* Display plus sign as overlay */
  position: absolute;
  font-size: 2rem; /* Large font size */
  color: white; /* White color for the plus sign */
  top: 50%; left: 50%; /* Center the plus sign */
  transform: translate(-50%, -50%) scale(0); /* Start with scale 0 for animation */
  transition: transform 0.3s ease; /* Smooth transition for scale */
  pointer-events: none; /* Prevent interaction with the overlay */
}

/* Hover effect for the photo item */
.photo-item:hover img {
  transform: scale(1.1); /* Slight zoom effect */
  filter: brightness(60%); /* Darken the image */
}

/* Hover effect for the overlay */
.photo-item:hover::before {
  transform: translate(-50%, -50%) scale(1); /* Scale up the plus sign */
}

/* Lightbox styles */
.lightbox {
  display: none; /* Hide by default */
  position: fixed; /* Fix position for full-screen overlay */
  inset: 0; /* Position on all sides */
  background: rgba(0, 0, 0, 0.95); /* Semi-transparent black background */
  justify-content: center; /* Center the content */
  align-items: center; /* Center vertically */
  flex-direction: column; /* Arrange items vertically */
  z-index: 1000; /* Ensure it appears above other content */
}

/* Show the lightbox when it has the 'show' class */
.lightbox.show {
  display: flex; /* Display the lightbox */
}

/* Styling for the full image in the lightbox */
.lightbox .full-img {
  max-width: 90%; /* Limit max width */
  max-height: 70%; /* Limit max height */
  margin: 1rem 0; /* Add margin around the image */
}

/* Lightbox button styling */
.lightbox button {
  position: absolute; /* Position buttons absolutely */
  background: none; /* Remove background */
  border: none; /* Remove border */
  color: #7564ce; /* White text */
  font-size: 2rem; /* Large font size for buttons */
  cursor: pointer; /* Change cursor on hover */
}

/* Lightbox button hover effect */
.lightbox button:hover {
  color: #9d90f0; /* Change color on hover */
}

/* Close button positioning */
.lightbox .close {
  top: 1rem; right: 1rem; /* Position close button at top-right */
}

/* Previous button positioning */
.lightbox .prev {
  left: 1rem; top: 50%; transform: translateY(-50%); /* Position at left, center vertically */
}

/* Next button positioning */
.lightbox .next {
  right: 1rem; top: 50%; transform: translateY(-50%); /* Position at right, center vertically */
}

/* Caption styling in the lightbox */
.lightbox .caption {
  width: 100%; /* Full width for caption */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for caption */
  background: #000; /* Black background for caption */
  color: #fff; /* White text */
  padding: 1rem; /* Padding inside the caption */
  text-align: center; /* Center the text */
}

/* Fade effect for lightbox elements */
.lightbox .full-img,
.lightbox .caption h3,
.lightbox .caption p {
  opacity: 1; /* Fully visible by default */
  transition: opacity 0.4s ease; /* Smooth opacity transition */
}

/* Fade out effect when the lightbox has the 'fade' class */
.lightbox.fade .full-img,
.lightbox.fade .caption h3,
.lightbox.fade .caption p {
  opacity: 0; /* Make elements invisible */
}

/* Intro text styling for the photos section */
.photos-intro {
  max-width: 600px; /* Limit width */
  margin: 0.5rem auto 2rem; /* Center and add margin */
  font-family: 'Source Sans Pro', sans-serif; /* Set font */
  font-size: 1rem; /* Font size */
  line-height: 1.6; /* Line height for readability */
  color: #ddd; /* Light text color */
  text-align: center; /* Center-align text */
}

/* Styling for links in the intro */
.photos-intro a {
  color: #7564ce; /* Light blue color for links */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold font for links */
}

/* Hover effect for links in the intro */
.photos-intro a:hover {
  color: #9d90f0; /* Change color on hover */
  text-decoration: underline; /* Add underline on hover */
}