/* =========================================================
   COMPONENT 15 — COURSE CURRICULUM
   ========================================================= */

.course-curriculum {
    position: relative;

    overflow: hidden;

    padding:
        115px
        0
        110px;

    background:
        #f8f7f2;

    color:
        #173e33;

    isolation: isolate;
}


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

.course-curriculum__background {
    position: absolute;

    top: -160px;
    left: -160px;

    width: 460px;
    height: 460px;

    pointer-events: none;

    z-index: -1;
}


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

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle,
            rgba(183,137,48,.075),
            transparent 68%
        );
}


.course-curriculum__background span {
    position: absolute;

    top: 145px;
    left: 175px;

    color:
        rgba(147,105,28,.08);

    font-family:
        Georgia,
        serif;

    font-size:
        5rem;
}


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

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

    margin:
        0 auto;
}


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

.course-curriculum__header {
    max-width:
        760px;

    margin:
        0 auto
        70px;

    text-align:
        center;
}


.course-curriculum__eyebrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        19px;

    color:
        #997024;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.course-curriculum__eyebrow > span:first-child {
    display:
        block;

    width:
        35px;

    height:
        1px;

    background:
        #b98b32;
}


.course-curriculum__title {
    margin:
        0;

    color:
        #153e33;

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

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

    font-weight:
        400;

    letter-spacing:
        -.035em;

    line-height:
        1.05;
}


.course-curriculum__title em {
    color:
        #a87924;

    font-style:
        italic;
}


