/* ==================================================
   MUSLIM PATH ACADEMY
   ARTICLE DESIGN SYSTEM
   ================================================== */

.mp-article{
    --mp-navy:#08284c;
    --mp-blue:#01478d;
    --mp-soft-blue:#6b9dc6;
    --mp-gold:#fdb002;
    --mp-text:#26394a;
    --mp-muted:#657789;
    --mp-border:#dce5ec;
    --mp-soft:#f5f8fa;
    --mp-blue-soft:#edf5fb;
    --mp-cream:#fbfaf6;

    padding:26px 0 84px;
    background:#fff;
    color:var(--mp-text);
}

.mp-article *,
.mp-article *::before,
.mp-article *::after{
    box-sizing:border-box;
}

.mp-article-container{
    width:min(1180px, calc(100% - 36px));
    margin-inline:auto;
}


/* ARTICLE HEADER */

.mp-article-header{
    width:min(900px, 100%);
    margin:0 auto 36px;
    text-align:center;
}

.mp-article-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:15px;
    color:var(--mp-blue);
    font-size:10px;
    font-weight:750;
    line-height:1.4;
    letter-spacing:.085em;
    text-transform:uppercase;
}

.mp-article-header h1{
    margin:0;
    color:var(--mp-navy);
    font-size:clamp(2.55rem, 5.2vw, 4.65rem);
    font-weight:730;
    line-height:1.03;
    letter-spacing:-.052em;
}

.mp-article-dek{
    width:min(760px, 100%);
    margin:22px auto 0;
    color:var(--mp-muted);
    font-size:16px;
    line-height:1.85;
}

.mp-article-byline{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:21px;
    color:#7a8997;
    font-size:10px;
    font-weight:650;
    line-height:1.5;
}


/* COVER */

/* MPA_ARTICLE_BREADCRUMBS_START */

/*
 * Article breadcrumb chips.
 *
 * Position:
 * cover -> logo -> breadcrumbs -> H1
 */

.mp-breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    margin:4px auto 20px;
    padding:0 14px;

    /*
     * Hides slash separators or other raw
     * text nodes between breadcrumb items.
     */
    font-size:0;
    line-height:1;
}

.mp-breadcrumbs a,
.mp-breadcrumbs span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:29px;
    max-width:340px;
    padding:5px 10px;
    overflow:hidden;
    border:
        1px solid
        rgba(1,71,141,.13);
    border-radius:999px;
    background:#f7fafc;
    color:#315271;
    font-size:11.5px;
    font-weight:600;
    line-height:1.35;
    text-decoration:none;
    white-space:nowrap;
    text-overflow:ellipsis;
    box-shadow:none;
}

.mp-breadcrumbs a:hover{
    border-color:
        rgba(1,71,141,.25);
    background:#eef5fa;
    color:#01478d;
    text-decoration:none;
}

.mp-breadcrumbs span:last-child{
    max-width:390px;
    background:#fffaf0;
    border-color:
        rgba(253,176,2,.22);
    color:#52677b;
}

html[dir="rtl"]
.mp-breadcrumbs{
    direction:rtl;
}

html[dir="rtl"]
.mp-breadcrumbs a,
html[dir="rtl"]
.mp-breadcrumbs span{
    direction:rtl;
}

html.mpa-dark
.mp-breadcrumbs a,
html.mpa-dark
.mp-breadcrumbs span{
    border-color:
        rgba(255,255,255,.10);
    background:
        rgba(255,255,255,.055);
    color:#d8e5f1;
}

html.mpa-dark
.mp-breadcrumbs span:last-child{
    border-color:
        rgba(253,176,2,.20);
    background:
        rgba(253,176,2,.07);
}

@media(max-width:700px){

    .mp-breadcrumbs{
        gap:5px;
        margin:
            2px auto
            16px;
        padding:
            0 6px;
    }

    .mp-breadcrumbs a,
    .mp-breadcrumbs span{
        min-height:27px;
        max-width:210px;
        padding:
            4px 8px;
        font-size:10.5px;
    }

    .mp-breadcrumbs span:last-child{
        max-width:230px;
    }

}

/* MPA_ARTICLE_BREADCRUMBS_END */

/* MPA_ARTICLE_COVER_SYSTEM_START */

