/* 1. Tell the Drupal table grid to stretch (Required for the cards to work) */
.view-blog-grid-final .views-view-grid td {
    height: 100%;
    vertical-align: top;
}

/* 2. Turn Teasers into Flexible Cards (Your code + Flexbox) */
.node-teaser {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px; /* Smooth corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; /* Subtle border */
    margin-bottom: 15px; /* Space between cards */
    
    /* THE FIX: These 3 lines force the cards to be equal height */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Lift the card when you hover (Your exact code) */
.node-teaser:hover {
    transform: translateY(-5px); /* Moves Up */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Shadow gets deeper */
    border-color: #ec008c; /* Optional: ESN Pink border on hover */
}

/* 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;
}