/* ==========================================================
   MERITZA CLASSES
   FEATURED TUTORS
   Version : 1.0.0
========================================================== */


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

.mc-featured-tutors{

    position:relative;

    padding-top:0;

    padding-bottom:0;

    overflow:hidden;

}


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

.mc-featured-tutors .mc-container{

    width:100%;

}


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

.mc-featured-tutors-header{

    position:relative;

    max-width:820px;

    margin:0 auto 24px;

    text-align:center;

    z-index:5;

}


/* ==========================================================
   EDITORIAL EYEBROW
   Same visual language as HOW IT WORKS
========================================================== */

.mc-featured-tutors-eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:720px;

    margin:0 auto 10px;

    gap:18px;

}


/* ==========================================================
   EYEBROW TEXT
========================================================== */

.mc-featured-tutors-eyebrow-text{

    flex-shrink:0;

    color:#B98C14;

    font-size:.84rem;

    font-weight:800;

    letter-spacing:.17em;

    line-height:1;

    white-space:nowrap;

}


/* ==========================================================
   GOLD FADING LINES
========================================================== */

.mc-featured-tutors-eyebrow-line{

    flex:1;

    height:2px;

    opacity:1;

}


/* ==========================================================
   LEFT GOLD LINE
========================================================== */

.mc-featured-tutors-eyebrow-line:first-child{

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.20) 15%,
            rgba(212,175,55,.55) 55%,
            rgba(212,175,55,.95) 100%
        );

}


/* ==========================================================
   RIGHT GOLD LINE
========================================================== */

.mc-featured-tutors-eyebrow-line:last-child{

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.95) 0%,
            rgba(212,175,55,.55) 45%,
            rgba(212,175,55,.20) 85%,
            transparent 100%
        );

}


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

.mc-featured-tutors-title{

    margin:0;

    color:#0A1946;

    font-size:2.2rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.7px;

}


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

.mc-featured-tutors-description{

    max-width:640px;

    margin:5px auto 0;

    color:#52627A;

    font-size:.9rem;

    line-height:1.4;

}


/* ==========================================================
   TUTOR GRID
========================================================== */

.mc-featured-tutors-grid{

    display:grid;

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

    gap:20px;

}


/* ==========================================================
   TUTOR CARD
========================================================== */

.mc-featured-tutor-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7F9FC 48%,
            #F1F5FA 100%
        );

    border:1px solid rgba(10,25,70,.10);

    border-radius:18px;

    box-shadow:
        0 8px 22px rgba(10,25,70,.065);

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

}
/* ==========================================================
   GOLD CARD ACCENT
========================================================== */

.mc-featured-tutor-card::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.18) 12%,
            rgba(212,175,55,.75) 50%,
            rgba(212,175,55,.18) 88%,
            transparent 100%
        );

    opacity:.65;

}
.mc-featured-tutor-card:hover{

    transform:translateY(-5px);

    border-color:rgba(212,175,55,.45);

    box-shadow:
        0 18px 38px rgba(10,25,70,.12);

}


/* ==========================================================
   PROFILE IMAGE AREA
   Reduced from the previous tall version
========================================================== */

.mc-featured-tutor-image-wrap{

    position:relative;

    width:100%;

    aspect-ratio:1.21 / 1;

    overflow:hidden;

    background:#EEF2F7;

}


/* ==========================================================
   PROFILE IMAGE
========================================================== */

.mc-featured-tutor-image{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:
        transform .35s ease;

}


.mc-featured-tutor-card:hover
.mc-featured-tutor-image{

    transform:scale(1.025);

}


/* ==========================================================
   IMAGE PLACEHOLDER
========================================================== */

.mc-featured-tutor-image-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    color:#8A95A7;

    font-size:2.6rem;

    background:
        linear-gradient(
            145deg,
            #EEF2F7 0%,
            #E3E9F1 100%
        );

}


/* ==========================================================
   INSTITUTE BADGE
========================================================== */

.mc-featured-tutor-institute{

    position:absolute;

    top:12px;

    left:12px;

    display:inline-flex;

    align-items:center;

    min-height:25px;

    padding:4px 10px;

    color:#0A1946;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(247,241,218,.94)
        );

    border:1px solid rgba(212,175,55,.42);

    border-radius:999px;

    box-shadow:
        0 5px 14px rgba(10,25,70,.12);

    font-size:.63rem;

    font-weight:800;

    letter-spacing:.04em;

    text-transform:uppercase;

    backdrop-filter:blur(6px);

}


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

