/* =========================================================
   ADI YOGPEETH
   500 HOUR COURSE CALENDAR
   PREMIUM COMPACT DESIGN
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.course-500-calendar {

    --page-bg:
        #f6f3ec;

    --card:
        #ffffff;

    --green:
        #0d542d;

    --green-dark:
        #083e21;

    --green-soft:
        #edf5ef;

    --green-border:
        #c8d8ca;

    --gold:
        #d89a24;

    --gold-dark:
        #b97b0d;

    --gold-soft:
        #fff7e8;

    --gold-border:
        #e8d4a5;

    --blue:
        #2779aa;

    --blue-dark:
        #1e628c;

    --blue-soft:
        #edf6fb;

    --blue-border:
        #bdd9e9;

    --text:
        #243129;

    --muted:
        #6c746e;

    --border:
        #dddcd5;

}


/* =========================================================
   RESET
   ========================================================= */

.course-500-calendar *,
.course-500-calendar *::before,
.course-500-calendar *::after {

    box-sizing:
        border-box;

}


.course-500-calendar h2,
.course-500-calendar h3,
.course-500-calendar p {

    margin:
        0;

}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.course-500-calendar {

    padding:
        24px 0 29px;

    background:
        var(--page-bg);

}


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

.course-500-calendar__container {

    width:
        min(
            calc(100% - 90px),
            1140px
        );

    margin:
        0 auto;

}


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

.course-500-calendar__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    margin-bottom:
        10px;

}


.course-500-calendar__eyebrow {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--green);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.course-500-calendar__header h2 {

    color:
        var(--green);

    font-family:
        Georgia,
        serif;

    font-size:
        23px;

    line-height:
        1.1;

}


.course-500-calendar__header p {

    max-width:
        560px;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.4;

}


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

.course-500-calendar__selector {

    flex:
        0 0 175px;

    width:
        175px;

}


.course-500-calendar__selector label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--muted);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .09em;

}


.course-500-calendar__select-wrap {

    position:
        relative;

}


.course-500-calendar__select {

    width:
        100%;

    height:
        34px;

    padding:
        0 28px 0 10px;

    appearance:
        none;

    -webkit-appearance:
        none;

    border:
        1px solid var(--green-border);

    border-radius:
        5px;

    outline:
        none;

    background:
        var(--card);

    color:
        var(--green);

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

}


.course-500-calendar__select:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 2px rgba(13,84,45,.07);

}


.course-500-calendar__select-icon {

    position:
        absolute;

    top:
        50%;

    right:
        10px;

    pointer-events:
        none;

    transform:
        translateY(-50%);

    color:
        var(--green);

    font-size:
        10px;

}


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

.course-500-calendar__status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        9px;

    padding:
        4px 8px;

    border:
        1px solid var(--green-border);

    border-radius:
        999px;

    background:
        var(--green-soft);

    color:
        var(--green);

    font-size:
        6.5px;

    font-weight:
        800;

}


.course-500-calendar__status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--green);

}


.course-500-calendar__status--ongoing {

    border-color:
        var(--gold-border);

    background:
        var(--gold-soft);

    color:
        var(--gold-dark);

}


.course-500-calendar__status--ongoing
.course-500-calendar__status-dot {

    background:
        var(--gold);

}


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

.course-500-calendar__summary {

    display:
        grid;

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

    overflow:
        hidden;

    margin-bottom:
        13px;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    background:
        var(--card);

}


.course-500-calendar__summary > div {

    min-height:
        51px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        6px 10px;

    border-right:
        1px solid #ebe9e2;

}


.course-500-calendar__summary > div:last-child {

    border-right:
        0;

}


.course-500-calendar__summary span {

    margin-bottom:
        2px;

    color:
        var(--muted);

    font-size:
        5.8px;

    font-weight:
        800;

    letter-spacing:
        .07em;

}


.course-500-calendar__summary strong {

    color:
        var(--green);

    font-family:
        Georgia,
        serif;

    font-size:
        11px;

}


.course-500-calendar__summary > div:nth-child(3) strong {

    color:
        var(--blue);

}


.course-500-calendar__summary > div:nth-child(4) strong {

    color:
        var(--gold-dark);

}


/* =========================================================
   JOURNEY
   ========================================================= */

.course-500-calendar__journey {

    display:
        grid;

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

    align-items:
        center;

    gap:
        6px;

}


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

.course-500-calendar__month-card {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--green-border);

    border-radius:
        7px;

    background:
        var(--card);

    box-shadow:
        0 5px 18px rgba(42,48,39,.055);

}


.course-500-calendar__month-card--next {

    border-color:
        var(--gold-border);

}


/* =========================================================
   ONGOING CARD
   ========================================================= */

.course-500-calendar__month-card--ongoing {

    opacity:
        .78;

}


