/* =========================================================
   blog-related-fix.css | Flora.Guru
   Fix for "Похожие статьи" section — force 3-column grid
   Load AFTER blog.css, blog-cards.css, blog-wow.css
   ========================================================= */

/* Override Bootstrap columns inside .blog-related section */
.blog-related .row.row-30 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-related .row.row-30 > .col-sm-6,
.blog-related .row.row-30 > .col-lg-4,
.blog-related .row.row-30 > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
  .blog-related .row.row-30 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 599px) {
  .blog-related .row.row-30 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Ensure card takes full height */
.blog-related .blog-card {
  height: 100%;
  width: 100%;
}