/* ==========================================================================
   BancBridge long-form prose pages: Careers, the job posting, Legal
   Ported from design handoff v3: "Careers.dc.html",
   "Enterprise Software Solutions Engineer.dc.html", "Legal.dc.html"

   Uses the shared page-shell classes (.bb-page-header, .bb-shell-body,
   .bb-def-rows, .bb-cta-band, .bb-footer) from styles.css. This file adds
   the third-level subheading these pages need and the Careers cards.
   ========================================================================== */

.bb-shell-main h3.prose-subhead {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-dark);
    margin: 30px 0 0;
}

.bb-shell-main h4.prose-subsubhead {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-ui);
    margin: 22px 0 0;
}

/* A bordered-row list directly under a subheading sits tighter */
.bb-shell-main h3.prose-subhead + .bb-def-rows {
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */
.careers-body {
    grid-template-columns: 1fr 340px;
}

.careers-main {
    max-width: 760px;
}

.careers-main p {
    font-size: 17px;
    line-height: 1.7;
    color: #3c4c5c;
    margin: 18px 0 0;
}

.careers-lede {
    font-size: 19px !important;
    margin-top: 0 !important;
}

/* Two paragraphs are bold at the client's explicit direction */
.careers-bold {
    font-weight: 700;
    color: var(--text-dark) !important;
}

.careers-aside-note {
    font-size: 15px;
    line-height: 1.6;
    color: #3c4c5c;
    margin: 14px 0 0;
}

.careers-aside-email {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--primary-blue);
}

.careers-aside-email:hover {
    text-decoration: underline;
}

.careers-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 0;
}

.careers-card {
    display: block;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 28px 30px;
    background: var(--bg-gray);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.careers-card:hover {
    border-color: var(--primary-blue);
}

.careers-card--job {
    background: #ffffff;
    border-color: var(--primary-blue);
}

.careers-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--text-dark);
}

.careers-card-sub {
    font-size: 15px;
    line-height: 1.55;
    color: #5b6b7a;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .careers-cards {
        grid-template-columns: 1fr;
    }

    /* Declared in this file, so the collapse has to be declared here too —
       styles.css's media query loads earlier and would otherwise be overridden. */
    .careers-body.bb-shell-body--sidebar {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}