/* ======================================================
   WORK & EMPLOYMENT
   Loaded after main.css on Work & Employment pages.
   ====================================================== */

/* ==========================================================
   WORK & EMPLOYMENT CATEGORY PAGE
   Append to the VERY END of /css/main.css
   ========================================================== */

.work-employment-page {
    --work-purple: #8057a2;
    --work-purple-dark: #69458b;
    --work-purple-light: #f1e8f7;
}

/* ---------- Category identity ---------- */

.work-employment-page .topic-kicker {
    background: var(--work-purple);
    color: #fff;
}

.work-employment-page .section-kicker,
.work-employment-page .topic-question-mark,
.work-employment-page .topic-question-label,
.work-employment-page .topic-question-link {
    color: var(--work-purple-dark);
}

.work-employment-page .topic-question-card {
    border-top-color: var(--work-purple);
}

.work-employment-page .work-intro-icon {
    color: var(--work-purple-dark);
    background: var(--work-purple-light);
}


/* ---------- Hero ---------- */

.work-employment-page .topic-hero {
    min-height: 415px;
}

.work-employment-page .topic-hero-inner {
    padding-top: 58px;
    padding-bottom: 58px;
}

.work-employment-page .topic-hero-content {
    max-width: 800px;
}

.work-employment-page .topic-hero h1 {
    font-size: clamp(46px, 5.2vw, 66px);
    line-height: 1.01;
}

.work-employment-page .topic-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.work-employment-page .topic-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(40, 25, 58, .92) 0%,
            rgba(73, 47, 94, .76) 42%,
            rgba(95, 65, 119, .28) 72%,
            rgba(95, 65, 119, .08) 100%
        );
}


/* ---------- Questions ---------- */

.work-employment-page .topic-questions {
    padding-top: 66px;
    padding-bottom: 70px;
}

.work-employment-page .work-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-employment-page .work-question-card {
    min-height: 275px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .work-employment-page .topic-hero {
        min-height: 405px;
    }

    .work-employment-page .topic-hero h1 {
        font-size: clamp(43px, 7vw, 57px);
    }

}


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

@media (max-width: 760px) {

    .work-employment-page .topic-hero {
        min-height: 0;
    }

    .work-employment-page .topic-hero-inner {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    .work-employment-page .topic-hero-content {
        max-width: 100%;
    }

    .work-employment-page .topic-hero h1 {
        font-size: clamp(39px, 9.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .work-employment-page .topic-hero-desktop-break {
        display: none;
    }

    .work-employment-page .topic-hero-content > p:last-child {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .work-employment-page .topic-hero-media img {
        content: url("/images/work-employment-hero-mobile.jpg");
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .work-employment-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(40, 25, 58, .80) 0%,
                rgba(73, 47, 94, .60) 58%,
                rgba(95, 65, 119, .18) 100%
            );
    }

    .work-employment-page .topic-questions {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .work-employment-page .work-question-grid {
        grid-template-columns: 1fr;
    }

    .work-employment-page .work-question-card {
        min-height: 0;
    }

}


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

@media (max-width: 520px) {

    .work-employment-page .topic-hero-inner {
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .work-employment-page .topic-hero h1 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .work-employment-page .topic-hero-content > p:last-child {
        font-size: 16px;
        line-height: 1.48;
    }

    .work-employment-page .topic-hero-media img {
        object-position: 60% center;
    }

}