/* Base Gallery Container */
.masonry-gallery {
  column-count: 3;
  column-gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}

/* Base Gallery Cards */
.masonry-gallery .masonry-item {
  display: block;
  position: relative; 
  margin-bottom: 1.5rem;
  break-inside: avoid;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-gallery .masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

/* ==========================================
   Style 1: ALWAYS SHOW (Text below image) 
   ========================================== */
.gallery-style-always .masonry-item {
  background-color: #ffffff;
}

.gallery-style-always .masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-style-always .masonry-item img {
  border-bottom: 1px solid #eeeeee;
}

.gallery-style-always .item-content {
  padding: 1.5rem;
}

.gallery-style-always .item-title { color: #222222 !important; }
.gallery-style-always .item-desc { color: #666666 !important; }

/* ==========================================
   Style 2: HOVER OVERLAY (Text inside image)
   ========================================== */
.gallery-style-hover .masonry-item:hover img {
  transform: scale(1.05);
}

.gallery-style-hover .item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 2.5rem 1.5rem 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.gallery-style-hover .masonry-item:hover .item-content {
  opacity: 1;
  transform: translateY(0);
}

.gallery-style-hover .item-title,
.gallery-style-hover .item-desc {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gallery-style-hover .item-desc { opacity: 0.9; }

/* ==========================================
   Style 3: PERMANENT OVERLAY (Text & Gradient always visible)
   ========================================== */
.gallery-style-overlay-always .item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* EDIT GRADIENT HERE: Currently Black at 85% opacity fading to transparent */
  /* Try changing 'rgba(0, 0, 0, 0.85)' to 'rgba(255, 0, 0, 0.85)' for a red gradient */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  
  padding: 3rem 1.5rem 1.5rem;
  opacity: 1; 
  transform: translateY(0);
  transition: all 0.3s ease; /* Smooth transition for the hover effects */
}

/* Hover Animations for Style 3 */
.gallery-style-overlay-always .masonry-item:hover img {
  transform: scale(1.05); /* Image zoom */
}

.gallery-style-overlay-always .masonry-item:hover .item-content {
  /* EDIT HOVER GRADIENT HERE: Becomes slightly darker (95% opacity) and taller on hover */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
  
  /* Text container slides up slightly */
  padding-bottom: 2rem;
  padding-top: 4rem; 
}

.gallery-style-overlay-always .item-title,
.gallery-style-overlay-always .item-desc {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.gallery-style-overlay-always .item-desc {
  opacity: 0.9;
}

/* Responsive columns */
@media (max-width: 900px) {
  .masonry-gallery { column-count: 2; }
}

@media (max-width: 600px) {
  .masonry-gallery { column-count: 1; }
}