/* =========================================================
   ADI YOGPEETH — RISHIKESH + YOGA
   File: assets/css/rishikesh-yoga.css
   Version: 1.0
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rishikesh-yoga {

    position: relative;

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

    overflow: hidden;

}


/* =========================================================
   02. VISUAL
   ========================================================= */

.rishikesh-yoga__visual {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

}


.rishikesh-yoga__visual > img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s var(--ease-smooth);

}


.rishikesh-yoga:hover
.rishikesh-yoga__visual > img {

    transform: scale(1.015);

}


/* =========================================================
   03. OVERLAY
   ========================================================= */

.rishikesh-yoga__overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 37, 31, 0.78) 0%,
            rgba(10, 37, 31, 0.55) 42%,
            rgba(10, 37, 31, 0.18) 75%,
            rgba(10, 37, 31, 0.12) 100%
        );

}


/* =========================================================
   04. CONTENT
   ========================================================= */

.rishikesh-yoga__content {

    position: relative;

    z-index: 2;

    max-width: 680px;

    padding-block: var(--space-16);

}


.rishikesh-yoga__content .eyebrow {

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

}


.rishikesh-yoga__content h2 {

    margin-top: var(--space-5);

    color: var(--color-white);

}


.rishikesh-yoga__content h2 em {

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

    font-style: italic;

    font-weight: 400;

}


.rishikesh-yoga__content p {

    max-width: 570px;

    margin-top: var(--space-7);

    color: rgba(255, 255, 255, 0.78);

    font-size: 1rem;

    line-height: 1.8;

}


.rishikesh-yoga__content .btn {

    margin-top: var(--space-8);

}


/* =========================================================
   05. HIGHLIGHTS
   ========================================================= */

.rishikesh-yoga__highlights {

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

}


.rishikesh-yoga__highlight-grid {

    display: grid;

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

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

}


.rishikesh-highlight {

    display: flex;

    align-items: center;

    gap: var(--space-4);

    min-height: 105px;

    padding:
        0
        var(--space-6);

}


.rishikesh-highlight + .rishikesh-highlight {

    border-left:
        1px solid rgba(255, 255, 255, 0.14);

}


.rishikesh-highlight__number {

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

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

    font-size: 0.95rem;

}


.rishikesh-highlight__title {

    color: rgba(255, 255, 255, 0.82);

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

    font-size: 1.05rem;

    line-height: 1.2;

}


/* =========================================================
   06. TABLET
   ========================================================= */

@media (max-width: 991px) {

    .rishikesh-yoga__visual {

        min-height: 650px;

    }


    .rishikesh-yoga__highlight-grid {

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

    }


    .rishikesh-highlight:nth-child(3) {

        border-left: 0;

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

    }


    .rishikesh-highlight:nth-child(4) {

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

    }

}


/* =========================================================
   07. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .rishikesh-yoga__visual {

        min-height: 680px;

        align-items: flex-end;

    }


    .rishikesh-yoga__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(10, 37, 31, 0.12) 0%,
                rgba(10, 37, 31, 0.40) 40%,
                rgba(10, 37, 31, 0.88) 100%
            );

    }


    .rishikesh-yoga__content {

        padding-block: var(--space-12);

    }


    .rishikesh-yoga__content p {

        font-size: 0.9rem;

    }


    .rishikesh-yoga__highlight-grid {

        grid-template-columns: 1fr;

    }


    .rishikesh-highlight {

        min-height: 82px;

        padding:
            0
            var(--space-4);

    }


    .rishikesh-highlight + .rishikesh-highlight {

        border-left: 0;

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

    }

}


/* =========================================================
   08. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .rishikesh-yoga__visual {

        min-height: 620px;

    }


    .rishikesh-highlight {

        min-height: 75px;

    }


    .rishikesh-highlight__title {

        font-size: 0.95rem;

    }

}


/* =========================================================
   09. REDUCED MOTION
   ========================================================= */

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

    .rishikesh-yoga__visual > img {

        transition: none;

    }

}