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

/* 2. Turn Teasers into Flexible Cards */
.node-teaser {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; 
    margin-bottom: 15px; 
    
    /* THE FIX: Turn on Flexbox to make them all equal height */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Lift the card when you hover (Your original code) */
.node-teaser:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
    border-color: #ec008c; 
}

/* 3. Make all images exactly the same height */
.node-teaser .field-name-field-image-blog img {
    width: 100%;
    height: 160px; /* Forces all images to this height */
    object-fit: cover; /* Crops the image without squishing it */
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 4. Push the "Read More" button to the absolute bottom */
.node-teaser .links.inline {
    margin-top: auto; /* The magic trick that pushes the button down */
    display: flex;
    justify-content: center;
    padding-top: 15px;
}