/* ==========================================
Article Page
========================================== */

/* ==========================================
Article Page
========================================== */

.mns-article-page{

    padding:40px 0 60px;
	width:100%;

}

/* ==========================================
Hero
========================================== */

.mns-article-hero{

    position:relative;
  
  	z-index:1;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f9ff 100%
    );

    padding:72px 0;

    margin-bottom:60px;

    overflow:hidden;

}

.mns-article-hero::before{

    content:"";

    position:absolute;
  
  	pointer-events:none;

    width:260px;

    height:260px;

    left:-120px;

    top:-100px;

    border-radius:50%;

    background:rgba(16,185,129,.06);

}

.mns-article-hero::after{

    content:"";

    position:absolute;
  
  	pointer-events:none;

    width:220px;

    height:220px;

    right:-130px;

    bottom:-90px;

    border-radius:50%;

    background:rgba(59,130,246,.05);

}

.mns-article-hero-inner{
  
  	position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:190px;

}

.mns-article-hero-content{

    max-width:720px;

    text-align:center;

}

@media (min-width:992px){

    .mns-article-hero{
        padding:100px 0;
    }

    .mns-article-hero-content{
        max-width:760px;
        margin:0 auto;
        text-align:center;
    }

}

.mns-article-title{

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

}

.mns-article-subtitle{

    max-width:620px;

    margin:0 auto;

    color:var(--mns-text-light);

    font-size:17px;

    line-height:1.8;

}

.mns-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:#e8f5ee;

    color:var(--mns-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================
   Browse Category
========================================== */

.mns-article-category{

    position:relative;

    margin:60px 0;

}

.mns-article-category-header{

    text-align:center;

    margin-bottom:32px;

}

/* Shared Section */

.mns-section-title{

    font-size:34px;

    font-weight:700;

    margin-bottom:0;

}

.mns-section-description{

    max-width:560px;

    margin:12px auto 0;

    color:var(--mns-text-light);

    font-size:16px;

    line-height:1.7;

}

.mns-article-category-grid{

    display:grid;

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

    gap:16px;

}

.mns-article-category-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding:28px 18px;

    border:1px solid #ececec;

    border-radius:18px;

    background:#fff;

    text-decoration:none;

    color:inherit;

    transition:.25s;

    min-height:200px;

}

.mns-article-category-card:hover{

    transform:translateY(-4px);

    border-color:var(--mns-primary);

    box-shadow:0 16px 36px rgba(16,185,129,.12);
  
  	background:#fcfffd;

}

.mns-category-icon{

    font-size:42px;

    line-height:1;

    margin-bottom:8px;
  
  	transition:.25s;

}

.mns-article-category-card:hover .mns-category-icon{

    transform:scale(1.12);

}

.mns-category-title{

    font-size:17px;

    font-weight:600;

}

.mns-category-description{

    margin:14px 0 18px;

    color:#666;

    font-size:15px;

    line-height:1.6;

    text-align:center;

    flex:1;

}

.mns-category-link{

    margin-top:auto;

    padding-top:12px;

    font-size:14px;

    font-weight:600;

    color:var(--mns-primary);

    transition:.25s;

}

.mns-article-category-card:hover .mns-category-link{

    letter-spacing:.04em;

}



/* ==========================================
Latest Articles Header
========================================== */

.mns-latest-articles{

    margin-top:56px;

}

.mns-latest-header{

    margin-bottom:28px;

}

.mns-latest-header > div{
    max-width:700px;
}

.mns-latest-header .mns-section-description{
    margin:12px 0 0;
}

.mns-section-badge{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    background:#e8f5ee;

    color:var(--mns-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:14px;

}

/* ==========================================
Category Empty
========================================== */

.mns-article-empty{
    padding:80px 0;
}

.mns-article-empty-box{
    max-width:520px;
    margin:0 auto;
    padding:48px 32px;

    border:1px solid #edf0f4;
    border-radius:20px;

    background:#fff;

    text-align:center;
}

.mns-article-empty-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:88px;
    height:88px;

    margin:0 auto 24px;

    border-radius:50%;

    background:#eef8f3;

    color:var(--mns-primary);

    font-size:40px;
}

.mns-article-empty-title{
    margin:0;

    font-size:30px;

    font-weight:700;
}

.mns-article-empty-description{
    margin:16px auto 0;

    max-width:360px;

    color:var(--mns-text-light);

    line-height:1.8;
}

/* ==========================================
Breadcrumb
========================================== */

.mns-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;

    margin:32px 0 0;

    font-size:14px;
}

.mns-breadcrumb a{
    color:var(--mns-text-light);
    text-decoration:none;
    transition:.25s;
}

.mns-breadcrumb a:hover{
    color:var(--mns-primary);
}

.mns-breadcrumb-separator{
    color:#c5c5c5;
    font-size:11px;
}

.mns-breadcrumb .current{
    color:var(--mns-text);
    font-weight:600;
}