/*
 * ARTICLE COVER
 *
 * Final source image:
 * 1600 x 360 px
 *
 * Article 01 filename:
 * online-quran-classes-cost-uk-2026.webp
 */

.mp-article-cover{
    position:relative;
    width:100%;
    margin:22px 0 48px;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:20px;
    background:transparent;
    box-shadow:none;
}


/*
 * FUTURE REAL COVER
 */

.mp-article-cover__image{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:40 / 9;
    object-fit:cover;
    object-position:center;
    border:0;
    border-radius:20px;
    box-shadow:
        0 10px 28px
        rgba(8,40,76,.08);
}


/*
 * WAITING COVER
 *
 * This is NOT an image.
 * It only preserves the final cover space.
 */

.mp-article-cover__waiting{
    display:block;
    width:100%;
    aspect-ratio:40 / 9;
    border:
        1px solid
        rgba(8,40,76,.07);
    border-radius:20px;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(107,157,198,.18),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #f1f7fb 0%,
            #f8fafc 55%,
            #fffaf2 100%
        );
}


/*
 * LOGO ONLY
 *
 * No white frame.
 * No added blue circle.
 * No border.
 * No shadow.
 */

.mp-article-cover__logo{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:-29px;
    display:block;
    width:62px;
    height:62px;
    transform:translateX(-50%);
    object-fit:contain;
    border:0;
    border-radius:0;
    outline:0;
    background:transparent;
    box-shadow:none;
}


/*
 * No title inside cover.
 * The normal H1 below remains the only title.
 */

.mp-article-header{
    position:relative;
}


html.mpa-dark
.mp-article-cover__waiting{
    border-color:
        rgba(255,255,255,.07);
    background:
        linear-gradient(
            120deg,
            #10243e 0%,
            #142e4a 100%
        );
}


@media(max-width:700px){

    .mp-article-cover{
        margin:
            16px 0
            40px;
        border-radius:16px;
    }

    .mp-article-cover__image,
    .mp-article-cover__waiting{
        aspect-ratio:16 / 5;
        border-radius:16px;
    }

    .mp-article-cover__logo{
        width:52px;
        height:52px;
        bottom:-25px;
    }

}

/* MPA_ARTICLE_COVER_SYSTEM_END */

/* READING COLUMN */

.mp-article-content{
    width:100%;
    color:var(--mp-text);
}

.mp-article-content > p,
.mp-article-content > h2,
.mp-article-content > h3,
.mp-article-content > ul,
.mp-article-content > ol,
.mp-article-content > blockquote{
    width:min(800px, 100%);
    margin-inline:auto;
}

.mp-article-content p{
    margin-top:0;
    margin-bottom:23px;
    font-size:17px;
    line-height:1.92;
}

.mp-article-content h2{
    margin-top:58px;
    margin-bottom:20px;
    color:var(--mp-navy);
    font-size:clamp(1.7rem, 3vw, 2.35rem);
    font-weight:720;
    line-height:1.16;
    letter-spacing:-.03em;
}

.mp-article-content h3{
    margin-top:36px;
    margin-bottom:13px;
    color:var(--mp-navy);
    font-size:1.23rem;
    font-weight:720;
    line-height:1.35;
}

