/* ==========================================================================
   3. Page-Specific Sections
   ========================================================================== */

/* --- Gallery Page --- */
.gallery {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr); /* Base desktop layout */
}

/* --- New Styles for the Overlay Effect --- */

/* 1. Style the new <figure> container for each image */
.gallery figure {
  position: relative; /* Essential for positioning the caption on top */
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

/* 2. Style the image inside the figure */
.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

/* 3. Style the <figcaption> overlay */
.gallery figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* --- Hover Effect --- */
.gallery figure:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gallery figure:hover figcaption {
  opacity: 1;
}

/* Full-width items */
.gallery .full-width {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Responsive for Phones & Small Screens
   ========================================================================== */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr; /* Stack items vertically */
    padding: 10px;
    gap: 15px;
  }

  .gallery figcaption {
    font-size: 1.2rem; /* Slightly smaller text for phones */
    padding: 0.5rem;
  }
}