/* =========================================================
   ADI YOGPEETH — GURUS & LINEAGE
   File: assets/css/gurus-lineage.css
   Version: 1.0
   ========================================================= */


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

.gurus-lineage {

    position: relative;

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

    overflow: hidden;

}


/* =========================================================
   02. HEADER
   ========================================================= */

.gurus-lineage__header {

    max-width: 850px;

    margin-bottom: var(--space-12);

}


.gurus-lineage__header h2 {

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

}


.gurus-lineage__header h2 em {

    color: var(--color-terracotta);

    font-style: italic;

    font-weight: 400;

}


.gurus-lineage__intro {

    max-width: 600px;

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

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

    font-size: 0.98rem;

    line-height: 1.8;

}


/* =========================================================
   03. JOURNEY
   ========================================================= */

.gurus-lineage__journey {

    display: grid;

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

    gap: 32px;

    align-items: start;

}


/* =========================================================
   04. GURU CARD
   ========================================================= */

.guru-card {

    position: relative;

}


.guru-card__image-wrap {

    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

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

}


.guru-card__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: saturate(0.88);

    transition:
        transform 900ms var(--ease-smooth),
        filter 900ms var(--ease-smooth);

}


.guru-card:hover .guru-card__image {

    transform: scale(1.025);

    filter: saturate(1);

}


/* =========================================================
   05. NUMBER
   ========================================================= */

.guru-card__number {

    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--color-white);

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

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

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

    font-size: 0.95rem;

}


/* =========================================================
   06. GURU CONTENT
   ========================================================= */

.guru-card__content {

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

}


.guru-card__content h3 {

    margin: 0;

    color: var(--color-forest);

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

    font-size: 1.45rem;

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

    line-height: 1.1;

}


.guru-card__content span {

    display: block;

    margin-top: 7px;

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

    font-size: 0.64rem;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


/* =========================================================
   07. CONNECTOR
   ========================================================= */

.guru-card__connector {

    position: absolute;

    top: 43%;

    right: -48px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 5px;

    width: 65px;

    color: var(--color-terracotta);

}


.guru-card__connector span {

    display: block;

    flex: 1;

    height: 1px;

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

    opacity: 0.5;

}


.guru-card__connector i {

    font-size: 0.85rem;

    font-style: normal;

}


/* =========================================================
   08. TRANSITION
   ========================================================= */

.gurus-lineage__transition {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin:
        var(--space-12)
        0;

}


.gurus-lineage__transition span {

    width: 70px;

    height: 1px;

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

}


.gurus-lineage__transition p {

    margin: 0;

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

    font-size: 0.62rem;

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

    letter-spacing: var(--tracking-widest);

    text-transform: uppercase;

}


/* =========================================================
   09. TEACHERS
   ========================================================= */

.gurus-lineage__teachers {

    display: grid;

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

    align-items: center;

    gap: clamp(
        50px,
        7vw,
        100px
    );

    padding-top: var(--space-2);

}


/* =========================================================
   10. TEACHER IMAGE
   ========================================================= */

.gurus-lineage__teachers-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

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

}


.gurus-lineage__teachers-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

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

}


.gurus-lineage__teachers-image:hover img {

    transform: scale(1.02);

}


/* =========================================================
   11. TEACHER CONTENT
   ========================================================= */

.gurus-lineage__teachers-content {

    max-width: 450px;

}


.gurus-lineage__teachers-content h3 {

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

    color: var(--color-forest);

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

    font-size: clamp(
        2.3rem,
        3.5vw,
        4rem
    );

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

    line-height: 0.98;

    letter-spacing: -0.03em;

}


.gurus-lineage__teachers-content h3 em {

    color: var(--color-terracotta);

    font-style: italic;

    font-weight: 400;

}


.gurus-lineage__teachers-content p {

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

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

    font-size: 0.9rem;

    line-height: 1.75;

}


/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .gurus-lineage__journey {

        gap: 20px;

    }


    .guru-card__connector {

        right: -38px;

        width: 48px;

    }

}


/* =========================================================
   13. TABLET SMALL
   ========================================================= */

@media (max-width: 991px) {

    .gurus-lineage__journey {

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

        row-gap: var(--space-10);

    }


    .guru-card__connector {

        display: none;

    }


    .gurus-lineage__teachers {

        grid-template-columns:
            1fr 0.8fr;

        gap: var(--space-8);

    }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .gurus-lineage__header {

        margin-bottom: var(--space-9);

    }


    .gurus-lineage__journey {

        grid-template-columns: 1fr;

        gap: var(--space-8);

    }


    .guru-card {

        display: grid;

        grid-template-columns:
            110px
            1fr;

        gap: var(--space-5);

        align-items: center;

    }


    .guru-card__image-wrap {

        aspect-ratio: 1 / 1;

    }


    .guru-card__number {

        top: 8px;
        left: 8px;

        width: 30px;
        height: 30px;

        font-size: 0.75rem;

    }


    .guru-card__content {

        padding: 0;

    }


    .guru-card__content h3 {

        font-size: 1.3rem;

    }


    .gurus-lineage__transition {

        margin:
            var(--space-10)
            0;

    }


    .gurus-lineage__teachers {

        grid-template-columns: 1fr;

        gap: var(--space-7);

    }


    .gurus-lineage__teachers-image {

        aspect-ratio: 4 / 3;

    }


    .gurus-lineage__teachers-content {

        max-width: 100%;

    }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .guru-card {

        grid-template-columns:
            90px
            1fr;

        gap: var(--space-4);

    }


    .guru-card__content h3 {

        font-size: 1.15rem;

    }


    .guru-card__content span {

        font-size: 0.56rem;

    }


    .gurus-lineage__teachers-content h3 {

        font-size: 2.2rem;

    }

}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

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

    .guru-card__image,
    .gurus-lineage__teachers-image img {

        transition: none;

    }

}


/* =========================================================
   END OF GURUS & LINEAGE CSS
   ========================================================= */