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

.article-hero{
    background:var(--blue-100);
    padding:90px 0 70px;
}

.article-hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:60px;
    align-items:center;
    max-width:1100px;
}

.article-tags{
    display:flex;
    gap:10px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

.article-tags span{
    background:white;
    color:var(--blue-800);
    padding:8px 16px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:600;
}

.article-info h1{
    font-size:clamp(2.5rem,5vw,4.2rem);
    line-height:1.15;
    color:var(--blue-900);
    margin-bottom:40px;
    max-width:700px;
}

.article-meta{
    display:flex;
    align-items:center;
    gap:15px;
}

.author-image{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:var(--shadow);
}

.author-name{
    font-weight:700;
    color:var(--blue-900);
}

.article-details{
    color:var(--muted);
    font-size:.95rem;
}

.hero-featured-image img{
    width:100%;
    aspect-ratio:1.1;
    object-fit:cover;
    border-radius:30px;
    box-shadow:var(--shadow);
}

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

.article-body{
    padding:90px 0;
}

.article-body{

    padding:90px 0;

    margin-top:40px;

}

.article-body .container{

    width:min(92%,740);

    margin-left:20%;

    margin-right:auto;

}


.article-body p{

    max-width:85ch;

    font-size:1rem;

    line-height:1.9;

    letter-spacing:-0.015em;

    color:#445160;

    margin-bottom:1.8rem;
}

.article-body .container > p:first-of-type{
    font-size:1.3rem;
    color:#1f2937;
    line-height:1.9;
    margin-bottom:50px;
}

.article-body .container > p:first-of-type::first-letter{

    float:left;

    font-size:4rem;

    line-height:.85;

    font-weight:700;

    color:var(--blue-700);

    margin-right:8px;

    margin-top:-6px;

}


.article-body h2{

    color:var(--blue-900);

    font-size:1.75rem;

    line-height:1.25;

    margin-top:4.5rem;

    margin-bottom:1.3rem;

    letter-spacing:-0.03em;

}

.article-body ul{
    max-width:60ch;
    padding-left:25px;
    line-height:2;
    color:#3f4a59;
}

.article-body li{
    margin-bottom:12px;
}

blockquote{

    background:#fafcff;

    border-left:5px solid var(--blue-700);

    padding:35px;

    margin:60px 0;

    border-radius:20px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--blue-900);

    font-style:italic;
}

.article-body img{
    width:100%;
    border-radius:24px;
    margin:60px 0;
    box-shadow:var(--shadow);
}

hr{
    border:none;
    border-top:1px solid var(--line);
    margin:80px 0;
}

.article-note{
    background:var(--blue-100);
    padding:35px;
    border-radius:24px;
}

.article-note h3{
    color:var(--blue-900);
    margin-bottom:15px;
}

@media(max-width:900px){
    .article-hero-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-featured-image{
        order:-1;
    }

    .hero-featured-image img{
        aspect-ratio:1.8;
    }

    .article-info h1{
        font-size:2.3rem;
    }
}

@media(max-width:768px){

    .article-hero{
        padding:60px 0 40px;
    }

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

    .article-body h2{
        font-size:1.6rem;
    }

    blockquote{
        padding:28px;
        font-size:1.1rem;
    }
}

@media (max-width: 900px){

    .article-body .container{
        width:92%;
        margin-left:auto;
        margin-right:auto;
    }

}