/* ==========================================
   Single Article
========================================== */

.article-page{
    flex:1;
    display:block;
    padding:60px 20px;
}

.article-container{
    max-width:1250px;
    margin:0 auto;
    padding:45px 20px 80px;
}

.back-link{
    color:var(--muted);
    text-decoration:none;
    font-size:.95rem;
    transition:.3s;
}

.back-link:hover{
    color:var(--primary);
}

.article-header{
    padding:55px 0 45px;
    text-align:left;
}

.article-category{
    margin-bottom:15px;
    color:var(--primary);
    font-size:.8rem;
    font-weight:600;
    letter-spacing:2px;
}

.article-header h1{
    max-width:800px;
    margin-bottom:20px;
    font-size:3.4rem;
    line-height:1.15;
}

.article-excerpt{
    max-width:720px;
    margin-bottom:25px;
    color:var(--muted);
    font-size:1.2rem;
    line-height:1.8;
}

.article-meta{
    display:flex;
    gap:10px;
    color:var(--light);
    font-size:.9rem;
}

.article-hero span,
.article-image span{
    color:var(--light);
    font-size:.8rem;
    font-weight:600;
    letter-spacing:2px;
}

.article-content{
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.95;
}

.article-content p{
    margin-bottom:25px;
}

.article-content h2{
    margin:55px 0 20px;
    color:var(--text);
    font-size:1.9rem;
    line-height:1.3;
}

.article-content ul{
    margin:25px 0 30px 25px;
}

.article-content li{
    margin-bottom:10px;
    padding-left:5px;
}

.article-content blockquote{
    margin:45px 0;
    padding:25px 30px;
    border-left:3px solid var(--primary);
    background:var(--card);
    color:var(--text);
    font-size:1.3rem;
    font-style:italic;
    line-height:1.7;
}

.article-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:55px;
    padding-top:30px;
    border-top:1px solid var(--border);
}

.article-tags span{
    padding:7px 14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--light);
    font-size:.85rem;
}

.article-footer-nav{
    margin-top:45px;
}

.related-posts{
    width:100%;
    max-width:1100px;
    margin:0 auto 80px;
    padding:0 20px;
}

.related-posts > h2{
    margin-bottom:25px;
    text-align:center;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px;
}

.related-card{
    padding:30px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    text-decoration:none;
    transition:.3s;
}

.related-card:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
}

.related-card p{
    margin-bottom:10px;
    color:var(--primary);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:2px;
}

.related-card h3{
    margin-bottom:20px;
    color:var(--text);
    font-size:1.25rem;
}

.related-card span{
    color:var(--primary);
    font-weight:600;
}
/*Responsive*/

/*Article Images*/
.article-hero img,
.article-image img,
.article-content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}




@media (max-width:700px){

    .article-container{
        padding-top:30px;
    }

    .article-header{
        padding:40px 0 35px;
    }

    .article-header h1{
        font-size:2.4rem;
    }

    .article-excerpt{
        font-size:1.05rem;
    }

    .article-hero {
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin-bottom: 40px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .article-content{
        font-size:1rem;
    }

    .article-content h2{
        font-size:1.6rem;
        margin-top:45px;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

}