/* ============================================================
   IOES Services Grid block
   Reuses service_btn / services_img_div / services_btn_overlay_wrapper
   / services_btn_subtext / learn_more_wrapper / learnmore_text from
   webflow.css for the card itself. This file only adds:
     1. Category heading spacing
     2. The 3-across (desktop) / 1-across (mobile) grid layout
     3. Explicit white text + outline on the "learn more" button,
        pinned regardless of any inherited color context
   ============================================================ */

.ioes-services-grid-block {
    width: 100%;
}

.ioes-services-grid-category {
    margin-bottom: 60px;
}

.ioes-services-grid-category:last-child {
    margin-bottom: 0;
}

.ioes-services-grid-heading {
    margin-bottom: 24px;
}

/* ── Grid: 3 across on desktop ── */
.ioes-services-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}

.ioes-services-grid-cell {
    width: 100%;
}

/* ── Learn more button: explicit white text + outline ── */
.ioes-services-grid-block .service_btn,
.ioes-services-grid-block .service_btn:hover {
    color: #ffffff;
}

.ioes-services-grid-block .learn_more_wrapper {
    border: 1px solid #ffffff;
}

.ioes-services-grid-block .learnmore_text {
    color: #ffffff;
}

/* ── Mobile: 1 across ── */
@media screen and (max-width: 767px) {
    .ioes-services-grid-row {
        grid-template-columns: 1fr;
        grid-row-gap: 24px;
    }

    .ioes-services-grid-category {
        margin-bottom: 40px;
    }

    .ioes-services-grid-heading {
        margin-bottom: 16px;
    }
}

/* ── Tablet: keep 2 across as a comfortable middle step ── */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .ioes-services-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}