/* 1. Make the grid cells stretch */
.view-blog-grid-final .views-view-grid td {
    height: 100%;
    vertical-align: top;
}

/* 2. Turn the blog card into a Flexbox container */
.view-blog-grid-final .node-blog.node-teaser {
    display: flex;
    flex-direction: column;
    height: 100%; /* Forces all cards in a row to be the same height */
    padding-bottom: 20px; /* Gives some breathing room at the bottom */
}

/* 3. Standardize the image sizes */
.view-blog-grid-final .field-name-field-image-blog img {
    width: 100%;
    height: 180px; /* Forces all images to be exactly this tall */
    object-fit: cover; /* Crops the image automatically without squishing/stretching it */
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 4. The Magic Trick: Push the "Read More" buttons to the bottom */
.view-blog-grid-final .node-blog.node-teaser .links.inline {
    margin-top: auto; /* Pushes the button wrapper to the absolute bottom of the flex card */
    padding-top: 15px;
    display: flex;
    justify-content: center; /* Centers the button */
}

/* 5. Clean up Drupal's default link list styling (removes that stray bullet point) */
.view-blog-grid-final .node-blog.node-teaser .links.inline li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Optional: Hide secondary links like "User's blog" or "Add comment" to keep the card clean */
.view-blog-grid-final .node-blog.node-teaser .links.inline li:not(.node-readmore) {
    display: none;
}