/* AFTER */

    
.project-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0; /* Changed to 0 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  aspect-ratio: 4 / 3;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.4s ease;
  text-align: center;
  padding: 1rem;
}

.project-card:hover .project-card-img {
  transform: scale(1.1); /* Zoom in on hover */
}

.project-card:hover .project-card-overlay {
  opacity: 1; /* Show overlay on hover */
}

.project-card-title {
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.project-card:hover .project-card-title {
  transform: translateY(0);
}

/* New styles for the centered image layout */
.project-list-item-v2 {
  display: block;
  position: relative; /* Crucial for positioning the text overlay */
  text-decoration: none;
  margin-bottom: 2.5rem;
  border-radius: 0.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-list-item-v2:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.project-list-img-v2 {
  display: block; /* Images are block elements */
  margin: 0 auto; /* Center the image horizontally */
  width: 85%; /* Make the image not full-width */
  max-width: 900px; /* Set a max-width for large screens */
  height: auto;
  border-radius: 0.25rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.project-list-text-overlay {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background-color: rgba(30, 70, 32, 0.8); /* Use our primary green for the overlay */
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  backdrop-filter: blur(4px); /* Adds a nice frosted glass effect */
}

.project-list-title-v2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
}


/* Styles for the gallery on the show page (these remain) */
.gallery-thumbnail img {
  border: 2px solid transparent;
  border-radius: 0.25rem;
  opacity: 0.7;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.gallery-thumbnail:hover img {
  opacity: 1;
  border-color: #1E4620; /* Use our primary green theme color */
}