/* Quran Garden Academy — editorial article system */

.qga-article-page,
.qga-archive-page{
    --qa-ink:#123f3e;
    --qa-teal:#0b7c79;
    --qa-deep:#073b3a;
    --qa-muted:#647a77;
    --qa-line:#dbe8e6;
    --qa-soft:#f6faf9;
    --qa-yellow:#f2c94c;
    --qa-white:#ffffff;

    background:var(--qa-white);
    color:var(--qa-ink);
}

.qga-article-wrap{
    width:min(1160px,calc(100% - 36px));
    margin-inline:auto;
}

.qga-article-hero{
    padding:76px 0 58px;
    background:var(--qa-soft);
    border-bottom:1px solid var(--qa-line);
}

.qga-article-hero__inner{
    max-width:900px;
    margin-inline:auto;
    text-align:center;
}

.qga-article-kicker{
    display:inline-block;
    margin-bottom:16px;
    color:var(--qa-teal);
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.qga-article-page[dir="rtl"] .qga-article-kicker{
    letter-spacing:0;
    text-transform:none;
}

.qga-article-hero h1{
    margin:0;
    color:var(--qa-deep);
    font-size:clamp(40px,5.8vw,68px);
    line-height:1.02;
    letter-spacing:-.045em;
    text-wrap:balance;
}

.qga-article-page[dir="rtl"] .qga-article-hero h1{
    letter-spacing:0;
}

.qga-article-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:22px;
    color:var(--qa-muted);
    font-size:13px;
}

.qga-article-body{
    padding:62px 0 76px;
}

.qga-article-layout{
    width:min(820px,100%);
    margin-inline:auto;
}

.qga-article-content{
    font-size:17px;
    line-height:1.84;
    color:#344f4d;
}

.qga-article-content > *:first-child{
    margin-top:0;
}

.qga-article-content p{
    margin:0 0 1.45em;
}

.qga-article-content h2{
    margin:2.15em 0 .7em;
    color:var(--qa-deep);
    font-size:clamp(28px,3.6vw,38px);
    line-height:1.15;
    letter-spacing:-.025em;
}

.qga-article-content h3{
    margin:1.8em 0 .65em;
    color:var(--qa-deep);
    font-size:23px;
    line-height:1.25;
}

.qga-article-page[dir="rtl"] .qga-article-content h2,
.qga-article-page[dir="rtl"] .qga-article-content h3{
    letter-spacing:0;
}

.qga-article-content ul,
.qga-article-content ol{
    margin:0 0 1.6em;
    padding-inline-start:1.4em;
}

.qga-article-content li{
    margin:.48em 0;
}

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

.qga-article-content a:hover{
    color:var(--qa-deep);
}

.qga-article-content blockquote{
    margin:2em 0;
    padding:18px 22px;
    border-inline-start:4px solid var(--qa-yellow);
    background:#fffaf0;
    color:#425b59;
}

.qga-article-content table{
    width:100%;
    margin:2em 0;
    border-collapse:collapse;
    font-size:15px;
}

.qga-article-content th,
.qga-article-content td{
    padding:13px 14px;
    border:1px solid var(--qa-line);
    text-align:start;
    vertical-align:top;
}

.qga-article-content th{
    background:var(--qa-soft);
    color:var(--qa-deep);
}

.qga-article-content img{
    display:block;
    width:100%;
    height:auto;
    margin:30px auto;
    border-radius:14px;
}

.qga-article-footer{
    margin-top:52px;
    padding-top:26px;
    border-top:1px solid var(--qa-line);
}

