/* ==================================================
   MUSLIM PATH ACADEMY
   CORE PAGE SHELL
================================================== */

.mpa-core-page{

    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    margin:
        24px auto 100px;
}


.mpa-core-profile{
    text-align:center;
}


/* COVER */

.mpa-core-cover{

    position:relative;

    width:100%;

    height:
        clamp(
            240px,
            34vw,
            420px
        );

    overflow:hidden;

    border-radius:28px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}


.mpa-core-cover::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:25%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.14),
            transparent
        );
}


/* LOGO */

.mpa-core-logo{

    position:relative;

    z-index:4;

    width:148px;
    height:148px;

    margin:
        -74px auto 0;

    overflow:hidden;

    border-radius:50%;

    background:transparent;

    border:0;

    box-shadow:none;
}


.mpa-core-logo img{

    display:block;

    width:119%;
    height:119%;

    max-width:none;

    margin:-9.5%;

    object-fit:contain;
}


/* TITLE */

.mpa-core-heading{

    max-width:1000px;

    margin:
        17px auto 0;
}


.mpa-core-eyebrow{

    display:block;

    color:#6b9dc6;

    font-size:10.5px;

    font-weight:800;

    letter-spacing:.11em;

    text-transform:uppercase;
}


html[dir="rtl"]
.mpa-core-eyebrow{

    letter-spacing:0;
}


.mpa-core-heading h1{

    margin:
        13px 0 0;

    color:#08284c;

    font-size:
        clamp(
            3rem,
            6vw,
            5.7rem
        );

    font-weight:780;

    line-height:1;

    letter-spacing:-.055em;
}


html[dir="rtl"]
.mpa-core-heading h1{

    letter-spacing:0;
}


/* CONTENT - READY FOR NEXT PHASE */

.mpa-core-content{

    max-width:1000px;

    margin:
        72px auto 0;

    color:#476783;
}


.mpa-core-content h2{

    color:#08284c;

    font-size:
        clamp(
            1.6rem,
            2.7vw,
            2.3rem
        );

    line-height:1.2;
}


.mpa-core-content p,
.mpa-core-content li{

    color:#476783;

    font-size:15px;

    line-height:1.9;
}


/* DARK MODE */

html.mpa-dark
.mpa-core-heading h1,
html.mpa-dark
.mpa-core-content h2{

    color:#f3f8fc;
}


html.mpa-dark
.mpa-core-content,
html.mpa-dark
.mpa-core-content p,
html.mpa-dark
.mpa-core-content li{

    color:#aec4d4;
}


/* MOBILE */

@media(max-width:600px){

    .mpa-core-page{

        width:
            calc(100% - 20px);

        margin:
            10px auto 65px;
    }


    .mpa-core-cover{

        height:270px;

        border-radius:18px;
    }


    .mpa-core-logo{

        width:108px;
        height:108px;

        margin-top:-54px;
    }


    .mpa-core-heading{

        margin-top:13px;

        padding:
            0 8px;
    }


    .mpa-core-heading h1{

        font-size:2.45rem;

        line-height:1.05;
    }


    .mpa-core-content{

        margin-top:50px;

        padding:
            0 8px;
    }

}