/* ==================================================
   MUSLIM PATH ACADEMY
   POLICY + SUPPORT
================================================== */

.mpa-info-page{

    --info-deep:#08284c;
    --info-blue:#01478d;
    --info-gold:#fdb002;
    --info-soft:#6b9dc6;
    --info-line:#dfe8ef;
    --info-text:#476783;

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

    margin:
        24px auto 100px;
}


/* ==================================================
   COVER
================================================== */

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


.mpa-info-cover{

    width:100%;

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

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;
}


.mpa-info-cover::after{

    content:"";

    position:absolute;

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

    height:27%;

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

    pointer-events:none;
}


/* ==================================================
   LOGO
================================================== */

.mpa-info-logo{

    position:relative;

    z-index:4;

    width:148px;
    height:148px;

    margin:
        -74px auto 0;

    border-radius:50%;

    overflow:hidden;

    background:transparent;

    border:0;

    box-shadow:none;
}


.mpa-info-logo img{

    display:block;

    width:119%;
    height:119%;

    max-width:none;

    margin:-9.5%;

    object-fit:contain;
}


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

.mpa-info-intro{

    max-width:940px;

    margin:
        16px auto 0;
}


.mpa-info-eyebrow{

    display:block;

    color:
        var(--info-soft);

    font-size:10.5px;

    font-weight:800;

    letter-spacing:.11em;

    text-transform:uppercase;
}


html[dir="rtl"]
.mpa-info-eyebrow{
    letter-spacing:0;
}


.mpa-info-intro h1{

    max-width:1050px;

    margin:
        13px auto 0;

    color:
        var(--info-deep);

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

    font-weight:780;

    line-height:1;

    letter-spacing:-.055em;
}


html[dir="rtl"]
.mpa-info-intro h1{
    letter-spacing:0;
}


.mpa-info-intro > p{

    max-width:800px;

    margin:
        21px auto 0;

    color:#69849b;

    font-size:14.5px;

    line-height:1.9;
}


.mpa-info-reviewed{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:18px;

    padding:
        7px 12px;

    border:
        1px solid
        var(--info-line);

    border-radius:999px;

    background:#fff;

    color:#829cb0;

    font-size:9.5px;
}


.mpa-info-reviewed strong{

    color:
        var(--info-deep);

    font-weight:750;
}


/* ==================================================
   ARTICLE
================================================== */

.mpa-info-content{

    max-width:930px;

    margin:
        76px auto 0;
}


.mpa-info-content h2{

    position:relative;

    margin:
        54px 0 17px;

    padding-top:20px;

    color:
        var(--info-deep);

    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.25rem
        );

    font-weight:760;

    line-height:1.2;

    letter-spacing:-.025em;
}


html[dir="rtl"]
.mpa-info-content h2{
    letter-spacing:0;
}


.mpa-info-content h2:first-child{
    margin-top:0;
}


.mpa-info-content h2::before{

    content:"";

    position:absolute;

    top:0;

    inset-inline-start:0;

    width:44px;
    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--info-blue),
            var(--info-gold)
        );
}


.mpa-info-content h3{

    margin:
        29px 0 10px;

    color:
        var(--info-deep);

    font-size:1.1rem;
}


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

    color:
        var(--info-text);

    font-size:15px;

    line-height:1.9;
}


.mpa-info-content p{

    margin:
        0 0 17px;
}


.mpa-info-content ul,
.mpa-info-content ol{

    margin:
        15px 0 23px;

    padding-inline-start:25px;
}


.mpa-info-content li{

    margin:7px 0;

    padding-inline-start:3px;
}


.mpa-info-content li::marker{

    color:
        var(--info-gold);
}


.mpa-info-content strong{

    color:
        var(--info-deep);

    font-weight:760;
}


/* ==================================================
   DARK MODE
================================================== */

html.mpa-dark
.mpa-info-page{

    --info-deep:#f3f8fc;
    --info-line:#29465d;
    --info-text:#b7cbd9;
}


html.mpa-dark
.mpa-info-intro h1,
html.mpa-dark
.mpa-info-content h2,
html.mpa-dark
.mpa-info-content h3,
html.mpa-dark
.mpa-info-content strong{

    color:#f3f8fc;
}


html.mpa-dark
.mpa-info-intro > p,
html.mpa-dark
.mpa-info-content p,
html.mpa-dark
.mpa-info-content li{

    color:#a9c0d1;
}


html.mpa-dark
.mpa-info-reviewed{

    background:#0b263b;

    border-color:#29465d;

    color:#85a6bf;
}


html.mpa-dark
.mpa-info-reviewed strong{
    color:#f1f7fb;
}


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

@media(max-width:600px){

    .mpa-info-page{

        width:
            calc(100% - 20px);

        margin:
            10px auto 65px;
    }


    .mpa-info-cover{

        height:270px;

        border-radius:18px;
    }


    .mpa-info-logo{

        width:108px;
        height:108px;

        margin-top:-54px;
    }


    .mpa-info-intro{

        margin-top:13px;

        padding:
            0 8px;
    }


    .mpa-info-intro h1{

        font-size:2.4rem;

        line-height:1.05;
    }


    .mpa-info-intro > p{

        font-size:12px;

        line-height:1.75;
    }


    .mpa-info-content{

        margin-top:52px;

        padding:
            0 9px;
    }


    .mpa-info-content h2{

        margin-top:43px;

        font-size:1.55rem;
    }


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

        font-size:13px;

        line-height:1.85;
    }

}