/* =========================================================
   ADI YOGPEETH — COURSE FAQ
   ========================================================= */

.course-faq-section {

    padding:
        110px
        0;

    background:
        var(--color-white);

}


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

.course-faq {

    display:
        grid;

    grid-template-columns:
        minmax(260px, 0.65fr)
        minmax(0, 1.35fr);

    gap:
        90px;

    align-items:
        start;

}


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

.course-faq__intro {

    position:
        sticky;

    top:
        110px;

}


.course-faq__intro h2 {

    margin:
        0;

    color:
        var(--color-forest);

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

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

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

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

}


.course-faq__intro > p {

    max-width:
        400px;

    margin:
        22px 0 30px;

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

    font-size:
        0.7rem;

    line-height:
        1.8;

}


/* =========================================================
   HELP
   ========================================================= */

.course-faq__help {

    display:
        grid;

    gap:
        6px;

    padding:
        18px;

    background:
        var(--color-ivory);

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

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

}


.course-faq__help span {

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

    font-size:
        0.52rem;

}


.course-faq__help a {

    color:
        var(--color-terracotta);

    font-size:
        0.6rem;

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

    text-decoration:
        none;

}


.course-faq__help a:hover {

    text-decoration:
        underline;

}


/* =========================================================
   FAQ LIST
   ========================================================= */

.course-faq__list {

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

}


.faq-item {

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

}


/* =========================================================
   TRIGGER
   ========================================================= */

.faq-item__trigger {

    display:
        grid;

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

    align-items:
        center;

    width:
        100%;

    min-height:
        92px;

    padding:
        0;

    color:
        var(--color-forest);

    background:
        transparent;

    border:
        0;

    text-align:
        left;

    cursor:
        pointer;

}


.faq-item__number {

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

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

    font-size:
        0.62rem;

}


.faq-item__question {

    padding-right:
        15px;

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

    font-size:
        clamp(
            1rem,
            1.7vw,
            1.25rem
        );

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

    line-height:
        1.35;

}


.faq-item__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    color:
        var(--color-forest);

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

    border-radius:
        50%;

    font-size:
        1rem;

    font-weight:
        300;

    transition:
        transform 220ms ease,
        color 220ms ease,
        background-color 220ms ease;

}


.faq-item.is-open
.faq-item__icon {

    color:
        var(--color-white);

    background:
        var(--color-forest);

    transform:
        rotate(45deg);

}


/* =========================================================
   ANSWER
   ========================================================= */

.faq-item__panel {

    overflow:
        hidden;

}


.faq-item__answer {

    max-width:
        720px;

    padding:
        0
        83px
        32px
        45px;

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

    font-size:
        0.66rem;

    line-height:
        1.85;

}


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

@media (max-width: 767px) {

    .course-faq-section {

        padding:
            75px
            0;

    }


    .course-faq {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .course-faq__intro {

        position:
            static;

    }


    .course-faq__intro h2 {

        font-size:
            clamp(
                2rem,
                9vw,
                2.8rem
            );

    }


    .faq-item__trigger {

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

        min-height:
            78px;

    }


    .faq-item__number {

        font-size:
            0.55rem;

    }


    .faq-item__question {

        font-size:
            0.92rem;

    }


    .faq-item__answer {

        padding:
            0
            0
            25px
            35px;

        font-size:
            0.64rem;

    }

}