/* =========================================================
   COMPONENT 16 — COURSE DATES & AVAILABILITY
   PREMIUM DESIGN
   ========================================================= */


/* =========================================================
   ROOT SECTION
   ========================================================= */

.course-dates {
    position: relative;

    overflow: hidden;

    padding:
        110px
        0
        105px;

    background:
        #010101;

    color:
        #173f34;

    isolation: isolate;
}


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

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

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    left: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 139, 55, .08),
            transparent 68%
        );

    pointer-events: none;

    z-index: -1;
}


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

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    bottom: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24, 65, 53, .055),
            transparent 68%
        );

    pointer-events: none;

    z-index: -1;
}


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

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

    margin:
        0 auto;
}


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

.course-dates__header {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    align-items:
        end;

    gap:
        60px;

    margin-bottom:
        42px;
}


.course-dates__header-content {
    min-width:
        0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.course-dates__eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;

    color:
        #a57927;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.course-dates__eyebrow-line {
    width:
        36px;

    height:
        1px;

    background:
        #b88b35;
}


/* =========================================================
   TITLE
   ========================================================= */

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

    margin:
        0;

    color:
        #173f34;

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

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

    font-weight:
        400;

    letter-spacing:
        -.04em;

    line-height:
        1.06;
}


.course-dates__title span {
    color:
        #a87825;

    font-style:
        italic;
}


/* =========================================================
   INTRO
   ========================================================= */

.course-dates__intro {
    max-width:
        680px;

    margin:
        20px
        0
        0;

    color:
        #6d7772;

    font-size:
        .78rem;

    line-height:
        1.85;
}


/* =========================================================
   FREQUENCY
   ========================================================= */

.course-dates__frequency {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        17px;

    color:
        #8d6a2d;

    font-size:
        .56rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.course-dates__frequency span:first-child {
    font-size:
        .7rem;
}


/* =========================================================
   MONTH SELECTOR
   ========================================================= */

.course-dates__selector-wrap {
    position:
        relative;

    padding:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    border:
        1px solid
        rgba(
            40,
            76,
            63,
            .13
        );

    box-shadow:
        0 12px 35px
        rgba(
            24,
            56,
            46,
            .055
        );
}


/* =========================================================
   SELECTOR NOTE
   ========================================================= */

.course-dates__selector-note {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin-bottom:
        12px;

    padding:
        9px
        10px;

    color:
        #806022;

    background:
        rgba(
            187,
            145,
            59,
            .09
        );

    border-left:
        2px solid
        #b68a35;

    font-size:
        .57rem;

    line-height:
        1.45;
}


.course-dates__selector-note-icon {
    flex:
        0 0 auto;

    color:
        #b28737;

    font-size:
        .68rem;
}


/* =========================================================
   SELECT LABEL
   ========================================================= */

.course-dates__selector-label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #6d746f;

    font-size:
        .51rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


/* =========================================================
   SELECT BOX
   ========================================================= */

.course-dates__select-box {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        52px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            29,
            65,
            52,
            .17
        );

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.course-dates__select-box:hover {
    border-color:
        rgba(
            166,
            121,
            38,
            .48
        );
}


.course-dates__select-box:focus-within {
    border-color:
        #a87928;

    box-shadow:
        0 0 0 3px
        rgba(
            168,
            121,
            40,
            .09
        );
}


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

.course-dates__select-icon {
    flex:
        0 0 auto;

    margin-left:
        15px;

    color:
        #a87a29;
}


/* =========================================================
   SELECT
   ========================================================= */

.course-dates__select-box select {
    width:
        100%;

    min-width:
        0;

    height:
        50px;

    padding:
        0
        42px
        0
        12px;

    color:
        #23483d;

    background:
        transparent;

    border:
        0;

    outline:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    font-family:
        inherit;

    font-size:
        .72rem;

    font-weight:
        600;

    cursor:
        pointer;
}


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

.course-dates__select-arrow {
    position:
        absolute;

    top:
        50%;

    right:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    color:
        #8c682a;

    pointer-events:
        none;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.course-dates__card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        42px
        48px
        38px;

    color:
        #ffffff;

    background:
        #143f34;

    border:
        1px solid
        rgba(
            188,
            148,
            70,
            .28
        );

    box-shadow:
        0 30px 75px
        rgba(
            20,
            57,
            46,
            .15
        );
}


/* Gold top line */

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

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c39a4c,
            transparent
        );
}


