/* Showcase image — the left column is stretched to the content column's
   height, and the figure absolutely fills it, so the image's top aligns with
   the content's top and its bottom aligns with the button's bottom line.
   Because the image is absolute it never drives the row height — the content
   does — so it naturally shrinks/grows to match at every viewport. */
.ifg-hero-image {
    position: relative !important;
    margin: 0 !important;
    display: block !important;
    height: 100% !important;
}

.ifg-hero-image figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.ifg-hero-image img {
    border-radius: 16px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    display: block !important;
}

/* Icon matrix: 8 equal cells in one row */
.intel-matrix {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.intel-matrix .wp-block-column {
    text-align: center;
}

.ifg-section .intel-cell {
    padding: 6px 4px;
}

/* Vertical column divider (no box borders on the grid) */
.ifg-section .intel-cell:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.ifg-section .intel-cell .wp-block-image {
    margin-bottom: 2px;
}

.ifg-section .intel-cell h3 {
    font-size: 0.5rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.ifg-section .wp-block-button__link {
    padding: 10px 20px;
    font-size: 13px;
}

/* Keep the right-hand stack tight: no theme-driven gaps */
.ifg-section .wp-block-buttons {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

/* Narrow screens: icon matrix wraps to 2 columns per row */
@media (max-width: 1199px) {
    .intel-matrix {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px 0 !important;
    }
    .intel-matrix > .wp-block-column {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* When the two columns stack on mobile there is no shared height to fill,
   so the image reverts to a static banner ratio. */
@media (max-width: 781px) {
    .ifg-hero-image {
        height: auto !important;
        position: static !important;
    }
    .ifg-hero-image figure {
        position: static !important;
        inset: auto !important;
    }
    .ifg-hero-image img {
        height: auto !important;
        aspect-ratio: 5 / 2 !important;
    }
}