.mp-article-content a{
    color:var(--mp-blue);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.mp-article-content strong{
    color:#172f45;
}

.mp-article-content ul,
.mp-article-content ol{
    padding-inline-start:25px;
    margin-top:0;
    margin-bottom:26px;
}

.mp-article-content li{
    margin:9px 0;
    font-size:16.5px;
    line-height:1.8;
}


/* DIRECT ANSWER */

.mp-direct-answer{
    width:min(930px, 100%);
    margin:34px auto 42px;
    padding:30px 32px;
    border:1px solid #cadde9;
    border-inline-start:5px solid var(--mp-blue);
    border-radius:12px;
    background:var(--mp-blue-soft);
}

.mp-direct-answer__label{
    display:block;
    margin-bottom:10px;
    color:var(--mp-blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mp-direct-answer p{
    width:100%;
    margin:0;
    color:#203a50;
    font-size:17px;
    line-height:1.8;
}

.mp-direct-answer strong{
    color:var(--mp-navy);
}


/* TOC */

.mp-toc{
    width:min(800px, 100%);
    margin:40px auto 46px;
    padding:25px 28px;
    border:1px solid var(--mp-border);
    border-radius:10px;
    background:#fff;
}

.mp-toc__title{
    display:block;
    margin-bottom:14px;
    color:var(--mp-navy);
    font-size:13px;
    font-weight:750;
}

.mp-toc ol{
    margin:0;
    padding-inline-start:20px;
}

.mp-toc li{
    margin:7px 0;
    font-size:13px;
    line-height:1.6;
}

.mp-toc a{
    text-decoration:none;
}


/* IMAGES */

.mp-article-media{
    position:relative;
    display:block;
    overflow:hidden;
    margin-top:38px;
    margin-bottom:46px;
    border-radius:12px;
    background:#eef3f7;
}

.mp-article-media--standard{
    width:min(800px, 100%);
    margin-inline:auto;
    aspect-ratio:16 / 10;
}

.mp-article-media--wide{
    width:min(1060px, 100%);
    margin-inline:auto;
    aspect-ratio:16 / 9;
}

.mp-article-media--compact{
    width:min(650px, 100%);
    margin-inline:auto;
    aspect-ratio:4 / 3;
}

.mp-article-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mp-article-media__placeholder{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            #eef5fa,
            #f8fafb 58%,
            #fff9ea
        );
}

.mp-article-media__placeholder::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    left:-50px;
    bottom:-70px;
    border:1px solid rgba(1,71,141,.15);
    border-radius:50%;
}

.mp-article-media__placeholder::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:10%;
    top:-35px;
    border-radius:50%;
    background:rgba(253,176,2,.14);
}

.mp-article-media__placeholder span{
    position:absolute;
    width:62px;
    height:4px;
    left:50%;
    top:50%;
    border-radius:20px;
    background:var(--mp-blue);
    transform:translate(-50%,-50%);
}


/* PRICE SNAPSHOT */

.mp-price-snapshot{
    width:min(1060px, 100%);
    margin:32px auto 48px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.mp-price-snapshot__item{
    padding:25px 22px;
    border:1px solid var(--mp-border);
    border-radius:11px;
    background:#fff;
}

.mp-price-snapshot__item span{
    display:block;
    margin-bottom:8px;
    color:#728293;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.mp-price-snapshot__item strong{
    display:block;
    color:var(--mp-navy);
    font-size:27px;
    line-height:1.1;
}


/* TABLE */

.mp-table-wrap{
    width:min(1000px, 100%);
    margin:30px auto 43px;
    overflow-x:auto;
    border:1px solid var(--mp-border);
    border-radius:11px;
    background:#fff;
}

.mp-table-wrap table{
    width:100%;
    min-width:700px;
    border-collapse:collapse;
    font-size:13px;
}

.mp-table-wrap th,
.mp-table-wrap td{
    padding:15px 17px;
    border-bottom:1px solid #e6edf2;
    text-align:left;
    vertical-align:top;
}

.mp-table-wrap th{
    color:var(--mp-navy);
    background:#f4f8fb;
    font-size:11px;
    font-weight:750;
}

.mp-table-wrap tr:last-child td{
    border-bottom:0;
}


/* THREE-WAY COMPARISON */

.mp-lesson-length{
    width:min(1000px,100%);
    margin:31px auto 45px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}

.mp-lesson-length__card{
    padding:27px 24px;
    border:1px solid var(--mp-border);
    border-radius:11px;
    background:#fff;
}

.mp-lesson-length__time{
    display:block;
    margin-bottom:10px;
    color:var(--mp-blue);
    font-size:26px;
    font-weight:780;
    line-height:1;
}

.mp-lesson-length__card strong{
    display:block;
    margin-bottom:9px;
    color:var(--mp-navy);
    font-size:15px;
}

.mp-lesson-length__card p{
    width:100%;
    margin:0;
    color:var(--mp-muted);
    font-size:12.5px;
    line-height:1.75;
}


/* SPLIT SECTIONS */

.mp-article-split{
    width:min(1060px,100%);
    margin:45px auto 50px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:38px;
    align-items:center;
}

.mp-article-split__text h2,
.mp-article-split__text h3,
.mp-article-split__text p,
.mp-article-split__text ul{
    width:100%;
}

.mp-article-split__text h2{
    margin-top:0;
}

.mp-article-split__media .mp-article-media{
    width:100%;
    margin:0;
}


/* PARENT CHECKLIST */

.mp-parent-checklist{
    width:min(1000px,100%);
    margin:31px auto 46px;
    padding:31px;
    border:1px solid var(--mp-border);
    border-radius:12px;
    background:var(--mp-cream);
}

.mp-parent-checklist__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 28px;
}