/* Decorative glow */

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

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    right:
        -220px;

    top:
        -240px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                198,
                158,
                76,
                .11
            ),
            transparent 68%
        );

    pointer-events:
        none;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.course-dates__card-top {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    padding-bottom:
        30px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .11
        );
}


/* =========================================================
   MONTH
   ========================================================= */

.course-dates__month {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.course-dates__month-small {
    color:
        #c7a45d;

    font-size:
        .53rem;

    font-weight:
        700;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.course-dates__month strong {
    color:
        #ffffff;

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

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    font-weight:
        400;

    letter-spacing:
        -.025em;
}


/* =========================================================
   STATUS
   ========================================================= */

.course-dates__status {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        215px;

    padding:
        11px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

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


.course-dates__status-dot {
    position:
        relative;

    display:
        block;

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        #c9a158;
}


.course-dates__status-dot::after {
    content:
        "";

    position:
        absolute;

    inset:
        -4px;

    border:
        1px solid
        currentColor;

    border-radius:
        50%;

    opacity:
        .35;

    animation:
        courseDatesPulse
        2.2s
        infinite;
}


.course-dates__status-content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.course-dates__status-content strong {
    color:
        #ffffff;

    font-size:
        .56rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.course-dates__status-content small {
    color:
        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .56rem;

    line-height:
        1.4;
}


/* Available */

.course-dates__status--available
.course-dates__status-dot {
    color:
        #8dc9a5;

    background:
        #8dc9a5;
}


/* Ongoing */

.course-dates__status--ongoing
.course-dates__status-dot {
    color:
        #d4a954;

    background:
        #d4a954;
}


/* Next */

.course-dates__status--next
.course-dates__status-dot {
    color:
        #9dbcc0;

    background:
        #9dbcc0;
}


/* =========================================================
   STATUS ANIMATION
   ========================================================= */

@keyframes courseDatesPulse {

    0%,
    100% {
        transform:
            scale(.8);

        opacity:
            .15;
    }

    50% {
        transform:
            scale(1.15);

        opacity:
            .45;
    }

}


/* =========================================================
   COURSE IDENTITY
   ========================================================= */

.course-dates__identity {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        25px
        0
        28px;

    color:
        #c9a35d;

    font-size:
        .51rem;

    font-weight:
        700;

    letter-spacing:
        .2em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.course-dates__identity-line {
    width:
        55px;

    height:
        1px;

    background:
        rgba(
            196,
            157,
            81,
            .4
        );
}


/* =========================================================
   TIMELINE
   ========================================================= */

.course-dates__timeline {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    padding:
        25px
        0
        35px;
}


/* Connecting line */

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

    position:
        absolute;

    left:
        7%;

    right:
        7%;

    top:
        65px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                199,
                161,
                91,
                .3
            ),
            #c7a15a,
            rgba(
                199,
                161,
                91,
                .3
            )
        );
}


/* =========================================================
   TIMELINE ITEM
   ========================================================= */

.course-dates__timeline-item {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


/* =========================================================
   DATE
   ========================================================= */

.course-dates__timeline-date {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-height:
        55px;
}


.course-dates__timeline-date span {
    color:
        #ffffff;

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

    font-size:
        1.7rem;

    line-height:
        1;
}


.course-dates__timeline-date small {
    margin-top:
        5px;

    color:
        #c7a25c;

    font-size:
        .5rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* =========================================================
   MARKER
   ========================================================= */

.course-dates__timeline-marker {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    margin:
        2px
        0
        16px;

    background:
        #143f34;

    border:
        1px solid
        #c39b50;

    border-radius:
        50%;
}


.course-dates__timeline-marker span {
    width:
        7px;

    height:
        7px;

    background:
        #c39b50;

    border-radius:
        50%;
}


/* First marker */

.course-dates__timeline-item--checkin
.course-dates__timeline-marker {
    border-color:
        #8ebaa2;
}


.course-dates__timeline-item--checkin
.course-dates__timeline-marker span {
    background:
        #8ebaa2;
}


/* Last marker */

.course-dates__timeline-item--checkout
.course-dates__timeline-marker {
    border-color:
        #aeb9b1;
}


.course-dates__timeline-item--checkout
.course-dates__timeline-marker span {
    background:
        #aeb9b1;
}


/* =========================================================
   TIMELINE INFO
   ========================================================= */

.course-dates__timeline-info {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.course-dates__timeline-info strong {
    color:
        #ffffff;

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

    font-size:
        .93rem;

    font-weight:
        400;
}


.course-dates__timeline-info span {
    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    font-size:
        .55rem;

    line-height:
        1.5;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.course-dates__summary {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    margin-top:
        10px;

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

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.course-dates__summary-item {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        78px;

    padding:
        10px
        20px;
}


.course-dates__summary-item
+ .course-dates__summary-item {
    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.course-dates__summary-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #c49b4f;
}


.course-dates__summary-item > span:last-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.course-dates__summary-item small {
    color:
        rgba(
            255,
            255,
            255,
            .4
        );

    font-size:
        .48rem;

    font-weight:
        600;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.course-dates__summary-item strong {
    color:
        #ffffff;

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

    font-size:
        .72rem;

    font-weight:
        400;
}


/* =========================================================
   SEO TEXT
   ========================================================= */

.course-dates__seo {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    max-width:
        830px;

    margin:
        40px auto
        0;

    text-align:
        center;
}


.course-dates__seo p {
    margin:
        0;

    color:
        #747d78;

    font-size:
        .67rem;

    line-height:
        1.75;
}


.course-dates__seo > span {
    flex:
        0 0 auto;

    color:
        #ad812e;

    font-size:
        .7rem;
}


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

@media (max-width: 991px) {

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


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


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

        gap:
            30px;

        align-items:
            start;
    }


    .course-dates__selector-wrap {
        max-width:
            400px;
    }


    .course-dates__card {
        padding:
            36px
            32px;
    }


    .course-dates__timeline {
        padding-left:
            0;

        padding-right:
            0;
    }


    .course-dates__timeline::before {
        left:
            5%;

        right:
            5%;
    }

}


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

@media (max-width: 767px) {

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


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


    .course-dates__eyebrow {
        font-size:
            .5rem;

        letter-spacing:
            .16em;
    }


    .course-dates__title {
        font-size:
            2.25rem;
    }


    .course-dates__intro {
        font-size:
            .73rem;
    }


    .course-dates__selector-wrap {
        max-width:
            none;

        padding:
            16px;
    }


    .course-dates__selector-note {
        font-size:
            .55rem;
    }


    .course-dates__card {
        padding:
            28px
            18px
            25px;
    }


    .course-dates__card-top {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            20px;

        padding-bottom:
            24px;
    }


    .course-dates__month strong {
        font-size:
            1.8rem;
    }


    .course-dates__status {
        min-width:
            0;

        width:
            fit-content;

        max-width:
            100%;
    }


    .course-dates__identity {
        padding:
            21px
            0
            23px;

        font-size:
            .46rem;

        letter-spacing:
            .13em;
    }


    .course-dates__identity-line {
        width:
            25px;
    }


    /* Mobile timeline becomes vertical */

    .course-dates__timeline {
        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

        padding:
            8px
            0
            18px;
    }


    .course-dates__timeline::before {
        left:
            42px;

        right:
            auto;

        top:
            30px;

        bottom:
            30px;

        width:
            1px;

        height:
            auto;

        background:
            linear-gradient(
                180deg,
                rgba(
                    199,
                    161,
                    91,
                    .3
                ),
                #c7a15a,
                rgba(
                    199,
                    161,
                    91,
                    .3
                )
            );
    }


    .course-dates__timeline-item {
        display:
            grid;

        grid-template-columns:
            57px
            35px
            1fr;

        align-items:
            center;

        min-height:
            85px;

        text-align:
            left;
    }


    .course-dates__timeline-date {
        align-items:
            flex-start;

        min-height:
            auto;
    }


    .course-dates__timeline-date span {
        font-size:
            1.35rem;
    }


    .course-dates__timeline-date small {
        font-size:
            .45rem;
    }


    .course-dates__timeline-marker {
        margin:
            0;

        width:
            26px;

        height:
            26px;
    }


    .course-dates__timeline-info {
        padding-left:
            5px;
    }


    .course-dates__timeline-info strong {
        font-size:
            .84rem;
    }


    .course-dates__timeline-info span {
        font-size:
            .52rem;
    }


    /* Summary */

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


    .course-dates__summary-item {
        justify-content:
            flex-start;

        min-height:
            66px;

        padding:
            10px
            15px;
    }


    .course-dates__summary-item
    + .course-dates__summary-item {
        border-left:
            0;

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


    .course-dates__seo {
        margin-top:
            30px;
    }


    .course-dates__seo > span {
        display:
            none;
    }


    .course-dates__seo p {
        font-size:
            .62rem;
    }

}


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

@media (max-width: 420px) {

    .course-dates__container {
        width:
            calc(100% - 24px);
    }


    .course-dates__title {
        font-size:
            2rem;
    }


    .course-dates__card {
        padding:
            25px
            14px
            22px;
    }


    .course-dates__timeline-item {
        grid-template-columns:
            51px
            32px
            1fr;
    }


    .course-dates__timeline::before {
        left:
            37px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .course-dates__status-dot::after {
        animation:
            none;
    }

}
/* =========================================================
   DATE ADVISOR WHATSAPP CTA
   ========================================================= */

.course-dates__advisor {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    max-width:
        980px;

    margin:
        28px auto 0;

    padding:
        18px 20px 18px 22px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    border:
        1px solid
        rgba(
            35,
            69,
            56,
            .12
        );

    box-shadow:
        0 12px 35px
        rgba(
            25,
            57,
            46,
            .055
        );
}


/* Content */

.course-dates__advisor-content {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


/* Icon */

.course-dates__advisor-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    color:
        #a87928;

    background:
        rgba(
            181,
            137,
            52,
            .08
        );

    border:
        1px solid
        rgba(
            181,
            137,
            52,
            .2
        );

    border-radius:
        50%;
}


/* Text */

.course-dates__advisor-content > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.course-dates__advisor-content strong {
    color:
        #193f34;

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

    font-size:
        .9rem;

    font-weight:
        400;
}


.course-dates__advisor-content span {
    color:
        #737b76;

    font-size:
        .62rem;

    line-height:
        1.5;
}


/* WhatsApp Button */

.course-dates__advisor-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        46px;

    padding:
        0 17px;

    color:
        #ffffff;

    background:
        #174c3d;

    border:
        1px solid
        rgba(
            184,
            143,
            57,
            .45
        );

    text-decoration:
        none;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    white-space:
        nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.course-dates__advisor-button svg {
    color:
        #d0a45a;
}


.course-dates__advisor-arrow {
    margin-left:
        2px;

    color:
        #d0a45a;

    font-size:
        .9rem;

    transition:
        transform .25s ease;
}


.course-dates__advisor-button:hover {
    color:
        #ffffff;

    background:
        #123a30;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(
            20,
            63,
            51,
            .18
        );
}


.course-dates__advisor-button:hover
.course-dates__advisor-arrow {
    transform:
        translateX(3px);
}


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

@media (max-width: 767px) {

    .course-dates__advisor {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            16px;

        margin-top:
            22px;

        padding:
            17px;
    }


    .course-dates__advisor-content {
        align-items:
            flex-start;
    }


    .course-dates__advisor-icon {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .course-dates__advisor-content strong {
        font-size:
            .83rem;
    }


    .course-dates__advisor-content span {
        font-size:
            .59rem;
    }


    .course-dates__advisor-button {
        width:
            100%;
    }

}