.qga-article-tax{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.qga-article-tax a{
    display:inline-flex;
    padding:7px 11px;
    border:1px solid var(--qa-line);
    border-radius:999px;
    color:var(--qa-muted);
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.qga-article-tax a:hover{
    color:var(--qa-teal);
    border-color:#9fc8c3;
}

.qga-article-back{
    padding:46px 0;
    background:var(--qa-soft);
    border-top:1px solid var(--qa-line);
    text-align:center;
}

.qga-article-back a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border-radius:8px;
    background:var(--qa-teal);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
}

/* Archive */

.qga-archive-hero{
    padding:72px 0 54px;
    background:var(--qa-soft);
    border-bottom:1px solid var(--qa-line);
    text-align:center;
}

.qga-archive-hero h1{
    max-width:850px;
    margin:0 auto;
    color:var(--qa-deep);
    font-size:clamp(40px,5.4vw,64px);
    line-height:1.03;
    letter-spacing:-.04em;
}

.qga-archive-list{
    padding:58px 0 76px;
}

.qga-archive-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    border-top:1px solid var(--qa-line);
}

.qga-archive-card{
    padding:30px;
    border-bottom:1px solid var(--qa-line);
}

.qga-archive-card:nth-child(odd){
    border-inline-end:1px solid var(--qa-line);
}

.qga-archive-card__meta{
    margin-bottom:10px;
    color:var(--qa-teal);
    font-size:12px;
    font-weight:800;
}

.qga-archive-card h2{
    margin:0;
    color:var(--qa-deep);
    font-size:26px;
    line-height:1.2;
}

.qga-archive-card h2 a{
    color:inherit;
    text-decoration:none;
}

.qga-archive-card h2 a:hover{
    color:var(--qa-teal);
}

.qga-archive-card p{
    margin:13px 0 0;
    color:var(--qa-muted);
    line-height:1.7;
}

.qga-archive-pagination{
    margin-top:40px;
    text-align:center;
}

.qga-archive-pagination .page-numbers{
    display:inline-flex;
    margin:3px;
    padding:8px 12px;
    border:1px solid var(--qa-line);
    color:var(--qa-deep);
    text-decoration:none;
}

.qga-archive-pagination .current{
    background:var(--qa-teal);
    border-color:var(--qa-teal);
    color:#fff;
}

@media(max-width:760px){
    .qga-article-wrap{
        width:calc(100% - 28px);
    }

    .qga-article-hero{
        padding:56px 0 44px;
    }

    .qga-article-hero h1{
        font-size:40px;
    }

    .qga-article-body{
        padding:46px 0 60px;
    }

    .qga-article-content{
        font-size:16px;
        line-height:1.78;
    }

    .qga-archive-grid{
        grid-template-columns:1fr;
    }

    .qga-archive-card,
    .qga-archive-card:nth-child(odd){
        border-inline-end:0;
    }
}

/* Dark mode */

html[data-theme="dark"] .qga-article-page,
html[data-theme="dark"] .qga-archive-page,
body.qga-dark .qga-article-page,
body.qga-dark .qga-archive-page{
    --qa-white:#1f1f1f;
    --qa-soft:#252a28;
    --qa-ink:#f2f4f3;
    --qa-deep:#f2f4f3;
    --qa-muted:#b9c5c2;
    --qa-line:#39413f;

    color:#f2f4f3;
}

html[data-theme="dark"] .qga-article-content,
body.qga-dark .qga-article-content{
    color:#d3ddda;
}

html[data-theme="dark"] .qga-article-content blockquote,
body.qga-dark .qga-article-content blockquote{
    background:#2b2a23;
    color:#d8dfdd;
}

/* QGA_ARTICLE_MEDIA_V2_START */

.qga-article-cover{
    padding:34px 0 0;
    background:#fff;
}

.qga-article-cover__figure{
    width:min(980px,100%);
    margin:0 auto;
}

.qga-article-cover__img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:18px;
}

.qga-article-inline-image{
    width:min(760px,100%);
    margin:42px auto;
}

.qga-article-inline-image__img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:15px;
}

.qga-article-inline-image figcaption{
    margin-top:9px;
    color:#657a78;
    font-size:13px;
    line-height:1.55;
    text-align:center;
}

@media(max-width:760px){

    .qga-article-cover{
        padding-top:22px;
    }

    .qga-article-cover__img{
        border-radius:12px;
    }

    .qga-article-inline-image{
        margin:30px auto;
    }

    .qga-article-inline-image__img{
        border-radius:11px;
    }
}

/* QGA_ARTICLE_MEDIA_V2_END */