.course-curriculum__intro {
    max-width:
        650px;

    margin:
        22px auto
        0;

    color:
        #68716c;

    font-size:
        .84rem;

    line-height:
        1.8;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.course-curriculum__layout {
    display:
        grid;

    grid-template-columns:
        minmax(280px, .72fr)
        minmax(0, 1.28fr);

    min-height:
        570px;

    border:
        1px solid
        rgba(32,68,56,.13);

    background:
        #ffffff;

    box-shadow:
        0 24px 65px
        rgba(24,57,47,.07);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.course-curriculum__nav {
    padding:
        34px
        0;

    background:
        #123e33;

    border-right:
        1px solid
        rgba(197,153,66,.22);
}


.course-curriculum__nav-label {
    padding:
        0
        34px
        19px;

    color:
        #d3a954;

    font-size:
        .54rem;

    font-weight:
        700;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.course-curriculum__nav-list {
    display:
        flex;

    flex-direction:
        column;
}


.course-curriculum__nav-item {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        45px
        1fr
        24px;

    align-items:
        center;

    gap:
        12px;

    width:
        100%;

    min-height:
        69px;

    padding:
        10px
        29px
        10px
        34px;

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

    background:
        transparent;

    border:
        0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .25s ease,
        color .25s ease;
}


.course-curriculum__nav-item:last-child {
    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.course-curriculum__nav-item::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        #d1a44e;

    transform:
        scaleY(0);

    transition:
        transform .25s ease;
}


.course-curriculum__nav-item:hover {
    color:
        #ffffff;

    background:
        rgba(255,255,255,.045);
}


.course-curriculum__nav-item.is-active {
    color:
        #ffffff;

    background:
        rgba(255,255,255,.075);
}


.course-curriculum__nav-item.is-active::before {
    transform:
        scaleY(1);
}


.course-curriculum__nav-number {
    color:
        #d0a452;

    font-family:
        Georgia,
        serif;

    font-size:
        .92rem;
}


.course-curriculum__nav-title {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        .92rem;

    line-height:
        1.3;
}


.course-curriculum__nav-arrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        .45;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.course-curriculum__nav-item.is-active
.course-curriculum__nav-arrow {
    opacity:
        1;

    transform:
        translateX(3px);
}


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

.course-curriculum__content {
    position:
        relative;

    min-width:
        0;

    background:
        #fffefa;
}


.course-curriculum__panel {
    height:
        100%;

    padding:
        54px
        58px;
}


.course-curriculum__panel[hidden] {
    display:
        none;
}


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

.course-curriculum__panel-header {
    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    padding-bottom:
        29px;

    border-bottom:
        1px solid
        rgba(32,68,56,.13);
}


.course-curriculum__panel-number {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        67px;

    height:
        67px;

    flex:
        0 0 67px;

    color:
        #b17f26;

    border:
        1px solid
        rgba(177,127,38,.42);

    border-radius:
        50%;

    font-family:
        Georgia,
        serif;

    font-size:
        1.15rem;
}


.course-curriculum__panel-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #a77925;

    font-size:
        .5rem;

    font-weight:
        700;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}


.course-curriculum__panel-title {
    margin:
        0;

    color:
        #173f34;

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

    font-size:
        2rem;

    font-weight:
        400;

    line-height:
        1.15;
}


/* =========================================================
   TOPICS
   ========================================================= */

.course-curriculum__topics {
    display:
        grid;

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

    gap:
        0
        15px;

    margin:
        32px
        0
        0;

    padding:
        0;

    list-style:
        none;
}


.course-curriculum__topics li {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    min-height:
        51px;

    padding:
        14px
        13px;

    color:
        #4f5d56;

    background:
        #f7f6f0;

    border:
        1px solid
        rgba(32,68,56,.07);

    border-radius:
        5px;

    font-size:
        .69rem;

    line-height:
        1.45;

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


.course-curriculum__topics li:hover {
    background:
        #f2f0e8;

    border-color:
        rgba(177,127,38,.22);
}


.course-curriculum__topic-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        20px;

    height:
        20px;

    color:
        #aa7b27;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.course-curriculum__panel-footer {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        36px;

    color:
        #8b9290;

    font-size:
        .48rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.course-curriculum__panel-footer span:first-child {
    color:
        #b17f26;
}


/* =========================================================
   SEO SUPPORT
   ========================================================= */

.course-curriculum__seo-text {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    max-width:
        800px;

    margin:
        45px auto
        0;

    text-align:
        center;
}


.course-curriculum__seo-text p {
    margin:
        0;

    color:
        #737a76;

    font-size:
        .67rem;

    line-height:
        1.7;
}


.course-curriculum__seo-text p::first-letter {
    color:
        #9d7123;
}


.course-curriculum__seo-text > span {
    flex:
        0 0 auto;

    color:
        #b5862d;

    font-size:
        .7rem;
}


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

@media (max-width: 991px) {

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


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


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


    .course-curriculum__nav {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(197,153,66,.22);
    }


    .course-curriculum__nav-list {
        display:
            grid;

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


    .course-curriculum__nav-item {
        padding:
            10px
            20px;
    }


    .course-curriculum__panel {
        min-height:
            500px;

        padding:
            45px;
    }

}


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

@media (max-width: 767px) {

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


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


    .course-curriculum__header {
        margin-bottom:
            45px;
    }


    .course-curriculum__eyebrow {
        font-size:
            .51rem;

        letter-spacing:
            .16em;
    }


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


    .course-curriculum__intro {
        font-size:
            .77rem;

        line-height:
            1.75;
    }


    .course-curriculum__layout {
        display:
            block;
    }


    .course-curriculum__nav {
        padding:
            0;
    }


    .course-curriculum__nav-label {
        padding:
            18px
            18px
            14px;
    }


    .course-curriculum__nav-list {
        display:
            block;
    }


    .course-curriculum__nav-item {
        min-height:
            60px;

        padding:
            9px
            16px;
    }


    .course-curriculum__nav-number {
        font-size:
            .8rem;
    }


    .course-curriculum__nav-title {
        font-size:
            .76rem;
    }


    .course-curriculum__panel {
        min-height:
            auto;

        padding:
            32px
            22px;
    }


    .course-curriculum__panel-header {
        gap:
            16px;

        padding-bottom:
            22px;
    }


    .course-curriculum__panel-number {
        width:
            52px;

        height:
            52px;

        flex-basis:
            52px;

        font-size:
            .95rem;
    }


    .course-curriculum__panel-title {
        font-size:
            1.45rem;
    }


    .course-curriculum__topics {
        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-top:
            24px;
    }


    .course-curriculum__topics li {
        min-height:
            auto;

        padding:
            12px;

        font-size:
            .65rem;
    }


    .course-curriculum__seo-text {
        margin-top:
            35px;
    }


    .course-curriculum__seo-text > span {
        display:
            none;
    }

}