.mp-parent-checklist__item{
    position:relative;
    padding-inline-start:26px;
    color:#405568;
    font-size:14px;
    line-height:1.7;
}

.mp-parent-checklist__item::before{
    content:"✓";
    position:absolute;
    inset-inline-start:0;
    top:0;
    color:var(--mp-blue);
    font-weight:800;
}


/* NOTE */

.mp-note{
    width:min(800px,100%);
    margin:31px auto;
    padding:22px 24px;
    border-radius:9px;
    background:#f6f8fa;
    color:#586b7d;
    font-size:13px;
    line-height:1.8;
}


/* FAQ */

.mp-faq{
    width:min(900px,100%);
    margin:42px auto 50px;
}

.mp-faq__item{
    padding:22px 0;
    border-bottom:1px solid var(--mp-border);
}

.mp-faq__item:first-child{
    border-top:1px solid var(--mp-border);
}

.mp-faq__item h3{
    width:100%;
    margin:0 0 9px;
    color:var(--mp-navy);
    font-size:16px;
}

.mp-faq__item p{
    width:100%;
    margin:0;
    color:var(--mp-muted);
    font-size:14px;
    line-height:1.8;
}


/* SOURCE */

.mp-source-note{
    width:min(800px,100%);
    margin:47px auto;
    padding-top:23px;
    border-top:1px solid var(--mp-border);
    color:#708090;
    font-size:11px;
    line-height:1.75;
}

.mp-source-note strong{
    color:#43596d;
}


/* ARTICLE CTA */

.mp-article-cta{
    width:min(1000px,100%);
    margin:58px auto 0;
    padding:37px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    border:1px solid #cadce8;
    border-radius:13px;
    background:#f1f7fb;
}

.mp-article-cta__copy{
    max-width:690px;
}

