/* =========================================
   FAMILY TOOL CARDS
   ========================================= */

/* Keep each row of tool cards flexible */
.tool-card-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Desktop/tablet: two cards per row */
.tool-card-row > .wp-block-column {
    flex: 1 1 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    margin: 0 !important;
}

/* Make the contents determine the card height */
.tool-card-row > .wp-block-column > * {
    height: auto !important;
    min-height: 0 !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 781px) {

    /* Stack the cards vertically */
    .tool-card-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 20px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Each card takes the available width */
    .tool-card-row > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch !important;
        margin: 0 !important;
    }

    /* IMPORTANT:
       Don't force anything inside the card
       to create an artificial height */
    .tool-card-row > .wp-block-column > * {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Keep headings/descriptions from creating
       extra artificial spacing */
    .tool-card-row h1,
    .tool-card-row h2,
    .tool-card-row h3,
    .tool-card-row h4,
    .tool-card-row h5,
    .tool-card-row h6,
    .tool-card-row p {
        height: auto !important;
        min-height: 0 !important;
    }
}
/* =========================================
   DESKTOP ONLY — MATCH CARD HEIGHTS
   ========================================= */

@media (min-width: 782px) {

    /* Make both cards in each row stretch
       to the height of the taller card */
    .tool-card-row {
        align-items: stretch !important;
    }

    .tool-card-row > .wp-block-column {
        align-self: stretch !important;
        height: auto !important;
        min-height: 0 !important;
    }
}
/* =========================================
   DESKTOP ONLY — PIN BUTTON TO CARD BOTTOM
   ========================================= */

@media (min-width: 782px) {

    .tool-card-row > .wp-block-column {
        display: flex !important;
        flex-direction: column !important;
    }

    .tool-card-row > .wp-block-column > .wp-block-buttons {
        margin-top: auto !important;
    }
}
@media (min-width: 768px) {
    .second-row-box {
        display: flex;
        flex-direction: column;
    }

    .second-row-box h2,
    .second-row-box h3 {
        min-height: 58px;
    }

    .second-row-box p {
        margin-top: 0;
    }

    .second-row-box a {
        margin-top: auto;
    }
}