#GlobalNavWrapper {
    --hero-image: url(../../assets/images/people-001.png);
}

/* Career Resources */

#career-resources {
    padding: var(--space-2xl) 0;
    background: white;

    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    article {
        img {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            border-radius: var(--standard-border-radius);
            margin-bottom: var(--space-md);
        }
    }

    h3 {
        margin-bottom: 14px;
    }

    a {
        font-weight: 700;
        color: inherit;
        text-underline-offset: 4px;
    }
    /* Responsive: (max-width: 900px) */

    @media screen and (max-width: 1200px) {
        > .content-area > article {
            grid-template-columns: 1fr;
        }
    }
}

#continued-learning {
    background: var(--titan-blue);
    color: white;
    padding: 56px 40px;

    .continued-learning-layout {
        display: grid;
        grid-template-columns: minmax(300px, 1fr) minmax(320px, 520px);
        grid-template-areas:
            "intro quote"
            "links quote";
        row-gap: var(--space-md);
        column-gap: clamp(3rem, 6vw, 5rem);
        align-items: start;
    }

    .learning-intro {
        grid-area: intro;

        h2 {
            margin-bottom: 0.75rem;
        }

        .section-intro {
            margin-bottom: 0;
        }
    }

    ul {
        grid-area: links;
        display: grid;
        gap: var(--space-md);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        padding-bottom: var(--space-md);
        border-bottom: 1px solid rgb(255 255 255 / 0.18);

        &:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }
    }

    article {
        position: relative;
        padding-left: 72px;

        &.grad-programs::before {
            background-image: url("../../assets/icons/group_icon_white.svg");
        }

        &.learn::before {
            background-image: url("../../assets/icons/handshake.svg");
        }

        &.grad-programs::before, &.learn::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 48px;
            height: 48px;
            border: 6px solid white;
            border-radius: 50%;
            background-color: var(--titan-orange);
            /*background-image: url("../../assets/icons/group_icon_white.svg");*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: 22px 22px;
        }
    }

    h3,
    p {
        margin-top: 0;
    }

    h3 {
        margin-bottom: 0.5rem;
    }

    a {
        font-weight: 700;
        color: inherit;
        text-underline-offset: 4px;
    }

    figure {
        grid-area: quote;
        position: relative;
        align-self: stretch;
        min-height: 100%;
        margin: 0;
        overflow: hidden;
        border-radius: var(--standard-border-radius);

        img {
            width: 100%;
            height: 100%;
            min-height: 420px;
            display: block;
            object-fit: cover;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( to top, rgb(210 105 0 / 0.92), rgb(0 39 76 / 0.08) 58% );
        }
    }

    blockquote,
    figcaption {
        position: absolute;
        z-index: 1;
        left: 28px;
        right: 28px;
        color: white;
    }

    blockquote {
        bottom: 86px;
        margin: 0;
        font-size: clamp(1.15rem, 2vw, 1.45rem);
        font-weight: 800;
        line-height: 1.18;
    }

    figcaption {
        bottom: 32px;
    }

    @media screen and (max-width: 1200px) {
        padding: 56px 24px;

        .continued-learning-layout {
            grid-template-columns: 1fr;
            grid-template-areas:
                "intro"
                "links"
                "quote";
            row-gap: var(--space-lg);
        }

        figure {
            min-height: auto;

            img {
                min-height: 360px;
            }
        }
    }

    @media screen and (orientation: portrait) {
        padding: 48px 16px;

        article {
            padding-left: 0;

            &::before {
                position: static;
                display: block;
                margin-bottom: var(--space-sm);
            }
        }

        blockquote,
        figcaption {
            left: 20px;
            right: 20px;
        }
    }
    /* Responsive: (max-width: 900px) */

    @media screen and (max-width: 1200px) {
        .content-area {
            grid-template-columns: 1fr;
        }

        .section-label,
        h2 {
            grid-column: auto;
        }
    }
}

/* Hire */