.mp-article-cta__copy span{
    display:block;
    margin-bottom:8px;
    color:var(--mp-blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mp-article-cta h2{
    width:100%;
    margin:0;
    color:var(--mp-navy);
    font-size:clamp(1.55rem,3vw,2.15rem);
}

.mp-article-cta p{
    width:100%;
    margin:11px 0 0;
    color:var(--mp-muted);
    font-size:13px;
    line-height:1.8;
}

.mp-article-cta__button{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 19px;
    border-radius:8px;
    background:var(--mp-blue);
    color:#fff !important;
    font-size:11px;
    font-weight:750;
    text-decoration:none !important;
}

.mp-article-cta__button:hover{
    background:var(--mp-navy);
}


/* RELATED */

.mp-related{
    width:min(1080px,100%);
    margin:74px auto 0;
    padding-top:45px;
    border-top:1px solid var(--mp-border);
}

.mp-related__head{
    margin-bottom:23px;
}

.mp-related__head span{
    display:block;
    margin-bottom:7px;
    color:var(--mp-blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mp-related__head h2{
    margin:0;
    color:var(--mp-navy);
    font-size:27px;
    font-weight:720;
}

.mp-related__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.mp-related-card{
    overflow:hidden;
    border:1px solid var(--mp-border);
    border-radius:11px;
    background:#fff;
}

.mp-related-card__image{
    display:block;
    aspect-ratio:16 / 9;
    overflow:hidden;
}

.mp-related-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mp-related-card__body{
    padding:20px;
}

.mp-related-card h3{
    margin:0;
    font-size:16px;
    line-height:1.45;
}

.mp-related-card h3 a{
    color:var(--mp-navy);
    text-decoration:none;
}

.mp-related-card__link{
    display:inline-block;
    margin-top:14px;
    color:var(--mp-blue);
    font-size:10px;
    font-weight:750;
    text-decoration:none;
}


/* DARK MODE */

html.mpa-dark .mp-article{
    --mp-text:#dce6ee;
    --mp-muted:#aabac7;
    --mp-border:rgba(255,255,255,.11);
    --mp-soft:#142330;

    background:#101c28;
    color:#dce6ee;
}

html.mpa-dark .mp-article-header h1,
html.mpa-dark .mp-article-content h2,
html.mpa-dark .mp-article-content h3,
html.mpa-dark .mp-article-content strong,
html.mpa-dark .mp-toc__title,
html.mpa-dark .mp-price-snapshot__item strong,
html.mpa-dark .mp-lesson-length__card strong,
html.mpa-dark .mp-faq__item h3,
html.mpa-dark .mp-related__head h2,
html.mpa-dark .mp-related-card h3 a,
html.mpa-dark .mp-article-cta h2{
    color:#f1f6f9;
}

html.mpa-dark .mp-toc,
html.mpa-dark .mp-price-snapshot__item,
html.mpa-dark .mp-lesson-length__card,
html.mpa-dark .mp-related-card,
html.mpa-dark .mp-table-wrap{
    background:#142330;
    border-color:rgba(255,255,255,.1);
}

html.mpa-dark .mp-direct-answer{
    background:#142b3d;
    border-color:#315775;
    border-inline-start-color:#4d93cc;
}

html.mpa-dark .mp-direct-answer p{
    color:#d4e1ea;
}

html.mpa-dark .mp-parent-checklist{
    background:#152431;
    border-color:rgba(255,255,255,.1);
}

html.mpa-dark .mp-note{
    background:#152431;
    color:#b2c0ca;
}

html.mpa-dark .mp-table-wrap th{
    color:#e8f0f6;
    background:#1a3042;
}

html.mpa-dark .mp-table-wrap td{
    border-color:rgba(255,255,255,.09);
}

html.mpa-dark .mp-article-cta{
    background:#142b3d;
    border-color:#294a63;
}

/* TABLET */

@media(max-width:900px){

    .mp-article-split{
        grid-template-columns:1fr;
        gap:25px;
    }

    .mp-price-snapshot,
    .mp-lesson-length{
        grid-template-columns:1fr;
    }

    .mp-related__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* MOBILE */

@media(max-width:680px){

    .mp-article{
        padding-top:18px;
        padding-bottom:62px;
    }

    .mp-article-container{
        width:min(100% - 24px,1180px);
    }

.mp-article-header{
        margin-bottom:27px;
        text-align:left;
    }

    .mp-article-kicker{
        justify-content:flex-start;
        font-size:8.5px;
    }

    .mp-article-header h1{
        font-size:2.08rem;
        line-height:1.09;
        letter-spacing:-.035em;
    }

    .mp-article-dek{
        margin-top:17px;
        font-size:14px;
        line-height:1.75;
    }

    .mp-article-byline{
        justify-content:flex-start;
        margin-top:17px;
        font-size:9px;
    }

.mp-article-content p{
        margin-bottom:20px;
        font-size:16px;
        line-height:1.85;
    }

    .mp-article-content h2{
        margin-top:46px;
        font-size:1.65rem;
        line-height:1.2;
    }

    .mp-article-content h3{
        font-size:1.13rem;
    }

    .mp-article-content li{
        font-size:15px;
    }

    .mp-direct-answer{
        margin-top:28px;
        margin-bottom:35px;
        padding:22px 20px;
        border-radius:9px;
    }

    .mp-direct-answer p{
        font-size:15px;
        line-height:1.75;
    }

    .mp-toc{
        padding:20px;
    }

    .mp-article-media{
        margin-top:30px;
        margin-bottom:37px;
        border-radius:9px;
    }

    .mp-price-snapshot__item,
    .mp-lesson-length__card{
        padding:21px 19px;
    }

    .mp-parent-checklist{
        padding:23px 20px;
    }

    .mp-parent-checklist__grid{
        grid-template-columns:1fr;
    }

    .mp-article-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:27px 22px;
    }

    .mp-article-cta__button{
        width:100%;
    }

    .mp-related{
        margin-top:55px;
    }

    .mp-related__grid{
        grid-template-columns:1fr;
    }

}