/* Masonry Grid Styles */
.masonry-grid {
  width: 100%;
  max-width: none; /* Inherit width from parent container */
  margin: 0 auto;
  padding: 0 16px 40px; /* Consistent padding */
  box-sizing: border-box;
  position: relative;
}

/* Masonry item styling */
.masonry-item {
  display: block; /* Ensure anchors behave like blocks */
  width: 100%; /* Will be adjusted by Masonry */
  box-sizing: border-box;
  margin-bottom: 14px;
  opacity: 1;
  transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
  text-decoration: none; /* Remove underlines from links */
  color: inherit; /* Inherit text color */
}

.masonry-item:hover,
.masonry-item:focus,
.masonry-item:active {
  text-decoration: none; /* Ensure no underlines on hover/focus/active */
  color: inherit;
}

/* Sizer element for Masonry */
.masonry-sizer {
  width: 100%;
}

/* Responsive column widths */
@media (min-width: 640px) {
  .masonry-item,
  .masonry-sizer {
    width: calc(50% - 12px); /* 2 columns with 24px gutter */
  }
}

@media (min-width: 1024px) {
  .masonry-item,
  .masonry-sizer {
    width: calc(33.333% - 16px); /* 3 columns with 24px gutter */
  }
}

@media (min-width: 1280px) {
  .masonry-item,
  .masonry-sizer {
    width: calc(25% - 18px); /* 4 columns with 24px gutter */
  }
}

/* Item hover effects */
.masonry-item {
  transition: transform 0.2s ease-in-out;
}

.masonry-item:hover {
  transform: translateY(-4px);
}

.masonry-content {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Let content determine height to avoid zero-height items */
  height: auto;
  display: flex;
  flex-direction: column;
}

.masonry-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: 0;
  padding: 0;
  line-height: 0; /* Remove line-height gap below image */
}

.masonry-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.masonry-item:hover .masonry-image img {
  transform: scale(1.05);
}

.masonry-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.masonry-body > span.rounded-full {
  align-self: flex-start;
}

.masonry-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #1a202c;
  line-height: 1.4;
}

.masonry-summary {
  color: #4a5568;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.masonry-summary p {
  margin: 0;
}

/* Tag link styling */
.event-tag-link {
  text-decoration: none;
  display: inline-block;
}

.event-tag-link:hover,
.event-tag-link:focus,
.event-tag-link:active {
  text-decoration: none;
}

/* Ensure proper spacing at larger screens */
@media (min-width: 1440px) {
  .masonry-grid {
    max-width: none; /* Keep inheriting from parent container at large screens */
  }
}

/* Loaded image styling */
.masonry-item.is-loaded {
  opacity: 1;
}

.masonry-item {
  opacity: 1;
  transition: transform 0.2s ease-in-out;
}

/* Content fills the column width - handled by flex in main definition */

/* Wide items (double width) */
.masonry-item.wide {
  width: 100%; /* Default for mobile */
}

@media (min-width: 640px) {
  .masonry-item.wide {
    width: calc(100% - 12px); /* 2x width at small screens */
  }
}

@media (min-width: 1024px) {
  .masonry-item.wide {
    width: calc(66.666% - 16px); /* 2x width at medium screens */
  }
}

@media (min-width: 1280px) {
  .masonry-item.wide {
    width: calc(50% - 18px); /* 2x width at large screens */
  }
}