.course-500-calendar__month-card--ongoing::after {

    content:
        'CLOSED';

    position:
        absolute;

    top:
        8px;

    right:
        8px;

    z-index:
        4;

    padding:
        3px 6px;

    border:
        1px solid rgba(80,80,80,.12);

    border-radius:
        999px;

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

    color:
        #777;

    font-size:
        5px;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


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

.course-500-calendar__month-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        8px 11px;

    border-bottom:
        1px solid var(--green-border);

    background:
        var(--green-soft);

}


.course-500-calendar__month-card--next
.course-500-calendar__month-header {

    border-color:
        var(--gold-border);

    background:
        var(--gold-soft);

}


.course-500-calendar__month-header span {

    display:
        block;

    margin-bottom:
        1px;

    color:
        var(--green);

    font-size:
        5.8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.course-500-calendar__month-card--next
.course-500-calendar__month-header span {

    color:
        var(--gold-dark);

}


.course-500-calendar__month-header h3 {

    color:
        var(--green);

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

    line-height:
        1.05;

}


.course-500-calendar__month-card--next
.course-500-calendar__month-header h3 {

    color:
        var(--gold-dark);

}


.course-500-calendar__month-header > strong {

    padding:
        3px 6px;

    border-radius:
        999px;

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

    color:
        var(--green);

    font-size:
        5.8px;

}


/* =========================================================
   DAY GRID
   ========================================================= */

.course-500-calendar__day-grid {

    display:
        grid;

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

    gap:
        2px;

    padding:
        7px 9px;

    background:
        var(--card);

}


.course-500-calendar__day {

    position:
        relative;

    aspect-ratio:
        1 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid #e4e4df;

    border-radius:
        3px;

    background:
        #fafaf8;

    color:
        #68706a;

    font-size:
        5.8px;

    font-weight:
        700;

}


.course-500-calendar__day > span {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   CHECK-IN
   ========================================================= */

.course-500-calendar__day--checkin {

    border-color:
        var(--green);

    background:
        var(--green);

    color:
        #ffffff;

}


/* =========================================================
   PHASE 01
   ========================================================= */

.course-500-calendar__day--phase-one {

    border-color:
        var(--green-border);

    background:
        var(--green-soft);

    color:
        var(--green);

}


/* =========================================================
   BREAK — BLUE
   ========================================================= */

.course-500-calendar__day--break {

    border-color:
        var(--blue-border);

    background:
        var(--blue-soft);

    color:
        var(--blue-dark);

}


/* =========================================================
   PHASE 02 — GOLD
   ========================================================= */

.course-500-calendar__day--phase-two {

    border-color:
        var(--gold-border);

    background:
        var(--gold-soft);

    color:
        var(--gold-dark);

}


/* =========================================================
   CHECK-OUT
   ========================================================= */

.course-500-calendar__day--checkout {

    border-color:
        var(--gold);

    background:
        var(--gold);

    color:
        #ffffff;

}


/* =========================================================
   OUTSIDE
   ========================================================= */

.course-500-calendar__day--outside {

    opacity:
        .28;

}


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

.course-500-calendar__day--closed {

    filter:
        grayscale(.15);

}


.course-500-calendar__day--closed
.course-500-calendar__closed-mark {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        3;

    display:
        block;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -12deg
        );

    color:
        rgba(
            90,
            90,
            90,
            .42
        );

    font-family:
        Arial,
        sans-serif;

    font-size:
        15px;

    font-style:
        normal;

    font-weight:
        500;

    line-height:
        1;

}


/* =========================================================
   EVENTS
   ========================================================= */

.course-500-calendar__events {

    display:
        grid;

    gap:
        4px;

    padding:
        0 9px 9px;

}


.course-500-calendar__event {

    display:
        grid;

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

    align-items:
        center;

    min-height:
        33px;

    padding:
        4px 6px;

    border:
        1px solid var(--border);

    border-radius:
        4px;

    background:
        #ffffff;

}


.course-500-calendar__event > span {

    color:
        var(--green);

    font-family:
        Georgia,
        serif;

    font-size:
        8px;

    font-weight:
        700;

}


.course-500-calendar__event strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        6.8px;

    font-weight:
        800;

}


.course-500-calendar__event small {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        5.6px;

    line-height:
        1.2;

}


/* BREAK */

.course-500-calendar__event--break {

    border-color:
        var(--blue-border);

    background:
        var(--blue-soft);

}


.course-500-calendar__event--break > span {

    color:
        var(--blue-dark);

}


/* PHASE 02 */

.course-500-calendar__event--phase-two {

    border-color:
        var(--gold-border);

    background:
        #fffaf0;

}


.course-500-calendar__event--phase-two > span {

    color:
        var(--gold-dark);

}


/* CHECKOUT */

.course-500-calendar__event--checkout {

    border-color:
        var(--gold-border);

    background:
        var(--gold-soft);

}


