/* 
This CSS file is for the Projects section of the portfolio website.
It includes styles for the project cards, modal, and other elements.
*/

/* Project Card Specific Styles */
.project-card {
  background-color: rgba(0, 0, 0, 0.7); /* Dark background with some transparency */
  padding: 1.5rem; /* Add padding inside the card */
  border-radius: 10px; /* Rounded corners for the card */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft shadow for the card */
  overflow: hidden; /* Hide overflow content */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Space out items within the card */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for project cards */
}

/* Hover effect for the project card */
.project-card:hover {
  transform: translateY(-10px); /* Move the card slightly up */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

/* Heading style inside the project card */
.project-card h3 {
  font-size: 1.5rem; /* Font size for project title */
  margin-bottom: 1rem; /* Add space below the title */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for heading */
  text-align: center; /* Center align the title */
}

/* Paragraph style inside the project card */
.project-card p {
  font-size: 1rem; /* Set font size for project description */
  line-height: 1.6; /* Increase line height for readability */
  text-align: left; /* Align text to the left */
  margin-bottom: 1rem; /* Add space below the paragraph */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for paragraph text */
}

/* Grid layout for the projects */
.projects-grid {
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
  gap: 1.5rem; /* Space between grid items */
  padding: 2rem; /* Padding around the grid */
}

/* Styling for the images inside the project cards */
.image-container img {
  width: 100%; /* Make the image take up the full width */
  height: 250px; /* Fixed height for images */
  object-fit: cover; /* Ensure the image covers the container without distortion */
  border-radius: 8px; /* Rounded corners for the image */
}

/* Styling for the expand button */
.expand-button {
  background-color: #7564ce; /* Light blue background for the button */
  color: #fff; /* White text color */
  border: none; /* Remove border */
  padding: 0.5rem; /* Add padding inside the button */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 0.9rem; /* Font size for button text */
  border-radius: 5px; /* Rounded corners for the button */
  transition: background-color 0.3s; /* Smooth background color transition */
}

/* Hover effect for the expand button */
.expand-button:hover {
  background-color: #9d90f0; /* Darker blue when hovered */
}

/* Modal Styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position for the modal */
  z-index: 9999; /* Ensure it appears above other elements */
  padding-top: 80px; /* Space from the top of the screen */
  left: 0; top: 0; /* Cover the entire screen */
  width: 100%;
  height: 100%;
  overflow: auto; /* Allow scrolling if content overflows */
  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
}

/* Modal content styling */
.modal-content {
  background-color: #333; /* Dark background for modal */
  margin: auto; /* Center the modal */
  padding: 2rem; /* Add padding inside the modal */
  border-radius: 10px; /* Rounded corners for modal */
  width: 90%; /* Modal width */
  max-width: 800px; /* Maximum width */
  position: relative; /* Positioning for close button */
  color: white; /* White text color */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for modal content */
}

/* Styling for the image inside the modal */
.modal-content img {
  width: 100%; /* Make the image take up full width */
  height: 500px; /* Fixed height for the modal image */
  object-fit: cover; /* Ensure the image covers the container */
  border-radius: 8px; /* Rounded corners for image */
  margin-bottom: 1rem; /* Add space below the image */
}

/* Styling for the heading inside the modal */
.modal-content h3 {
  font-size: 1.8rem; /* Font size for the project title */
  margin-bottom: 1rem; /* Space below the heading */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for heading */
  text-align: center; /* Center align the title */
}

/* Paragraph styling inside the modal */
.modal-content p {
  font-size: 1rem; /* Font size for description */
  margin-bottom: 1rem; /* Add space below the paragraph */
  font-family: 'Source Sans Pro', sans-serif; /* Set font for paragraph text */
}

/* Styling for the project link inside the modal */
.modal-content .project-link {
  display: inline-block; /* Make it behave like an inline element */
  color: #7564ce; /* Light blue text color */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold font for the link */
  margin-top: 1rem; /* Space above the link */
}

/* Hover effect for the project link */
.modal-content .project-link:hover {
  text-decoration: underline; /* Underline the link when hovered */
  color: #9d90f0; /* Change color on hover */
}

/* Styling for the project credit text */
.modal-content .project-credit {
  font-style: italic; /* Italic text */
  color: #aaa; /* Light gray color */
  font-size: 0.9rem; /* Smaller font size for credits */
  margin-top: 1rem; /* Space above the credit text */
}

/* Close button styling inside the modal */
.modal-content .close {
  position: absolute; /* Positioning at the top-right */
  top: 15px;
  right: 20px;
  font-size: 1.5rem; /* Font size for close button */
  cursor: pointer; /* Pointer cursor on hover */
  background: #7564ce; /* Light blue background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners for the button */
  padding: 0.25rem 0.6rem; /* Padding for the button */
}