/*---------------------benefits (careers)--------------------------*/

/* Careers-only overrides for the shared css/product/benefits.css, which the
   product and industry templates also load. Linked after it in
   template-careers.php, so these win on equal specificity. */

/* The design gives the intro the same 775px measure as the other centred
   intros on this page, and 50px of air before the grid. */
.benefits .intro-block {
    max-width: 775px;
    margin: 0 auto 50px;
}

.benefits .intro-block p {
    /* <p> large token: 18/28. */
    font-size: 18px;
    line-height: 28px;
    color: #31445C;
    max-width: 775px;
    margin: 20px auto 0;
    letter-spacing: 0;
}

/* The shared sheet lays the columns out as inline-blocks with negative margins,
   which cannot hold the design's uneven 40px column / 50px row gutters. Grid
   also keeps the second row aligned to the first when the last row is short -
   this section runs five items across three columns. */
.benefits .row-wrap:not(.two-col) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 50px;
    font-size: 16px;
    margin: 0;
}

.benefits .row-wrap:not(.two-col) .col-wrap {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
}

.benefits .row-wrap .col-wrap .icon-img {
    max-width: 85px;
    margin-bottom: 30px;
    /* Collapses the inline descender space below the icon so the 30px gap above
       is the whole gap. */
    line-height: 0;
}

.benefits .row-wrap .col-wrap .icon-img img {
    width: 100%;
    height: auto;
}

.benefits .row-wrap .col-wrap .text-container h3,
.benefits .row-wrap .col-wrap .text-container h4 {
    margin-bottom: 10px;
}

/* H4 token: 28/36. The shared sheet steps this down to 24px in a
   `min-width: 595px` block, at the same specificity as anything scoped to
   `.benefits` here - so the body class is what actually settles it, rather than
   relying on this file being linked after product/benefits.css. */
.page-template-template-careers .benefits .row-wrap .col-wrap .text-container h3,
.page-template-template-careers .benefits .row-wrap .col-wrap .text-container h4 {
    font-size: 28px !important;
    line-height: 36px !important;
}

.benefits .row-wrap .col-wrap .text-container p {
    /* <p> token: Light 300, 16/24, Cool gray 85%. */
    font-family: 'Univers LT Pro' !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #31445C;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .page-template-template-careers .benefits .row-wrap .col-wrap .text-container h3,
    .page-template-template-careers .benefits .row-wrap .col-wrap .text-container h4 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}

@media (max-width: 767px) {
    .benefits .row-wrap:not(.two-col) {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
        row-gap: 40px;
    }

    .benefits .intro-block {
        margin-bottom: 40px;
    }
}

@media (max-width: 595px) {
    .benefits .row-wrap:not(.two-col) {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .benefits .intro-block,
    .benefits .intro-block p {
        max-width: 100%;
    }

    .benefits .intro-block p {
        font-size: 16px;
        line-height: 24px;
    }

    .benefits .row-wrap .col-wrap .icon-img {
        max-width: 70px;
        height: auto;
        margin-bottom: 20px;
    }

    .page-template-template-careers .benefits .row-wrap .col-wrap .text-container h3,
    .page-template-template-careers .benefits .row-wrap .col-wrap .text-container h4 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .benefits .row-wrap .col-wrap .text-container {
        margin-bottom: 0;
    }
}

/*---------------------benefits (careers) end--------------------------*/