.mc-featured-tutor-content{

    position:relative;

    display:flex;

    flex:1;

    flex-direction:column;

    padding:16px 17px 17px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.72) 0%,
            rgba(241,245,250,.82) 100%
        );

}


/* ==========================================================
   TUTOR NAME
========================================================== */

.mc-featured-tutor-name{

    margin:0;

    color:#0A1946;

    font-size:1.02rem;

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.01em;

}


/* ==========================================================
   ACADEMIC INFORMATION
========================================================== */

.mc-featured-tutor-academic{

    margin:5px 0 0;

    color:#526078;

    font-size:.74rem;

    font-weight:600;

    line-height:1.4;

}


/* ==========================================================
   SUBJECTS
========================================================== */

.mc-featured-tutor-subjects{

    display:-webkit-box;

    margin:7px 0 0;

    overflow:hidden;

    color:#78859A;

    font-size:.71rem;

    line-height:1.4;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    line-clamp:2;

}


/* ==========================================================
   PROFILE LINK
========================================================== */

.mc-featured-tutor-link{

    display:inline-flex;

    align-items:center;

    gap:5px;

    width:max-content;

    margin-top:auto;

    padding-top:12px;

    color:#245FC1;

    font-size:.74rem;

    font-weight:800;

    text-decoration:none;

    transition:
        color .2s ease,
        gap .2s ease;

}


.mc-featured-tutor-link span{

    font-size:1rem;

    line-height:1;

}


.mc-featured-tutor-link:hover{

    color:#0A1946;

    gap:8px;

}


/* ==========================================================
   SECTION FOOTER
========================================================== */

.mc-featured-tutors-footer{

    display:flex;

    justify-content:center;

    margin-top:24px;

}


/* ==========================================================
   EXPLORE ALL TUTORS
========================================================== */

.mc-featured-tutors-explore{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#245FC1;

    font-size:.82rem;

    font-weight:800;

    text-decoration:none;

    transition:
        color .2s ease,
        gap .2s ease;

}


.mc-featured-tutors-explore span{

    font-size:1.1rem;

    line-height:1;

}


.mc-featured-tutors-explore:hover{

    color:#0A1946;

    gap:10px;

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1199.98px){

    .mc-featured-tutors-grid{

        gap:18px;

    }


    .mc-featured-tutor-content{

        padding:14px;

    }

}


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

@media (max-width:991.98px){

    .mc-featured-tutors-header{

        margin-bottom:22px;

    }


    .mc-featured-tutors-grid{

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

        gap:18px;

    }


    .mc-featured-tutor-image-wrap{

        aspect-ratio:1.21 / 1;

    }

}


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

@media (max-width:767.98px){

    .mc-featured-tutors-header{

        max-width:100%;

        margin-bottom:22px;

    }


    .mc-featured-tutors-eyebrow{

        gap:10px;

    }


    .mc-featured-tutors-eyebrow-text{

        font-size:.64rem;

        letter-spacing:.12em;

    }


    .mc-featured-tutors-eyebrow-line{

        height:1px;

    }


    .mc-featured-tutors-title{

        font-size:1.8rem;

    }


    .mc-featured-tutors-description{

        font-size:.84rem;

    }


    .mc-featured-tutors-grid{

        grid-template-columns:1fr;

        gap:16px;

    }


    .mc-featured-tutor-card{

        border-radius:16px;

    }


    .mc-featured-tutor-image-wrap{

        aspect-ratio:16 / 9;

    }


    .mc-featured-tutor-content{

        padding:15px 16px 16px;

    }


    .mc-featured-tutor-name{

        font-size:.98rem;

    }


    .mc-featured-tutor-academic{

        font-size:.73rem;

    }


    .mc-featured-tutor-subjects{

        font-size:.70rem;

    }


    .mc-featured-tutors-footer{

        margin-top:20px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .mc-featured-tutor-card,
    .mc-featured-tutor-image,
    .mc-featured-tutor-link,
    .mc-featured-tutors-explore{

        transition:none;

    }

}
/* MERITZA MOBILE — HOMEPAGE FEATURED TUTORS 2-COLUMN GRID
   Two tutor cards per row on every mobile width.
========================================================== */
@media (max-width:767.98px){
    .mc-featured-tutors-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
}
@media (max-width:420px){
    .mc-featured-tutors-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }
}