/* =========================================================
    COURSE HIGHLIGHTS
   ========================================================= */

.course-highlights {
    position: relative;

    overflow: hidden;

    padding:
        110px
        0
        105px;

    background:
        #123e33;

    color:
        #ffffff;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.course-highlights__background {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;
}


.course-highlights__background::before {
    content: "";

    position: absolute;

    top: -280px;
    right: -180px;

    width: 600px;
    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(191,145,53,.12),
            transparent 68%
        );
}


.course-highlights__background::after {
    content: "";

    position: absolute;

    left: -240px;
    bottom: -280px;

    width: 600px;
    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.035),
            transparent 68%
        );
}


.course-highlights__background-number {
    position: absolute;

    right: 4%;

    top: 3%;

    color:
        rgba(255,255,255,.025);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            12rem,
            22vw,
            23rem
        );

    font-weight:
        400;

    line-height:
        .8;

    user-select:
        none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.course-highlights__container {
    width:
        min(
            1180px,
            calc(100% - 64px)
        );

    margin:
        0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.course-highlights__header {
    max-width:
        700px;

    margin:
        0 auto
        72px;

    text-align:
        center;
}


.course-highlights__eyebrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        #d2a653;

    font-size:
        .6rem;

    font-weight:
        700;

    letter-spacing:
        .23em;

    text-transform:
        uppercase;
}


.course-highlights__eyebrow-line {
    width:
        34px;

    height:
        1px;

    background:
        #c3943a;
}


.course-highlights__title {
    margin:
        0;

    color:
        #fffdf7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.6rem,
            4vw,
            4rem
        );

    font-weight:
        400;

    letter-spacing:
        -.035em;

    line-height:
        1.05;
}


.course-highlights__title em {
    color:
        #d5ad60;

    font-style:
        italic;
}


.course-highlights__intro {
    max-width:
        570px;

    margin:
        22px auto
        0;

    color:
        rgba(255,255,255,.65);

    font-size:
        .84rem;

    line-height:
        1.8;
}


/* =========================================================
   HIGHLIGHT GRID
   ========================================================= */

.course-highlights__grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        rgba(218,190,125,.30);

    border-bottom:
        1px solid
        rgba(218,190,125,.30);
}


/* =========================================================
   HIGHLIGHT ITEM
   ========================================================= */

.course-highlight {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        340px;

    padding:
        31px
        29px
        30px;

    border-right:
        1px solid
        rgba(218,190,125,.19);

    transition:
        background .3s ease,
        transform .3s ease;
}


.course-highlight:first-child {
    padding-left:
        0;
}


.course-highlight:last-child {
    padding-right:
        0;

    border-right:
        0;
}


.course-highlight:hover {
    background:
        rgba(255,255,255,.035);

    transform:
        translateY(-3px);
}


/* =========================================================
   NUMBER
   ========================================================= */

.course-highlight__number {
    color:
        rgba(216,174,91,.85);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        2.9rem;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.04em;
}


/* =========================================================
   ICON
   ========================================================= */

.course-highlight__icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        62px;

    height:
        62px;

    margin-top:
        28px;

    color:
        #d7af5c;

    border:
        1px solid
        rgba(215,175,92,.45);

    border-radius:
        50%;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.course-highlight:hover
.course-highlight__icon {
    background:
        rgba(211,169,83,.09);

    border-color:
        rgba(215,175,92,.75);

    transform:
        rotate(-4deg);
}


/* =========================================================
   CONTENT
   ========================================================= */

.course-highlight__content {
    margin-top:
        28px;

    max-width:
        225px;
}


.course-highlight__title {
    margin:
        0
        0
        12px;

    color:
        #fffdf8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.18rem;

    font-weight:
        400;

    line-height:
        1.25;
}


.course-highlight__description {
    margin:
        0;

    color:
        rgba(255,255,255,.58);

    font-size:
        .69rem;

    line-height:
        1.75;
}


/* =========================================================
   ARROW
   ========================================================= */

.course-highlight__arrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    margin-top:
        auto;

    color:
        #d1a653;

    border:
        1px solid
        rgba(211,169,83,.30);

    border-radius:
        50%;

    transition:
        transform .3s ease,
        background .3s ease;
}


.course-highlight:hover
.course-highlight__arrow {
    background:
        rgba(211,169,83,.08);

    transform:
        translateX(4px);
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.course-highlights__bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    margin-top:
        55px;

    text-align:
        center;
}


.course-highlights__bottom p {
    max-width:
        600px;

    margin:
        0;

    color:
        rgba(255,255,255,.57);

    font-size:
        .67rem;

    letter-spacing:
        .025em;

    line-height:
        1.7;
}


.course-highlights__bottom strong {
    color:
        #d6ad5b;

    font-weight:
        600;
}


.course-highlights__bottom-mark {
    color:
        #c6963c;

    font-size:
        .7rem;
}


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

@media (max-width: 991px) {

    .course-highlights {
        padding:
            85px
            0
            90px;
    }


    .course-highlights__container {
        width:
            min(
                720px,
                calc(100% - 40px)
            );
    }


    .course-highlights__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .course-highlight {
        min-height:
            310px;

        border-bottom:
            1px solid
            rgba(218,190,125,.19);
    }


    .course-highlight:nth-child(2) {
        border-right:
            0;
    }


    .course-highlight:nth-child(3),
    .course-highlight:nth-child(4) {
        border-bottom:
            0;
    }


    .course-highlight:nth-child(3) {
        padding-left:
            0;
    }


    .course-highlight:nth-child(4) {
        padding-right:
            0;
    }

}


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

@media (max-width: 767px) {

    .course-highlights {
        padding:
            70px
            0
            75px;
    }


    .course-highlights__container {
        width:
            calc(100% - 32px);
    }


    .course-highlights__header {
        margin-bottom:
            50px;
    }


    .course-highlights__eyebrow {
        font-size:
            .52rem;

        letter-spacing:
            .17em;
    }


    .course-highlights__title {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3rem
            );

        line-height:
            1.08;
    }


    .course-highlights__intro {
        font-size:
            .78rem;

        line-height:
            1.75;
    }


    .course-highlights__grid {
        grid-template-columns:
            1fr;
    }


    .course-highlight,
    .course-highlight:first-child,
    .course-highlight:last-child {
        min-height:
            auto;

        padding:
            28px
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(218,190,125,.19);
    }


    .course-highlight:last-child {
        border-bottom:
            0;
    }


    .course-highlight__number {
        font-size:
            2.4rem;
    }


    .course-highlight__icon {
        width:
            56px;

        height:
            56px;

        margin-top:
            21px;
    }


    .course-highlight__content {
        margin-top:
            21px;

        max-width:
            none;
    }


    .course-highlight__title {
        font-size:
            1.08rem;
    }


    .course-highlight__description {
        max-width:
            400px;

        font-size:
            .67rem;
    }


    .course-highlight__arrow {
        display:
            none;
    }


    .course-highlights__bottom {
        margin-top:
            40px;
    }


    .course-highlights__bottom-mark {
        display:
            none;
    }

}