#GlobalNavWrapper {
    --hero-image: url("../../assets/csuf-archway.jpg");
}

/* Shared section typography and spacing */
#volunteer-section,
#hire-titans,
#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;
    }

    @media screen and (max-width: 1200px) {
        padding-block: 64px;

        .content-area {
            padding-inline: var(--space-md);
        }

        .section-intro {
            margin-bottom: 36px;
        }
    }

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

        .content-area {
            padding-inline: 16px;
        }
    }
}

/* Volunteer opportunities */
#volunteer-section {
    padding: var(--space-3xl) 0;
    background-color: white;

    h2 {
        color: var(--titan-orange-ati);
        font-size: clamp(34px, 4vw, 44px);
    }

    .volunteer-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .volunteer-card {
        flex: 1 1 320px;

        img {
            display: block;
            width: 100%;
            height: 308px;
            margin-bottom: 24px;
            object-fit: cover;
            border-radius: var(--standard-border-radius);
            box-shadow: var(--medium-box-shadow);
        }
    }

    .card-copy {
        h3 {
            margin: 0 0 14px;
            color: var(--titan-blue);
            font-size: 14px;
            font-weight: 900;
        }

        p {
            margin: 0 0 14px;
            color: var(--titan-blue);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.65;
        }
    }

    @media screen and (max-width: 1200px) {
        .volunteer-grid {
            gap: var(--space-xl);
        }

        .volunteer-card img {
            height: auto;
            margin-bottom: 20px;
            aspect-ratio: 16 / 9;
        }
    }

    @media screen and (orientation: portrait) {
        h2 {
            font-size: 38px;
        }
    }
}

/* Shared image-and-copy sections */
#hire-titans,
#donate-to-a-fund {
    padding: var(--space-2xl) 40px !important;

    .section-layout {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-around;
        gap: var(--space-xl);
    }

    .section-image {
        flex: 0 1 400px;

        img {
            display: block;
            width: 400px;
            height: 400px;
            max-width: 100%;
            object-fit: cover;
            border-radius: var(--standard-border-radius);
        }
    }

    .section-copy {
        display: flex;
        flex: 0 1 460px;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;

        .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.6;
        }

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

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

    @media screen and (max-width: 1200px) {
        .section-image img {
            height: auto;
            aspect-ratio: 4 / 3;
        }
    }

    @media screen and (max-width: 800px) {
        .section-layout {
            flex-direction: column;
            align-items: stretch;
        }

        .section-image,
        .section-copy {
            flex-basis: auto;
            width: 100%;
        }

            .section-image img {
                width: 100%;
            }
    }

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

/* Hire Titans mobile heading */
#hire-titans {
    @media screen and (orientation: portrait) {
        h2 {
            font-size: 38px;
        }
    }
}

/* Reusable text link */
a.learn-more {
    display: inline;
    color: var(--titan-blue);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid currentColor;

    &::after {
        margin-inline-start: 0.25em;
        content: "›";
    }

    &:hover {
        border-bottom-color: transparent;
    }
}