/* Target ONLY the blog tiles container (not navbar) */
.main-content .row:not(.nav-menu),
.view-content .row,
.views-row .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 30px !important;
  position: relative !important;
  width: 100% !important;
}

/* Only style blog tiles (not navbar items) */
.main-content .blog-masonry-item,
.view-content .blog-masonry-item {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: auto !important;
  width: auto !important;
  margin-bottom: 0px !important;
}


/* Ensure card consistency (doesn't affect navbar) */
.main-content .item-inner,
.view-content .item-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Fix images in tiles only */
.main-content .item-inner img,
.view-content .item-inner img {
  width: 100% !important;
  object-fit: cover !important;
}

/* Explicitly protect the navbar */
.nav-menu.row,
.nav-menu .row {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

  /* Extra space before footer on mid screens */
  .blog-masonry-item:last-child {
    margin-bottom: 1px !important;
  }

@media (max-width: 1280px) {
  /* 3. Extra space before footer */
  .blog-masonry-item:last-child {
    margin-bottom: 0px !important;
  }
}
  
/* ===== MOBILE FIXES ===== */
@media (max-width: 767px) {
  /* 1. Reset grid to single column */
  .main-content .row:not(.nav-menu),
  .view-content .row,
  .views-row .row {
    display: block !important;
    padding: 0 15px !important;
  }
  
    .main-content .blog-masonry-item,
		.view-content .blog-masonry-item {
  
  left: 12px !important;
			
		}

  /* 2. Force full-width tiles and spacing */
  .blog-masonry-item {
    width: 100% !important;
    margin: 0 0 30px 0 !important; /* top | right | bottom | left */
    padding: 0 !important;
  }

  /* 3. Extra space before footer */
  .blog-masonry-item:last-child {
    margin-bottom: 80px !important;
  }

  /* 4. Content area protection */
  .main-content {
    padding-bottom: 100px !important; /* Match footer height + buffer */
    min-height: calc(100vh - 150px) !important;
  }

  /* 5. Footer clearance */
  .footer {
    position: relative !important;
    z-index: 2 !important;
    margin-top: -50px !important; /* Pull footer up slightly */
    padding-top: 20px !important;
  }

  /* 6. Image adjustment */
  .item-inner img {
    height: 200px !important; /* Reduce vertical space */
  }
}