.course-500-calendar__event--checkout > span {

    color:
        var(--gold-dark);

}


/* =========================================================
   CONNECTION
   ========================================================= */

.course-500-calendar__connection {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--green);

    font-size:
        15px;

}


/* =========================================================
   LEGEND
   ========================================================= */

.course-500-calendar__legend {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px 14px;

    margin-top:
        9px;

}


.course-500-calendar__legend span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        var(--muted);

    font-size:
        5.8px;

}


.course-500-calendar__legend-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

}


.course-500-calendar__legend-dot--checkin {

    background:
        var(--green);

}


.course-500-calendar__legend-dot--phase-one {

    background:
        #83a891;

}


.course-500-calendar__legend-dot--break {

    background:
        var(--blue);

}


.course-500-calendar__legend-dot--phase-two {

    background:
        var(--gold);

}


.course-500-calendar__legend-dot--closed {

    position:
        relative;

    background:
        #aaa;

}


.course-500-calendar__legend-dot--closed::after {

    content:
        '×';

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -53%
        );

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        900;

}


/* =========================================================
   DURATION
   ========================================================= */

.course-500-calendar__duration {

    display:
        grid;

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

    max-width:
        740px;

    margin:
        9px auto 0;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    background:
        var(--card);

}


.course-500-calendar__duration > div {

    min-height:
        42px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid #ebe9e2;

}


.course-500-calendar__duration > div:last-child {

    border-right:
        0;

}


.course-500-calendar__duration strong {

    color:
        var(--green);

    font-family:
        Georgia,
        serif;

    font-size:
        12px;

}


.course-500-calendar__duration > div:nth-child(3) strong {

    color:
        var(--gold-dark);

}


.course-500-calendar__duration > div:nth-child(4) strong {

    color:
        var(--blue-dark);

}


.course-500-calendar__duration span {

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        5.3px;

}


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

.course-500-calendar__info {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        6px;

    max-width:
        880px;

    margin:
        8px auto 0;

    padding:
        7px 9px;

    border:
        1px solid #dfddd5;

    border-radius:
        5px;

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

}


.course-500-calendar__info > span {

    color:
        var(--green);

    font-size:
        9px;

}


.course-500-calendar__info p {

    color:
        var(--muted);

    font-size:
        5.8px;

    line-height:
        1.4;

}


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

@media (
    max-width: 1000px
) {

    .course-500-calendar__container {

        width:
            min(
                calc(100% - 60px),
                900px
            );

    }


    .course-500-calendar__journey {

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

    }

}


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

@media (
    max-width: 760px
) {

    .course-500-calendar {

        padding:
            21px 0 25px;

    }


    .course-500-calendar__container {

        width:
            calc(100% - 30px);

    }


    .course-500-calendar__header {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            10px;

    }


    .course-500-calendar__header h2 {

        font-size:
            21px;

    }


    .course-500-calendar__selector {

        width:
            100%;

        flex:
            none;

    }


    /* SUMMARY */

    .course-500-calendar__summary {

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

    }


    .course-500-calendar__summary > div {

        min-height:
            48px;

    }


    .course-500-calendar__summary > div:nth-child(2n) {

        border-right:
            0;

    }


    .course-500-calendar__summary > div:nth-child(-n+4) {

        border-bottom:
            1px solid #ebe9e2;

    }


    .course-500-calendar__summary > div:nth-child(5) {

        grid-column:
            1 / -1;

    }


    /* MONTHS */

    .course-500-calendar__journey {

        display:
            flex;

        flex-direction:
            column;

        gap:
            4px;

    }


    .course-500-calendar__month-card {

        width:
            100%;

    }


    .course-500-calendar__connection {

        height:
            20px;

        transform:
            rotate(90deg);

    }


    /* DURATION */

    .course-500-calendar__duration {

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

    }


    .course-500-calendar__duration > div:nth-child(2) {

        border-right:
            0;

    }


    .course-500-calendar__duration > div:nth-child(-n+2) {

        border-bottom:
            1px solid #ebe9e2;

    }


    /* LEGEND */

    .course-500-calendar__legend {

        justify-content:
            flex-start;

    }

}


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

@media (
    max-width: 480px
) {

    .course-500-calendar__container {

        width:
            calc(100% - 20px);

    }


    .course-500-calendar__header h2 {

        font-size:
            19px;

    }


    .course-500-calendar__day {

        font-size:
            5.5px;

    }


    .course-500-calendar__day--closed
    .course-500-calendar__closed-mark {

        font-size:
            12px;

    }


    .course-500-calendar__event {

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

        min-height:
            31px;

    }


    .course-500-calendar__event strong {

        font-size:
            6.3px;

    }


    .course-500-calendar__event small {

        font-size:
            5.1px;

    }

}