/* =========================================================
   ADI YOGPEETH — DAILY SCHEDULE
   COMPONENT 19 — PREMIUM DESKTOP
   ========================================================= */

.course-schedule-section {

    position:
        relative;

    padding:
        115px 0
        105px;

    background:
        linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-ivory) 100%
        );

    overflow:
        hidden;

}


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

.course-schedule-section::before {

    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    top:
        -420px;

    left:
        -320px;

    background:
        radial-gradient(
            circle,
            rgba(
                184,
                137,
                50,
                .055
            ),
            transparent 68%
        );

    pointer-events:
        none;

}


.course-schedule-section::after {

    content:
        "";

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    right:
        -350px;

    bottom:
        -400px;

    background:
        radial-gradient(
            circle,
            rgba(
                23,
                63,
                52,
                .04
            ),
            transparent 68%
        );

    pointer-events:
        none;

}


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

.course-schedule__header {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .48fr);

    gap:
        90px;

    align-items:
        end;

    max-width:
        1280px;

    margin:
        0 auto 70px;

    z-index:
        2;

}


.course-schedule__header h2 {

    max-width:
        780px;

    margin:
        0;

    color:
        var(--color-forest);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.8rem,
            4.2vw,
            4.4rem
        );

    font-weight:
        var(--font-weight-medium);

    line-height:
        1.02;

    letter-spacing:
        -.045em;

}


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

.course-schedule__intro {

    position:
        relative;

    max-width:
        390px;

    padding:
        5px 0 3px 25px;

    border-left:
        1px solid
        rgba(
            184,
            137,
            50,
            .55
        );

}


.course-schedule__intro p {

    margin:
        0 0 11px;

    color:
        var(--color-text-secondary);

    font-size:
        .72rem;

    line-height:
        1.85;

}


.course-schedule__intro span {

    display:
        block;

    color:
        var(--color-text-muted);

    font-size:
        .51rem;

    line-height:
        1.65;

}


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

.course-schedule {

    position:
        relative;

    max-width:
        1050px;

    margin:
        0 auto;

    padding:
        5px 0 0;

    z-index:
        2;

}


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

.course-schedule__line {

    position:
        absolute;

    top:
        5px;

    bottom:
        5px;

    left:
        172px;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--color-border) 4%,
            var(--color-border) 96%,
            transparent
        );

}


/* =========================================================
   SCHEDULE ITEM
   ========================================================= */

.schedule-item {

    position:
        relative;

    display:
        grid;

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

    min-height:
        135px;

}


/* =========================================================
   TIME
   ========================================================= */

.schedule-item__time {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        flex-start;

    padding:
        8px 27px 0 0;

}


.schedule-item__time strong {

    color:
        var(--color-forest);

    font-family:
        var(--font-display);

    font-size:
        1.35rem;

    font-weight:
        var(--font-weight-medium);

    line-height:
        1;

    letter-spacing:
        -.02em;

}


.schedule-item__time span {

    margin-top:
        6px;

    color:
        var(--color-text-muted);

    font-size:
        .46rem;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


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

.schedule-item__dot {

    position:
        relative;

    z-index:
        3;

    width:
        13px;

    height:
        13px;

    margin:
        9px 0 0 17px;

    background:
        var(--color-white);

    border:
        2px solid
        var(--color-terracotta);

    border-radius:
        50%;

    box-shadow:
        0 0 0 5px
        rgba(
            255,
            255,
            255,
            .85
        );

}


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

.schedule-item__content {

    position:
        relative;

    margin:
        0 0 25px;

    padding:
        18px 25px 19px;

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

    border:
        1px solid
        rgba(
            23,
            63,
            52,
            .09
        );

    border-radius:
        7px;

    box-shadow:
        0 10px 30px
        rgba(
            23,
            63,
            52,
            .045
        );

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

}


/* =========================================================
   CARD HOVER
   ========================================================= */

.schedule-item__content:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(
            184,
            137,
            50,
            .22
        );

    box-shadow:
        0 16px 35px
        rgba(
            23,
            63,
            52,
            .075
        );

}


/* =========================================================
   SMALL CONNECTOR
   ========================================================= */

.schedule-item__content::before {

    content:
        "";

    position:
        absolute;

    top:
        23px;

    left:
        -9px;

    width:
        9px;

    height:
        1px;

    background:
        var(--color-border);

}


/* =========================================================
   ACTIVITY TYPE
   ========================================================= */

.schedule-item__type {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        8px;

    padding:
        5px 9px;

    color:
        var(--color-terracotta);

    background:
        rgba(
            174,
            103,
            77,
            .055
        );

    border:
        1px solid
        rgba(
            174,
            103,
            77,
            .12
        );

    border-radius:
        3px;

    font-size:
        .45rem;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        .13em;

    line-height:
        1;

    text-transform:
        uppercase;

}


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

.schedule-item__content h3 {

    margin:
        0 0 7px;

    color:
        var(--color-forest);

    font-family:
        var(--font-display);

    font-size:
        1.28rem;

    font-weight:
        var(--font-weight-medium);

    line-height:
        1.18;

    letter-spacing:
        -.015em;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.schedule-item__content p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--color-text-secondary);

    font-size:
        .61rem;

    line-height:
        1.7;

}


/* =========================================================
   ACTIVITY VARIATIONS
   ========================================================= */

.schedule-item--meal
.schedule-item__dot {

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

}


.schedule-item--meal
.schedule-item__type {

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

    background:
        rgba(
            184,
            137,
            50,
            .055
        );

    border-color:
        rgba(
            184,
            137,
            50,
            .14
        );

}


.schedule-item--meditation
.schedule-item__dot {

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

}


.schedule-item--meditation
.schedule-item__type {

    color:
        var(--color-forest);

    background:
        rgba(
            23,
            63,
            52,
            .055
        );

    border-color:
        rgba(
            23,
            63,
            52,
            .12
        );

}


.schedule-item--personal
.schedule-item__dot {

    border-color:
        var(--color-text-muted);

}


.schedule-item--personal
.schedule-item__type {

    color:
        var(--color-text-muted);

    background:
        rgba(
            112,
            120,
            115,
            .055
        );

    border-color:
        rgba(
            112,
            120,
            115,
            .12
        );

}


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

.course-schedule__note {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    max-width:
        1050px;

    margin:
        30px auto 0;

    padding:
        17px 20px;

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

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

    border-radius:
        var(--radius-sm);

}


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

.course-schedule__note-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    color:
        var(--color-white);

    background:
        var(--color-forest);

    border-radius:
        50%;

    font-family:
        var(--font-display);

    font-size:
        .58rem;

}


/* =========================================================
   NOTE TEXT
   ========================================================= */

.course-schedule__note p {

    margin:
        0;

    color:
        var(--color-text-secondary);

    font-size:
        .55rem;

    line-height:
        1.65;

}


/* =========================================================
   TABLET — DESKTOP STYLE
   ========================================================= */

@media (min-width: 768px)
       and (max-width: 1100px) {

    .course-schedule-section {

        padding:
            90px 0;

    }


    .course-schedule__header {

        gap:
            45px;

        margin-bottom:
            55px;

    }


    .course-schedule__header h2 {

        font-size:
            3rem;

    }


    .course-schedule {

        max-width:
            900px;

    }


    .course-schedule__line {

        left:
            145px;

    }


    .schedule-item {

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

    }


    .schedule-item__content {

        padding:
            16px 20px;

    }

}