#hire-titans {
    padding: var(--space-2xl) 40px !important;

    .hire-layout {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
    }

    .hire-image {
        img {
            width: 400px;
            height: 400px;
            display: block;
            object-fit: cover;
            border-radius: var(--standard-border-radius);
        }
    }

    .section-label-orange {
        background: var(--titan-orange);
        color: var(--titan-blue);
        margin-bottom: var(--space-md);
    }

    .hire-copy {
        position: relative;
        height: 100%;

        p.section-label {
            margin-left: 0;
        }

        h2 {
            margin: var(--space-md) 0;
        }

        p:not(.section-label) {
            max-width: 460px;
            margin: 0 0 var(--space-lg);
            font-size: 1rem;
            line-height: 1.6rem;
        }

        a.cta {
            margin-top: auto;
            margin-inline: auto;
            margin-bottom: var(--space-xs);
        }
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 175px;
        min-height: 40px;
        background: var(--titan-orange);
        color: var(--titan-blue);
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
    }
    @media screen and (max-width: 1200px) {
        .hire-layout {
            gap: var(--space-xl);
        }

        .hire-image img {
            max-width: none;
            height: auto;
            aspect-ratio: 4 / 3;
        }
    }
    /* Responsive: (max-width: 480px) */

    @media screen and (orientation: portrait) {
        .button {
            width: 100%;
        }
    }
}

/* Donate */

#donate-to-a-fund {
    h2 {
        margin: 0 0 18px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.8px;
    }

    .section-intro {
        margin: 0 0 42px;
        color: var(--titan-blue);
        line-height: 1.6;
    }
}

/* Handshake */

#handshake {
    background: var(--bright-bg);
    padding: 50px 0;

    .handshake-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .handshake-content {
        h2 {
            color: var(--titan-blue);
        }
    }

    .btn-register {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 154px;
        height: 36px;
        margin-bottom: 32px;
        border-radius: var(--small-border-radius);
        background: var(--titan-blue);
        color: white;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.25s ease;

        &:hover {
            background: var(--med-blue);
        }
    }

    .handshake-image {
        width: 400px;

        img {
            width: 100%;
            display: block;
            border-radius: var(--standard-border-radius);
            object-fit: cover;
        }
    }
    /* Responsive: (max-width: 900px) */

    @media screen and (max-width: 1200px) {
        padding: calc(var(--space-xl) + var(--space-sm)) 0;

        .container {
            padding: 0 24px;
        }

        .handshake-grid {
            gap: var(--space-xl);
        }

        .handshake-content {
            max-width: 100%;
            order: 2;
        }

        .handshake-image {
            order: 1;

            img {
                aspect-ratio: 16 / 10;
            }
        }
    }
    /* Responsive: (max-width: 600px) */

    @media screen and (orientation: portrait) {
        padding: var(--space-xl) 0;

        .container {
            padding: 0 16px;
        }

        .btn-register {
            width: 100%;
        }
    }
}


/* Contact */

#career-contact {
    header {
        margin-block-start: 0px;
        margin-block-end: 40px;
        text-align: center;
    }

    a:link, a:visited {
        color: white;
        text-decoration: underline;
    }

    a:hover, a:active {
        color: var(--titan-orange);
        text-decoration: underline;
    }

    .contact-methods {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-lg);
        align-items: stretch;

        .contact-item {
            display: flex;
            flex: 1 1 280px;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
        }
    }
}
/*Featured Opportunities*/
#featured-opportunities {
    padding: var(--space-2xl);

    .featured-opportunities-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: var(--space-lg);
        margin-block-start: var(--space-lg);

        article {
            display: flex;
            flex-direction: column;
            padding: var(--space-lg) var(--space-md);
            border: 1px solid #d4d4d4;
            border-inline-start: 10px solid var(--titan-orange);
            border-radius: var(--standard-border-radius);
            box-shadow: var(--thin-box-shadow);

            &:nth-child(even) {
                border-inline-start-color: var(--bright-blue);
            }

            &:hover {
                box-shadow: var(--medium-box-shadow);
            }

            h4 {
                margin-block: 0 var(--space-xs);
                font-size: 1.35rem;
                font-weight: 900;
                line-height: 1.25;
            }

            p {
                margin: 0;
                line-height: 1.5;
            }
            a{
                text-decoration:none;
            }
        }
    }
}